/*
   main.css
   Spannex
   
   Created by Patrik Wilhelmsson on 2008-03-26.
   Copyright 2008 Media Tech Design. All rights reserved.
*/

html, body{
	background: #e3ebf4;
	height:100%
}
#outerwrapper{
	background: #e3ebf4 url("../images/bg.png") repeat-y;
	width: 1024px;
	margin: 0 auto;
	min-height:100%;
}
#wrapper{

	background: transparent url("../images/bg_wrapper.png") no-repeat;
	min-height: 613px;
}
#header{
	padding: 0pt 54px 0 52px;
	position: relative;
}
#logo{
	float:left;
	width: 160px;
}
#slogan{
	font-size: 1.4em;
	color: #FFF;
	font-style: italic;
	position: absolute;
	top: 10px;
	right: 58px;
	text-align: right;
}
#topnav{
	position: relative;
	top: 54px;
}
#topnav li{
	background: transparent url(../images/topnav_bg.png);
	display: block;
	float: right;
	width: 147px;
	text-align: center;
	padding: 5px;
	height: 23px;
	margin-left: 2px;
	line-height: 25px;
}
#topnav li.active{
	background: transparent url(../images/topnav_bg_active.png);
}
#topnav li a{
	font-size: 1em;
}

#toppic{
	padding: 0 52px;
	margin-top: 2px;

}
.frame{
	background: transparent url(../images/toppic_bg.png) no-repeat;
	padding: 11px;
}
#main{
	padding: 2px 56px;
}
#menu{
	float: left;
	width: 200px;
}
#menu ul{
	margin-top: 8px;
	background: transparent url(../images/menu_sep.png) no-repeat -4px 0;
}
#menu li{
	font-size: 0.9em;
	padding: 10px 0;
	background: transparent url(../images/menu_sep.png) no-repeat -4px bottom;
	font-weight: bold;
}
.col2, .col1, .col3{
	float: left;
	width: 346px;
	margin-left: 10px;

}
.col1{
	width: 702px;
}
.col3{
	width: 217px;
	margin-left: 0px;
	margin-right: 10px;
}
#product_form .col3{
	width: 300px;
}
.sidebar{
	width: 183px;
	margin-left: 10px;
	margin-top: 5px;
	float: left;
}
.sidebar .prodPic{
	border: 1px solid #004d97;
}
.productTxt{
	float: left;
	width: 489px;
}
.infobox{
	background: #00469e url('../images/infobox_bg.png') repeat-x;
	margin-top: 8px;
	padding: 17px 10px;
	color: #FFF;
	font-size: 0.9em;
}
.infobox div{
	margin-bottom: 4px;
}
.content, .cart{
	margin-top: 8px;
	padding: 17px 10px;
	background: transparent url(../images/col_bg.png) repeat-x top;
	color: #000;
}
.offer{
	color: #004d97;
}
#puffs{

}
.ad{
	border: 1px solid #d7d7d7;
	/* height: 125px; */
	width: 344px;
	float: right;
	margin-left: 10px;
}
.ad img{
	display: block;
}
#brands{
	margin: 10px 56px;
	border: 1px solid #d7d7d7;
	background: #FFF;
}
#brands p{
	color: #65635e;
	font-size: 0.9em;
	padding: 5px;
	margin-bottom: 0px;
}
#brands img{ text-align:center; display: block; margin: 0 auto 5px auto;}

