/* Whitespace CSS Document */

body
{
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
font-family			: arial, sans-serif;
font-size 			: 100%;
color				: #333333;
}

img {
	border: 0px;
}

#hold
{
position			: relative;
width				: 780px;
margin				: 0px auto;
/*background-color	: #AAAAAA;*/
padding				: 0px 0px 0px 0px;
}

div.topbar
{
position			: relative;
float				: left;
margin				: 15px 0px 10px 0px;
padding				: 0px 0px 0px 0px;
width				: 780px;
}

div.logo
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 170px;
}

div.nav
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 610px;
background-color	: #EEEEEE;
}

div.nav ul
{
list-style-type		: none;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;			
}

div.nav ul li
{
display				: block;
float				: left;
line-height			: 41px;
font-size			: 100%;
font-weight			: normal;
color				: #999999
}

div.nav ul li a:link, div.nav ul li a:visited
{
color				: #333333;
font-size			: 75%;
text-decoration		: none;
padding				: 0px 34px 0px 34px;
}

div.nav ul li a:hover
{
color				: #00C0F3;;
font-size			: 75%;
text-decoration		: none;
padding				: 0px 34px 0px 34px;
}

div.nav #on
{
color				: #00C0F3;
}


div.search
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 250px;
background-image	: URL(/images/search_bg.gif);
}

div.search p
{
display				: block;
float				: left;
font-size			: 75%;
font-weight			: normal;
color				: #333333;
margin				: 0px 0px 0px 0px;
padding				: 10px 0px 10px 10px;
line-height			: 22px;
}

div.search input.search
{
width				: 150px;
margin				: 0px 0px 0px 8px;
border				: 1px solid #00C0F3;	
font-family			: arial;
font-size			: 100%;
padding				: 1px;
}

div.search input.button
{
color				: #333333;
font-weight			: bold;
width				: 20px;
border				: 0px solid #00C0F3;	
font-family			: arial;
font-size			: 100%;
background-color	: transparent;	
}

div.homecontent
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 780px;
background-color	: #CCCCCC;
height				: 415px;/* remove */
}

div.products
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 250px;
background-color	: #00C0F3;
height				: 415px;/* remove */
}

div.introandexamples
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
border-right		: 5px solid #FFFFFF;
width				: 525px;
background-color	: #DDDDDD;
height				: 415px;/* remove */
}

div.intro
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 40px 0px 0px 30px;
border-bottom		: 5px solid #FFFFFF;
width				: 495px;
background-color	: #23497D;
}

div.intro h1
{
font-size			: 140%;
font-weight			: bold;
color				: #00C0F3;;
line-height			: 24px;
margin				: 00px 0px 15px 0px;
padding				: 0px 0px 0px 0px;
}

div.intro h2
{
font-size			: 140%;
font-weight			: normal;
color				: #FFFFFF;
line-height			: 24px;
margin				: 0px 0px 15px 0px;
padding				: 0px 0px 0px 0px;
width				: 450px;
}

div.intro p
{
font-size			: 75%;
font-weight			: normal;
color				: #FFFFFF;
line-height			: 15px;
margin				: 0px 0px 43px 0px;
padding				: 0px 0px 0px 0px;
width				: 450px;
}

div.example
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 260px;
background-color	: #EEEEEE;
height				: 180px;/* remove */
}

div.example img
{
display				: block
}

div.example p
{
font-size			: 75%;
color				: #FFFFFF;
line-height			: 30px;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 20px;
background-color	: #00C0F3;
}

#exmaplewithborder
{
border-right		: 5px solid #FFFFFF;
}

div.product
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 21px 15px 11px 15px;
width				: 210px;
background-repeat	: no-repeat;
}

#planning
{
background-image	: url(/images/product1_bg.gif);
background-position	: 0px  0px;
}

#Installation
{
background-image	: url(/images/product2_bg.gif);
background-position	: 0px  10px;
}

#Maintenance
{
background-image	: url(/images/product3_bg.gif);
background-position	: 0px  10px;
}

div.product h3
{
font-size			: 100%;
color				: #FFFFFF;
font-weight			: bold;
line-height			: 20px;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 00px;
}

div.product h3 span
{
color				: #23497D;;
}

