/* 

Stylesheet for stockbridgefineartprint.com
© Jeffrey Stockbridge 2014

Written by Ryan Hinkel
Edited by Jeffrey Stockbridge

*/

/* Colors */

body {background-color:#fff;color: #777;}
h1, h1 a, h2{color: #777}
h1 a:hover {color: #666}

h1#page_title {display:inline;}
h1#page_title a {display:inline; float:left;}

div#headerlogo {width:703px;}
img#logo {display:inline-block; float:right; height:45px; position: fixed; top: 40px; left: 610px; }

p {color: #919191;}
a {color: #777;}
dl {color: #919191;}
ul {color: #777;}

#recentwork_gallery div#info a.disable {color: #ccc;}

#printing div.pricelist_box {background-color:#f7f7f7;}
#printing h2, #pricesheet p, #pricesheet table {color:#777;}
#printing tr:hover {background-color: #fff;}

#mounting div.mounting_box {background-color:#f7f7f7;}
#mounting div.mounting_box h2 {color:#777;}
#mounting tr:hover {background-color: #fff;}

#studio div.studio_box {background-color:#f7f7f7;}



/* Menu */

ul#nav {}
ul#nav li {}
ul#nav a {background-color: #f0f0f0;color: #444;outline:none;}


body#printing li#menu_printing a {background-color:#ddd;color:#444;}
body#mounting li#menu_mounting a {background-color: #ddd;color: #444;}
body#scanning li#menu_scanning a {background-color: #ddd;color: #444;}
body#recentwork li#menu_recentwork a {background-color: #ddd;color: #444;}
body#studio li#menu_studio a {background-color:#ddd;color:#444;}
body#contact li#menu_contact a {background-color: #ddd;color: #444;}
body#web_order li#menu_weborder a {background-color: #ddd;color: #444;}


body#internships li#menu_internships a {background-color: #ddd;color: #444;}
body#aiaboards li#menu_aiaboards a {background-color: #ddd;color: #444;}
body#media li#menu_media a {background-color: #ddd;color: #444;}
body#equipment li#menu_equipment a {background-color: #ddd;color: #444;}
body#pricesheet li#menu_pricesheet a {background-color: #ddd !important;color: #444;}
body#studio {margin: 0 0 0 30px;}

ul#nav a:hover {background-color: #777;color: #fff;}

div#entireheader {height: 176px; position: fixed; top:0; left:0; background-color:white; z-index:1}
div#entireheader ul {position: relative;}
div#entireheader ul li a {padding:.5em 1.25em .5em 1.25em;}
#studio div#left_column {z-index:0;}

div#entireheader {height: 120px; width:100%; position: fixed; top:0; background-color:white; z-index:1}
div#entireheader ul {position: relative;}
div#form {z-index:0;}
div {left:0;}		

		
		
		
        
/* Typography */


body {text-align: left; font-family:Helvetica, Arial, san-serif;font-size:13px;line-height: 20px;}
h1 {font-size:48px;font-weight:normal;}
h1 a {text-decoration:none; font-size:52px;}
h2 {font-size:1.17em;font-weight:normal;color:#777;}
h3 {font-weight:normal;}
p {font-size:17px;font-weight:normal;text-align:justify;}
a {text-decoration: none;}

#contact h3 {display:inline-block;}
body#contact {line-height:6px;}

#media dt {font-size:26px;line-height:26px; }
#media dd {font-size:14px;text-align:justify;line-height: 16px;}

#recentwork ul#clientlist {font-size:16px; line-height:22px;}
#recentwork ul#clientlist li {list-style:none;}

#printing h2 {font-size: 20px;}
#printing h3 {text-decoration:none;}
#printing p {font-size:14px; line-height: 16px;}
#printing table {line-height:13px;padding-top:10px;} 
#printing td {text-align:left;vertical-align:bottom;}
#printing td.media {font-size:16px; width:100px; white-space: nowrap;}
#printing td.sqft {font-size:15px; width:50px; white-space: nowrap; text-align:center;padding:0 .75em 0 .75em;}
#printing td.media_info {position:relative;}
#printing td.media_info p {width: 300px;}
#printing div#media_info_div {position: absolute; width:300px; padding-left:20px; }


#mounting h2 {font-size: 20px;}
#mounting h3 {text-decoration:none;}
#mounting p {font-size:14px; line-height: 16px;}
#mounting table {line-height:13px;padding-top:10px;} 
#mounting td {text-align:left;vertical-align:bottom;}
#mounting td.media {font-size:16px; width:100px; white-space: nowrap;}
#mounting td.sqft {font-size:15px; width:50px; white-space: nowrap; text-align:center;}
#mounting td.media_info {position:relative;}
#mounting td.media_info p {width: 300px;}
#mounting div#media_info_div {position: absolute; width:300px; padding-left:20px; }

#scanning h2 {font-size: 20px;}
#scanning p {font-size:12px; line-height: 16px;}
#scanning h2 {margin:48px 0 0px;}
#scanning h2.first {margin:0px 0 20px; ; white-space:nowrap;}
#scanning h3 {margin: 0; font-size:18px}
#scanning h4.scanner_type {padding-left:12px;}
#scanning p {margin: 12px 20px 15px 0px;width: 500px;font-size: 13px;line-height: 17px;}
#scanning ul#specs {list-style: none; padding: 22px 0 22px 0;}
#scanning ul#specs li {font-size: 15px; white-space:nowrap; padding-top:6px;}
#scanning img#imacon {padding: 12px 0 0 10px;}
#scanning img#epson {width: 292px; padding-top:144px;}
#scanning div#left_column {display:inline !important;  position:relative; width:320px; margin-top:1px; padding: 10px 12px 0px 10px; float:left; vertical-align: top;}
#scanning div#right_column {display:inline; position:relative; top:0px; width:320px; margin-top:1px; padding: 20px 12px 0px 10px; float:right; vertical-align: top;}
#scanning div#footer {float: clear; display:inline-block; padding-top: 20px;}
#scanning table {width: 400px; padding-bottom: 20px;}
#scanning td {font-size:12px; padding: 4px 0 2px 0;}
#scanning td#optical_res {width:100px;}
#scanning tr.table_header td {font-size: 14px; font-weight:bold; padding:22px 0 0px 0;}
#scanning p.basic_color {padding: 0px 0px 6px 0px; display:inline-block; width:300px;}

#ftp h2 {font-size: 20px;margin:20px 0;}
#ftp h3 {font-size: 18px;margin: 18px 0;}
#ftp p {font-size:14px; line-height: 16px; margin: 18px 0;}
#ftp td {text-align:left;vertical-align:bottom;}

		/* Menu */
		
		ul#nav {font-size:12px;font-weight:bold;letter-spacing:1px;line-height:12px;}
		ul#nav a {text-decoration: none;}
		


/* Recent Work 2 */

#scroller {position:relative;}
#scroller img {margin-right:10px;}

#recentwork #names {margin: 0;position:fixed;top:160px; left: 0px;padding-left:30px;background: url('../images/names_back.png') repeat-y; width:200px;height:400px;}
#recentwork #names ul{margin:0; padding: 0; list-style-type: none;width:200px;}
#recentwork #names a {margin:0; padding: 0;font-size:15px;width:200px;}
#recentwork #names .selected a{color:#333;}
#recentwork #names p.print_info {margin:0 0 8px; padding: 0;font-size:11px;line-height:16px;display:none;width:200px;height:50px;}
#recentwork #names p.print_info a {font-size:11px;color:#777;}
#recentwork #names .selected p.print_info {display:block;}
#recentwork h2 {}


#recentwork h1 a, #recentwork #nav{position:fixed;}

/* Structure */


/* Menu */

ul#nav {position: absolute; top: 105px; left: 30px;}

ul#nav {margin: 0 0 20px 0; padding: 0px;}
ul#nav li {list-style:none; display:inline; padding:0; margin:0;}
ul#nav li a {border-width: 0 1px 0 0; border-color: #ddd; border-style: solid; height: 20px;padding:5px 11px 4px; margin:0;}
ul#nav li.last a {border-right: none;}
ul#nav li.first a {border-left: none; padding-left: 10px;}



html {height: 100%;}
body {margin: 160px 0 0 30px; width: 700px;}
#studio body {margin:160px 0 0 30px;}
h1 a {position: absolute; top:0px; left:30px; outline: none;}
h1 a {display block; margin:44px 0; 7px; line-height:30px; width:560px;height:48px;text-indent:-9999px;background: url('../images/logo.gif') no-repeat;}
h2 {margin: 30px 0;}

p, dl {margin: 50px 0px;}
ul {margin: 0px; padding: 0px;}
img {border-style: none;}


#home h2 {margin-top:80px 0;margin-bottom:0px 0; padding-bottom:0px 0;}
#home p {margin-top:0px 0;margin-bottom:0;}

#contact dt {float:left;}
#contact dd {margin:0 0 30px 120px;padding-top:5px;display:block;}
#contact dd#address_info span {display:block;}



#media dt {float:left; height: 20px; margin: 0 10px 0 0; padding: 0;}
#media dd {margin:0 0 40px 0; padding:0 0 0 0;}

#recentwork ul#nav {margin: 0 0 60px 0;}
#recentwork ul#clientlist li {margin-bottom: 15px;}
#recentwork div {width:560px; margin: 30px 0;}
#recentwork #recentflash {float:right; display:block; width:281px; margin: 5px 0 0 10px;}

#recentwork_gallery ul#nav {margin: 0 0 60px 0;}
#recentwork_gallery div {width:560px; margin: 30px 0;}
#recentwork_gallery div.horizontal h2 {margin: 30px 0 10px;}
#recentwork_gallery div.horizontal div#info {margin: 10px 0 10px;}
#recentwork_gallery div.vertical img {float:right;display:block; margin: 5px 0 0 10px;}
#recentwork_gallery div#info a {text-decoration:none;padding: 3px 4px 2px 0px; margin: 0px 30px 0 0; }

#printing .pricelist_box {width:703px; padding:10px 10px 50px; margin: 60px 0 100px;}
#printing h2 {margin:48px 0 0px;}
#printing h2.first {margin:10px 0 20px;}
#printing p {margin: 12px 20px 15px 0px;width: 490px;font-size: 13px;line-height: 17px;}

#printing table {width:100%;}
#printing table, #pricesheet tr, #pricesheet td {margin:0;border-style:none;}
#printing th {padding: 18px 11px 5px 0;}
#printing td {padding: 5px 11px 5px 0px; font-size:13px;}
#printing td.media {padding-right: 30px;}
#printing td.media {font-family:Helvetica, Arial;}

#mounting .mounting_box {width:703px; padding:10px 10px 50px; margin: 60px 0 100px;}
#mounting h2 {margin:0px 0 0px;}
#mounting h2.first {margin:10px 0 20px;}
#printing p {margin: 12px 20px 15px 0px;width: 490px;font-size: 13px;line-height: 17px;}

#mounting table {width:100%;}
#mounting table, #pricesheet tr, #pricesheet td {margin:0;border-style:none;}
#mounting th {padding: 18px 11px 5px 0;}
#mounting td {padding: 5px 11px 5px 0px;}
#mounting p {margin: 12px 20px 15px 0px;width: 490px;font-size: 13px;line-height: 17px;}

#exhibitions h2 {margin: 44px 0 7px;font-size: 18px;}
#exhibitions p {font-size: 12px;margin:0;line-height: 16px}

#internships h2 {margin:22px 0 14px;font-size: 22px;}
#internships p {font-size: 14px;margin:0;line-height: 16px}


#aiaboards h2 {margin: 44px 0 7px;}
#aiaboards p {font-size: 12px;margin:0}

#studio .studio_box {width:703px; height:auto; position:relative; padding:10px 10px 50px; margin: 60px 0 100px;}
#studio div#left_column {display:inline; position:relative; top:140px; width:320px; margin-top:1px; padding: 10px 12px 0px 10px; float:left; vertical-align: top;}
#studio div img.studio_image {width:634px; display:inline-block; padding: 0 0 40px 0px;}
#studio div img.studio_thumb {width: 64px; display:inline; padding: 10 10 10 18;}
#studio div#thumbs {padding-left:32px; width:634px;}



/* Image Fade */



#crossfade > img { 
    width: 635px;
    height: 438px;
    position: absolute;
    top: 225px;
    left: 30px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 16s linear infinite 0s;
    -moz-animation: imageAnimation 16s linear infinite 0s;
    -o-animation: imageAnimation 16s linear infinite 0s;
    -ms-animation: imageAnimation 16s linear infinite 0s;
    animation: imageAnimation 16s linear infinite 0s; 
}

#crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
    animation-delay: 2s; 
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s; 
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
}

#crossfade > img:nth-child(6) {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s; 
}

#crossfade > img:nth-child(7) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    3% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    25% { opacity: 1 }
    40% { opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(.1,1,.57,.92); }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    3% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    25% { opacity: 1 }
    40% { opacity: 0;
    -moz-animation-timing-function: cubic-bezier(.1,1,.57,.92); }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    3% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    25% { opacity: 1 }
    40% { opacity: 0;
    -o-animation-timing-function: cubic-bezier(.1,1,.57,.92); }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    3% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    25% { opacity: 1 }
       40% { opacity: 0;
    -ms-animation-timing-function: cubic-bezier(.1,1,.57,.92); }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    3% { opacity: 1;
         animation-timing-function: ease-out; }
    25% { opacity: 1 }
    40% { opacity: 0;
    animation-timing-function: cubic-bezier(.1,1,.57,.92); }
    100% { opacity: 0 }
}