/*   
socreative.tv
Author: socreative
Aug 2010
Version: 1.0
*/

@media screen {

/* RESET
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

/*
UTILITY
*/

.float-left { float:left; }
.float-right { float:right; }
.clear { clear:both; }

/*
STICKY FOOTER
*/


#footer {

	height: 30px;
	width:960px;
	margin:0 auto;} 




/* COLORS


2e95c5 - blue
31a2d7 - light blue
b1b50c - green
767a19 - dark green (hover links)
ecf171 - light green
727272 - body text grey

*/

/* TYPOGRAPHY */

body { color:#727272; font:11.33px/1.4 Arial, Helvetica, sans-serif; background:#ebebeb;}
h1, h2, h3 { color:#2e95c5; font:23px Georgia, "Times New Roman", Times, serif; letter-spacing:-1px; font-style:italic; margin: 0; text-shadow: #FFFFFF 1px 1px 1px;  }
h1 {  font-size:23px }
h2.pageheader { color:#b1b50c; padding-bottom:7px; }


h3 {  font-size:16px }

.onethird h2, #formdiv h2, #formdiv h1 { padding-bottom:15px }


p { margin: 0 0 10px 0; line-height:1.4em;}
p > a { color:#b1b50c; }
p > a:hover { color:#767a19; } 

blockquote { }
blockquote p { }

ul, ol { margin: 0 0 20px 0; }
li { }



a {  color:#2e95c5 }
a:hover {  color:#31a2d7 }



/* STYLE
*/

* { margin: 0; padding: 0; }
body { overflow-y:scroll;}

#sitecontent {  min-height: 100%; background:#ebebeb url(../images/bg_top.png) top center no-repeat; }
#wrapper {  width: 1020px; margin: 0 auto; }


/* 
HEADER
*/
#header { padding-top:60px; padding-left:30px; height:100px; }




#logo { float:left; width:150px; }
#logo a { display:block; text-indent:-9999px; width:143px; height:38px; background:url(../images/socreative-sprite.png) top left; }

#navigation { width:810px; margin-top:23px; float:left; background:url(../images/horiz-separ.gif) repeat-x top left; }
#tag { float:left; padding-top:5px; font-size:1px; line-height:1px;}
#tag p {  padding-top:5px; display:block; text-indent:-9999px; width:304px; height:19px; background:url(../images/socreative-sprite.png) -155px -8px; }

#menu { float:right; width:320px; }


#nav { padding-top:10px; float:right; }
#worknav { float:right; margin-top:20px; margin-bottom:5px; }
#nav li, #worknav li { display:inline-block; padding-left:10px; float:left; }
#nav a, #worknav a { display:block;text-indent:-9999px; }

#nav li a { }

/* ------------ MAIN NAV ------------- */
li.work a { width:38px; height:11px; background:url(../images/socreative-sprite.png) 0px -54px; }
li.work a:hover { background-position:0px -74px;}

li.services a { width:58px; height:11px; background:url(../images/socreative-sprite.png) -46px -54px; }
li.services a:hover { background-position:-46px -74px;}

li.blog a { width:33px; height:11px; background:url(../images/socreative-sprite.png) -114px -54px; }
li.blog a:hover { background-position:-114px -74px;}

li.contact a { width:57px; height:11px; background:url(../images/socreative-sprite.png) -156px -54px; }
li.contact a:hover { background-position:-156px -74px;}


/* ------------ SECONDARY (WORK) NAV ------------- */

li.web a { width:25px; height:11px; background:url(../images/socreative-sprite.png) -265px -158px; }
li.web a:hover, li.webcurrent a:hover, li.webcurrent a { width:25px; height:11px; background:url(../images/socreative-sprite.png); background-position:-265px -170px;}

li.flash a { width:35px; height:11px; background:url(../images/socreative-sprite.png) -296px -158px; }
li.flash a:hover, li.flashcurrent a:hover, li.flashcurrent a { width:35px; height:11px; background:url(../images/socreative-sprite.png); background-position:-296px -170px;}

li.print a { width:32px; height:11px; background:url(../images/socreative-sprite.png) -337px -158px; }
li.print a:hover, li.printcurrent a:hover, li.printcurrent a { width:32px; height:11px; background:url(../images/socreative-sprite.png); background-position:-337px -170px;}

li.motion a { width:41px; height:11px; background:url(../images/socreative-sprite.png) -374px -158px; }
li.motion a:hover, li.motioncurrent a:hover, li.motioncurrent a { width:41px; height:11px; background:url(../images/socreative-sprite.png); background-position:-374px -170px;}

/* --------- MAIN ----------------- */

#main { padding:0 30px 15px 30px; background:#fff; }
#content { width:690px; float:left; border-right:1px solid #e5e5e5; }

.separatortop { font-size:1px; line-height:1px;width:960px; height:7px; background:url(../images/bg-separator.gif) repeat-x 0px -1px; } 

ul.bluebullet li { background:url(../images/socreative-sprite.png) no-repeat -465px -20px; }

#mission h1, #mission p { padding:12px 0; }  
#mission h1 { font-size:23px; padding-bottom:0; }


/* ----------- SLIDER -------------- */

.panel p { width:400px; }
.panel h2 { font:20px Georgia, "Times New Roman", Times, serif; font-style:italic; color:#2e95c5 }
#panel1 { background:url(../images/slide1-bg.jpg) no-repeat top left; }
#panel2 { background:url(../images/slide2-bg.jpg) no-repeat top left; }
#panel3 { background:url(../images/slide3-bg.jpg) no-repeat top left; }
#panel4 { background:url(../images/slide4-bg.jpg) no-repeat top left; }

.panel-wrapper { }
.panel-wrapper li { background:url(../images/bullet.gif) no-repeat 5px 8px; line-height:1em; padding:5px 5px 5px 25px; }


/* ---- get a quote bar ---- */

#buttonbar { width:960px; height:40px; padding-top:10px;}
#buttonbar-top { width:960px; height: 8px; background:url(../images/bg-separator.gif) repeat-x top left; font-size:1px; line-height:1px; }
#buttonbar-bottom { width:960px; height: 8px; background:url(../images/bg-separator.gif) repeat-x 0px -1px; font-size:1px; line-height:1px; }
.buttonbar-middle { width:960px; height: 9px; background:url(../images/bg-separator.gif) repeat-x 0 0; font-size:1px; line-height:1px; }

.slogan h2 { padding-left:10px; font:26px Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:normal }
.quotebutton a { text-indent:-9999px; display:block; width:134px; height:29px; background:url(../images/socreative-sprite.png) no-repeat -10px -159px; }
.quotebutton a:hover { background-position:-10px -199px; }

.getintouchbtn a { text-indent:-9999px; display:block; width:134px; height:29px; background:url(../images/socreative-sprite.png) no-repeat -10px -239px; }
.getintouchbtn a:hover { background-position:-10px -279px; }


/* --- small onethird columns --- */
.first, .last { width:310px; }
.middle { width:300px; }
.onethird {  float:left; padding-top:20px; margin-right:20px;}
.last { margin:0; }

.rightborder { background:url(../images/vert-separ.gif) repeat-y right top; }

.onethird h3 { margin-bottom:20px }
.onethird div { padding-right:10px; padding-bottom:20px; }


.onethird img { border:1px #eee solid; padding:2px; margin-right:20px; float:left}
.onethird img:hover { border:1px #BEC242 solid }

.onethird ul { margin-left:0px }
.onethird li { margin-right:20px; }
.onethird li p { font-size:10px; color:#aaa; padding:0; margin:0; }
.onethird li:hover { background-color:#f6fa9d; }


/* ---------- work ------------------- */

#workcontent { padding-top:20px; }
#slider1, #slider2, #slider3, #slider4, #slider5, #slider6, #slider7, .workimage { width:560px; height:420px; float:left; position:relative;}


#slider1 img, #slider2 img, #slider3 img, #slider4 img, #slider5 img, #slider6 img, #slider7 img { position:absolute; top:0px; left:0px; display:none; }


.project { padding-bottom:90px; }


.imageholder { float:left; margin-right:37px; background:#ecf171; padding:5px; }



.prjinfo { width:340px; float:left; font-size:12px;color:#939393; }
.prjinfo h2 { font-size:20px; color:#2e95c5; padding-bottom:10px;  }
.prjinfo h3 { font:18px Georgia, "Times New Roman", Times, serif; font-style:italic;}
.prjinfo p {   line-height:1.4em}
.prjinfo li { margin-left:10px; color:#bbb; background:url(../images/bullet.gif) no-repeat 5px 5px;  padding:0px 5px 0px 25px}

.onethird li {  background:url(../images/bullet.gif) no-repeat 5px 12px; line-height:1.5em; padding:5px 5px 5px 25px }


.prjinfo h2:hover { color:#2e95c5;  }





/* ---------- new work ---------------------- */

#workcontent h2 { font:15px Arial, Helvetica, sans-serif; font-weight:bold; padding-bottom:10px;}
#workcontent h3 { font:14px Arial, Helvetica, sans-serif; font-weight:bold; color:#fff; text-shadow:none; padding:3px 0 0 5px;}
#workcontent p { margin:0; padding:0; padding-left:5px; }

#workcontent .rightpadding { margin-right:34px; }
#workcontent .bottompadding { margin-bottom:30px; }





.boxgrid{ 
				width: 290px; 
				height: 170px;
				float:left; 
				overflow: hidden; 
				position: relative;
				border:3px solid #ddd; 
				margin-bottom:30px;
			}
			
			.boxgrid:hover { border:3px solid #ecf171;  }
				
				
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0;
				}
				
				.boxgrid img:hover { 
					opacity:0.92;
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000; 
				height: 80px; 
				width: 100%; 
				opacity: .8; 
				
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 200px;
 					left: 0;
 				}


/* ------------ services --------------- */

.twothirds { width: 650px; float:left; padding-top:15px;}
.twothirds h2.tagline, .twothirds h1.tagline {  font-size:26px; padding-bottom:10px;}
.design-chemistry { height:330px; background:url(../images/design-chemistry.png) no-repeat 450px bottom; }

.design-chemistry p { padding-right:200px; }
.design-chemistry li { padding-left:10px; line-height:1.4em; }


	
.servicesbox { float:left;padding-top:20px; }
.servicesbox div { width:144px; }
.servicesbox ul li {  background:url(../images/bullet.gif) no-repeat 5px 9px; line-height:1.5em; padding:2px 5px 2px 25px } 
.servicesbox ul { margin:0; padding-bottom:20px; }


h2.web { text-indent:-9999px; display:block; width:103px; height:33px; background:url(../images/socreative-sprite.png) no-repeat -157px -158px }
h2.flash { text-indent:-9999px; display:block; width:103px; height:33px; background:url(../images/socreative-sprite.png) no-repeat -157px -198px }
h2.print { text-indent:-9999px; display:block; width:103px; height:33px; background:url(../images/socreative-sprite.png) no-repeat -157px -238px }
h2.motion { text-indent:-9999px; display:block; width:103px; height:33px; background:url(../images/socreative-sprite.png) no-repeat -157px -278px }

h3.title-featured { text-indent:-9999px; display:block; width:81px; height:18px; background:url(../images/socreative-sprite.png) no-repeat 0px -96px;}
h3.title-featured:hover { background-position:0px -126px; }

h3.title-latestblog { text-indent:-9999px; display:block; width:160px; height:18px; background:url(../images/socreative-sprite.png) no-repeat -91px -96px;}
h3.title-latestblog:hover { background-position:-91px -126px; }

h3.title-latesttweets { text-indent:-9999px; display:block; width:64px; height:18px; background:url(../images/socreative-sprite.png) no-repeat -261px -96px;}
h3.title-latesttweets:hover { background-position:-261px -126px; }


/* ------------- contact form ---------- */


p.email-icon  { padding:0 0 3px 25px; background:url(../images/socreative-sprite.png) no-repeat -451px -216px; }
p.tel-icon  { padding:0 0 3px 25px; background:url(../images/socreative-sprite.png) no-repeat -451px -188px; }


.contactbox p { padding-top:4px; margin:0; }
.contactbox p span { padding-right:10px; }

#contactdetails { background:url(../images/contact-stationery.png) no-repeat bottom; }


#formdiv { width:600px; float:left; padding-top:20px;  }


#quoteform p.legend { color:#999; font-style:italic; padding:0 0 5px 0;  }
.briefform textarea { width:500px; }
#quoteform div { float:left;  padding-bottom:10px; }
#quoteform .briefform { float:none; }
#quoteform table { width:240px;  }
#quoteform label { padding:5px 50px 5px 0px; display:block; color:#767a19 }
#quoteform label span { padding-left:2px; color:#F26052; } 
#quoteform input.textbox { padding:3px; width:200px; display:inline; margin-right:30px; }
#quoteform input, #quoteform textarea  { font:12px Tahoma, Geneva, sans-serif; color:#777; border:1px #aaa dotted; }
#quoteform textarea { width:445px; display:inline; margin-bottom:20px }

#quoteform input:focus, #quoteform textarea:focus {border:1px #e0e55c solid;  }

#quoteform th { padding:5px 0; color:#767a19}
#quoteform td { padding-right:5px;}
#quoteform td label {  color:#727272; }


#quoteform input.submit { text-indent:-9999px; display:block; border:none; width:74px; height:29px; cursor:pointer; background:url(../images/socreative-sprite.png) no-repeat -10px -319px; margin-bottom:10px; }
#quoteform input.submit:hover { background-position:-10px -359px;}

#footer { width:1020px; background:#fff;   }
#foot-content {color:#939393; font-size:11px;  padding-top:8px; width:960px;  border-top:2px solid #e5e5e5; margin:0 auto;}
#foot-content div { float:right; }
#foot-content a { color:#939393; }
#foot-content a:hover { color:#2e95c5; }



#underthehood { z-index:1000; 
  display: none; /* hidden by default, will be shown by jQuery */
  width: 960px;
  margin: 0 auto;
  height: 80px;
  position: relative;
}
 #hoodlock { display:none; } 



/* ------ ketchup form -------- */

.ketchup-error-container ol, .ketchup-error-container li, .ketchup-error-container ul { 
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

.ketchup-error-container {
  display: none;
  position: absolute;
  width: 40px;
}

.ketchup-error-container ol {
  font-size: 10px;
  color: #fff;
  background: red;
  background: rgba(242, 96, 82, 1);
  padding: 3px;
  padding-left: 5px; 
  width:95px !important;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  list-style: none;
  line-height: 14px;
}

.ketchup-error-container span {
  display: block;
  width: 0; 
  height: 0; 
  border-left: 0 solid transparent; 
  border-right: 15px solid transparent;
  border-top: 10px solid red;
  border-top: 10px solid rgba(242, 96, 82, 1);
  border-bottom: 0;
  margin-left: 8px;
}


.ketchup-error-container-alt {
  margin: 10px;
  width: 510px;
  display: none;
}
.ketchup-error-container-alt li {
  background: #f04d5b;
  color: black;
  padding: 3px 10px 3px 10px;
  font-size: 11px;
  margin-bottom: 3px;
  boder-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}





} /* END screen media */


@media print {

.do-not-print { display: none; }
#comments { page-break-before: always; }

body { width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 1.4; word-spacing: 1.1pt; letter-spacing: 0.2pt; font-family: Garamond,"Times New Roman", serif; color: #000; background: none; font-size: 12pt; }
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 19pt; }
h2 { font-size:17pt; }
h3 { font-size:15pt; }
h4,h5,h6 { font-size:12pt; }
code { font: 10pt Courier, monospace; } 
blockquote { margin: 1.3em; padding: 1em; }
img { display: block; margin: 1em 0; }
a img { border: none; }
table { margin: 1px; text-align:left; }
th { border-bottom: 1px solid #333;  font-weight: bold; }
td { border-bottom: 1px solid #333; }
th, td { padding: 4px 10px 4px 0; }
caption { background: #fff; margin-bottom: 2em; text-align: left; }
thead { display: table-header-group; }
tr { page-break-inside: avoid; } 
a { text-decoration: none; color: black; }
	
} /* END print media */