/**********************************************************************************
* 
* © 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: Layout CSS file for the TRS Industries website
*
***********************************************************************************/

/* Auxiliary style sheets
----------------------------------------------------------------------------------*/

@import url(type.css);
@import url(forms.css);
@import url(lightbox.css);


/* Body 
----------------------------------------------------------------------------------*/

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

body
	{
	background:#ffffff;
	}


/* Images 
----------------------------------------------------------------------------------*/

img
    {
	border:none;
    }

.imageleft
    {
    float:left;
    margin:0px 1em 1em 0px;
    clear:both;
    }

.imageright
    {
    float:right;
    margin:0px 0px 1em 1em;
    clear:both;
    }

.image-container
    {
    float:left;
    width:100%;
    clear:both;
    }

.image-sticky
    {
    float:left;
    margin:0px 1em 1em 0px;
    }

.imageleft img, .imageright img
    {
    }

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


/* Container
----------------------------------------------------------------------------------*/

#container
	{
	margin:10px auto;
	width:802px;
	}


/* Masthead
----------------------------------------------------------------------------------*/

#masthead
    {
    float:left;
    width:800px;
    height:123px;
    background:url(/sitegraphics/trs-mastheadbg.jpg) no-repeat;
    border-top:1px solid #000000;
    border-right:1px solid #000000;
    border-left:1px solid #000000;
    }

#logo
    {
	display:none;
    }


/* Main background
----------------------------------------------------------------------------------*/

#main
    {
    float:left;
    width:800px;
    background:#ffffff url(/sitegraphics/trs-contentbg.jpg) top right no-repeat;
    border-right:1px solid #000000;
    border-left:1px solid #000000;
    border-bottom:1px solid #000000;
    }


/* Sidepane
----------------------------------------------------------------------------------*/

#sidepane
    {
    float:left;
    width:160px;
    margin:0px -1px 0px 0px;
    border-right:1px solid #000000;
    background:#ffffff url(/sitegraphics/trs-sidepanebg.jpg) no-repeat;
    }


/* Navigation background
----------------------------------------------------------------------------------*/

#nav
    {
    float:left;
    width:141px;
    margin:0px 0px 0px 0px;
    padding:0px 0px 20px 10px;
    }


/* Contact information
----------------------------------------------------------------------------------*/

#contactinfo
    {
    float:left;
    width:800px;
    height:26px;
    margin:0em 0px 0px 0px;
    padding:4px 0px 0px 0px;
    background:url(/sitegraphics/trs-contactinfobg.gif) repeat-y;
    border-right:1px solid #000000;
    border-left:1px solid #000000;
    }


/* Banner
----------------------------------------------------------------------------------*/

#banner
    {
    }


/* Flash animation
----------------------------------------------------------------------------------*/

#flashanimation
    {
    width:599px;
    height:275px;
    margin:0px 0px 1em 0px;
    }


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

#content-splash
	{
	float:left;
	width:599px;
	margin:0em 0px 0px 0px;
	padding:20px 20px 0px 20px;
	}

#content
	{
	float:left;
	width:599px;
	margin:0em 0px 0px 0px;
	padding:20px 20px 0px 20px;
	border-left:1px solid #000000;
	}


/* YouTube video
----------------------------------------------------------------------------------*/

#content object
    {
    display:block;
    margin:0px 0px 1em 0px;
    }


/* Color swatch
----------------------------------------------------------------------------------*/

.colorswatch
    {
    float:left;
    width:100%;
    margin:0px 0px 1em 0em;
    padding:0px 0px 1em 0px;
    border-bottom:1px dotted #000000;
    }

.colorswatch-row
    {
    float:left;
    }

.colorswatch-cell
    {
    float:left;
    width:25px;
    height:25px;
    margin:10px 10px 0px 0px;
    }

#grape
    {
    background:#66023C;
    }

#midnightblue
    {
    background:#191970;
    }

#blue
    {
    background:#333399;
    }

#forestgreen
    {
    background:#228b22;
    }

#red
    {
    background:#6b0000;
    }

#orange
    {
    background:#ff7f00;
    }

#yellow
    {
    background:#ffef00;
    }

#brown
    {
    background:#964b00;
    }

#beige
    {
    background:#f5f5dc;
    }

#teal
    {
    background:#008080;
    }

#gray
    {
    background:#d4d4c7;
    }

#burgundy
    {
    background:#800020;
    }

#white
    {
    background:#ffffff;
    }

#black
    {
    background:#000000;
    }


/* Products
----------------------------------------------------------------------------------*/

#products
    {
    float:left;
    width:100%;
    margin:1em 0px 0px 0px;
    padding:1em 0px 0px 0px;
    border-top:1px dotted #000000;
    clear:both;
    }


/* Gallery container and thumbnails
----------------------------------------------------------------------------------*/

#gallery
	{
	float:left;
	width:810px;
	margin:1em 0px 0px 0px;
	padding:1em 0px 0px 0px;
	border-top: solid 1px #3366cc;
	}

#lightbox_container
    {
    padding:0px 0px 1em 0px;
    }

#lightbox_container img
    {
    margin:0px 10px 10px 0px;
    background:none;
    border:1px solid #3366cc;
    }

#lightbox_container a
    {
    background:none;
    border:none;
    }


/* Google map
----------------------------------------------------------------------------------*/

.map
    {
    float:right;
    width:400px;
    margin:0px 0px 1em 1em;
    clear:both;
    }

.map iframe
    {
    width:398px;
    height:350px;
    margin:0px 0px 0.2em 0px;
    border:1px solid #2f378f;
    }


/* Footer
----------------------------------------------------------------------------------*/

#footer
    {
    float:left;
    width:800px;
    margin:0px 0px 0px 0px;
    padding:10px 0px 0px 10px;  
    }


/* Horizontal rules
----------------------------------------------------------------------------------*/

hr
	{
	display:none;
	}

.hr
	{
	margin:0px 0px 1em 0px;
	border-top:1px dotted #000000;
	}


/* Miscellaneous classes
----------------------------------------------------------------------------------*/