/*-----------------------------------------------------------------------------------------------------------------------------------------------------------
CSS for All About Bricks - Main Stylesheet
Author:		Alison Lee (alisonlee@silktide.com) / Silktide Ltd
Created:	08/08/2007
Updated:	

History:

08/08/2007	Stylesheet created
	
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Global Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* commented backslash hack \*/ html, body { height: 100%; } /* end hack */

body					{ background: #fff url("templatefiles/body-bg.jpg") repeat-y top left; font: 75% "trebuchet ms", verdana, arial, helvetica, sans-serif; padding: 0; margin: 0;}

h1						{ font: bold 1.4em "trebuchet ms", arial, verdana, helvetica, sans-serif; color: #485283; margin: 15px 0 10px; }
h2						{ font: normal 1.3em "trebuchet ms", arial, verdana, helvetica, sans-serif; color: #485283; margin: 10px 0; }
h3						{ font: bold 1.2em "trebuchet ms", arial, verdana, helvetica, sans-serif; color: #485283; margin: 10px 0 5px; }
#home h3				{ font-weight: bold; font-size: 1.6em; }

p, li					{ font-size: 1.0em; line-height: 1.5em; margin: 10px 0; }
.smalltext				{ font-size: 0.8em; }
.altcolor				{ color: #485283; }

a,					
a:visited				{ text-decoration: none; color: #4f62be; }
a:hover,					
a:active				{ color: #000; }

hr						{ display: none; }
div.hr					{ height: 1px; background: transparent url("templatefiles/hr-bg.jpg") repeat-x 0 0; line-height: 0.1em; padding: 0; margin: 15px 0; }
img						{ border: 0; }
form, table				{ background: transparent; font-size: 1.0em;  }

.tablestyle				{ border-collapse: collapse; }
.tablestyle td, 
.tablestyle th			{ vertical-align: top; padding: 5px 5px 5px 0; }
.tableborder td, 
.tableborder th			{ vertical-align: top; padding: 5px; border: 1px solid #e8e8e8; }

.formstyle				{  }
.formstyle input		{ width: 120px; }
.formstyle .button		{ width: 60px; float: right; font-size: 0.9em; color: #485283; margin: 5px 2px; }
.formstyle p			{ font-size: 0.9em; color: #485283; }

.clear					{ height: 0; clear: both; font-size: 0.1em; line-height: 0.1em; padding: 0; margin: 0; }
.right					{ float: right; }
.left					{ float: left; }
.imgleft				{ float: left; margin: 0 10px 5px 0; }
.imgright				{ float: right; margin: 0 0 5px 10px; }
.imgleft img,
.imgright img			{ border: 1px solid #eeeced!important; }

.widthwrapper			{ width: 100%; }
.padding				{ padding: 0 20px; }

#accessibility			{ display: none; }


/* Layout Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#container 	  			{ min-width: 990px; width: 100%; min-height: 100%; height: auto; margin-bottom: -35px; } /* margin-bottom to match #clearfooter */
* html #container 		{ height: 100%; }

#header					{ height: 98px; position: relative; background: #031555 url("templatefiles/header-bg.jpg") repeat-x bottom left; }

#contentwrapper			{  }

#sidecol				{ width: 126px; float: left; padding: 10px 7px; }

#content				{ padding: 0 15px; margin-left: 140px; }

#clearfooter			{ clear: both; height: 35px;} /* height to match height + padding + margin etc in #footer */
#footer					{ width: 100%; height: 30px; clear: both; background: #fff url("templatefiles/footer-bg.jpg") repeat-x top left; font-size: 0.85em; line-height: 1.0em; color: #727071; margin-top: 5px; }


/* Header Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#header img						{ display: block; }
#header #logo					{ margin-left: 10px; }
#header #phone					{ position: absolute; top: 30px; right: 30px; }

/*#header ul.nav			{ position: absolute; top: 75px; left: 155px; padding: 0; margin: 0; }*/
#header ul.nav			{ position: absolute; top: 75px; right: 30px; padding: 0; margin: 0; }
#header ul.nav li				{ display: inline; list-style-type: none; font-size: 1.1em; color: #fff; }
#header ul.nav li span.separator	{ text-align: center; padding: 0 5px; }
#header ul.nav li a,
#header ul.nav li a:visited		{ color: #fff; }
#header ul.nav li a:hover,
#header ul.nav li a:active		{ color: #f49b3d; }


/* Sidecol Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#sidecol h2					{ margin-bottom: 0; }
#sidecol .hr				{ width: 125px; background: #cdd0d9 none; color: #cdd0d9; margin: 10px 0; }

#sidecol .sidebutton		{ margin: 0 0 2px; }

#sidecol .login				{ margin-top: 10px; }
#sidecol .login	label span	{ font-size: 0.9em; color: #485283; }
#sidecol #search			{ height: 40px; padding: 0; margin: 10px 0 20px 0;  }

.buttonstylesmall .button,
#sidecol .login .button,
#sidecol #search .button 	{ width: 90px!important; height: 18px!important; display: block; background: transparent url("templatefiles/button-bg-small.png") no-repeat center right; font-size: 0.9em; font-family: arial; color: #000; vertical-align: middle; text-align: center; line-height: 18px; padding: 0; border: 0; margin: 3px 1px 0 0; }


/* Content Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#content ul					{ padding: 0; margin: 10px 15px; }
#content ul li				{ background: transparent url("templatefiles/square-bullet.jpg") no-repeat 0 4px; list-style-type: none; padding-left: 15px; }
#content ul li ul 			{ margin: 0 10px 10px; }
#content ul li ul li		{ background: none; padding-left: 5px; margin: 0; }
#content ul li ul li a,
#content ul li ul li a:visited	{ color: #ed912e; }
#content ul li ul li a:hover,
#content ul li ul li a:active	{ color: #061558; }


#contacts td			{ padding: 5px; border-bottom: 1px solid #e8e8e8; }

/* Footer Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#footer p				{ float: left; margin: 10px 0 0 10px; }
#footer a,
#footer a:visited		{ color: #727071; }
#footer a:hover,
#footer a:active		{ color: #f49b3d; }

#footer ul.nav			{ float: right; padding: 0; margin: 10px 10px 0 0; }
#footer ul.nav li		{ display: inline; list-style-type: none;  }


/* Brick Details Styles
-------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.brickposition				{ /*width: 410px;*/ float: left;  position: relative; margin-right: 120px; }
#home .brickposition		{ float: left; }
.brickposition .largeimg	{ margin: 5px 40px 15px 0; }
/*.brickposition .brickimg	{ position: absolute; bottom: 35px; right: -90px; border: 2px solid #fff; }*/
.brickposition .brickimg	{ position: absolute; bottom: 35px; right: -90px;  }
.brickposition .brickimg img { border: 2px solid #fff; }
/*
.brickposition .largeimg .magnify	{ position: absolute; top: 5px; right: 45px; }
.brickposition .brickimg .magnify	{ position: absolute; top: 5px; right: 5px; }
*/
.brickposition .largeimg .magnify	{ position: absolute; top: 5px; left: 5px; border: 0;}
.brickposition .brickimg .magnify	{ position: absolute; top: 5px; left: 5px; border: 0; }

#detailtitle				{ position: relative; }
#detailtitle h1				{ width: 200px; position: absolute; top: 20px; left: 410px; font-size: 1.8em; }
/*.bricktechnical				{ padding-top: 350px; }*/
.bricktechnical				{ padding-top: 10px; }
p.brickdetail				{ margin: 0; }

.selectionform				{ width: 160px; float: left; background-color: #ededed; padding: 10px; border: 2px solid #e8e8e8; }
.selectionform textarea		{ width: 98%!important; }	

.selectorbox .selectionform	{ width: 150px; padding: 10px 0; border: 0; }

.selectorbox				{ float: right; background-color: #eeeced; padding: 15px; border: 2px solid #e8e8e8; margin: 0 0 20px 10px; }
.selectorbox button			{ width: 150px; height: 30px; background-color: #fff; font: bold 1.0em "trebuchet ms", arial, verdana, helvetica, sans-serif; color: #485283; border: 1px solid #d2d2d2; margin: 5px 0; cursor: pointer; }
#content .selectorbox ul	{ margin: 5px 0; }

.buttonstyle .button,
.selectorbox .button, 
.quickselection .button,
.relatedbrick .button 		{ width: 155px!important; height: 24px; display: block; background: transparent url("templatefiles/button-bg.png") no-repeat center left; font-size: 0.9em; font-family: arial; color: #000; vertical-align: middle; text-align: center; line-height: 24px; padding: 0; border: 0; margin: 0 auto 2px; }
.buttonstyle .button		{ margin: 0; }

.relatedwrapper				{ width: 73%; min-height: 280px; display: block; }
	
div.relatedbrick			{ width: 168px; height: 260px; float: left; text-align: center; margin-right: 19px; margin-bottom: 20px; }
div.relatedbrick img		{ display: block; }

/* BRICK SELECTOR STYLES */

div.tabblock				{ height: 20px; padding: 0; margin: 0; }
div.tab						{ width: 102px; height: 18px; float: left; background: #ededeb url("templatefiles/tab-off.jpg") no-repeat top left; text-align: center; color: #061558; padding: 2px 0 0; margin: 0 10px 0 0; }
#tabon						{ background: #f6f6f6 url("templatefiles/tab-on.jpg") no-repeat top left; color: #ed912e; }

div.tab a					{ color: #061558; }
#tabon a					{ color: #ed912e; }
div.tab a:hover, 
div.tab a:active			{ color: #ed912e; }
#tabon a:hover, 
#tabon a:active				{ color: #061558; }


.selectorwrapper			{ background-color: #f6f6f6; color: #061558; padding: 10px 10px; margin-bottom: 20px; }
.selectorwrapper h2			{ font-weight: bold; font-size: 1.3em; margin: 10px 0 15px; }

#content .selectorwrapper ul li	{ background-position: 0 8px; font-size: 1.3em; }

table#selector th			{ color: #061558; padding: 5px;  }
table#selector td			{ vertical-align: top; line-height: 1.0em; padding: 4px 5px; }
table#selector td .checkbox input	{ vertical-align: middle; margin-right: 10px; }
table#selector td .checkbox	{ color: #000; padding: 1px 15px 1px 3px; border: 1px solid #f6f6f6; }
table#selector td .odd		{ background-color: #fff; border: 1px solid #e8e8e8; }
table#selector .button		{  }