﻿/* GLOBAL MARGIN AND PADDING
-------------------------------------*/

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }



/* MAIN SETTINGS
-------------------------------------*/

div#body ul li { list-style: none;}

div#content ul {margin: 0 0 12px 0px; list-style: none;}

div#content ul li {background: url('images/arr_plans.gif') no-repeat 0 4px; margin-top: .7em; padding-left: 10px;}

div#content strong {color: #646D74;}

div#content a {color: #006AC8;}

div#content a:hover {color: #000000;}

html { height: 100%; margin-bottom: 1px; }

body { margin: 0px; padding: 3px 0px 0px; background:  url('images/bgstretch.gif') #fff repeat-x;}

body, td, input, textarea, select {color: #666; font: normal 14px Trebuchet, Tahoma, Arial, Helvetica, sans-serif; }

form { display: inline; }
img { border: 0px; }

.fl { float: left; }
.fr { float: right; }

.clear { clear: both; margin: -1px 0px 0px !important; height: 1px !important; margin: 0px; height: 0px; }

input, textarea { padding: 1px 3px; }
select { padding: 1px 0px 1px 3px }

p { margin: 0px 0px 10px; padding: 0px; }
p.bq { margin: 0px 0px 10px; padding: 0px 0px 0px 27px; }

span.u { text-decoration: underline; }

SPAN.currpage   {
            	color: #FF0000;
            	font-weight: bold;
            	}
            	
    
           
/* LINK STYLES
---------------*/

a {	  color: #646D74; text-decoration: none; }
a:hover { color: #dc183c; text-decoration: none; }



/* TOP LOGO
------------*/

div#logo { background: url('images/logo-ESE.gif') no-repeat 0 0;
    	  position: absolute; top: 35px; display: block; height: 64px; width: 210px }

h2      { margin: 0px 0px 7px; padding: 0px 0px 0px 15px; font: bold 14px Trebuchet, Tahoma, Arial, Helvetica, sans-serif;
	  	color: #646D74; background: url('images/arrcont.gif') 0px 2px no-repeat ;}

h2.x    { margin: 3px 0px 3px; padding: 0px 0px 0px 15px; 
	 	font: bold 14px Trebuchet, Tahoma, Arial, Helvetica, sans-serif; color: #000000; background: #D6F4FD;}

h2.y    { margin: 1px 0px 1px; padding: 0px 0px 0px 0px;
 	 	font: bold 1px Trebuchet, Tahoma, Arial, Helvetica, sans-serif; color: #ffffff; background: #ffffff;}

h2.z    { margin: 3px 0px 3px; padding: 0px 0px 0px 5px; 
		font: normal 14px Trebuchet, Tahoma, Arial, Helvetica, sans-serif; color: #88C8FE; 
		background: #D6F4FD; text-align:center}
	 		 	


/* STRUCTURE - ***** #HEAD H2 INCLUDES IMAGE LATEST ELECTRONICS *****
--------------------------------------------------------------------*/
#root { position: relative; width: 870px; margin: 0px auto; min-height: 300px; }

#head { position: relative; height: 100px; top: 0px; }

     #head h1 { width: 120px; height: 84px; position: absolute; left: 18px; top: 18px; 
                       background: none; padding: 0px; margin: 0px; }
 
     #head h2 { width: 327px; height: 62px; position: absolute; left: 240px; top: 40px; text-indent: -10001px; 
                overflow: hidden; background: url('images/LatestTech.jpg') no-repeat; padding: 0px; margin: 0px }
  
     #head h3 { width: 275px; height: 58px; position: absolute; left: 600px; top: 40px; 
                        background: none; padding: 0px; margin: 0px; color: #fff; }

     #head p { text-align: left; position: absolute; right: 0px; top: 9px; color: #777;}

     #head p a { color: #777; } #head p a:hover { color: #006AC8;}

     #head p a.pd { background: url('images/separator.gif') no-repeat 0% 100%; 
                    padding-left:10px; padding-right:10px; padding-top:0px; padding-bottom:0px }

#menu { background: url('images/menubg.gif') repeat-x; height: 15px; list-style: none; 
               margin: 0px; padding: 2px 0px 0px; text-align: center;} 

  	#menu li { float: left; height: 15px; font: bold 11px/13px Trebuchet, Tahoma, Arial, Helvetica, sans-serif; 
                               background: url('images/separator.gif') no-repeat 0% 100%;}
                   	
	#menu li.f { background: url('images/separator.gif') no-repeat 0px 0px; }

	#menu li.s { background: none; }
  
	#menu li a { color: #ffffff; padding: 0px 20px; } #menu li a:hover, #menu li.over a { color: #000000; }
  

#croot 	{ border-right: 3px solid #e2e2e2; border-bottom: 3px solid #e2e2e2;  
                 background: #fff url('images/k_bg_content.gif') 155px 0px repeat-y; }

#croot0 { border-right: 3px solid #e2e2e2; border-bottom: 3px solid #ffffff; 
					background: #fff url('images/k_bg_content.gif') 155px 0px repeat-y; }

#path { height: 30px; border-bottom: 2px solid #e2e2e2; background: #f0f0f0; padding: 0px 5px 0px 6px; }
	
	#path div.fl { padding: 8px 0px 0px; font-size: 12px; }
	
	#path div.fl a {color: #646D74; } #path div.fl a:hover {color: #006AC8;}
  
	#path div.fr { width: 243px; padding: 0px 0px 0px 0px; margin: 6px 0 0 0px;}
  
#side { float: left; border-top: 1px solid #E2E2E2; width: 155px;}

#content { float: right; width: 640px; margin: 0px 10px 0px 40px; padding: 20px 10px 0px 0px; 
                  background: url('images/bdg.gif') repeat-x;}
                  
#contentpopup { float: right; width: 650px; margin: 0px 0px 0px 0px; padding: 20px 40px 0px 40px; 
                  background: #fff url('images/k_bg_content.gif') repeat-x;}

                  
#croot div.cx { background: #fff; margin: 0px; padding: 15px 0px; }

#footer { height: 25px; padding: 4px 8px 0px; color: #888; }

  	#footer a { color: #888; text-decoration: underline; } #footer a:hover { color: #006AC8; }


/* LEFT MENU
-------------------------------------*/

#men { width: 139px;}

#men ul { margin-left: 0; padding-left: 0; list-style-type: none; margin:0px;}

#men a  {display: block; padding: 2px; width: 139px; background: #efefef; 
	border-bottom: 1px solid #fff; border-left: 1px solid #fff; padding: 4px 2px 2px 12px; }

#men a:link, #menitems a:visited  { text-decoration: none; font-weight:normal;}

#men a:hover { background-color: #8CD2F5;}



/* LEFT MENU (USING CLASSES)
----------------------------*/

div.cmen { width: 139px;}

div.cmen ul { margin-left: 0; padding-left: 0; list-style-type: none; margin:0px;}

div.cmen a  {display: block; padding: 2px; width: 139px; background: #efefef; 
	border-bottom: 1px solid #fff; border-left: 1px solid #fff; padding: 4px 2px 2px 12px; }

div.cmen a:link, div.cmenitems a:visited  { text-decoration: none; font-weight:normal;}

div.cmen a:hover { background-color: #8CD2F5;}





div.testimonials { 
				background: #efefef; border: 1px solid #ffffff; padding: 8px 2px 8px 12px;
                font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; line-height:12px;
                 }

div.testimonials p { padding: 3px 0px 0px 0px; margin: 0px;}

div.testimonials { color: #000000; }

div.leftm { background: #efefef; border-bottom: 1px solid #e2e2e2; 
                 border-left: 1px solid #fff; padding: 0px 0px 0px 0px; }

div.leftm a { border: 2px solid #006AC8;}


div.leftm p { padding: 6px 0px 6px 40px; margin: 0px; border-bottom: 1px solid #fff; }

div.leftcart { background: #efefef; border-bottom: 1px solid #e2e2e2; border-left: 1px solid #fff; 
                     padding: 4px 0px 4px 0px; }

div.rightcart { background: #8cd2f5; border-bottom: 1px solid #8cd2f5; border-left: 1px solid #fff; 
                     padding: 4px 0px 4px 0px; }

div.leftm p.p { font-weight: bold; background: url('images/blt.gif') no-repeat 15px 6px }
                    
div.leftm p.guarantees { padding: 2px 0px 3px 3px; }

div.leftm p.m { background: url('images/i_mail.gif')  20px 10px no-repeat; 
                       border-bottom: none; margin: 0px; }
 
#side a.am { position: relative; left: 155px; font-weight: bold; color: #e4812a; 
	      background: url('images/li_sw.gif') no-repeat 0px 50% }
 
#side a.am:hover { text-decoration: underline; }



/* LEFT MENU LI STYLES
-------------------------------------*/

a.fm { font-weight: bold; }

ul#sidemenu { background: #EFEFEF; border-bottom: 1px solid #e2e2e2; padding: 0px 0px 0px; margin: 0px; list-style: none; }
    ul#sidemenu li { border-top: 1px solid #fff; }
    ul#sidemenu li.x { border-top: none; }
    ul#sidemenu li a { display: block; width: 188px; padding: 5px 0px 5px 27px; color: #666; }
    ul#sidemenu li.x a { padding: 10px 0px 6px 27px; }
    ul#sidemenu li a:hover, ul#sidemenu li a.x { background: #8CD2F5; }


div#drp {margin:0 0 0 0; padding:0 0 140px 0;}

div#drp ul {margin: 0px 0 7px 0; padding-top: 2px;}

div#drp ul li {background: url('images/arr_plans.gif') no-repeat 0 .5em; margin-top: .2em; padding-left: 8px; color: #808080;
			   font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; Font-weight: normal;
			   line-height: 12px }

div#drp ul li strong{color: #646D74;}



/* HOME PAGE OMAGE BOX STYLES
-------------------------------------*/

div.plan1 	{ 
        	border: 0px; width: 146px; height: 385px; float: left; padding: 10px 0px 35px 25px; line-height: 22px;
	 		font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 20px; Font-weight: bold; 
            }

div.plan2 	{
        	border:0px; width: 170px; height: 385px; float: left; padding: 0px 0px 0px 54px; margin: 0px; 
	 		font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:17px;
         	}

div.plan3 	{
            border:0px; width: 146px; height: 385px; float: left; padding: 10px 0px 35px 78px; line-height: 22px;
          	font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 20px; Font-weight: bold;
            }

div.plan4 	{
            border:0px; width: 580px; height: 102px; float: left; padding: 0px 0px 0px 25px; line-height: 17px;
          	font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; Font-weight: bold;
            }


.sub  	{
    	height: 19px; width: 48px; border: 0px; font-size: 10px; color: #666666; background: #efefef;
		font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif;
       	}
       	
       	
/* THREE COLUMN 170 WIDTH EACH
------------------------------*/
	
div.col1 	{ 
        	border: 0px; width: 170px; height: 210px; float: left; padding: 25px 0px 0px 24px; line-height: 16px;
	 		font-size: 14px; Font-weight: bold;
            }

div.col2 	{
            border:0px; width: 170px; height: 210px; float: left; padding: 25px 0px 0px 50px; line-height: 16px;
          	font-size: 14px; Font-weight: bold;
            }


/* TWO COLUMN SPLIT STYLES
-------------------------------------*/

div.SplitLeft {
	    border:1px; width: 430px; float: left; font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; 
	    line-height:18px; background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666; 
	    }

div.SplitRight 	{
             	border:1px; width: 160px; float: right; padding-left: 10px; min-height: 200px;
	       		background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	      		}

div.SplitCentre {
	    border:1px; width: 620px; float: left; font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; 
	    line-height:18px; background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	    }




/* CONTACT BOX STYLES
-------------------------------------*/

div.contactleft {
    	        border:0px; width: 340px; height:210px; float:left; padding: 0px 0px 0px 0px;
	        	font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; line-height:12px;  
	        	background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	       		}

div.contactright 	{
    	        	border:0px; width: 200px; height:200px; float:left; padding: 30px 10px 0px 31px;
	          		background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	         		}



/* DELIVERY BOX STYLES
-------------------------------------*/

div.deliveryleft 	{
    	        	border:0px; width: 380px; height:200px; float:left;Padding: 30px 15px 0px 0px;
	        		font-family: Trebuchet, Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:18px;
	        		background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	        		}



/* CATEGORY INTRODUCTION BOX STYLE
----------------------------------------------*/   

div.CatIntro 	{
	     		border:0px; width: 520px; height:170px; float:left; padding: 20px 0px 0px 60px;
	     		background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	     		}

div.CatShort 	{
	     		border:0px; width: 520px; height:85px; float:left; padding: 20px 0px 0px 50px;
	     		background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;
	     		}

div.CatIntroShort 	{
	             	border:0px; width: 420px; height:85px; float:left; padding: 20px 0px 0px 80px;
	             	background:#ffffff url('images/white350X170.gif') no-repeat bottom right; color: #666666;    
	             	}

div.Category2 	{
	         	border:0px; width: 164px; height:166px; float:left; padding: 20px 0px 0px 100px;
	         	background:#ffffff url('images/white164X166.gif') no-repeat bottom right; color: #666666;
	        	}
          
div.Category3 	{
	        	border:0px; width: 164px; height:166px; float:left; padding: 20px 0px 0px 30px;
	        	background:#ffffff url('images/white164X166.gif') no-repeat bottom right; color: #666666;
	       		}

div.cards   	{
	     		border:0px; width: 520px; height:85px; float:left; padding: 20px 0px 0px 60px;
	     		background:#ffffff url('images/CreditCards.jpg') no-repeat bottom right; color: #666666;
	     		}	  
  
   		
/* SITE MAP FONT STYLE
----------------------------------------------*/   

.map { font-family: Trebuchet, Tahoma, Arial, Times New Roman, Helvetica, sans-serif; font-size: 12px; font-weight: normal;}	

.maph { font-family: Trebuchet, Tahoma, Arial, Times New Roman, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #DC143C; }	

.mapc { font-family: Trebuchet, Tahoma, Arial, Times New Roman, Helvetica, sans-serif; font-size: 12px; font-weight: bold;}



/* OTHER ADDITIONS
----------------------------------------------*/ 

hr.review {
	    	border-left:0px dashed #006AC8; border-right:0px dashed #006AC8; border-top:1px dashed #006AC8; border-bottom:0px dashed #006AC8; height: 0; 
		  }	  	

		  

/* TABLE BACKGROUND COLOURS
----------------------------------------------*/
TABLE.cobtbl	{
              	background-color: #006AC8;
            	} 
            	             
TD.cobhl	{
          	background-color: #D6F4FD;
            }
            
TD.cobll	{
            background-color: #F5F5F5;
            color : #000080;
            }

            
/* PRODUCT PRICE - Green
-------------------------*/

SPAN.price, .detailprice, .prodprice {
COLOR: #44BA04;
padding-top: 4px;
font-weight:bold;
text-align:center;
}

div.listprice	{
text-align:center;
}


/* PRODUCT ID - BLUE
----------------------*/

div.detailid, .prodid {
COLOR: #006AC8;
padding-top: 4px;
font-weight:bold;
text-align:left;
}
	

/* CATEGORY LAYOUT
----------------------*/

P.catname {
margin-top: 0px; 
margin-bottom: 4px; 
vertical-align:top; 
text-align: left;
}

P.catdesc { 
margin-top: 0px; 
margin-bottom: 4px; 
vertical-align:top;
}

IMG.catimage { 
border:0px;
border-color: #000; 
border-style: solid; 
vertical-align:top; 
}

TD.catimage { 
vertical-align:top; 
} 

TD.catname { 
vertical-align:top; 
text-align: left; 
} 

TD.catnavigation { 
vertical-align:middle;
text-align: left; 
}


/* SMALL FONT FOR PRODUCT SHORT DESCRIPTION
-------------------------------------------*/
div.proddescription {
font-size: 12px;
}


/* ALIGN PRODUCT OPTIONS
------------------------*/
div.prodoptions {
text-align: left;
}


/* PRODUCT RATING
------------------*/

.review {
color: #000;
font-weight: bold;
}
        
.showallreview, .reviewcomments {
color: #000;
font-weight: normal;
}
        
.reviewname {
color: #999;
font-weight: bold;
}
        
hr.review {
border-left:0px dashed #006AC8; border-right:0px dashed #006AC8; border-top:1px dashed #006AC8; border-bottom:0px dashed #006AC8; width: 100%;
text-align:left;
height: 0;

}
