/* CSS Document */

/*
 *
 * Page template layout CSS
 *
 */
 
 
/*
   The body is forced down 16px so the top of the header can sit on the
   bottom (17th pixel) of the background graphic (the top keyline).  The
   header border is then filled in by a border-top, without which the header
   block position is forced down by list margin inside it.
   */
body
{
	font-family: Tahoma, Arial, geneva, verdana;
	border: 0;
	padding: 16px 0;
	margin: 0;
	font-size: 11px;
	background-image: url(graphics/top_keyline.gif);
	background-repeat: repeat-x;
	background-position: left top;
	color: #000;
}

h1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0.8em 0 ;
	padding: 0 10px;
	border: 0;
	color: #c4150d;
	font-size: 1.4em;
	
}

h1.shh
{
	display:none;
}

h2
{
	margin: 0;
	color:#000000;
	font-size:1.2em;
	text-align:center;
}

h3
{
	margin: 0;
	border: 0;
	color: #c4150d;
	font-size: 1.2em;
	text-align:center;
}

p
{
font-size:11px;

}

p.terminator
{
	margin: 0;
	padding: 0;
	border: 0;
}

table
{
	padding:0;
	margin:0;
	border: 1px solid grey;
}

table th
{
	border-bottom: 2px solid grey;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #CC0000;
}

table td
{
	text-align:center;
	font-size:10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CC0000;
}

.Redtable {
padding:2px;
width:340px;
margin:0;
	border: 1px solid black;
	background-color: #b70400;

}


.Redtable th {
border-bottom: 1px solid black;
	font-weight: bold;
	color: #FFFFFF;
	

}


.Redtable td {
	color: #FFFFFF;
	

}


#RedtableStreet {
padding:2px;
width:620px;
margin-left:5px;
float:left;
border: 1px solid black;
background-color: #b70400;


}


#RedtableStreet th {
border-bottom: 1px solid black;
font-weight: bold;
color: #FFFFFF;
text-align:left;
}

#RedtableStreet td {
color: #FFFFFF;
text-align:left;
}




img.centre
{
	margin: 0 50px;
	border: 1px solid #999;
	padding: 6px;	
}

#header
{
	margin: 0 auto;
	padding: 0;
	width: 926px;
	height: 170px;
	border-top: 1px solid #a3a3a3;
}

ul#navigation
{
	margin: 139px 0 0 150px;
	padding: 0;
	list-style:none;
	font-size: 0.9em;
}

ul#navigation li
{
	display: block;
	float: left;
	width: 120px;
	text-align:center;
	font-size:12px;
}

ul#navigation li a, ul#navigation li a:visited
{
	color: white; 
	display: block;
	text-decoration: none;
}

ul#navigation li a:hover
{
	color: yellow;
}

ul {
font-size:11px;
}


.fltright {
float:right;

}

.floatLeft {
	float:left;
	padding: 5px;
}


.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}



#page
{
	margin: 0 auto;
	height:auto;
	padding: 0;
	width: 924px;
	border-bottom: 1px solid #666;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
	font-size: 0.9em;
}

#subnavigation
{
	margin: 0;
	padding: 0 2px;
	width: 177px;
	float: left;
}

#subnavigation a, #subnavigation a:visited
{
	display: block;
	width: 90px;
	border: 1px solid white;
	padding: 3px;
	margin: 0 auto;
	text-decoration: none;
	text-align:center;
	color:#666666;
}

#subnavigation a:hover
{
	border: 1px solid #c4150d;
	color: #c4150d;
}

#content
{
	margin: 0 0 0 178px;
	padding: 0;
	border-left: 1px solid #999;
}


#content2
{
	margin:5 0 5 0px;
	border-top:solid 1px #999;
	
}


#content2 img
{
	margin: 8px;
	padding: 8px;
	border:solid 1px #999;
	float:left;
}

#columnone
{
	width: 340px;
	padding: 0 10px;
	float: left;
}

#columntwo
{
	margin: 0 0 0 360px;
	padding: 0 10px;
	border-left: 1px solid #aaa;
}

#columnspantwo
{
	width: 650px;
	padding: 0 10px;
	float:left;
	
	}
	
	
	
	#columnoneStreet
{
	width: 440px;
	padding: 0 10px;
	float: left;
}


#columntwoStreet
{
	margin: 0 0 0 400px;
	padding: 0 10px;
	border-left: 1px solid #aaa;
}

#notavail {margin-top:190px;}

#footer
{
	padding: 6px 0 4px 0;
	border-bottom: 1px solid #666;
	color: #999;
	clear:both;
}

#footernav
{
	margin: 0 auto;
	padding: 0;
	font-size: 0.8em;
	width: 924px;
	text-align:center;
}

