﻿/*
dee0e2 - light blue
264c78 - navy blue
ffc801 - yellow
*/

body 
{
   
    margin-top:20px;
    
    background-color: #264c78;
    font-family:  Arial, Helvetica, sans-serif;

}

a img
{
    border:0;
}

#container
{
  margin: 0 auto;
  width:800px;
  padding:0;
   
}

#content
{
background-color:#dee0e2;  
padding:10px 0; 

}

#header
{
 
 background-image:url('../images/spires-tyres-header.gif');
 height:343px;
 width:800px;  
}

/*------------------------------------------------------------*
**  Top horizontal menu
**------------------------------------------------------------*/

#horiz_menu 
{
    clear:both;
    background-color:#dee0e2;
   
    height:2em;
    padding:0px 10px 0 10px;
    margin:0;
   
       
}
 	
#horiz_menu ul
{
    margin:0;
    padding:0;
    
}
	
#horiz_menu li {
	list-style-type: none;
	display:inline;
	
	
	
	}
	

	

#horiz_menu li a {
	
    text-decoration: none;
	font-style:italic;
	font-weight:bold;
    color: white;
    width: 104px;
    height: 31px;
    float: left;
    margin-right: 5px;
    
    padding-top:5px;
    background:url('../images/button.gif') top center no-repeat;
    text-align:center;
}	
	
#horiz_menu li a:hover 
{ 
    color: #ffc801; 
 }
 
#horiz_menu li a.on 
{ 
    color: #ffc801; 
}

.clear
{
    clear:both;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	TWO COLUMN - CONTENT CONTAINER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-two-column {
	position:relative;
	width:800px;
	background-color:inherit;
	
	
	}

#left-column 
{
    
    padding-left:10px;
    
    width:260px;
	float:left;
	
	}

#right-column {
    width:480px;
	float:right;
	}

/*
#content-container-two-column {
	clear:both;
	
	margin:0;
	
	
	width:800px;
	
	
	

	}

#left-column {
	width:270px;
	float:left;
	margin:0;
	padding:0;

	}

#right-column {
	float:right;
	width:480px;
	margin:0;
	padding:0;

	}
*/
	
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

	THREE COLUMN - CONTENT CONTAINER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
	clear:both;
	
	margin:0;
	padding:0;
	
	width:800px;

	}

#left-column-of-three {
	width:280px;
	float:left;
    
	}

#middle-column-of-three
{

	padding-top:10px;
	

	width:330px;
	float:left;
	
	
    
}

#right-column-of-three {
	float:left;

	margin-left:30px;
	padding:0;
	
	}
	



/* Quotation panel */

#quote-panel
{
    float:left;
    background:url('../images/quote-panel.gif') top center no-repeat;
  
    
    width:250px;
    height:160px;
    margin-bottom:10px;
       
}

#quote-panel table
{
    margin:0;
    padding:0;
    margin-left:140px;
    margin-top:20px;
    
    padding:0; 
    font-size:small;   
    
}



#quote-panel table .drop
{
   
}

#quote-button 
{
    width: 104px;
    height: 31px;
    float: left;
    margin-left: 135px;
    margin-top:5px;
    padding-top:5px;
    background:url('../images/button.gif') top center no-repeat;
    text-align:center;
}

.quotebutton
{
    width: 104px;
    height: 31px;
    float: left;
    margin-left: 135px;
    margin-top:5px;
    padding-top:5px;
    text-align:center;
    
}

#quote-button p
{

}

#quote-button a
{
   text-decoration: none;
   font-style:italic;
   font-weight:bold;
   color: white;
    
}


#quote-button a:hover
{
        color: #ffc801; 
}

/* Order panel */

#order-panel
{
    float:left;
    background:url('../images/order-panel.gif') top center no-repeat;
    
    
    width:250px;
    height:200px;
    margin-bottom:10px;
       
}

#order-panel table
{
    margin:0;
    padding:0;
    margin-left:140px;
    margin-top:20px;
    
    padding:0; 
    font-size:small;   
    
}



#order-panel table .drop
{
   
}

#order-button 
{
    width: 104px;
    height: 31px;
    float: left;
    margin-left: 135px;
    margin-top:5px;
    padding-top:5px;
    background:url('../images/button.gif') top center no-repeat;
    text-align:center;
}

#order-button p
{

}

#order-button a
{
   text-decoration: none;
   font-style:italic;
   font-weight:bold;
   color: red;
    
}


#order-button a:hover
{
        color: #ffc801; 
}


/* Misc panels */


#price-promise
{
   float:left;
   font-style:italic;
   font-weight:bold;
   color: red;
   width:300px;
}

