/* -- BROWSER STYLE RESET -- */

/* Browser Style Reset - by  Creative Graphic Biz */
*,
*:before,
*:after {
position: static; vertical-align: bottom; overflow: hidden; 
box-sizing: border-box; margin: 0px; border: 0px solid black;
padding: 0px; background-clip: border-box;
}
html {
overflow-x: auto; /* Show a horizontal  browser scroll bar when needed. */
overflow-y: scroll; /* Always show a vertical browser scroll bar to prevent browser shifting on short pages. */
position: absolute; width: 100%; height: 100%;
}
body {
overflow: visible;
/* ...Necessary when placing content below the page if the page has a box shadow effect. Necessay if you have abosolutly positioned objects in general which are below static content, othewise they are clipped by the body. */
position: relative;
width: 975px; margin: 0px auto;  /* Set static page width and center horizontally. */
min-height: 100% ;  /* Allow for filling the screen vertically even if there is little  content. */
font-size: 18px; line-height: 1.15; font-family: Arial, Verdana, sans-serif; color: black; /* Set a default font style. */
max-height: 999999px;  /* Prevent font boosting on small screen devices. */
}
img { display: inline-block; vertical-align: baseline; }
p { margin-bottom: 1em; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; font-weight: bold; font-size: 1.15em;  }
ol,  ol   li  { overflow: visible; } /* Make sure the numbers  on ordered list items are visible .*/
table { table-layout: fixed; border-spacing: 0px; border-collapse: collapse; empty-cells: show; }
td { vertical-align: middle; text-align: center; }
a:link, a:focus, a:visited { color: inherit;  text-decoration: inherit; }
a:hover, a:active { color: inherit; text-decoration: underline; }




/* -- LOAD WEB FONTS --*/

@font-face {
font-family: 'Racing Sans One'; src: url('fonts/racingsansone-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal;
}




/* -- DOCUMENT SETTINGS -- */

body {
background: #404540;   /* Style browser background. */
font-size: 18px; line-height: 1.15; font-family: Arial, Verdana, sans-serif; color: #222; /* Set default font style for entire document; */
} 
#page {
position: relative; z-index: 0; /* Prepare stacking context for special selectors in price sheets. */
width: 100%;
min-height: calc( 100vh - 20px ); /* Make sure the page is never shorter than the browser window. Keep things looking prettty. */
margin-top: 10px;
border-radius: 24px;
box-shadow: 0px 0px 2px grey;
background: white url('images/cgsb-swoosh.jpg') no-repeat 310px 120px;
}




/* -- GENERAL SETTINGS --*/

/* Quick Settings*/
.set-nowrap { white-space: nowrap; }
.set-grid-flush-top { display: inline-block; vertical-align: top;}
.set-grid-flush-bot { display: inline-block; vertical-align: bottom;}

/* Normal Links */
a.normal { color: hsl(10, 72%, 38%); text-decoration: underline; }
a.normal:hover, a.normal:active { color: hsl(10, 72%, 48%);text-decoration: underline; }

/* Normal Unordered Lists */
ul.normal {
margin: 0px; padding: 0px;
}
ul.normal   li {
margin-left: 1.35em;  /* Set left-hand margin for lists and sublists. */
margin-bottom: 0.50em;  /*Set list item spacing. */
list-style-type: none; padding-left: 0px;  /* Remove browser style bullet points. */
text-indent: -1.15em; padding-left: 1.15em; /* Prepare for custom bullet points. */
}
ul.normal   li:before {
display: inline; content: "\25CF  \00A0"  /*  Apply custom bullet points (disc = \25CF    space = \00A0    bullet character = \2022). */
}
ul.normal   li:last-child {
margin-bottom: 0px;
}

/* Ordered Lists */
ol {
margin: 0px; padding: 0px;
}
ol   li {
margin-left: 2.35em;  /* Set left-hand margin for lists and sublists. */
margin-bottom: 1.00em;  /*Set list item spacing. */
}
ol   li:last-child {
margin-bottom: 0px;
}




/* -- RESPONSIVE LAYOUT -- */

@media (min-aspect-ratio: 100/170) {
}







/* -- SIDEBAR  -- */

/* Sidebar */
#sidebar, #sidebar:before {
 width: 225px;  /* Sidebar width. */
}
#sidebar {
display: inline-block; vertical-align: top;
position: static;  /* Position staticly  so the page (the parent container) will expand to fit. */
overflow: visible; /* Alow overflow so the  selector can look neat by  overhanging the menu */
}
#sidebar:before {
/* Sidebar skin...*/
content: "";
position: absolute; top: 0px; bottom : 0px;
background: hsl(0, 1%, 84%);
}

