/*
  ======================================================
	MAINCSS FILE FOR SQUID TECHNOLOGY
	V 1.0
	
	Projectfacts: 
	
	Main-Release: September 2007
	Have fun!
  ======================================================
*/	

/*
  ======================================================
    ADD CSS RESET TO START FROM SCRATCH
  ======================================================
*/
@import(cssreset.css);

body {
	border: 0;
	margin: 25px 0 15px 0;
	padding: 0;
	background-color: #E7E7E7;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 17px;
	color: #151515; 
	text-align: center;
}

/*
  ======================================================
	WRAPPER / HEADER / TOPNAV / CONTENT / FOOTER
  ======================================================
*/

#contentwrapper {
	margin: 0 auto;
	width: 790px;
    text-align: left;
	background: url(../images/mainbg.gif) transparent repeat-y center top;		
}

#header {
	padding: 0;
	margin: 0;
	border: 0;
	background: url(../images/topbg.gif) no-repeat left top;
	width: 790px;
	height: 20px;
}

#topnav {
	margin: 0;
	padding: 0;
	border: 0;
	width: 790px;
	height: 75px;
}

#logo {
	width: 425px;
	height: 70px;
	padding: 0 0 0 20px;
	margin: 0;
	float: left;
	border: 0;
}

/**
  ======================================================
    META NAVIGATION & LANGUAGE SELECTION
  ======================================================
*/ 

#meta {
	width: 180px;
	height: 29px;
	padding: 41px 22px 0 0;
	margin: 0;
	border: 0;
	float: right;
}

#meta li {
	list-style: none;
	float: left;
}

#uk, #eu, #fr, #de, #pp, #ppfr, #ppde {
	display: block;
	width: 19px;
	height: 13px;
	margin: 0;
	padding: 10px 5px 0 5px;
	background: url('../images/flag_de.gif') no-repeat 0px;
}

#uk { background-image: url('../images/flag_uk.gif'); }
#eu { background-image: url('../images/flag_eu.gif'); }
#fr { background-image: url('../images/flag_fr.gif'); }
#de { background-image: url('../images/flag_de.gif'); }
#pp { background-image: url('../images/cart.gif'); width: 90px; height: 24px; padding: 0; }
#ppfr { background-image: url('../images/cartfr.gif'); width: 90px; height: 24px; padding: 0; }
#ppde { background-image: url('../images/cartde.gif'); width: 90px; height: 24px; padding: 0; }

/*
  ======================================================
	BREADCRUMB NAVIGATION
  ======================================================
*/
#breadcrumb {
	width: 530px;
	height: 18px;
	padding: 0;
	border-top: 1px solid #6a6a6a;
	border-bottom: 1px solid #6a6a6a;
	margin: 0 0 20px 0;
}

#breadcrumb li {
	background: url(../images/leftarrow.gif) no-repeat left;
	padding: 0 10px 0 0;
	float: left;
}

#breadcrumb li a { 
	padding: 0 0 0 20px;
	margin: 0;
	text-decoration: none; 
	font-size: 10px;
	line-height: 18px;
	color: #000; 
}

#breadcrumb li a:hover {
	text-decoration: underline;
	color: #000;
}

#breadcrumb li.active a {
	font-weight: bold;
	color: #000;
}

/*
  ======================================================
	MAINCONTENT AREA, LEFTCONTENT, CONTENT
  ======================================================
*/

#maincontent {
	width: 790px;
	padding: 0;
	border: 0;
	margin: 0;
	background: url(../images/mainbg.gif) transparent repeat-y center top;	
}

#leftcontent {
	width: 180px;
	padding: 0;
	border: 0;
	margin: 0 0 0 25px;
	float: left;
	display: inline;
}

#content {
	width: 525px;
	padding: 0 10px 20px 10px;
	border: 0;
	margin: 0 0 0 15px;
	float: left;
}

/*
  ======================================================
	MAIN NAVIGATION LEFT / SUPPORT NAVIGATION
  ======================================================
*/

#mainnav { 
	padding: 0;
	margin: 0;
	border: 0;
	background-color: #FFF;
	width: 180px;
}

#mainnav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#mainnav li {
	width: 100%;
	margin: 0 0 4px 0;
	background-color: #E7E7E7;
}

#mainnav li.header {
	background-color: #214263;
	color: #FFF;
	padding: 0 0 0 5px;
	width: 175px;
	line-height: 20px;
	font-weight: bold;
}

#mainnav li a { 
	display: block;
	padding: 0 0 0 10px;
	margin: 0;
	width: 170px;
	text-decoration: none; 
	line-height: 20px;
	color: #666666; 
}

#mainnav li a:hover {
	background-color: #FAFAFA;
	color: #000;
}

#mainnav li.active a {
	border: 0;
	background-color: #FAFAFA;
	font-weight: bold;
	color: #000;
}

