/*
   layout.css
   www.pagers.co.uk
   
   Created by Andrew M. Cox on 2007-06-25.
   Copyright 2007 www.eyetrap.co.uk. All rights reserved.
*/	

/*
	Colours index:
	
	Logo Blue:  #4176a8;
	Logo Green: #5a9b71;
	Light Blue (nav): #c6d6e5;
	Light Green:  #a4cbb2;
	Link hover blue: #084e89;
	Red: #c05d5f;
*/
	
/*  Master Reset  */
    @import url( "reset.css" );

	/* =========== */
	/* = Globals = */
	/* =========== */
	body {
		font:76%/1.5 "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;
		line-height: 1.5em;
		background: #fff url( ../styleImages/backgrounds/greyline.png ) repeat-x;
		text-align: center;
	}
	#session {
		position: absolute;
		top: 0;
		right: 0;
		color: #c6d6e5;	
		background: url( ../styleImages/backgrounds/status.png ) repeat-x;
	}
	#session-i {
		background: transparent url( ../styleImages/backgrounds/statusleft.png) no-repeat;
		line-height: 32px;
		padding: 0 32px 0 52px;
	}
	#wrap{
		width: 770px;
		margin: 0 auto 100px auto;
		text-align: left;
		height: 650px;
		min-height: 650px;
	}
	html>body #wrap{
		height: auto;
	}
	#sessionBox {
		float: right;
	}
	#nav {
		background: transparent url( ../styleImages/backgrounds/navtop.png ) no-repeat 0 0;
		margin-bottom: 25px;
		padding-top: 0.5em;
	}
	/* IE6 loves it */
	* html #nav,* html #nav-i{
		height: 1px;
	}
	#nav-i {
		background: transparent url( ../styleImages/backgrounds/navbottom.png ) no-repeat left bottom;
		padding: 0 10px 0.5em 10px;
	}
	#cats li {
		float: left;
		line-height: 24px;
	}
	.clearer {
		clear: both;
	}
	#contentcolumn {
		padding: 0 15px;
		position: relative;
		float: left;
		width: 375px;
	}
	#contentcolumn.stretch{
		width: 570px;
		padding: 0 0 0 15px;
	}
	#leftcolumn {
		float: left;
		width: 180px;
	}
	#rightcolumn {
		float: right;
		width: 180px;
	}
	.box {
		padding-top: 6px;
		background: url( ../styleImages/backgrounds/boxTop.gif ) no-repeat;
		margin-bottom: 8px;
	}
	.boxFootLeft {
		background: url( ../styleImages/backgrounds/boxBottom.gif ) no-repeat;
	}
	.boxContentLeft, .boxContentRight {
		padding: 5px 7px 7px 7px;
		border-left: 1px solid #444;
		border-right: 1px solid #444;
		width:164px;
	}
	#siteDocs {
		background: #ddd url( ../styleImages/backgrounds/siteDocs.png ) repeat-x;
		color: #c6d6e5;
		padding: 5px 20px 20px 20px;
		clear: both;
		border-top: 1px solid #333;
	}
	p, ul.std {
		margin-bottom: 15px;
	}
	em{
		font-style: italic;
		color: #333;
	}
	.em{
		font-style: italic;
	}
	.txtCopyright{
		display: none;
	}
	
	/* ========= */
	/* = Links = */
	/* ========= */
	a, a:link {
		color: #084e89;
		font-weight: bold;
		text-decoration: none;
	}
	a:hover {
		color: #084e89;
		border-bottom: 1px solid #084e89;
	}
	a.imglink:link, a.imglink:visited, a.imglink:hover {
		border: 0;
		background: none;
	}
	#session a, #session a:hover, #siteDocs a, #siteDocs a:hover {
		color: #fff;
	}
	#session a:hover, #siteDocs a:hover {
		border-bottom: 1px solid #fff;
	}
	* html #session a, * html #siteDocs a {
		border: 0;
	}
	#cats li a {
		color: #333;
		border-bottom: 0;
		background: none;
	}
	#cats li a:hover {
		border-bottom: 1px solid #000;
	}
	.boxContent a {
		color: #084e89;
		border-bottom: 0;
		background: none;
	}
	.boxContent a:hover {
		color: #084e89;
		border-bottom: 1px solid #084e89;
	}
	.boxContent a.imglink:hover {
		border-bottom: 0;
	}
	.boxContent a.imglink:visited {
		border-bottom: 0;
	}
	.navbox a {
		color: #333;
		border-bottom: 0;
		background: none;
	}
	.navbox a:hover {
		color: #084e89;
		border-bottom: 1px solid #084e89;
	}
	.imagebox a, a:hover, a:active, a:visited {
		border: 0;
		background: none;
	}	
	/* ============ */
	/* = Headings = */
	/* ============ */
	h1,h2,h3,h4,h5,h6,.tdcartTitle {
		font-weight: normal;
		font-family: "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;
		margin-bottom: 15px;
		text-decoration: underline;
	}
	h1 {
		text-indent: -9999px;
		height: 56px;
		margin: 25px 0 15px 0;
		background: transparent url( ../styleImages/logo.png ) no-repeat;
	}
	h2 {
		font-size: 1.4em;
		margin-bottom: 15px;
		padding-bottom: 2px;
		font-weight: bold;
		color: #333;
		text-decoration: none;
		position: relative;
	}
	h3 {
		font-size: 1.2em;
		margin-bottom: 10px;
		padding-bottom: 2px;
		font-weight: bold;	
		color: #333;
		text-decoration: none;
	}
	h4 {
		font-size: 1.1em;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
		text-decoration: none;
	}
	h5 {
		font-size: 1.1em;		
		text-align: center;
		margin-bottom: 10px;
		font-weight: bold;
		color: #333;
		text-decoration: none;	
	}
	h6 {
		font-size: 1.0em;		
		text-align: center;
		margin-bottom: 10px;
		font-weight: bold;		
		color: #333;
		text-decoration: none;	
	}
	.tdcartTitle {
		font-size: 1.2em;
		color: #084e89;
		text-decoration: none;
	}	
	/* =================== */
	/* = Latest Products = */
	/* =================== */
	#latestProds{
		text-align: center;
		margin-bottom: 15px;
	}
	#latestProds img {
		vertical-align: middle;
	}
	#latestProds h3{
		margin-bottom: 5px;
	}
	.txtBoxSave,.txtCartPrice,.txtSale,.cartEmpty,.txtError{
		color: #c05d5f;
		font-weight: bold;
		font-style: italic;
	}
	.txtCartPrice {
		float: right;
		padding-right: 8px;
	}
	.latestProds{
		text-align: center;
		padding-right: 3px;
	}
	.breadcrumbs{
		color: #666;
		font-style: italic;
		margin-bottom: 15px;
	}
	.breadcrubms strong{
		font-weight: bold;
	}
	
	/* ========== */
	/* = Tables = */
	/* ========== */
	.stdTable{
		width: 100%;
		margin-bottom: 15px;
	}
	.stdTable thead.hide{
		display: none;
	}
	.stdTable thead tr{
		background: #ddd;
	}
	.stdTable th{
		font-weight: bold;
		color: #333;
	}
	.stdTable td, .stdTable th{
		vertical-align: middle;
		padding: 4px;
	}
	.stdTable td.center,div.center{
		text-align: center;
	}
	.stdTable td.right{
		text-align: right;
	}
	.stdTable tr.tdEven, .stdTable tr.tdcartEven{
		background: #eee;
	}
	/* cartTable seems to have these the wrong way round */
	#cartTable tr.tdcartEven{
		background: #fff;
	}
	#cartTable tr.tdcartOdd{
		background: #eee;
	}
	.stdTable td.plain{
		background: #fff;
	}
	.orderTable{
		color: #333;
	}
	.orderTable strong{
		font-weight: bold;
		color: #000;
	}
	/* ======== */
	/* = Cart = */
	/* ======== */
	.txtcartProgressCurrent{
		font-weight: bold;
		color: #4176a8;
	}
	.quickBuy{
		display: none;
	}
	.cartProgress{
		margin-bottom: 20px;
		font-size: 1.1em;
	}

	.stockWarning{
		color: #c05d5f;
		font-style: italic;
	}
	.tdCartSubTotal, .total{
		font-weight: bold;
	}
	.cartKey td, .trTotal td{
		padding: 10px 4px;
		border-top: 1px solid #aaa;
		border-bottom: 1px solid #aaa;
	}
	.txtOldPrice{
		text-decoration: line-through;
	}

	/* ================== */
	/* = Form Standards = */
	/* ================== */
	.stdForm{
		float: left;
		width: 100%;
	}
	.stdForm li{
		float: left;
		width: 100%;
	}
	.stdForm label{
		float: left;
		clear: left;
		display: block;
		margin-right: 3px;
		text-align: right;
		width: 125px;
	}
	.stdForm .matchLabel{
		padding-left: 128px;
	}
	.stdForm fieldset{
		border: 1px solid #333;
		margin-bottom: 15px;
		padding: 15px;
	}
	* html .stdForm fieldset{
		padding: 0 0 10px 10px;
	}
	* html .stdForm legend{
		margin-bottom: 15px;
	}
	form[className] legend{
		margin-bottom: 15px;
	}
	span.req{
		color: red;
	}
	.stdForm input, .stdForm select, .stdForm textarea{
		float: left;
		width: 110px;
		margin-bottom: 2px;
		border: 1px solid #999;
		vertical-align: middle;
	}
	.stdForm select{
		padding: 0;
		width: 115px;
	}
	.stdForm textarea{
		width: 300px;
		height: 100px;
		margin-left: 5px;
	}
	.stdForm input.nosize{
		width: auto;
		border: 0;
		margin-bottom: 5px;
		float: none;
		display: inline;	
	}
	.stdForm label.nosize{
		float: none;
		display: inline;
	}
		/* ========== */
		/* = Search = */
		/* ========== */
		#searchForm{
			float: right;
		}
		.searchBtn{
			height: 24px;
			width: 24px;
			text-indent: -9999px;
			line-height: 0;
			vertical-align: middle;
			background: #fff url( ../styleImages/buttons/searchSubmit.png ) no-repeat 0 0;
			padding: 0;
			border: 0;
			cursor: pointer;
			cursor: hand;
		}
		.searchBox{
			vertical-align: middle;
		}
		#searchForm label{
			height: 24px;
			line-height: 24px;
		}
		/* ============ */
		/* = Register = */
		/* ============ */
		#registerForm{
			float: none;
		}
		#registerForm .half{
			width: 50%;
			float: left;
		}
		/* ie6 & ie7 weirdness */
		* html #registerForm .half{
			width: 49.9%;
		}
		#registerForm div[className="half"]{
			width:49.9%;
		}
		* html #registerForm .half fieldset{
			margin-bottom: 0;
		}
		#registerForm div[className="half"] fieldset{
			margin-bottom: 0;
		}
		#registerForm .half fieldset{
			margin-left: 10px;
		}
		#registerForm fieldset.left{
			margin: 0 10px 0 0;
		}
		#registerForm label{
			width: 120px;
			font-size: 0.91em;
		}
		#registerForm .nudge label{
			margin-left: 26px;
		}
		* html #registerForm .nudge label{
			margin-left: 8px;
		}
		#registerForm legend{
			font-weight: bold;
			color: #333;
		}
		#registerForm label.bigger{
			width: 200px;
			vertical-align: middle;
		}

		/* =========== */
		/* = Profile = */
		/* =========== */
		#profileForm {
			float: left;
		}
		#profileForm input {
			width: 240px;
		}
		#profileForm label {
			width: 7em;
		}
		#profileForm select {
			width: 242px;
		}
		
		/* =================== */
		/* = Forgot Password = */
		/* =================== */
		
		#forgotPass label {
			width: 3em;
		}
		#forgotPass input {
			width: 15em;
		}
		
		/* ========= */
		/* = Login = */
		/* ========= */
		
		#loginForm label{
			width: 8em;
		}
		
		/* ===================== */
		/* = Delivery Addresss = */
		/* ===================== */
		
		#delAddressForm label{
			width: 7.5em;
		}
		#delAddressForm input, #delAddressForm select{
			width: 11.5em;
		}
		
		/* =========== */
		/* = Gateway = */
		/* =========== */
		
		#gateway label{
			width: 14em;
		}
		#gateway .matchLabel{
			padding-left:14.6em;
		}
		
		/* ============ */
		/* = Products = */
		/* ============ */
		
		#prodForm label{
			width: 13em;
		}
		#prodForm select{
			width: 15.5em;
		}
		
		/* ========== */
		/* = Orders = */
		/* ========== */
		
		#cartTable select{
			width: auto;
			font-size: 0.91em;
		}
		
	/* zero some elements */
	.stdForm input.zero, .stdForm select.zero {
		width: auto !important;
	}

	/* =================== */
	/* = Product Details = */
	/* =================== */
	#prodOpts strong, #purchase strong {
		width: 4.5em;
		display: block;
		float: left;
		margin-right: 3px;
	}
	#prodImg {
		padding: 15px 0;
		text-align: center;
	}
	#purchase {
		margin-top: 15px;
	}
	
	
	/* ============= */
	/* = Site Docs = */
	/* ============= */
	ul#faqs{
		list-style: circle inside;
		margin-bottom: 15px;
		font-size: 0.91em;
	}
	ul.pdflist{
		margin-bottom: 15px;
		background: #fff;
	}
	ul.pdflist li, p.pdflink{
		background: url(../styleImages/icon_acrobat.gif) no-repeat;
		padding-left: 20px;
		position: relative;
		display: block;
	}
	* html p.pdflink{
		border-bottom: 1px solid #fff;
	}
	* html div.important p.pdflink{
		border-bottom: 0;
	}
	div#testim p{
		padding-bottom: 14px;
		border-bottom: 1px solid #aaa;
		font-style: italic;
	}
	div#testim p.first{
		font-style: normal;
	}
	ul.prodDesc{
		padding-left: 20px;
		margin-bottom: 15px;
	}
	ul.prodDesc li{
		width: auto;
		float: none;
		list-style: circle outside;
	}
	div.important{
		background: #ffff99;
		border: 1px solid #aaa;
		padding: 5px;
		color: #333;
		margin-bottom: 15px;
		position: relative;
	}
	div.important h2{
		font-size: 1.2em;
		text-align: center;
		border: 0;
		background: #ffff5c;
		padding: 3px;
		font-weight: bold;
	}
	div.important strong{
		font-weight: bold;
	}