/********************************************************************************
* 
* © 2008 Ecliptic Technologies, Inc. - All Rights Reserved
* Unauthorized use or reproduction of this product is strictly prohibited by law.
* Website: www.ecliptictech.com
* Email: info@ecliptictech.com
*
* Name: layout.css
* Description: Master CSS file for the entire Stainless Headers website
*
*********************************************************************************/

*
    {
    margin:0px;
    padding:0px;
    }

body    
    {
    font-size:100%;
    line-height:1em;
    background:url(/images/backgrounds/page-background.gif);
    }

h1
    {
    margin:0px 0px 0.6em 0px;
    padding:0px 0px 2px 0px;
    font:bold italic 1.75em Arial, Helvetica, sans-serif;
    color:#ffffff;
    border-bottom:1px solid #ffffff;
    }

h2, h3, h4, h5, h6
    {
    line-height:1.8em;
    }

h2
    {
    font:bold 1.375em Arial, Helvetica, sans-serif;
    color:#ffffff;
    }

h3
    {
    font:bold 1.125em Arial, Helvetica, sans-serif;
    color:#ffffff;
    }

h4
    {
    font:bold 0.875em Arial, Helvetica, sans-serif;
    color:#ffffff;
    }

h5
    {
    font:bold 0.75em Arial, Helvetica, sans-serif;
    color:#ffffff;
    }

h6
    {
    font:bold 0.6875em Arial, Helvetica, sans-serif;
    color:#ffffff;
    }


/* Links
--------------------------------------------------------------------------------*/

a
	{
	color:#b0b0b0;
	text-decoration:underline;
	}

a:hover
	{ 
	color:#ffffff;
	text-decoration:underline;
	}
	
a:active
	{
	color:#ffffff;
	text-decoration:underline;
	}


/* Layout
-----------------------------------------------------------------------------------*/
#outer-container {
    float:left;
    width:990px;
    margin:10px auto;
    text-align:left;
}
#outer-container-top {
    float:left;
    width:100%;
    height:24px;
}
#outer-container-top-left {
    float:left;
    width:24px;
    height:24px;
    background:url(/images/backgrounds/outer-container-top-left.gif) no-repeat;
}
#outer-container-top-fill {
    float:left;
    width:942px;
    height:24px;
    background:url(/images/backgrounds/outer-container-top-fill.gif) repeat-x;
}
#outer-container-top-right {
    float:left;
    width:24px;
    height:24px;
    background:url(/images/backgrounds/outer-container-top-right.gif) no-repeat;
}
* html #outer-container-top-right {
	clear:right;
}
#outer-container-middle {
    float:left;
    width:990px;
    background:url(/images/backgrounds/outer-container-middle.gif) repeat-y;    
}
#outer-container-bottom {
    float:left;
    width:990px;
    height:24px;
}
#outer-container-bottom-left {
    float:left;
    width:24px;
    height:24px;
    background:url(/images/backgrounds/outer-container-bottom-left.gif) no-repeat;
}
#outer-container-bottom-fill {
    float:left;
    width:942px;
    height:24px;
    background:url(/images/backgrounds/outer-container-bottom-fill.gif) repeat-x;
}
#outer-container-bottom-right {
    float:left;
    width:24px;
    height:24px;
    background:url(/images/backgrounds/outer-container-bottom-right.gif) no-repeat;
}

#container {
    width:99%;
    float:left;
    margin:0 0 0 3px;
    background:url(/images/backgrounds/container-fill.gif) repeat;
}
* html #container {
	position:relative;
}
#container-top {
    float:left;
    width:100%;
    background:url(/images/backgrounds/container-top.gif) repeat-x;
}
#container-top-left {
    float:left;
    width:11px;
}
#container-top-fill {
    float:left;
}
#logo {
	float:left;
	width:390px;
	margin-top:-10px;
	margin-left:5px;
}
* html #logo {
	position:relative;
	margin-left:-10px;
}
#container-top-right {
    float:left;
    width:11px;
}

#container-top-nav 
    {
    float:left;
    width:560px;
    height:28px;
    margin-top:-18px;
    margin-left:10px;
    font-family:sans-serif;
    }

