/*
Theme Name: Justin
Theme URI: 
Description: A very minimal theme, widget-ready, gravatar-supporting, and standards-compliant.
Version: 1.0
Author: Justin Bright
Author URI: 
Tags: widgets, blue, white, right sidebar, fixed width, two columns, valid CSS, valid XHTML, widget ready, 2 column, 2 columns, clean, 
simple, free, Gravatar, light, minimal, minimalist, sidebar right, tags, Two Column, widgetized, widget
*/

/* whole page */

body {
	margin: 0em;
	padding: 0em;
	color: black;
	background: white;
	font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
	font-size: 0.75em;
	line-height: 1.5em;
}

HTML {overflow-y: scroll;}
.clear { clear: both; }
.clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; }


img.left { float: left; margin: 2px 20px 16px 0; }
img.right { float: right; margin: 2px 0 16px 20px; }
img.center { text-align:center; margin: 20px; }
img.across { margin: 2px 0 16px 0; }
img.flushleft { margin-left: -20px; }
img.flushright { margin-right: -20px; }

a img { color: #CC0000; border:0px; }
a:link, a:visited, a:active { color: #CC0000; text-decoration: none; border-bottom: 1px dotted #CC0000; }
a:hover { text-decoration: none; border:0px; color: #CC0000; }
a.more { white-space: nowrap; padding-right: 15px; background: url(/images/more.gif) no-repeat 100% 50%;}

.roundit { padding:20px; background-color:#ffffff; }
.roundit, .roundit .sb-inner { background-color:#ffffff; }

.roundblue {padding:10px; margin:5px; background-color:#cccccc;}
.roundblue, .roundblue .sb-inner { background-color:#cccccc; }

/* TYPE */
body { font: 14px/19px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Segoe UI", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; background-color:#6d7c98;  color:#333333; line-height:1.6em; 
background-image: 
url('/images/bg.gif');
background-repeat: repeat; }

strong, em, b, i {
    font-family: Arial, Helvetica, sans-serif;
	color:#222;
}
em {padding-right:1px;}

#page {
	margin: 8em auto;
	padding: 0em;
	width: 60em;
}


.alignleft {
	float: left;
}

.alignright {
	float: right;
}

blockquote {
	margin: 1em 2em 1em 1em;
	font-size: 0.9em;
}



/* end whole page */


/* header */

#header {
	margin: 0em;
	border: 0px solid gray;
	padding: 0em;
	height:340px;
}

#header h1 {
	margin: 0em;
	border: 0px solid gray;
	padding: 0em;
	font-size: 4em;
	line-height: 0.75em; /* weird IE7 bug fix */
	float: left;
}

#header #tagline {
	margin: 0.75em 0em 0em 2em; /* also part of the IE7 fix */
	border: 0px solid gray;
	border-left: 1px solid gray;
	padding: 0.5em 0em 0.5em 2em;
	color: gray;
	background: inherit;
	float: left;
}

/* end header */

/* content area */

#container { width: 980px;  margin: 0 auto; position: relative; padding:0px; padding-top:0px;}
#col1 {position:relative; width:550px; float:left;}
#col2 {position:relative; width:300px; float:right;}
#wrap1 { width: 980px; position:absolute; top:365px;  }
#wrap2 { width: 980px; position:absolute; top:20px;  }
#wrap3 { padding: 25px 50px; }

#logo {	border:0; position:relative; top:3px; left:10px; }
#logo a { border:0; }
#search { color:#666; font-weight:700; left:330px; position:relative; top:-55px; width:300px; }
#contact {color:#666; position:absolute; right:40px; top:14px; line-height:1.3em; }

#sidenav { left:58px; position:absolute; top:90px; }
#sidenav a {border:0px;}
#badge {padding-top:8px; padding-left:10px;}
#globalheader {	height:48px; position:absolute;	right:20px; top:66px; width:655px; z-index:50; }
#difference {
	background:url(/images/styrofoam-vs-polystyrene.gif) no-repeat;
	border:0;
	display:block;
	height:57px;
	outline:0;
	overflow:hidden;
	text-indent:-9999px;
	width:234px;
	position:absolute; top:100px; left:0px;
}
#masthead {z-index:0; }


#content {  color: #222; width:100%; }
#footer { font-size:11px; margin-top:5px; clear:both; z-index:50; color:#fff; padding:20px;}
#footer a {  font-size:12px; }
#footer a:link, #footer a:visited, #footer a:active {color:#fff; border-bottom:1px dotted #fff;}
#footer a:hover { text-decoration: none; border:0px; }

#content h2 {
	margin: 0em 0em 1em;
	padding: 0em;
	font-size: 1.5em;
}

#content .post {
	margin: 2em 0em 0em;
}

