/**********************************************************************************************
	Main Sections in CSS:
	
	1.	BASIC ELEMENTS
		Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
	
	2.	LAYOUT
		Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
		
	3.	PAGE COMMON STYLES
		Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc
	
	4.	PAGE SPECIFIC STYLES
		Define content styles that are specific to a particular page
	
***********************************************************************************************/


/* import core styles */
@import url(base.css);


/*------------------------------------------
// 1.BASIC ELEMENTS
//	 Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc.
//------------------------------------------*/
html{ height:100%;}
body { color:#000; font-family: Arial, Helvetica, sans-serif; background:#0a0a0a;}
h1, h2, p, li, a{ line-height:1.2em;}



/*------------------------------------------
// 2.LAYOUT
//   Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
//------------------------------------------*/

/*---- Container ----*/
div#container{ background:url(../images/container.jpg) 0 100% repeat-x; padding-bottom:167px; min-width:970px;}

/*---- wrapper ----*/
div.wrapper{ width:980px; margin:0 auto;  }

/*---- header ----*/
div#header div.wrapper{ background:url(../images/header/header-bg.jpg) 0 0 no-repeat; height:187px; padding-top:15px;}

/*---- Navigation ----*/
div#navigation div.wrapper{ background:url(../images/navigation/nav-bg.jpg) 0 0 repeat-x; margin-bottom:4px;}

/*---- Content ----*/
div#content div.wrapper{ background:#fff url(../images/content/content-bg.jpg) 0 0 no-repeat; padding:30px 32px 30px 40px; width:898px; min-width:898px;}

/*----main ----*/
div#main{ width:475px; float:left; margin-bottom:34px;}

/*----sidebar ----*/
div#sidebar{ width:381px; float:right; margin-bottom:34px; padding-top:5px;}
div#sidebar h2{ font-size:170%; color:#002963; margin-bottom:13px; line-height:18px;}

/*---- Footer ----*/
div#footer div.wrapper{  position:relative; }


/*------------------------------------------
// 3. PAGE COMMON STYLES
//	  Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc
//------------------------------------------*/

/*----Logo ----*/
div#header div.logo h1 a{ background:url(../images/header/logo.png) 0 0 no-repeat; width:222px; height:172px; display:block; margin:0px auto; padding-top:15px;}

/*---- Navigation ----*/
div#navigation ul{ 
	float:left; 
	width:880px; /*800 770 regular site - with search bar it would be 610px*/
	overflow:hidden;
}

div#navigation ul li{ float:left; font-size:140%; background:url(../images/navigation/divider.jpg) 100% 0 no-repeat; padding-right:2px;}
div#navigation ul li a{ color:#fff; line-height:43px; display:block; text-decoration:none; padding:0 32px;}
div#navigation ul li.first a{ background:url(../images/navigation/li-first-bg.jpg) 0 0 no-repeat;}
div#navigation ul li.last{ background:none;}

div#navigation ul li a:hover, div#navigation ul li a.active{ background:url(../images/navigation/li-hover.jpg) 0 0 repeat-x;}
div#navigation ul li.first a:hover, div#navigation ul li.first a.active{ background:url(../images/navigation/li-first-hover.jpg) 0 0 no-repeat;}

/*---- Navigation - search-form ----*/
div#navigation div.search-form{ width:192px; float:right; padding-top:10px;}
div#navigation div.search-form input{ float:left;}
div#navigation div.search-form input.textbox{ font-size:110%; color:#535454; padding:3px 4px 5px; border:0; width:146px; margin-right:2px; margin-top:1px;}

/*----Content ----*/
div#content h1{ font-size:270%; color:#002963; font-weight:normal; clear:both; text-align:center;}

/*----Main ----*/
div#main a{ font-weight:bold; color:#e50d0d;}
div#main P{font-size:130%; color:#4d4e4f;}
div#main h2{ font-size:170%; color:#002963; margin-bottom:13px; line-height:18px;}
div#main h3{ font-size:130%; color:#002963; margin-bottom:13px; line-height:18px;}
div#main ul{ margin-left:14px; margin-bottom:15px;}
div#main ul li{ font-size:130%; color:#4d4e4f; line-height:19px; background:url(../images/content/list-bg.gif) 0 7px no-repeat; padding-left:27px;}

div#main ol{ margin-left:32px; margin-bottom:15px;}
div#main ol li{ font-size:130%; color:#4d4e4f; line-height:19px; list-style:decimal; padding-left:10px;}


/*----Sidebar ----*/
div#sidebar img{ border:#808282 1px solid;}

/*----Footer ----*/
div#footer div.footer-nav{ padding:12px 0 8px;}
div#footer div.footer-nav ul{ text-align:center;}
div#footer div.footer-nav ul li{ font-size:110%; color:#fefefe; display:inline; padding:0 3px;}
div#footer div.footer-nav ul li a{ color:#fefefe;}

