/*------------------------------------------------------------------
						Steven Johnston @ CoCreate
						for
						CoCreate
						06/04/2010

						Version 1.0

						Project: Copierchips Website

						**Please annotate amendments and log below**
						--------------------------------------------
						Amendments


						--------------------------------------------
##Designers Notes
-----------------
Colours
-------

--------------------------------------------------------------------*/
*{
    padding:0;
    margin:0;
}
html{
    min-height:100.5%;
}
body{
	background:#000000;
}
img{
    border:none;
}
/*---------------------------
		Structure
-----------------------------*/
#wrapper{
    width:940px;
	padding:40px 0 0 0;
	margin:0 auto 0 auto;
}
#header{
	width:940px;
	height:105px;
	line-height:1.5;
}
#logo{
	float:left;	
}
#headerRight{
	width:650px;
	float:right;
	text-align:right;
}
#header p{
	padding:0 3px 0 0;	
}
#main{
	margin:0 0 25px 0;	
}
#leftCol{
	float:left;
	width:220px;	
}
#mainCol{
	width:710px;
	float:right;
}
.floatFix{
	clear:both;
	width:1px;
	height:1px;
}
.indexPanel, .indexPanelLeft{
	float:right;
	width:230px;
	height:170px;
	background:#262626;
	margin-top:10px;
}
.panelHeader a{
	text-decoration:none;
	text-transform:uppercase;
}
.panelHeader a:hover{
	text-decoration:underline;
}
.indexPanel{
	margin-left:10px;	
}
.panelHeader{
	width:220px;
	height:23px;
	padding:7px 0 0 10px;
	background:#757575;
}
.panelBg{
	width:220px;
	height:140px;
	padding:0 0 0 10px;
}
.panelBg img{
	float:right;	
}
.panelBtn{
	position:absolute;
	z-index:2;
	margin:108px 0 0 0;	
}
/*---------------------------
		Main Menu
-----------------------------*/
#leftColHeader{
	width:205px;
	height:24px;
	padding:6px 0 0 15px;
	margin:0 0 5px 0;
	background:url("../images/bg_left_col_header.gif");
	text-transform:uppercase;
}
.leftColProductCat{
	width:220px;
	background:#262626;
}
.leftColProductCatHeader{
	width:205px;
	height:21px;
	padding:5px 0 0 15px;
	margin:3px 0 0 0;
	background:#757575;
}
.leftColProductCatHeader a{
	display:block;
	width:205px;
	height:21px;
}
#leftCol{
	text-transform:uppercase;
}
#leftCol ul{
	padding:5px 0 15px 15px;	
	list-style:none;
}
#leftCol ul li{
}
#leftCol ul li a{
	width:185px;
	height:17px;
	padding:3px 0 0 10px;
	display:block;	
}
#leftCol ul.leftMenuCyan li a{
	background:url("../images/bg_left_menu_cyan.gif");
}
#leftCol ul.leftMenuMagenta li a{
	background:url("../images/bg_left_menu_magenta.gif");
}
#leftCol ul.leftMenuYellow li a{
	background:url("../images/bg_left_menu_yellow.gif");
}
#leftCol a{
	text-decoration:none;	
}
#leftCol a:hover{
	text-decoration:underline;	
}
/*---------------------------
	    Right Column
-----------------------------*/
#rightCol{
	float:right;
	width:245px;
}
#search{
	width:245px;
	height:30px;
	margin:0 0 4px 0;
	background:url("../images/bg_search_bar.gif");
}
#searchBox{
	border:none;
	padding:1px 0 1px 2px;
	background:#FFFFFF;
	width:95%;
}
#search td.left{
	width:70px;
	padding:0 0 0 10px;
}
#search td.mid{
	width:140px;
}
#search td.right{
	width:15px;
	padding:0 10px 0 0;
}
#btnLogin, #btnViewBasket{
	float:left;
	display:block;
	width:110px;	
	padding:8px 0 0 10px;
	height:22px;
	text-decoration:none;	
}
#btnLogin{
	margin:0 5px 0 0;
	background:url("../images/bg_login.gif");
}
#btnViewBasket{
	background:url("../images/bg_view_basket.gif");
}
#regNow, #orderDeliv{
	float:left;
	width:235px;
	height:62px;
	padding:8px 0 0 10px;
	margin:13px 0 0 0;
	text-decoration:none;
}
#regNow{
	background:url("../images/bg_reg_now.gif");	
}
#orderDeliv{
	background:url("../images/bg_order_deliv.gif");	
}
.imgRightCol{
	width:225px;
	padding:10px 10px 12px 10px;
	margin:20px 0 0 0;
	background:#262626;
}