/**
	Mainnavigation Second Level
*/	
#mainnav ul.sub li {
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: 1px solid #ECECEC;
	background-color: #FAFAFA;
}

#mainnav ul.sub li a {
	display: block;
	width: 165px;
	padding: 0 0 0 15px;
	line-height: 20px;
	font-weight: normal;	
}

#mainnav ul.sub li a:hover {
	background-color: #ECECEC;
	color: #000;
}

#mainnav ul ul.sub li.active a {
	font-weight: bold;
}

/*	SUPPORT */
#support { 
	padding: 0;
	margin: 40px 0 0 0;
	border: 0;
	background-color: #FFF;
	width: 180px;
}

#support li {
	list-style: none;
	width: 100%;
	margin: 0 0 4px 0;
	background-color: #AFAFAF;
}

#support li.header {
	background-color: #214263;
	color: #FFF;
	padding: 0 0 0 5px;
	width: 175px;
	line-height: 20px;
	font-weight: bold;
}

#support li a { 
	display: block;
	padding: 0 0 0 10px;
	margin: 0;
	width: 170px;
	text-decoration: none; 
	line-height: 20px;
	color: #FAFAFA; 
}

#support li a:hover {
	background-color: #FAFAFA;
	color: #000;
}

#support li.active a {
	border: 0;
	background-color: #FAFAFA;
	list-style: none;
	font-weight: bold;
	color: #000;
}

/*
  ======================================================
	CONTENT - IMAGES / LISTS
  ======================================================
*/

#content .pics {
	width: 525px;
	padding: 0;
	margin: 15px 0 15px 0;
	border: 0;
}

#content .pics img {
	padding: 0;
	margin: 0 20px 0 0;
	border: 1px solid #353535;
}

ul.clist {
	margin: 0;
	padding: 0;
	border: 0;
}

ul.clist li {
	background: url(../images/leftarrow.gif) no-repeat 0 6px;
	padding: 0 0 0 20px;
	vertical-align: top;
	margin: 0 0 5px 0;
}

/*
  ======================================================
	PRODUCT IMAGES & PRODUCT TEASER DESCRIPTION
  ======================================================
*/
.pteaser {
	width: 530px;
	border: 0;
	/*border: 1px solid #DDDCDC;*/
	margin: 15px 0 15px 0;
	float: left;
}

.pimg {
	width: 140px;
	float: left;
}

.pimg2 {
	width: 160px;
	float: left;
}

.pimg img {
	border: 0;
	margin: 5px 0 0 10px;
	padding: 0;
	vertical-align: top;
}

.pdesc {
	width: 390px;
	margin: 0;
	padding: 0;
	border: 0;
	float: left;
}

/**
  ======================================================
	TABLE DEFINITIONS BORDER / FULLBORDER / NOBORDER
  ======================================================
*/	


/**
	CTABLEB - CONTENT TABLE WITH BORDER
*/	
table.ctableb {
	width: 530px;
	border: 1px solid #DDDCDC;
	margin: 15px 0 15px 0;
}

.ctableb tr {
	background-color: #FFF;
}

.ctableb th, .ctableb td {
	padding: 5px 10px 5px 10px;
	line-height: 14px;
}

.ctableb td p {
	padding: 0;
	margin: 0;
}

.ctableb th {
	font-size: 14px;
	font-weight: bold;
	vertical-align: top;
	background-color: #F8F8F8;
	color: #222;
	padding: 5px 10px 5px 10px;
	text-align: left;
}


/**
	CTABLEFB - CONTENT TABLE WITH FULL BORDERS
*/	
table.ctablefb {
	width: 530px;
	border-top: 1px solid #DDDCDC;
	border-left: 1px solid #DDDCDC;
	border-collapse: collapse;
	margin: 15px 0 15px 0;
}

.ctablefb tr {
	background-color: #FFF;
}

.ctablefb th, .ctablefb td {
	padding: 5px 10px 5px 10px;
	line-height: 12px;
	border-right: 1px solid #DDDCDC;
	border-bottom: 1px solid #DDDCDC; 
}

.ctablefb td p {
	padding: 0;
	margin: 0;
}

.ctablefb th {
	font-weight: bold;
	vertical-align: top;
	background-color: #F8F8F8;
	color: #222;
	padding: 5px 10px 5px 10px;
	text-align: center;
}

/**
	CTABLENB - CONTENT TABLE WITH NO BORDERS
*/	

table.ctablenb {
	width: 530px;
	border: none;
	margin: 15px 0 15px 0;
}

.ctablenb tr {
	background-color: #FFF;
}

.ctablenb th, .ctablenb td {
	padding: 5px 10px 5px 10px;
	line-height: 14px;
}

.ctablenb td p {
	padding: 0;
	margin: 0;
}