div.product p
{
font-size			: 70%;
color				: #FFFFFF;
font-weight			: normal;
line-height			: 14px;
margin				: 5px 0px 4px 0px;
padding				: 0px 0px 0px 0px;
width				: 190px;
}

div.product p a
{
color				: #333333;			
}

div.products p.space
{
font-size			: 70%;
color				: #FFFFFF;
font-weight			: normal;
line-height			: 1px;
margin				: 5px 0px 0px 15px;
padding				: 0px 0px 0px 0px;
width				: 220px;
border-top			: 1px solid #FFFFFF;
border-bottom		: 1px solid #23497D;
}

div.footer
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 780px;
background-color	: #FFFFFF;
text-align			: right;
}

div.footer p
{
font-size			: 70%;
color				: #999999;
font-weight			: normal;
line-height			: 14px;
margin				: 20px 0px 4px 0px;
padding				: 0px 10px 0px 0px;
}

div.footer p a:link, div.footer p a:visited
{
color				: #999999;
text-decoration		: none;
}

div.footer p a:hover
{
color				: #333333;
text-decoration		: underline;
}

/* INTERNAL CSS */

p.breadcrumbs
{
font-size			: 75%;
color				: #999999;
font-weight			: normal;
line-height			: 14px;
margin				: 5px 0px 5px 0px;
padding				: 3px 0px 3px 0px;
border-top			: 1px solid #CCCCCC;
border-bottom		: 1px solid #CCCCCC;
background-color	: #FFFFFF;
}

p.breadcrumbs a:link, p.breadcrumbs a:visited
{
color				: #999999;
text-decoration		: none;
}

p.breadcrumbs a:hover
{
color				: #333333;
text-decoration		: underline;
}

div.navandcopy
{
position			: relative;
float				: left;
margin				: 5px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 780px;
background-image	: url(/images/content_bg.gif);
background-position	: 0px 0px;
background-repeat	: repeat-y;
/*background-color	: #CCCCCC;*/
}

div.subnav
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 140px;
background-color	: #00C0F3;;
border-right		: 10px solid #FFFFFF;
}

div.subnav ul
{
list-style-type		: none;
margin				: 0px;	
padding				: 0px;		
}

div.subnav ul li
{
display				: block;
line-height			: 18px;
font-size			: 100%;
font-weight			: normal;
color				: #999999;
}

div.subnav ul li a:link, div.subnav ul li a:visited
{
color				:#FFFFFF;
font-size			: 75%;
text-decoration		: none;
display				: block;
width				: 130px;
border-bottom		: 1px solid #FFFFFF;
padding				: 6px 0px 6px 10px;
}

div.subnav ul li a:hover
{
color				:#FFFFFF;
font-size			: 75%;
text-decoration		: none;
display				: block;
width				: 130px;
border-bottom		: 1px solid #FFFFFF;
padding				: 6px 0px 6px 10px;
background-color	: #2b95c7;
}

div.subnav #on
{
background-color	: #2b95c7;
}

div.content
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 630px;
}

div.headers
{
position			: relative;
float				: left;
margin				: 0px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 630px;
background-color	: #DDDDDD;
}

div.headerblock
{		
display				: block;
float				: left;
width				: 300px;
}

div.headers h1
{
font-size			: 180%;
color				: #23497D;
font-weight			: normal;
line-height			: 26px;
margin				: 30px 0px 0px 30px;
padding				: 0px 0px 0px 0px;
width				: 280px;
}

div.headers h2
{
font-size			: 100%;
color				: #23497D;
font-weight			: normal;
line-height			: 18px;
margin				: 10px 0px 0px 30px;
padding				: 0px 10px 0px 0px;
width				: 280px;
}

div.headers img
{
display				: block;
float				: right;	
border-left			: 5px solid #FFFFFF;
}

div.copy
{
position			: relative;
float				: left;
margin				: 10px 0px 0px 0px;
padding				: 0px 0px 0px 0px;
width				: 630px;
}

div.copy img.pageimage
{
float				: left;
margin				: 0px 20px 0px 0px;
display				: block;
}

div.copy p
{
font-size			: 75%;
color				: #333333;
font-weight			: normal;
line-height			: 17px;
margin				: 0px 0px 17px 0px;
padding				: 0px 0px 0px 0px;
}