div#footer p{font-size:110%; color:#fefefe; text-align:center; line-height:18px;}
div#footer p a{color:#fefefe;}

div#footer div.wrapper img.car-bottom{ position:absolute; left:295px; bottom:-168px;}


/*------------------------------------------
// 4.1  CATALOGUE PAGE SPECIFIC STYLES
//------------------------------------------*/

/*---- Products-galary ----*/
div#products-galary div.wrapper{ background:url(../images/products/galary-bg.jpg) 0 0 repeat-y; }
div#products-galary div.wrapper div.inner-wrapper{ background:url(../images/products/galary-top-bg.jpg) 0 0 no-repeat; padding:15px 13px 12px 17px;}
div#products-galary ul li{ float:left; background:url(../images/products/product-bg.png) 100% 100% no-repeat; padding:0 8px 10px 0; margin:0 5px 8px 0;}
div#products-galary ul li.last{ margin-right:0;}
div#products-galary div.box{ background:#FFF; padding:6px;}
div#products-galary div.box h2{ font-size:150%; color:#002963; margin:0 0 5px 7px;}
div#products-galary div.box img{ border:#969898 1px solid;}
div#products-galary div.box p{ font-size:120%; color:#3a3a3a; line-height:18px; text-align:right; padding-right:5px;}
div#products-galary div.box p a{color:#3a3a3a;}



/*------------------ Forms ---------------------------*/
.form-column {
	font-family: Verdana, Geneva, Arial, Helvetica;
	float: left;
	width: 351px;
	display: inline;
	margin: 10px 20px 0;
	padding-bottom: 15px;
}

.plan FORM {color: #434343;}
.features LABEL {
	width: 125px;
	float: left;
	margin-right: 10px;
	text-align: right;
	font-size: 12px;
	font-weight: bold;
	margin-top: 2px;
}
.line, .radio, .checkbox {
	float: left;
	width: 100%;
	margin-top: 13px;
}
.features SELECT, .line INPUT,.line TEXTAREA {
	background: #ffffff;
	font-size: 12px;
	border: 1px solid #c8c8c8;
	color: #434343;
	font-family: Arial, Helvetica, sans-serif;
	width: 163px;
}
.line TEXTAREA {
	width:212px;
}
.features SELECT.small-select {
	width: 39px;
}
.features SELECT.medium-select {
	width: 45px;
}
.features SELECT.big-select {
	width: 67px;
}
.form-column.odd {
	float: right;
}
.form-box {
	float: right;
	width: 214px;
}
.features .form-box LABEL {
	font-size: 11px;
	width: auto;
}
.features .form-box INPUT {
	float: left;
}
.form-box SPAN {
	font-size: 11px;
	width: 62px;
	float: left;
	margin-left: 7px;
}
.line INPUT {
	width: 208px;
	padding: 0 3px;
}
.line INPUT.medium-input {width: 160px;}
.features SELECT.large-select {
	width: 69px;
}
.features LABEL.width-auto {
	width: auto;
	float: none;
	margin: 2px 5px 0;
}
.line INPUT.small-input {
	width: 53px;
}
.float {
	float: right;
}
.form-column.right {
	float: right;
	margin-right: 30px;
}
.features SELECT.state {
	width: 98px;
}
.relax {
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
}
.features form BUTTON.continue {
    width: 131px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/login.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 135px;
    float: left;
}


.features form BUTTON.search {
    width: 131px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/search.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 135px;
    float: left;
}

.features form BUTTON.createacct {
    width: 186px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/create-account.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 135px;
    float: left;
}

.features form input.registerwarr,.features input.registerwarr{
    width: 186px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/register-warranty.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 135px;
    float: left;
}
.features form input.registerwarr{
 margin:23px 0 0 335px;
}


.features form input.btnstatement{
	width: 165px;
    height:43px;
    border: none;
    cursor: pointer;
    background:url("../images/content/pay-by-statement.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 220px;
    float: left;
}

.features form input.btncreditcard{
	width: 165px;
    height:43px;
    border: none;
    cursor: pointer;
    background:url("../images/content/pay-by-creditcard.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 135px;
    float: left;

}

input#agree{
	float:left;
	width:50px;
	outline:none
}

label.error{
	color:#FF0000;
	margin-left:135px;
	font-weight:normal;
	width:300px;
	text-align:left;
	padding:4px 0 0 0;
}
form BUTTON.update {
    width: 131px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/update.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin: 13px 0 0 135px;
    float: left;
}

form input.cancel {
    width: 186px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/cancel.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin:23px 0 0 335px;
    float: left;
}

form input.submit {
    width: 186px;
    height: 38px;
    border: none;
    cursor: pointer;
    background:url("../images/content/submit.jpg") no-repeat left top;
    outline: none;
    text-indent: -2000em;
    display: inline;
    margin:23px 0 0 335px;
    float: left;
}