#content h3 {
	font-size: 1.25em;
}

#content .postmetadata {
	color: #777777;
	background: inherit;
	font-size: 0.9em;
}

#content .navigation {
	margin: 2em 0em 0em;
	padding: 0em;
	display: block;
}

#content .goback {
	margin: 0em 0.5em 0em 0em;
	padding: 0em;
	float: left;
	font-size: 1.25em;
}

#content .goforward {
	margin: 0em 0em 0em 0.5em;
	padding: 0em;
	float: right;
	font-size: 1.25em;
}

/*------------------------Comments section----------------------------*/
#post-comments {
	min-height: 180px;
	margin: 6px 0px 35px auto;
	padding-left: 120px;
	padding-right: 20px;
}

div.post-comments-title {
	text-align: left;
	margin-bottom: 20px;
}

.post-comment-body {
	padding-bottom: 20px;
	text-align: justify;
}

#post-comments p {
	color: #e4e4e4;
}

#post-comments a {
	color: #e4e4e4;
}

#post-comments a:hover {
	color: #575757;
}

/*.alt {
	margin: 0;
	padding: 10px;
	}*/

.commentlist {
	padding: 0;
	text-align: justify;
	}

.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;

	}
	
.commentlist li ul li { 
	margin-right: -5px;
	margin-left: 40px;
	border: 0px;
	background-color:#FFFFCC;
}

.commentlist p {
	margin: 10px 5px 10px 0;
}

.reply {font-size:.8em;}
.children { padding: 0;	background: url(/images/reply.gif) top left no-repeat;
 }

#commentform p {
	margin: 5px 0;
	}

.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
	}

.commentmetadata {
	margin: 0;
	display: block;
	font-size:.8em;
	}
.commentmetadata A {color:#333; border:0px;}

.commentlist li ul li {
	font-size: 1em;
}

.commentlist li {
	font-weight: bold;
	border-top:1px dashed #333;
	margin-top:5px;
	padding-top:10px;
}

.commentlist li .avatar { 
	float: left;
	border: 1px solid #eee;
	padding: 2px;
	margin: 0px 10px 10px 0px;
	background: #fff;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}

#commentform p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	}
/*---------------------- Comment form ---------------------*/


#comment-form p {
	margin-bottom: 5px;
}

#comment-form p input {
	color: #666666;
}

#comment-form p textarea {
	color: #666666;
}

#comment-form p #submit {
	color: #111111;
}

#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
	}

#commentform {
	margin: 5px 10px 0 0;
	}
#commentform textarea {
	width: 100%;
	padding: 2px;
	}
#respond:after {
		content: "."; 
	    display: block; 
	    height: 0; 
	    clear: both; 
	    visibility: hidden;
	}
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
	}
/* End Form Elements */
/*-------------------------------------------------------*/

/* end content area */

/* these rules are added for compatibility with WordPress Theme Directory */

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}

/* end Theme Directory compatibility */

/* sidebar */

#sidebar {
	padding: 0em;
	width: 170px;
	float: right;
	margin-left:30px;
}

#sidebar h2 {
	margin: 0em;
	padding: 0em;
	font-size: 1.0em;
	padding:5px;
	background-color:#eee;
}

#sidebar h2 a, #sidebar h2 a:visited {
	color: black;
	background: inherit;
}

#sidebar h2 a:hover {
	color: white;
	background: #1070c0;
}

#sidebar ul {
	margin: 0em;
	padding: 0em;
}

#sidebar ul li {
	margin: 0em 0em 1em;
	padding: 0em;
	list-style-type: none;
}

#sidebar ul li p, #sidebar ul li ul, #sidebar ul li ol, #sidebar ul li div {
	font-size: 0.8em;
	padding:5px;
	
}

#sidebar ul li ul li, #sidebar ul li ol li {
	margin: 0em;
	padding: 0em;
}

#sidebar .textwidget {
	font-size: 0.8em;
}

.widget {
border:1px solid #aaa; padding:10px;
}
/* end sidebar */


/* footer */

#footer {
	margin: 0em;
	padding: 0em;
	width: 60em;
	clear: both;
}

#footer p {
	margin: 0em;
	padding: 0em;
	font-size: 0.8em;
	text-align: center;
}

/* end footer */