* html #container-top-nav {
	position:relative;
    width:auto;
    margin-left:0px;
}
#container-top-nav-left {
    float:left;
    width:12px;
    height:28px;
    background:url(/images/backgrounds/top-container-nav-left.gif) no-repeat;
}
#container-top-nav-fill {
    float:left;
    width:548px;
    height:28px;
    background:url(/images/backgrounds/top-container-nav-fill.gif) repeat-x;
}

#container-top-nav ul 
    {
    line-height:26px;
    list-style:none;
    }

#container-top-nav li {
    float:left;
    display:inline-block;
    margin:0 10px;
}
#container-top-nav li a:link, #container-top-nav li a:visited {
    font-size:12px;
    color:#fff;
    text-decoration:none;
}
#container-top-nav li a:hover {
    color:#fff;
}
#container-top-nav li a:active {
    color:#fff;
}
#company {
    float:left;
    width:565px;
    height:145px;
}
* html #company {
	position:relative;
    width:580px;
    margin-left:-5px;
}
#companyname {
    float:left;
    margin:10px 0 0 5px;
}
* html companyname {
}
#companyinfo {
    float:right;
    width:190px;
    height:77px;
    margin-top:25px;
    margin-right:3px;
    background:url(/images/backgrounds/address-background.gif) no-repeat;
}
* html companyinfo {
}
#companyinfo p {
    margin:5px 0;
    color:#fff;
    font:normal 14px Verdana,Arial,Helvetic,sans-serif;
    text-align:center;
}
#top-divider {
    float:left;
    clear:both;
    width:100%;
    height:15px;
    background:#fff url(/images/backgrounds/top-divider.gif) repeat;
    border:1px solid;
}

#container-middle {
    float:left;
    width:100%;
    min-height:420px;
    background:url(/images/backgrounds/container-middle-fill-2.gif) repeat-y;
}

#container-middle-left {
    float:left;
    width:274px;
}

#menu h5
    {
    padding:24px 0px 6px 5px;
    font:bold 11px Verdana, Arial, Helvetica, sans-serif;
    }

#customerexamples
    {
    margin:50px 0px 0px 5px;
    }

#customerexamples a
    {
    text-decoration:none;
    }

#customerexamples img
    {
    margin:0.2em 0px 0em 0px;
    border:1px solid #b0b0b0;
    }

#customerexamples a:hover img
    {
    border:1px solid #ffffff;
    }

#container-middle-body 
    {
	width:674px;
	margin-left:270px;
	padding:16px 16px 0px 16px;
    }

* html #container-middle-body 
    {
	position:relative;
	width:706px;
    }

#content {
    float:left;
    width:100%;
}

#container-middle-body p 
    {
    padding:0px 0px 1.8em 0px;
    font:0.6875em Verdana, Arial Helvetica, sans-serif;
    color:#ffffff;
    line-height:1.8em;
    }

#container-middle-body ul, #container-middle-body ol
    {
    margin:0px 0px 1.8em 26px;
    font:0.6875em Verdana, Arial, Helvetica, sans-serif;
    color:#ffffff;
    line-height:1.8em;
    }

#container-middle-body ul ul, #container-middle-body ul ul ul, #container-middle-body ol ul
    {
    margin:0px 0px 0px 26px;
    font:1em Verdana, Arial, Helvetica, sans-serif;
    }

#container-middle-body ol ol
    {
    margin:0px 0px 0px 26px;
    font:1em Verdana, Arial, Helvetica, sans-serif;
    list-style:lower-alpha;
    }

#container-bottom {
    width:100%;
    float:left;
    border:1px solid white;
}
#container-bottom-left
    {
    float:left;
    width:11px;
    height:24px;
    }

#container-bottom-fill {
    float:left;
    width:1019px;
    height:24px;
}
#container-bottom-right {
    float:left;
    width:11px;
    height:24px;
}

.imageleft
    {
    float:left;
    margin:0px 1em 1em 0px;
    border:1px solid #6fb4dd;
    }

.imageright
    {
    float:right;
    margin:0px 0px 1em 1em;
    border:1px solid #6fb4dd;
    }

.imageleft img, .imageright img
    {
    border:1px solid #505050;
    }