/* HEADINGS */ 
h1, h3, h4{
	text-transform: uppercase;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
}
h4{
	font-size: 0.9em;
	color: #000;
	margin-bottom: 3px;
}
/* TEXT */
p{
	margin-bottom: 15px;
}
dd{
	margin-bottom: 10px;
}
dt{
	color: #65635e;
}
/* LINKS */
a:link			{ color: #004d97; text-decoration: none;}
a:visited		{ color: #004d97; text-decoration: none;}
a:hover			{ color: #004d97; text-decoration: underline;}
.data_tbl a:link {text-decoration: underline;}
.data_tbl a:visited {text-decoration: underline;}
.data_tbl a:hover{text-decoration: none;}
a.delete:hover	{ color: #DD3C10;}
tr.future a.delete:hover	{ color: #FFF;}
.infobox a:link	{color: #FFF; text-decoration: underline;}
.infobox a:visited	{ color: #FFF; text-decoration: underline;}
.infobox a:hover	{ color: #FFF; text-decoration: none;}

/* FORMS */
input, select, textarea		{ border: 1px solid #00469E; font-size: 1em; padding: 2px; }
input[type=text], input[type=password], select, textarea	{width: 200px;}
.infobox input[type=text] {width: 53px; padding: 4px; text-align: right;}
input.quick_amount {width: 25px; text-align: right;}
input.submit		{ border: 1px solid #FFED03; font-size: 1em; padding: 2px; background-color: #FFED03; color: #00469E; text-transform: uppercase; font-weight: bold;}
.infobox input.submit,
.cart input.submit {text-align: center; padding: 4px; width: 160px;}
#cartsend			{ width: 187px;}
input[type=image]	{border: none; padding: 0px; vertical-align: middle;}
input.submit:hover	{ border: 1px inset #EEE; }
select				{width: 205px;}
label				{display: block; text-transform: uppercase; font-weight: bold; margin-bottom: 3px;}
label span			{color: #666; font-weight: normal; text-transform: none;}
form div			{ margin-bottom: 15px;}
form .legend		{font-size: 1em; font-weight: bold; border-bottom: 1px solid #666; margin-bottom: 5px; width: 333px;}
form input.checkbox	{border: none;}
form fieldset		{margin-bottom: 10px;}
#validationmsg		{display: none; padding: 10px; background: #FFEBE8; border: 1px solid #DD3C10; margin-bottom: 10px;}
#validationmsg h4	{font-size:1em; text-transform: uppercase; font-weight: bold;}
#validationmsg li	{list-style: disc inside;}
.errmsg 			{ display: none; }
.error				{padding: 10px; background: #FFEBE8; border: 1px solid #DD3C10;}
.notvalid			{border-color: #FF0000;}
.info				{padding: 10px; border: 1px solid #00469E;}
optgroup			{ background-color: #004d97; color: #FFF; font-style: normal;}

/* TABLES */
table.data_tbl		{border-top: 6px solid #00469E; width: 100%;}
table.data_tbl th	{ font-weight: bold; background-color: #dae3f2; padding: 5px 3px; }
table.data_tbl td	{ border-bottom: 1px solid #b8b8b8; padding: 3px;}
table.data_tbl tfoot td	{ border: none;}
#the-list img		{vertical-align: middle;}
.tbl_sums td		{border-top: 1px solid #000;}
.trhead	td			{ font-weight: bold;}
#order_tbl			{font-size: 1.1em; margin-bottom: 10px; width: 50%;}
#order_tbl td		{padding-bottom: 5px; }
#order_tbl th		{font-weight: bold;}
#order_tbl span		{font-weight: bold; ;font-size: 0.9em}
tr.future			{ background: #DD3C10;}

/* VARIOUS */
p img			{vertical-align: middle;}
acronym, abbr	{	cursor: help;}
strong, b		{font-weight: bold;}
.left 			{text-align: left;}
.center 		{text-align: center;}
.right 			{text-align: right;}
.hide 			{text-indent: -9999px;}
.hidden 		{clear: both;display: none;}
.alignright 	{float: right;display: block;}
.alignleft 		{float: left;display: block;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix 		{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix 		{display: block;}
.paging			{color: #004d97;}
.pagingDim		{font-weight: bold; }
.underline		{text-decoration: underline;}
.paging img		{vertical-align: middle;}
.cart			{ margin: 15px 0; padding: 17px 5px; font-size: 0.9em;}