H1 { color:#990000; padding:0px; margin:0px; }
H2 { color:#990000; padding:0px; margin:0px; }
H3 { color:#990000; padding:0px; margin:0px; }
H4 { color:#990000; padding:20px 20px 20px 0px; margin:0px; }
H5 { color:#990000; padding:0px; margin:0px; }


H3 {padding-top:20px;}
H4 {color:#333333; margin-bottom:-15px; padding-top:5px;}

.roundit { padding:20px; background-color:#ffffff; }
.roundit, .roundit .sb-inner { background-color:#ffffff; }

.roundblue {padding:20px; background-color:#cccccc;}
.roundblue, .roundblue .sb-inner { background-color:#cccccc; }

H2.press {color:black;}

#welcome {display: block; width: 245px; text-indent: -9999px; overflow: hidden; outline: 0; background: url(/images/universal-foam-products.gif) no-repeat; height: 45px;}
#yoursource {display:block; width: 429px; text-indent: -9999px; overflow: hidden; outline: 0; background: url(/images/styrofoam-products.gif) no-repeat; height: 27px;}
#callus{display: block; width: 245px; text-indent: -9999px; overflow: hidden; outline: 0; background: url(/images/call-us.gif) no-repeat; height: 45px;}
#foamapplication{display: block; width: 400px; text-indent: -9999px; overflow: hidden; outline: 0; background: url(/images/foam-applications.gif) no-repeat; height: 45px;}


#bottles .color {border-top:2px solid #990000;}
#bottles TD {text-align:center; background-color:#ddd; padding:0px; margin:0px;}
#bottles {border:2px solid #990000;}
#bottles .t {background-color:#fff;}
#bottles .t2 {background-color:#990000;}
#bottles .t2 STRONG {color:#fff;}


.grid2col .last,.grid2col .first {
	width:45%;
}

#homepage-title {
	background:url(/images/title-construction-foam.gif) no-repeat;
	border:0;
	display:block;
	height:20px;
	outline:0;
	overflow:hidden;
	text-indent:-9999px;
	width:563px;
}

#homepage-subtitle {
	background:url(/images/subtitle-construction-foam.gif) no-repeat;
	border:0;
	display:block;
	height:23px;
	outline:0;
	overflow:hidden;
	text-indent:-9999px;
	width:563px;
}



#nav-products {
	background-image:url(/images/navbg.png);
	background-position:0 0;
	background-repeat:no-repeat;
	border:0;
	float:left;
	height:0;
	overflow:hidden;
	padding-top:48px;
	text-decoration:none;
	width:195px;
}

#nav-tools {
	background-image:url(/images/navbg.png);
	background-position:-195px 0;
	background-repeat:no-repeat;
	border:0;
	float:left;
	height:0;
	overflow:hidden;
	padding-top:48px;
	text-decoration:none;
	width:124px;
}

#nav-orders {
	background-image:url(/images/navbg.png);
	background-position:-319px 0;
	background-repeat:no-repeat;
	border:0;
	float:left;
	height:0;
	overflow:hidden;
	padding-top:48px;
	text-decoration:none;
	width:90px;
}

#nav-support {
	background-image:url(/images/navbg.png);
	background-position:-409px 0;
	background-repeat:no-repeat;
	border:0;
	float:left;
	height:0;
	overflow:hidden;
	padding-top:48px;
	text-decoration:none;
	width:99px;
}

#nav-resources {
	background-image:url(/images/navbg.png);
	background-position:-508px 0;
	background-repeat:no-repeat;
	border:0;
	float:left;
	height:0;
	overflow:hidden;
	padding-top:48px;
	text-decoration:none;
	width:147px;
}



/* GRID */
.column { float: left; }
.grid2col, .grid2cola, .grid2colb, .grid2colc, .grid2cold, .grid2cole, .grid2colf, .grid3col, .grid3cola, .grid3colb, .grid4col, .grid5col, .grid6col { width: 100%; }

.grid2col .column { width: 49%; }
.grid2col .grid2col .column { width: 47.8%; }
.grid3col .grid2col .column { width: 46%; }
.grid4col .grid2col .column { width: 45%; }

.grid2cola .column.first { width: 66%; }
.grid2cola .column.last { width: 32%; }

.grid2colb .column.first { width: 74.9%; }
.grid2colb .column.last { width: 23%; }

.grid2colc .column.first { width: 32%; }
.grid2colc .column.last { width: 66%; }

.grid2cold .column.first { width: 23%; }
.grid2cold .column.last { width: 74.9%; }

.grid2cole .column.first { width: 79%; }
.grid2cole .column.last { width: 19%; }

.grid2colf .column.first { width: 19%; }
.grid2colf .column.last { width: 79%; }

.grid2colg .column.first { padding-left:60px; width: 50%; }
.grid2colg .column.last { width: 43%; }

.grid3col .column { width: 32%; margin-left: 2%; }
.grid2col .grid3col .column { width: 31%; }

.grid3cola .column { width: 28%; margin-left: 2%; }
.grid3cola .column.second { width: 23%; }
.grid3cola .column.last { width: 45%; }

.grid3colb .column { width: 160px; margin-left: 2%; border:0px solid red; }
.grid3colb .column.second { width:110px; }
.grid3colb .column.last { width:150px; }

.grid4col .column { width: 23%; margin-left: 3%; }

.grid5col .column { width: 18.4%; margin-left: 2%; }

.grid6col .column { width: 15%; margin-left: 2%; }

.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * { font-size: 12px; color: #fff; margin: 0; padding: 0; list-style: none; }
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	border:1px solid #a7a7a7;
	padding:10px;
	background-color: #666;
	position:		absolute;
	top:			-999em;
	width:			195px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	color: #fff;
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			48px; /* match top ul list item height */
	z-index:		50;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			230px; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			195px; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
}
.sf-menu li ul a {
	border:0;
	padding:5px 17px;
	text-decoration:none;
	margin-left:10px;
	background:	url('/images-foam/block.gif') no-repeat 0px 5px;
}
.sf-menu li ul a.bl {
	border:0;
	padding:5px 17px;
	text-decoration:none;
	margin-left:10px;
	background:	url('/images-foam/arrowright-white.gif') no-repeat 90% 5px;
}
.sf-menu li ul div {
	border:0px;
	padding:7px 10px;
	font-weight:bold;
	color:#fff;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
	border: 0;
}
.sf-menu li {
	background:		#666;
}
.sf-menu li li {
	background:		#666;
}
.sf-menu li li li {
	background:		#666;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#4f699a;
	outline:		0;
}

/*** arrows **/
.sf-menu a li ul a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:	url('/images-foam/arrowright-white.gif') no-repeat 0px 5px;
}


a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/

.sf-shadow ul.sf-shadow-off {
	background: transparent;
}


.galleria{list-style:none;width:200px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */

.imageRight {
	border: 1px solid #333333;
	padding: 4px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 10px;
	float: right;
	clear: both;
}

.imageLeft {
	float: left;
	border: 1px solid #000000;
	padding: 4px;
	margin: 5px 10px 5px 0px;
}

.photos {
	margin: 15px 0px 15px 0px;
	text-align: center;
}

.photos img {
	margin: 0px 5px 0px 5px;
	border: 1px solid #333333;
	padding: 4px;
}

#pricing .rightColumnBox {
	border: 1px solid #660033;
}

#pricing .rightColumnBox h1 {
	background-color: #660033;
	color: #FFFFFF;
	margin: 0px;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
}

/* [ Calculator Styles ] */

#calculator {
	border: 1px solid #333333;
	background: #EAEAEA;
}