/* Sidebar Header */
#sidebar-header {
position: relative;
overflow: visible;
padding-top: 5px;
padding-bottom: 15px;
}
#sidebar-header:before {
/*Header skin...*/
content: "";
position: absolute;
border-radius: 50%/75px;
padding-bottom: 20px;
left: -50px; padding-left: 50px; width: calc( 100% + 40px );
top: -50px;  height: calc( 100% + 50px );
min-height: 145px;  /* Make sure the sidebar header never collapses so far as to lose its oval shape. */
background-image:
linear-gradient( 180deg,
hsl( 0, 58%, 37% ),
hsl( 6, 42%, 44% )
);
}




/* -- MENUS -- */

/* Selected menu items, (inherited)... */
#home-menu    li {
color: hsl(55, 81%, 51%);
position: relative;
}
#main-menu    li {
color: hsl(9, 70%, 35%);
position: relative;
}

/* Menu Items */
#home-menu,
#main-menu {
position: relative;
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
}
#home-menu    li,
#main-menu    li {
list-style-type: none; padding-left: 0px;   /* Remove browser style bullet points and list indentation. */
}
#home-menu    a,
#main-menu    a {
display: block;
padding: 2px 24px 2px 4px; /* Set menu item spacing. */
position: relative; z-index: 0; /* Prepare for selector bar. */
}
#home-menu    a:before,
#main-menu    a:before {
/* Selector bar... */
z-index: -1; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;
background-image: linear-gradient(90deg,hsla(1, 0%, 50%, 0.25),hsla(0, 0%, 60%, 0.80) 100%);
}
#home-menu {
margin-top: 2px;
font-size: 27px; font-weight: bold;
}
#home-menu   li > a  {
padding-left: 18px;
color: hsl(1, 0%, 98%); text-decoration: none;
}
#home-menu   .submenu   a  {
font-size: 65%; font-weight: normal;
padding-left: 28px;
}
#main-menu {
margin-top: 35px;
text-align: right;
font-size: 22px; font-weight: bold;
}
#main-menu   li > a {
color: hsl(1, 0%, 20%); text-decoration: none;
}
/* Colors special links.... */

#main-menu   [href^="https://Behance.net"] { color: hsl(9, 70%, 35%); font-weight: bold; font-size: 110%; }
#main-menu   [href$="/print-center"] {color: hsl(49, 29%, 45%); font-weight: bold; font-size: 110%;}
#main-menu   [href$="/brand-apparel-catalog"] {color: hsl(86, 19%, 45%); font-weight: bold; font-size: 98%; }
#main-menu    .submenu    {
font-size: 16px; font-weight: normal; /* Make submenus smaller. */
}
ul#main-menu  >  li {
margin-bottom: 12px; /* Add some extra space after collapsed menus. */
}
#main-menu    .submenu    li:last-of-type {
margin-bottom: 15px; /* Add some extra space after open menus. */
}

/* Menu Selector */
#home-menu,
#main-menu {
left: 5px;  /* Set menu selector overhang  (by nudging entire menu). */
}
#home-menu  li > a:hover,
#main-menu  li > a:hover {
color: inherit;
text-decoration: none;
background-image: linear-gradient(
90deg,
hsla(1, 0%, 50%, 0.25),
hsla(0, 0%, 60%, 0.80) 100%
);
}

#home-menu:hover   a:before,
#main-menu:hover   a:before {
background-image: none;
/* ...Remove selector from selected item when hovering over different menu items. (Selected items are specified within each individual document.) NOTE: Could actually change the color of the link here too if desired , that way it doesn't always have to be the same color when it is selected. */
}


/* Menu Icons */
img[src^="images/menu-icon"] {
vertical-align: top; height: 22px; 
}
img[src=^"images/icon-download"] {
width: 14px; height: 16px; vertical-align: baseline;
}

#main-menu  >  .featured > a {
color: hsl(9, 70%, 35%);
}
#main-menu   .featured,
#main-menu   .featured   li {
font-size: 85%; font-style: italic;
text-align: left;  margin-left: 10px;  color: darkred; 
}



/* -- ARTICLE -- */

#article {
position: static; /* Position staticly  so the page (the parent container) will expand to fit. */
display: inline-block; vertical-align: top;
overflow: visible; /* Allow overflow for company logo and other occasional graphics. */
width: 690px; /* Set article width explicitly to prevent bumping to the next line due to long words or imroperly sized images. */
margin: 10px 0px 10px 35px;
}

div#logo {
position: relative; display: block;  z-index: 1;
width: 520px; /* Explicitly set width to avoid breaking "Ever Present Contact Icon" clickability.*/
margin-left: -20px;
}
div#logo   img  {
width: 520px; height: 114px;
margin-top: 8px;
}
div#logo.header   img  {
width: 520px; height: 98px;
display: block;  /* Header logo (to be used with header text) gets wrapped in an anchor tag, so do what you have to. */
}

h1 {
display: block;
margin-left: 200px; margin-top: -34px; /* Combine header with logo.  Using padding-left in indivudal documents to adjust for diffrent header lengths. */
font-family: "Racing Sans One", Verdana; font-weight: normal;
font-size: 28px;  /* Capital letters in header should be nearly the same height as lowecase letters in logo. */
color: hsl(1, 57%, 45%);
}


/* Introductary Paragraph */
.intro:first-letter {
font-size: 125%;
}
.intro:first-line {
font-size: 115%;
font-weight: bold;
color: #555;
}
.about {
font-size: 95%;
line-height: 125%;
}
.about   a {
text-decoration: underline;
}
h2, h3, h4, h5, h6 {
display: block;
margin-top: 2.25em; margin-bottom: 0px; padding-bottom: 0.7em;
font-family: "Trebuchet MS", Arial, Helvetica, Sans-Serif;
font-size: 135%;  word-spacing: 6px; letter-spacing: 3px; color: hsl(0, 0%, 45%);
}


/* See More Link */
img[src="images/link-see-more.png"] {
width: 200px;  height: 38px
}
a.see-more {
display: block;  width: 200px; margin: 0px auto;
transition: transform 0.5s;
}
a.see-more:hover {
transform: scale( 1.04, 1.04 );
opacity: 0.80;
}

/* Contact Info*/
#contact-info {
margin-top: 25px;
}
#contact-info > span.line1 { font-size: 140%; font-weight: bold; font-style: normal; }
#contact-info > span.line2 { font-size: 110%; font-weight: normal; font-style: normal; }
#contact-info > span.line3 { font-size: 88%; font-weight: bold;  font-style:italic; text-decoration: underline; color: hsl(10, 72%, 38%); }
#contact-info > span.line4 { font-size: 195%; font-weight: bold; font-style:italic; display: inline-block;  position: relative; top: -10px; }
#contact-info > span.line4   a:hover { text-decoration: none; } 
#contact-info   img {  width: 30px; height: 45px;  vertical-align: top; margin-top: 5px; } /* Nudge phone icon. */

/* Disclaimer */
#disclaimer {
font-size:95%;  margin-top: 50px;  color: grey;
}
#disclaimer:before {
content: "Prices listed online are not guaranteed to be current. ";
}


/* -- Standard Elements  -- */

/* Ever Present Contact Icon */
#contact-icon-ever-present {
position: absolute; top: 10px; right: 15px;
}
#contact-icon-ever-present     img  {
width: 165px;  height: 92px;
}
#contact-icon-ever-present {
transition: transform 0.5s;
}
#contact-icon-ever-present:hover  {
transform: scale( 1.10, 1.10 );
}




/* -- PRICE SHEET -- */

/* Price Sheet Container */
div.price-sheet   {
display: inline-block;  /* Size container horizontally based on content so the row selector will be the correct length. */
position: relative; 
margin: 0px;
}

/* Price Sheet  Layout */
div.price-sheet   ul {
list-style-type: none; padding-left: 0px;  /* Remove browser style bullet points. */
display: inline-block;
margin: 6px; 
}
div.price-sheet   li {
margin: 4px; border-radius: 12px; 
}
div.price-sheet   ul.qty {
width: auto;
text-align: right; 
}
div.price-sheet   ul.qty   li.header{
background: none;
border-bottom-color: hsla(0, 0%, 0%, 0.00); 
}
div.price-sheet   ul.item {
width: 100px;
text-align: center;
background: hsla(0, 0%, 80%, 0.85); /* Note: Can't use opacity effect without breaking in Firefox by messing up layers. Use alpha color instead. */
border-radius: 12px; 
}
div.price-sheet   li.header {
font-weight: bold;
}
div.price-sheet   ul   li.header {
background: #eeeeee;
margin: 0px; padding: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: 4px solid white; 
}

/* Price Sheet Column Selector */
div.price-sheet   ul:hover   li {
background: #eee; 
}

/* Price Sheet Item Selector */
div.price-sheet   ul   li:hover {
background: darkred; color: white;
}

/* Price Sheet Row  Selector */
div.price-sheet   ul   li:hover:before {
content: "-"; color: hsla(0, 0%, 0%, 0.00);  /* Insert a character here (and make it transparent) to make row selector height  match item height. */
position: absolute; right: 0px; left: 0px; z-index: -1;  /* Extend row selector across the price sheet, and set it a layer lower so it doesn't interfere with item selector.*/
background: #eee;
border-radius: 10px;
margin-top: -2px; padding: 2px; /* Pad row selector. */
}

/* Adjust selectors on header... */
div.price-sheet   ul   li.header:hover:before {
content: none; 
}
/* Adjust selectors on Qty column... */
div.price-sheet   ul.qty   li.header:hover {
color: black;
}
div.price-sheet   ul.qty:hover   li {
background: none;
}
div.price-sheet   ul.qty   li:hover:before {
background: darkred;
}




/* END STYLE SHEET */