/*---------------------------
	  Middle Column
-----------------------------*/
#midCol{
	float:left;
	width:455px;
	margin:0;
}
#flash{
	width:455px;
	height:230px;
}
#mainHeading{
	width:443px;
	height:59px;
	padding:5px 0 0 12px;
}
#mainHeading h1{
	margin:0 0 10px 0;	
}
#mainHeading.blue{
	background:#00a8ec;
}
#mainHeading.pink{
	background:#e3007b;
}
#mainHeading.yellow{
	background:#d9df00;
}
#mainHeading.grey{
	background:#757575;
}
#chipLogo{
	position:absolute;
	z-index:2;
	margin:-11px 0 0 362px;
}
#content{
	width:422px;
	margin:20px 0 0 0;
	padding:0 20px 0 12px;
	line-height:1.4;
	border-right:1px solid #FFFFFF;
}
#content h2{
	padding:0 0 8px 0;
	margin:0 0 15px 0;
	border-bottom:1px solid #FFFFFF;
}
.productBrief{
	width:422px;
	margin:20px 0 0 0;
}
.productBrief td{
	padding-bottom:20px;
	border-bottom:1px solid #FFFFFF;
	vertical-align:top;	
}
.productBrief td.imgCell{
	width:100px;
}
.productBrief td.textCell{
	width:202px;
	padding-right:20px;
}
.productBrief td.textCell a{
	text-decoration:none;	
}
.productBrief td.textCell a:hover{
	text-decoration:underline;	
}
td.btnCell{
	width:120px;
}
.productBrief td.btnCell a{
	margin:0 0 10px 0;	
}
.productOpts{
	width:422px;
	border-top:1px solid #FFFFFF;
	margin:0 0 20px 0;
}
.productOpts td{
	padding-top:20px;	
}
.productOpts td.qty{
	width:100px;	
}
.bgBtnBlue, .bgBtnPink, .bgBtnYellow{
	display:block;
	width:116px;
	height:18px;
	padding:2px 0 0 4px;
	text-decoration:none;	
}
.bgBtnPinkWide{
	display:block;
	width:176px;
	height:18px;
	padding:2px 0 0 4px;
	text-decoration:none;
	background: #e3007b url("../images/bg_btn_pink.gif") no-repeat right;
	color:#FFFFFF;
	font-size:0.7em;
	text-transform:uppercase;
}