div.links
{
margin				: 60px 0px 0px 0px;
padding				: 10px 0px 10px 0px;
border-top			: 1px dashed #FFFFFF;
border-bottom		: 1px dashed #FFFFFF;
}

div.links span a:link, div.links span a:visited
{
font-size			: 75%;
text-decoration		: none;
color				: #FFFFFF;
background-color	: #00C0F3;
display				: block;
width				: 140px;
line-height			: 15px;
padding				: 20px 0px 20px 0px;
}

div.links span a:hover
{
font-size			: 75%;
text-decoration		: none;
background-color	: #2b95c7;
display				: block;
width				: 140px;
line-height			: 15px;
padding				: 20px 0px 20px 0px;
}

div.links img
{
display				: block;
float				: left;
border				: 0px;			
text-align			: center;
margin				: -20px 5px -20px 2px;
}


/* Contact Form CSS */

div.genericcontactform
{
width		: 210px;
float		: left;
margin		: 0px 0px 20px 0px;
}

div.genericcontactform label
{
font-size		: 75%;
margin-top		: 0px;
margin-bottom	: 0px;
}

.fieldWithErrors /* Rails default error div for forms */
{
font-size		: 75%;
margin-top		: 0px;
margin-bottom	: 0px;
}

div.genericcontactform p
{
font-size		: 75%;
margin-top		: 0px;
margin-bottom	: 0px;
}

input.form
{
font-family		: Arial;
width			: 180px;
margin-top		: 0px;
margin-bottom	: 10px;
font-size		: 100%;
border			: 1px solid #CCCCCC;
padding			: 2px;
}

#formred
{
background-color: #FFCCCC;
}

textarea.form
{
font-family		: Arial;
height			: 61px;
width			: 180px;
margin-top		: 0px;
margin-bottom	: 10px;
font-size		: 100%;
border			: 1px solid #CCCCCC;
}

.button
{
font-size			: 100%;
padding 			: 0px 10px 0px 10px;
font-weight			: bold;
background-color	: #00C0F3;
color				: #FFFFFF;
border				: 3px double #CCCCCC;
margin-top			: 0px;
}

/* Rails styles */
#errorExplanation
{
width				: 600px;
padding				: 15px 15px 15px 15px;
margin				: 0px 0px 20px 0px;
background-color	: #F1F1F1;
}

#errorExplanation h2
{
line-height			: 15px;
font-weight			: bold;
padding				: 0px 0px 0px 0px;
margin				: 0px 0px 5px 0px;
font-size			: 75%;
color				: #FF0000;
}

#errorExplanation h3
{
line-height			: 15px;
font-weight			: bold;
padding				: 0px 0px 0px 0px;
margin				: 0px 0px 5px 0px;
font-size			: 75%;
color				: #FF0000;
}

#errorExplanation p
{
line-height			: 15px;
font-weight			: normal;
padding				: 0px 0px 0px 0px;
margin				: 0px 0px 0px 0px;
font-size			: 70%;
color				: #333333;
}

#errorExplanation ul
{
margin				: 0px 0px 0px 20px;
padding				: 0px 0px 0px 0px;
}

#errorExplanation ul li
{
line-height			: 15px;
font-weight			: normal;
padding				: 0px 0px 0px 0px;
margin				: 0px 0px 0px 0px;
font-size			: 70%;
color				: #333333;
}

.clear/*this div make the parent DIV strench to the height of the child - fix for firefox. but the div is 1px high in IE*/
{
clear				: both;
font-size			: 0em;
width				: 0px;
height				: 0px;
line-height			: 0px;
overflow			: hidden;
}


.gallery_row
{
float:left;
clear:both;
}

.gallery_item h3, .gallery_item_last h3
{
font-size:70%;
font-weight:bold;
padding:6px 6px 0px 8px;
margin:0px;
}

div.copy .gallery_item p, div.copy .gallery_item_last p
{
font-size:70%;
font-weight:normal;
padding:0px 6px 8px 8px;
margin:0px;
}

.gallery_item
{
float:left;
margin:0px 6px 10px 0px;
padding:0px;
background-color:#dddddd;
}

.gallery_item_last
{
float:left;
margin:0px 0px 10px 0px;
padding:0px;
background-color:#dddddd;
}