#footernav a, #footernav a:visited
{
	text-decoration: none;
	margin: 0;
	padding: 0 6px;
	border-right: 1px solid #999;
	color: #999;
}


#footernav a:hover
{
	color: red;
}

#footernav a.first
{
	margin-left: 178px;
}




/*
 * Page specific CSS
 *
 */

/* Home page */

body#home div#header
{
	background-image: url(graphics/ram_header_home.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
 
body#home #photos
{
	margin: 0 auto;
	width: 640px;
}




body#home #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 14px 0;
}











/* Products page */

body#products div#header
{
	background-image: url(graphics/header_products.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#products #photos
{
	margin: 0 auto;
	width: 640px;
}

body#products #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 14px 0;
}

/* Retractables page */

body#retractables div#header
{
	background-image: url(graphics/header_retractables.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#retractables #photos
{
	margin: 0 auto;
	width: 680px;
}


body#retractables #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 14px 0;
}

/* Hoops page */

body#hoops div#header
{
	background-image: url(graphics/header_hoops.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#hoops #photos
{
	margin: 0 auto;
	width: 710px;
}

body#hoops #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;
}

/* Statics page */

body#statics div#header
{
	background-image: url(graphics/header_statics.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#statics #photos
{
	margin: 0 auto;
	width: 690px;
}

body#statics #photos img
{
	border: 1px solid #999;
	padding: 4px;
	margin: 18px 14px 0;
}






/* Street Furniture Page */



body#street div#header
{
	background-image: url(graphics/header_street.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#street #photostoo
{
	margin: 0 auto;
	width: 710px;

}

body#street #photostoo img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;
}







/* Access page */



body#access div#header
{
	background-image: url(graphics/header_access3.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#access #photostoo
{
	margin: 0 auto;
	width: 710px;
	
}


body#access #photostoo img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;

}


body#access #diagram {
text-align:center;

}



body#access #diagram img 

{
border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;
}






/* Recycled Page */

body#plastics div#header
{
	background-image: url(graphics/header_recycle.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#plastics #photos
{
	margin: 0 auto;
	width: 710px;
}

body#plastics #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;
}


body#plastics #itemescrip1 {
margin: 1px 3px 0 4px;
width:200px;
padding-right: 0px;
float:left;


}

body#plastics #itemescrip2 {
margin: 1px 0px 20px 4px;
width:200px;
padding-right: 0px;
float:left;
}


body#plastics #itemescrip3 {
margin: 1px 0px 20px 4px;
width:190px;
padding-right: 3px;
float:left;
clear:right;
}


body#plastics #itemescrip4 {
margin: 1px 3px 0 4px;
width:200px;
padding-right: 0px;
float:left;


}

body#plastics #itemescrip5 {
margin: 1px 0px 20px 4px;
width:200px;
padding-right: 0px;
float:left;
}


body#plastics #itemescrip6 {
margin: 1px 0px 20px 4px;
width:200px;
padding-right: 0px;
float:left;
clear:right;
}






/* Urethane Bollards Page */

body#urethane div#header
{
	background-image: url(graphics/header_hoops.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#urethane #photostoo
{
	margin: 0 auto;
	width: 770px;
	height:289px;
	
}



body#urethane #photostoo img
{
border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;
}






/* In an ideal world you could just slap vertical-align:top on the image and be done with it. Since the vertical-align property is based off of the text layout properties of the parent element, we will use line-height equal to the height of our container That seems to work in most browsers, but of course not Internet Explorer. So, we add an equal amount of font-size and use a filter to reset non-Internet Explorer browsers: see this article http://www.ibloomstudios.com/articles/applied_css_vertical-align/    */

body#street #photostoo img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 5px 0;
	line-height:289px;
	font-size:289px;
	vertical-align: text-top;
	
}
*>div{
	font-size:12px
}





/* Contact page */

body#aboutus div#header
{
	background-image: url(graphics/ram_header_home.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#aboutus #photos
{
	margin: 0 auto;
	width: 640px;
}

body#aboutus #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 14px 0;
}

/* Clients page */

body#clients div#header
{
	background-image: url(graphics/ram_header_home.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#clients #photos
{
	margin: 0 auto;
	width: 640px;
}

body#clients #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 14px 0;
}

/* General pages */

body#general div#header
{
	background-image: url(graphics/ram_header_home.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}

body#general #photos
{
	margin: 0 auto;
	width: 650px;
}

body#generals #photos img
{
	border: 1px solid #999;
	padding: 6px;
	margin: 18px 14px 0;
}
/*******************************************************************/

.alignCenter
{
	text-align:center;
}

.noBorder
{
	border:none;
}

a {
color:#990000;
text-decoration:none;
}

a:hover,  p a:hover, div a:hover {
	color:#666666;
	text-decoration:underline;

}

.clearBoth
{
	clear:both;
}