.ctablenb th {
	font-weight: bold;
	vertical-align: top;
	background-color: #F8F8F8;
	color: #222;
	padding: 5px 10px 5px 10px;
}

/**
	CTABLENB2 - CONTENT TABLE WITH NO BORDERS AND LOW PADDING
*/	

table.ctablenb2 {
	width: 530px;
	border: none;
	margin: 0px 0 0px 0;
}

.ctablenb2 tr {
	background-color: #FFF;
}

.ctablenb2 th, .ctablenb2 td {
	padding: 5px 5px 5px 5px;
	line-height: 17px;
}

.ctablenb2 td p {
	padding: 0;
	margin: 0;
}

.ctablenb2 th {
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
	background-color: #FFFFFF;
	color: #222;
	padding: 5px 5px 5px 5px;
}

/**
  ======================================================
	FORMS
  ======================================================
*/	

input.text {
	margin: 5px 0 5px 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	vertical-align: middle;
	height: 16px;
	width: 250px;
}

input.submit {
	margin: 10px 0 0 0;
	width: 100px;
	background-color: #ECECEC;
	color: #000;
	font-size: 10px;
}

select {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	11px;
	color: #4F4F4F;
	background-color: #fff; 
}

textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:	10px;
	color: #4F4F4F;
	background-color: #fff; 
	width: 250px;
	height: 75px;
	
}

input.radio {
	margin: 0;
	padding: 0;
	border: none;
	vertical-align: middle;
}

input.checkbox {
	margin: 0;
	padding: 0;
	border: none;
	vertical-align: middle;
}



/*
  ======================================================
	FOOTER 
  ======================================================
*/

#footer {
	clear: both;
	padding: 0;
	margin: 0;
	border: 0;
	background: url(../images/footerbg.gif) no-repeat left top;	
	width: 790px;
	height: 45px;
}

#copyright {
	margin: 0;
	padding: 20px 0 0 0;
	text-align: center;
}

/*
  ======================================================
    COMMON HEADER STYLES + FIRST-CHILD STYLES
  ======================================================
*/

h1 {
	margin: 10px 0 15px 0 ;
	font-size: 16px;
	font-weight: bold;
}

h2 {
	margin: 15px 0 15px 0;
	font-size: 14px;
	font-weight: bold;
}

h3 {
	margin: 15px 0 15px 0;
	font-size: 12px;
	font-weight: bold;
}

#maincontent h1:first-child {
	margin: 0 0 15px 0 ;
	font-size: 16px;
	font-weight: bold;
}

/**
  ======================================================
    COMMON STYLES FOR LINKS
  ======================================================
*/ 

a:link {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #336699;
}

a:visited {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;	
	color: #336699;
}

a:hover {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	color: #222;
}

a:active {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;	
	color: #222;
}

/*
  ======================================================
	COMMON STYLES + SPECIAL FORMATTING
  ======================================================
*/

.left {
	padding: 0;
	float: left;
	text-align:left;
}

.right {
	padding: 0;
	margin: 0;
	height: 16px;
	float: right;
	text-align:right;
}

.center {
	text-align: center;
}

.zero {
	padding: 0;
	margin: 0;
	border: 0;
	clear: both;
}

.hide   { display: none; }
.italic { font-style: italic; }
.clear  { clear:both; }
em      { font-size: 11px; }
.strong { font-weight: bold; }

ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
}

li {
	margin: 0;
	padding: 0;
	border: 0;	
	list-style: none;
}

.product-highlight {
	font-size: 9px;
	font-weight: bold;
	color: #FF3333;
}

.product-code {
	color: #999999;
	font-size: 10px;
}

.product-desc {
	font-weight: bold;
	font-size: 11px;
}

.inc-vat {
	font-weight: bold;
	white-space: nowrap;	
}
	
.exc-vat {
	font-size: 9px;
	font-weight: normal;
	white-space: nowrap;
}

.special-offer {
	font-size: 12px;
	font-weight: bold;
	color:#FF3333;
}

.offer-text1 {
	color: #FF3333;
	font-weight: bold;
	font-size: 14px;
}

.offer-text2 {
	font-size: 11px;
	font-weight: bold;
	color: #FF3333;
}

.offer-text3 {
	font-size: 9px;
	font-weight: bold;
	color: #FF3333;
}

.offer-text4 {
	font-size: 11px;
	color: #FF3333;
}

.offer-text5 {
	font-size: 9px;
	color: #FF3333;
}

.blue-text1 {
	color: #0066FF;
	font-weight: bold;
	font-size: 14px;
}

.alt-prod {
	font-size: 14px;
	font-weight: bold;
}

.stock-status1 {
	font-size: 10px;
	color: #009900;
}

.stock-status2 {
	font-size: 10px;
	color: #ff6600;
}

.stock-status3 {
	font-size: 10px;
	color: #FF3333;
}

.stock-qty {
	font-size: 9px;
}