﻿/*
WIREFAB.COM	---------------------------------------------------------		
Author: William Åström - www.williamastrom.se
Email: william@williamastrom.se
Date: 2010-09-09

Blue Color: #34438c
----------------------------------------------------------------------------	*/




/*
CSS 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,
b, u, i, center,
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; font-size: 100%; vertical-align: baseline; background: transparent; }
body {	line-height: 1;}
ol, ul { list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus {	outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { 	border-collapse: collapse; border-spacing: 0; }

/*
CSS RESET		---------------------------------------------------------	*/
body,html { height:100%; background: #fff url(../images/backgroundBody.jpg) repeat-x 0 0;font:13px/1.5 'Droid Sans', arial, serif;}


/*
PAGE LAYOUT	---------------------------------------------------------	*/
#header, #navbar ,#contentInner { position:relative ; }
#header, #navbar {overflow:hidden;}
#container { width:960px; margin:0 auto;   }
#header { background: url(../images/backgroundHeader.jpg) no-repeat 0 0; height: 240px; width:960px;overflow: hidden;}
#wrap {  min-height:600px;  margin:0 auto;padding-bottom:40px; overflow:auto;}
#sidePanel {width:280px; margin:0 10px; float: left; background:url(../images/bakline.gif) repeat 0 0; padding:10px 10px;min-height:400px;}
#content {width:640px; margin:0 0px; float: left; overflow:auto;}
#footer { height:40px; background-color:#000f5c; margin:20px 0 0 0; position:fixed; bottom:0px;z-index:11;width:100%}




/*
TYPOGRAPHY 	---------------------------------------------------------	*/
h1,h2,h3 {color:#34438c; font-weight:bold;}
h1 {  font: bold 30px/1.5 'Droid Sans', arial, serif;	margin: 0px 0 30px 0;text-transform:uppercase;}
h2 {  font: bold 20px/1.2 'Droid Sans', arial, serif;	margin: 30px 0 20px 0;text-transform:uppercase;}
h3 {  font: bold 14px/1.3 'Droid Sans', arial, serif; 	margin: 20px 0 15px; }
p { font:13px/1.5 'Droid Sans', arial, serif; margin:10px 0;}
p+p {margin:15px 0;}
a { color:#34438c; }
strong {font-weight:700;}
/*
EXTRA	---------------------------------------------------------	*/
.clearfix { clear: both; }
.imgFloat {float:right;padding:5px;}
.divfloatleft {width:50%;float:left;}
/*
STYLES	---------------------------------------------------------	*/
.xmargins { margin:0 10px;}
.xymargins { margin:10px; }
.contentInner {clear:both;width:620px;margin:0px 10px 00px;overflow:hidden;}
hr {background:url(../images/hr.gif);height:20px;border:none;margin:0px;}

/*Product Boxes on first page */
.prodBox {width:300px; height:160px; margin:10px 10px; background:url(../images/bakProdBox.jpg);float:left;position:relative;}
.prodBoxName {position:relative; top:25px;text-align:center; margin:0px;}
.prodBox img { position:relative; top: 20px; left: 20px; width:260px; height:100px; overflow:hidden;z-index:10;}

/* Text Alignment Center */
.center {text-align:center;}

/* Add shadow to boxes */
.boxShadow { -webkit-box-shadow: 0px 6px 10px #ebebeb;	-moz-box-shadow: 0px 6px 10px #ebebeb;	box-shadow: 0px 6px 10px #ebebeb;  }

/* Fading blue background behind headers */
.headerBackgroundFade { /*background: url(../images/fadebackground.jpg) repeat-y;*/	background-color:#34438C; margin:30px 0 10px;	padding:8px;	text-transform:uppercase;		cursor: pointer;    color:#fff;

}

/* Styling the navboxes on left side */
.menu_list { width: 260px; }
.headerBackground { margin:0px;	padding:3px 10px;	text-align:center; 	text-transform:uppercase;		cursor: pointer;	width:100%;       background: #34438c;       color:#fff;}
.menuSubHead { margin: 12px 0 6px; 	 background: #fff;	color: #000;	padding: 0 0 2px 0px;	text-transform: uppercase;  color:#34438c; 	border-bottom:1px solid #d5d5d5;}
.menu_body { 	background: #fff ;	width:100%;	margin:0 0 10px;	padding:5px 10px; }
.menu_body a { text-decoration:none; display:block;}
.menu_body a:hover { color: #000000;  text-decoration:underline; }

/*
LISTS	----------------------------------------------------------*/
.list { margin:10px 0 20px;}
.list li { margin:10px; }

/*
NAVBAR	-----------------------------------------------------*/
#navbar { top: 180px; height: 30px; width:960px; margin:0 auto;}
#navbar  ul { float:right;}
#navbar ul li {display:inline-block; float:left;}
#navbar ul li a{ float:left;margin:0 5px 0 5px; text-decoration:none; font-size:16px; line-height: 30px;color:#fff;text-transform:uppercase;}
#navbar a:hover { color:#34438c; border-bottom::2px solid #34438c;}
#navbar li.active a{color:#34438c;}
/*
HOME	---------------------------------------------------------	*/
.introImage { margin:0 0 20px;}
#home h1 { font-size:29px; line-height:1.5; margin:0px;}

/*
TINY MCE	-----------------------------------------------------*/
.mceContentBody { background: #fff; }

/*
Product Sheet Spec	--------------------------------------*/
dl {width:100%;}
dt {float:left; width:220px; font-weight:700;}
dd {float:left;width:380px;}
table {width:100%;}
td {width:50%;}
dd,dt {margin:5px 10px;}

#product h1 {margin:0px;}
#product .contentInner h2:first-child  {margin:7px 0px;}
/* Div on the left */
.contentInnerLeft {float:left;width:640px;}

/*Div on the right 
.contentInnerRight{float:right;width:220px;}
*/
#intro {overflow:auto;border-bottom:4px solid #34438C;}
#panel {
height:200px;
width:640px;
background-color:#34438C;
color:#fff;
display:none;
z-index:13;
position:absolut;
top:30px;
}
.contact {
text-transform:uppercase;text-decoration:none;
font:13px/60px 'Droid Sans', arial, serif;
text-align:center; color:#fff;
float:right;
width:100px;
height:50px;
margin-right:0px;
background:#34438C;
margin:0px 0px 5px 5px;
}
.contact:hover {
background:#322626;
}
.contact-active {
background:#322626;
}
.contact-active:hover {
background:#322626;
}