#calculator td {
	font-size: 11px;
	font-weight: bold;
}

.errorText {
	font-weight: bold;
	color: #990000;
	text-align: center !important;
}

#calculator .leftCol {
	text-align: right !important;
}

#calculator .rightCol {
	text-align: left !important;
	padding: 2px 10px 2px 8px;
}

#calculator .resultsRow {
	background: #660033;
	color: #FFFFFF;
	padding: 4px 0px 4px 8px;
	font-size: 12px;
}

/* [ TOOL TIP - Carton Liners Calculator Help ] */

a.info {
    position:relative;
    z-index:24;
    color: #FFFF99;
    text-decoration:none;
	border-bottom: none;
}

a.info:hover {
	z-index:25;
	border-bottom: none;
    color: #FFFF99;
}

a.info span {
	display: none;
}

a.info:hover span {
	font-weight: normal;
    display:block;
    position:absolute;
    top: -150px;
	left: 20px;
	width:220px;
    border:1px dashed #660033;
    background-color: #FFFFFF;
	padding: 10px;
	color: #000000;
    text-align: left;
}

a.info:hover span ol {
	list-style: inside decimal;
}

/* Print */
@media print {
  #globalheader, #sidenav, #search, #subRightColumn, #footer {display:none; !important; }
  
  .iefixit {height:1%;}

  #content {position:absolute; top:60px; left:0px; }
  body,  #content, #container, .datasheet {
  background-image: none !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  }
  table { width:500px !important; }

  .sb, .sbi, .sb *, .sbi * { height:1% !important; margin-left:0 !important; padding-left:0 !important; }
  * html .sb, * html .sbi { height:50px; }
  .sbi { height:50px; }
  .sb-inner { height:50px; }
  .sb-shadow { height:50px; }
  .sb-border { height:50px; }
  #logo {display:block !important; }

}

/* iPhone */
@media screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }