/* 
Mair Oriental Rug Services

Tyler Mair
August 2006

template.CSS
---
This css file is the data that controls the general layout of all features besides the 
Body frame.

--- COLORS ---

--Single color scheme-- 
--Tan--
--Lightest to Darkest--
Pale tan = #FFFCDA
Smooth tan = #FAE7C3;
Light tan = #E8D6B5
Tan = #C8B696
Dark tan = #9F8E6F
Burnt tan = #78684B

--Burgandy--
Light Salmon = #FFDAC2
Salmon = #FFBEA6
Pale burgandy = #FF8672
Dim burgandy = #C35142
Burgandy = #7A050D


--Shades--
--Lightest to Darkest--
Light Gray =        #eee
Grey Background =   #CCC
Mid Grey =          #818181
Dark Gray =         #666
Soft Black =        #333 Used to soften pure black in the fonts mostly.
Pure black =        #000 or "black"

--Links--
	links base color
	  color: #7A050D; Burgandy
	visited link
	  color: #7A050D; Burgandy
	hover on link or active
	  color: #C35142; Dim Burgandy

--Attribute Organization--
{
    *Graphical features*
    Color
    Background color 
    Background image
    Border
    //
    *Positioning attributes*
    position: relative;
    float
    width
    height
    Margins
    Padding
    Text mods
}
note: where div padding-left should be used, child elements may use margin-left instead. Prevents div width varience.

*** CSS Starts ***
	
--- General Element Settings ---*/

body
{
    color: #333333;	            /* soft black */
	background-color: #7A050D;  /* Global Background - Burgandy*/
	font-family: Verdana, Helvetica, Arial, Sans-Serif;
	font-size: 0.8em;
    margin: 0px;
}
p
{ 
	
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding:0px;
	text-align: left;
}
ul
{
    margin-top: 5px;
    margin-bottom: 5px;
}
li
{
    margin-bottom: 10px;
}
img
{
    margin: 0px;}
		
/*Headings*/
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5
{
    font-weight: bold;
    margin-left: 0px;
    padding: 0px;
    display: inline;}
h1, .h1 
    {font-size: 2em;
        font-family: sans-serif;}
h2, .h2 
    {font-size: 1.8em;
        font-family: serif;}
h3, .h3 
    {font-size: 1.4em;
        font-family: sans-serif;}
h4, .h4 
    {font-size: 1.25em;}
h5, .h5 
    {font-size: 1.1em;}

/*bold modifier*/
b{font-weight: bold;}	

/* Links */
a{  
	font-weight: normal;
	text-decoration: underline;
	}
a:link, a:visited{
    color: #7A050D;    /*Burgandy*/
    background-color: inherit;	
	}
a:hover, a:active{
    color: #C35142; /*Dim Burgandy*/
    background-color: inherit;
    text-decoration: underline;
    }


/*--- Main Settings ---*/
#mainContainer
{   
    float: none;
    width: 100%;
    height: auto;
    margin-top: 20px;
}	
/*Children of mainContainer*/
#titleContainer
{    
	
	background-color: #C8B696; /**/
	background-image: none; /**/
	background-repeat: no-repeat;
	background-position: left;	
    /**/
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 0px;
	padding: 0px;
    }
    #logo
    {
        background-color: inherit; /**/
	    background-image: url('../assets/logo_01.jpg'); /*63x90*/
	    background-repeat: no-repeat;
	    background-position: left;
        /**/
	    position: relative;
	    display: inline;
	    float: left;
	    width: 63px;
	    height: 90px;
	    margin-top: 0px; 
	    margin-bottom: 0px; 
	    margin-left: 5px;
	    margin-right: 5px;    
    }
    #title
    {
        background-color: inherit; /**/
        /**/
	    position: relative;
	    display: inline;
	    float: left;
	    width: 80%;
	    height: auto;
	    margin: 5px;
	    padding-top: 12px;
    }        
	
#nav
{
    border-bottom: solid 1px gray;
    
    background-color: #C8B696; /**/
    background-image: none;
	background-position: top;
	background-repeat: no-repeat;
    /**/
	position: relative;
	float: left;
	width: 100%;
	height: auto;	
	margin-top: 0px;
	padding: 5px 0px 5px 0px;	
	text-align: left;
    }	
    #nav ul{
	    border: none;
	    margin: 0px;
	    padding: 5px;
	    display: inline; /*creates horizontal list*/
	    } 
    #nav li{
	    padding-left: 7px;
	    list-style: none;
	    display: inline;
	    }
    #nav li.first
        {border: none;} /*the first list item has no bar on the left */
    #nav a{
        font-weight: bold;
        background-color: Transparent;
        text-decoration: none;
        }
#trail
{
    background-color: #E8D6B5; /*Tan*/
        
    background-image: none; /*800x200*/
	background-position: top;
	background-repeat: no-repeat;
    /**/
	position: relative;	
	float:left;	
	width: 100%;
	height: auto;	
	margin-top: 0px;
	padding: 5px 0px 5px 0px;	
	text-align: left;
    }	
    #trail ul{
	    border: none;
	    margin: 0px;
	    padding: 5px;
	    display: inline; /*creates horizontal list*/
	    } 
    #trail li{
	    padding-left: 7px;
	    list-style: none;
	    display: inline;
	    }
    #trail li.first
        {border: none;} /*the first list item has no bar on the left */
    #trail a{
        font-weight: bold;
        background-color: Transparent;
        text-decoration: none;
        }
    
#bodyContainer
{   	
	color: #333;              /*soft black*/
	background-color: #FAE7C3;  /*smooth tan*/
	/**/
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0px 0px 20px 0px;
	padding-bottom: 0px;
}
/*Children of bodyContainer*/


/*Classes*/     
.alt
{
    text-indent: -9000px; /* shifts text off screen so it doesn't sit on an image. Screen readers still see it */
    list-style-type: none;
}
.inline
{
    display: inline;
}
.divider
{
    position: relative;
	top: 10px;
	float: left;
	min-height: 26px;
	width: 100%;
	margin: 0px 0px 0px 0px;
	border-top: dashed 1px #333;
}
.hardline
{
    position: relative;
	top: 0px;
	float: left;
	min-height: 8px;
	width: 100%;
	margin: 0px 0px 0px 0px;
	border-top: solid 1px #333;
}