#customer-quote
{
   margin-top:10px;
   margin-left:10px;
   font-style:italic;
   font-weight:bold;
   font-size:small;
   color: black;
   width:260px;
    
}

#customer-quote a
{
   margin-left:10px;
   font-style:italic;
   font-weight:bold;
   color: red;
    
}

#recycled-tyres
{
  background:url('../images/recycle-tyres.gif') top left no-repeat;
  width:250px;
  height:224px;
  
  color:white;
}


#recycled-tyres p
{
   
    
    padding-top:170px;
    padding-left:10px;
    
}




#puncture-repair
{
    background:url('../images/puncture-repair.gif') top left no-repeat;
    width:250px;
    height:166px;
  
    float:left; 
    color:White; 
    font-weight:bold;
    padding:10px;
    margin-bottom:10px;
  
}

#puncture-repair h3
{
    margin:80px 0 5px 0;
    padding:0;
}

#puncture-repair a,#puncture-repair a:visited
{
 color:White;   
}



#benefit-panel
{
 float:left;
 background:url('../images/white-panel.gif') top left no-repeat;
 width:250px;
 height:310px;

 padding:10px;
 font-size:small;
 color:#264c78;
 margin:0;
    
}

#links-panel
{
 float:left;
 background:url('../images/links-panel.gif') top left no-repeat;
 width:260px;
 height:160px;

 padding:10px;
 font-size:small;
 color:#264c78;
    
}



#motoffer
{
 margin-top:10px;
 padding:0;  
 float:left;
 

 
}

#motoffer p
{
 margin:0;
 padding:0;   
    
}

#services-panel
{
 
 background:url('../images/services-panel.gif') top left no-repeat;
 width:270px;
 height:380px;
 margin-top:10px;
 padding:10px;
 
 font-style:italic;
 color:white;

    
    
}

#services-panel h2
{
  
    margin:8px 0;
    
}


#services-panel h4
{
  
    margin:5px 0;
    color:yellow;
}

#services-panel p
{
    margin:0;
    font-weight:bold;
    
}


#contact-page
{
 padding:10px;
 color:#264c78; 

    
    
}

#contact-page h1
{
   
}

contact-page p
{
 margin:0;   
}

#customer-satisfaction
{
    
 
 padding:0 10px;
 margin-top:10px;
 
 font-style:italic;
   
}

#feedback-page p.quote
{
    font-style:italic;
}


#customer-satisfaction h2
{
    margin:0;
    padding:0;
    color:#264c78;
}

#customer-satisfaction p
{
  color:#7c9ab3;
  font-weight:bold;
 
    
}


/*------------------------------------------------------------*
**  Bottom navigation menu
**------------------------------------------------------------*/

#nav 
{
	
	clear:both;
	font-size:small;
	text-align:center;
    margin:0;
    
	
}

#nav ul
{
    margin:0;
    padding:5px 0;
}

#nav li
{

  
    display:inline;
    
    
}
	
#nav a 
{
	color:White;
	text-decoration:none;
}

#nav a.active, #nav a:hover  , #nav a.on
{
	text-decoration:underline;
}


#success, #failure
{
    
 padding:10px;
 color:#264c78;


    
}


#footer
{
 
 clear:both;
 color:White;
 font-size:small;
 text-align:center;
 background: url('../images/footer.gif') no-repeat ;

 padding-top:0px;
 height:60px;
 

}

#footer a
{
    color:White;
}

/* Link button code */

a.lnkQuote
{
   color:white;
       
   text-decoration: none;
   font-style:italic;
   font-weight:bold;

   width: 104px;
   height: 31px;
   float: left;
   margin-left: 135px;
   margin-top:5px;
   padding-top:5px;
   background:url('../images/button.gif') top center no-repeat;
   text-align:center;
   
    
}

a.lnkOrder
{
    
   color:red;

   text-decoration: none;
   font-style:italic;
   font-weight:bold;

   width: 104px;
   height: 31px;
   float: left;
   margin-left: 135px;
   margin-top:5px;
   padding-top:5px;
   background:url('../images/button.gif') top center no-repeat;
   text-align:center;
    
    
}




a.lnkQuote:hover,a.lnkOrder:hover {
   
   color: #ffc801;

                                   }

a.lnkQuote:visited,a.lnkOrder:visited{

}

.catalogue_entry
{
    
}


img.catalogue_entry
{
 border:solid 1px black;
 float:right;   
 width:200px;
 height:150px;
    
} 

div.catalogue_entry 
{
 
 color:#264c78; 
 margin:10px;
  
}