.imagefull
    {
    display:block;
    margin:0px 0px 1em 1em;
    clear:both;
    }

.customerimage
    {
    float:left;
    width:33%;
    margin:0px 0em 1em 0px;
    }

.customerimage h5
    {
    text-align:center;
    clear:both;
    }

.customerimage a
    {
    text-decoration:none;
    }

.customerimage img
    {
    margin:0.4em 0px 0em 0px;
    border:1px solid #b0b0b0;
    }

.customerimage a:hover img
    {
    margin:0.4em 0px 0em 0px;
    border:1px solid #ffffff;
    }


/* Tables
-----------------------------------------------------------------------------------*/

#container-middle-body table
    {
    margin:0px 0px 1.6em 0px;    
    color:#ffffff;
    border:1px solid #ffffff;
    border-collapse:collapse;
    border-spacing:3px;
    }

#container-middle-body table table
    {
    margin:0px;
    font:1em Verdana, Arial, Helvetica, sans-serif;
    }

#container-middle-body table th
    {
    padding:4px 6px;
    font:0.6875em Verdana, Arial, Helvetica, sans-serif; 
    border:1px solid #ffffff;
    }

#container-middle-body table td
    {
    padding:5px;
    border:1px solid #ffffff;
    }

#container-middle-body table ul
    {
    }


/* Content Items
-----------------------------------------------------------------------------------*/

#bodycopy 
    {
    float:left;
    margin:16px 0px 1.6em 0px;
    padding:16px 16px 0px 16px;
    background:url(/images/backgrounds/body-copybg01.png);
    }

* html #bodycopy {
	background:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/backgrounds/body-copy.png", sizingMethod="crop");
}

#home-content {
    width:100%;
}
* html #home-content {
	width:700px;
}

#products
    {
    float:left;
    width:335px;
    }

* html #products
    {
	width:340px;
    }

.product
    {
	float:left;
	width:150px;
	margin:5px 10px 5px 0px;
    }

.producttop
    {
    float:left;
    width:150px;
    height:29px;
    background:url(/images/backgrounds/producttop.gif) no-repeat;
    color:#ffffff;
    font:bold 12px Verdana,Arial,Helvetica,sans-serif;
    }

.producttop div
    {
	padding:8px 0px 0px 8px;
    }

.productborder
    {
	float:left;
	width:148px;
	padding:0px 1px;
	background:url(/images/backgrounds/productborder.gif) repeat-y;
    }

.productcontent 
    {
	float:left;
	width:134px;
	padding:0px 7px;
	height:250px;
    background:#005ef4 url(/images/backgrounds/productfill.gif) repeat-x;
    }

.productbottom
    {
	float:left;
	width:150px;
	height:11px;
	background:url(/images/backgrounds/productbottom.gif) no-repeat;
    }

#flash 
    {
    float:left;
    width:706px;
    height:300px;
    margin:0px 0px 1em 0px;
    }
    
#flashleft {
    float:left;
    width:20px;
    height:290px;
    background:url(/images/backgrounds/flash-background-left.png) no-repeat;
}
* html #flashleft {
 	background:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/backgrounds/flash-background-left.png", sizingMethod="crop");
}
#flashfill {
    float:left;
    width:270px;
    height:290px;
    background:url(/images/backgrounds/flash-background-fill.png) repeat-x;
}
* html #flashfill {
 	background:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/backgrounds/flash-background-fill.png", sizingMethod="crop");
}
#flashfill div {
    width:50%;
    margin:25% 30%;
	background:transparent;
    color:#fff;
    font:bold 12px Verdana,Arial,Helvetica,sans-serif;    
}
#flashright {
    float:left;
    width:19px;
    height:290px;
    background:url(/images/backgrounds/flash-background-right.png) no-repeat;
}
* html #flashright {
 	background:none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/backgrounds/flash-background-right.png", sizingMethod="crop");
}

#bottommenu ul
    {
    width:115px;
    margin:0px 10px 0px 0px;
    padding:0px;    
    list-style:none;
    }

#bottommenu ul li a:link, #bottommenu ul li a:visited
    {
    display:block;
    color:#ffffff;
    text-decoration:none;
    }

#bottommenu ul li a:hover, #bottommenu ul li a:active
    {
    }