/**********************************************************************************************
	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.
//------------------------------------------*/

body { color:#000; font-family: Arial, Helvetica, sans-serif; background:#7e9e1d url(../images/body-bg.jpg) left top repeat-x; }
h1, h2, h3, h4, h5, h6, p, li { line-height:1.0em; }

/*------------------------------------------
// 2.LAYOUT
//   Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site
//------------------------------------------*/
	
/*---- Container ----*/
div#container { width:825px; margin:0 auto; padding-top:43px; }

div#header{position:relative; height:104px; top:-31px; }

/*---- Content ----*/
div#content{ position:relative; }

/*---- Footer ----*/
div#footer{ background:url(../images/footer/footer-bg.gif) left top no-repeat; padding:10px 36px 0px; height:78px; }


/*------------------------------------------
// 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
//------------------------------------------*/

/*---- Header - Logo ----*/
div#header div.logo{ height:93px; width:246px; float:left; margin-right:40px; }
div#header div.description{ height:93px; width:500px; float:left; margin-right:40px; }
div#header div.box1#info{ margin-top:10px;  width:464px; float:left; }
div#header div.box1#info p{ font-size:160%; color:#aeaeae; font-family:Arial Rounded M, Arial, Helvetica, sans-serif ; line-height:25px; }
div#header div.box1#info p span.highlight { color:#7e9e1d; background:url(../images/header/highlight-icon.gif) left center no-repeat; padding-left:24px;  }
div#header div.box1#info p span.highlight2 { color:#7e9e1d; }
/*---- Header - Logo ----*/

div#header div.box2#info{ margin-top:10px;  width:464px; float:left; }
div#header div.box2#info p{ font-size:160%; color:#aeaeae; font-family:Arial Rounded M, Arial, Helvetica, sans-serif ; line-height:25px; }
div#header div.box2#info p span.highlight { color:#7e9e1d; background:url(../images/header/highlight-icon.gif) left center no-repeat; padding-left:24px;  }
div#header div.box2#info p span.highlight2 { color:#7e9e1d; }

div#header div.box3#info{ margin-top:10px;  width:464px; float:left; }
div#header div.box3#info p{ font-size:160%; color:#aeaeae; font-family:Arial Rounded M, Arial, Helvetica, sans-serif ; line-height:25px; }
div#header div.box3#info p span.highlight { color:#7e9e1d; background:url(../images/header/highlight-icon.gif) left center no-repeat; padding-left:24px;  }
div#header div.box3#info p span.highlight2 { color:#7e9e1d; }

/*----- Bases -----*/
div#header div.logobases{ height:93px; width:780px; float:left; margin-right:40px; }
div#header div.bases#info{ margin-top:10px;  width:780px; float:left; }
div#header div.bases#info p{ font-size:160%; color:#aeaeae; font-family:Arial Rounded M, Arial, Helvetica, sans-serif ; line-height:20px; }
div#header div.bases#info p span.highlight { color:#7e9e1d; background:url(../images/header/highlight-icon.gif) left center no-repeat; padding-left:24px;  }
div#header div.bases#info p span.highlight2 { color:#7e9e1d; }

/*---- Footer ----*/
div#footer ul { float:right; }
div#footer ul li{ display:inline; font-size:140%; color:#fff; }
div#footer ul li a{ color:#fff; }

/*---- Boxes ----*/
div.box div.box-top-left{ background:url(../images/box-top-left.png) left top no-repeat; height:48px; line-height:48px; padding-left:48px; }
div.box div.box-top-left div.box-top-right{ background:url(../images/box-top-right.png) right top no-repeat; height:48px; line-height:48px; padding-right:46px; }
div.box div.box-top-left div.box-top-right div.box-top-middle{ background:url(../images/box-top-middle.gif) left top repeat-x; height:48px; line-height:48px; }

div.box div.box-middle{ background:#fff url(../images/box-middle-bg.gif) 97px 8px no-repeat; padding:0px 25px 1px; }

div.box div.box-bottom-left{ background:url(../images/box-bottom-left.png) left top no-repeat; height:48px; line-height:48px; padding-left:48px; }
div.box div.box-bottom-left div.box-bottom-right{ background:url(../images/box-bottom-right.png) right top no-repeat; height:48px; line-height:48px; padding-right:46px;}
div.box div.box-bottom-left div.box-bottom-right div.box-bottom-middle{ background:url(../images/box-bottom-middle.gif) left bottom repeat-x; height:48px; line-height:48px; }

/*---- Box1 ----*/
div.box1 div.box1-top-left{ background:#f3f3f3 url(../images/header/box1-top-left.gif) left top no-repeat; height:12px; line-height:12px; margin-top:-6px; position:relative; }
div.box1 div.box1-top-left div.box1-top-right{ background:url(../images/header/box1-top-right.gif) right top no-repeat; height:12px; line-height:12px; }

div.box1 div.box1-middle{ background:#f3f3f3; padding:0px 10px 1px; margin-top:-3px; position:relative; }

div.box1 div.box1-bottom-left{ background:#f3f3f3 url(../images/header/box1-bottom-left.gif) left top no-repeat; height:12px; line-height:12px; margin-top:-6px; position:relative; }
div.box1 div.box1-bottom-left div.box1-bottom-right{ background:url(../images/header/box1-bottom-right.gif) right top no-repeat; height:12px; line-height:12px; }

/*------------------------------------------
// 4.1  INDEX PAGE SPECIFIC STYLES
//------------------------------------------*/

/*---- Content - Product Image ----*/
div#content img.product{ float:left; left:-62px; position:absolute; z-index:100; top:-21px; }

/*---- Content - Login Form ----*/
div#content div#login-form { float:right; width:439px; }
div#content div#login-form div.heading{ background:url(../images/content/heading-bg.gif) left top repeat-x; height:30px; padding:0px 23px;  margin:-32px 0px 11px -45px; width:412px; position:relative; }
div#content div#login-form h2{ color:#7e9e1d; font-size:180%; line-height:30px; font-weight:normal; background:#fff; float:left; padding:0px 10px; }
div#content div#login-form h2 span{ background:url(../images/content/step-circle.gif) left 3px no-repeat; float:left; display:block; width:26px; text-align:center; color:#fff; margin-right:10px; }

div#content div#login-form p { margin-bottom:6px; }
div#content div#login-form p label{ width:100px; font-size:130%; color:000; text-align:right; margin-right:10px; line-height:38px; }
/*div#content div#login-form p label{ float:left; width:100px; font-size:130%; color:000; text-align:right; margin-right:10px; line-height:38px; }*/
div#content div#login-form p input.textbox{ background:url(../images/content/textbox-bg.gif) left top repeat-x; border:1px solid #7e9e1d; width:220px; height:16px; padding:10px 5px; font-size:130%;}
/*div#content div#login-form p input.textboxx{ background:url(../images/content/textbox-bg.gif) left top repeat-x; border:1px solid #7e9e1d; width:295px; height:16px; padding:10px 5px; font-size:130%; }*/
div#content div#login-form p input.button{ margin-right:21px; }


div#content div#login-form p span{display:block; float:left;}
div#content div#login-form p span input.radio{ margin:12px 0 0 0; vertical-align:middle; }
div#content div#login-form p span label{ text-align:right; }

div#content div#login-form p.accept { height:37px; line-height:37px; background:#ddf398; width:353px; padding:0px 5px 0px 28px; margin-left:31px; font-size:100%; color:#000; }
div#content div#login-form p.accept input.checkbox{ margin:0px 8px 0px 0px; vertical-align:middle; }

div#content div#login-form p.accept2 { height:10px; line-height:10px; background:#ddf398; width:300px; padding:0px 100px 0px 100px; margin-left:100px; font-size:100%; color:#000; }
div#content div#login-form p.accept2 input.checkbox{ margin:0px 8px 0px 0px; vertical-align:middle; }