.bgBtnBlue{
	background:url("../images/bg_btn_blue.gif");
}
.bgBtnPink{
	background:url("../images/bg_btn_pink.gif");
}
.bgBtnYellow{
	background:url("../images/bg_btn_yellow.gif");
}
.btnBackYellow{
	display:block;
	width:52px;
	height:18px;
	padding:2px 0 0 17px;
	text-decoration:none;
	background:url("../images/bg_btn_back_yellow.gif");
}
input.short{
	width:50px;	
}
input.xshort{
	width:30px;	
}
select.long{
	width:200px;
	margin:4px 0 0 0;
}
.greyHeader{
	width:410px;
	height:25px;
	padding:5px 0 0 12px;
	background:#757575;
}
.interestLeft, .interestRight{
	width:185px;
	padding:10px;
	margin:10px 0 0 0;
	background:#262626;
}
.alignCenter{
	width:100%;
	text-align:center;	
	margin:5px 0 5px 0;
}
.interestLeft{
	float:left;	
}
.interestRight{
	float:right;	
}
#basket{
	width:700px;
	padding:20px 0 0 10px;
}
#basket td{
	padding-bottom:15px;
	line-height:1.4;
}
#basket tr.tblBody td{
	padding-top:15px;
	border-top:1px solid #FFFFFF;
	vertical-align:top;
}
#basket td.product{
	width:100px;
}
#basket td.desc{
	padding-right:20px;
}
#basket td.qty{
	width:61px;
}
#basket td.price{
	width:90px;
}
#basket td.total{
	width:90px;
}
#basket td.btn{
	width:69px;
}
#totals, #offerCode{
	float:right;
	width:700px;
	margin:0 0 15px 10px;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
}
#totals td, #offerCode td{
	padding-top:10px;
	padding-bottom:10px;
	padding-left:10px;
}
#totals td.total, #offerCode td.total{	
	width:141px;
}
#totals td.price{
	width:159px;	
}
#totals td.bdrBtm, #offerCode td.bdrBtm{
	border-bottom:1px solid #FFFFFF;
}
.basketBtn{
	float:right;
	clear:right;
	display:block;
	width:160px;
	height:17px;
	padding:3px 0 0 15px;
	margin:0 0 8px 0;
	text-decoration:none;
	background:url("../images/bg_btn_basket.gif");
}
/*---------------------------
		Header Menu
-----------------------------*/
#headerMenu{
	list-style:none;
	margin:5px 0 0 0;
}
#headerMenu li{
	float:right;
	margin:0 0 0 15px;
}
#headerMenu li a{
	text-decoration:none;
	padding:0 0 0 15px;
	border-left:1px solid #FFFFFF;	
}
#headerMenu li.noBorder a{
	border:none;	
}
#headerMenu li a:hover{
	text-decoration:underline;	
}
/*---------------------------
		  Footer
-----------------------------*/
#footer{
	width:900px;
	height:78px;
	padding:16px 20px 16px 20px;
	background:#262626;
	line-height:1.5;
}
#logoFooter{
	float:right;	
}
#footerLeft{
	width:240px;
	float:left;	
}
#footer a{
	text-decoration:none;	
}
#footer a:hover{
	text-decoration:underline;	
}
#cCards{
	margin:10px 0 0 0;	
}
#footer ul{
	float:left;
	list-style:none;
	margin:0 80px 0 0;
}
#footer ul li{
	padding:0 0 0 15px;
}
#footer ul li.bdrCyan{
	background:url("../images/bg_bdr_cyan.gif") no-repeat;
}
#footer ul li.bdrMagenta{
	background:url("../images/bg_bdr_magenta.gif") no-repeat;
}
#footer ul li.bdrYellow{
	background:url("../images/bg_bdr_yellow.gif") no-repeat;
}
#footer ul li.bdrKey{
	background:url("../images/bg_bdr_key.gif") no-repeat;
}
/*---------------------------
		Typography
-----------------------------*/
body{
	font-family:Verdana, Geneva, sans-serif;	
}
#header .tel, h1, #btnViewBasket,#btnLogin, #orderDeliv, #regNow, .btnCell, .btn, .basketBtn{
	font-family:Arial, Helvetica, sans-serif;
}
.white{
	color:#FFFFFF;	
}
.grey{
	color:#959595;
}
.bgBtnBlue, .bgBtnPink, .bgBtnYellow, .btnBackYellow, .basketBtn{
	color:#000000;	
}
span.blue, a.blue, h2.blue{
	color:#00a8ec;
}
span.pink, a.pink{
	color:#e3007b;	
}
span.yellow, #basket tr.tblHead, a.yellow{
	color:#d9df00;	
}
#header .tel{
	font-size:1.8em;	
}
#mainHeading h1{
	font-size:1.25em;	
}
.emph{
	font-size:1.1em;	
}
#leftColHeader h1{
	font-size:1em;	
}
#header p, #basket tr.tblHead, .money{
	font-size:0.9em;	
}
#header p, .label, h1{
	font-size:0.8em;	
}
#headerMenu, #btnLogin, #btnViewBasket, #regNow, #orderDeliv{
	font-size:0.75em;	
}
#leftCol ul, .bgBtnBlue, .bgBtnPink, .bgBtnYellow, .btnBackYellow, .basketBtn, .text{
	font-size:0.7em;	
}
#footer{
	font-size:0.65em;	
}
h1{
	font-weight:100;	
}
#basket tr.tblHead{
	font-weight:bold;	
}
.error-text{color:red;}
.hide{display:none;}

.moreProds{color:#FFFF00; cursor:pointer; margin:3px 0 3px 0;}

#twoColLeft{width:340px; float:left; margin:0 20px 0 0;}
#twoColRight{width:340px; float:left;}

#oneCol{width:700px; float:left;}

.pink{color:#e3007b;}

#twoColLeft h4, #twoColRight h4, #oneCol h4{padding:0 0 10px 0; border-bottom:solid white 1px; margin:0 0 10px 0;}

.accountTable{width:700px; font-size:11px; margin:0 0 20px 0;}
.accountTable .head td{padding:0 0 10px 0; border-bottom:solid white 1px; margin:0 0 10px 0;}

.padTop{padding:20px 0 0 0;}

.colForm{font-size:12px;}
.colForm label{color:#FFFFFF; font-weight:bold;}
.colForm input{border:none;}
.colForm input.text{background-color:#F0F0F0; width:300px; margin:5px 0 10px 0; padding:5px; font-size:12px;}

#twoColRight p, #twoColLeft p, #oneCol p{font-size:11px;}

#mainHeading .welcome{float:left; width:340px; color:#FFFFFF; }
#mainHeading .logout{float:right; width:80px; color:#FFFFFF; text-align:right; padding:0 20px 0 0 ;}

.stepTable{width:700px; margin:0 0 20px 0;}
.stepTable td{text-align:center; padding:20px 0 20px 0;}

.stepArrow{font-size:40px;}