/* CSS Document */
/*   comments can be put in here too -- use these comments NOT HTML COMMENTS else it confuses things ie height - pixel text size  

You can't have a fixed px height image and they try to match it by absolutely placing an 
em height on the footer. However you can't set an em height and expect it to match a pixel height such as your image.
Put the image on the background, float the navs, have the rest static. No absolute positioning at all.

*/ 
body {
 text-align:center;
 color : #666;
 background:#fff;
 font-family : Verdana, Arial, Helvetica, sans-serif;
 font-size : 11px;
}
#main {
 width:800px;
 text-align:left;
 margin:auto;
 position:relative; /* Fix 1: Setting the parent element's position to 'relative' 
makes it the containing block for its absolutely positioned children (in this instance: navigation ul)
but then put it in main (which it is now) so that the navigation menu centres & moves like the rest of site when 
change browser size*/
}
#header {
 border: #363636 2px solid;
 margin-bottom:1px;
 height: 35px;
 background: #363636 url(Blindslogo.jpg) no-repeat left center; 
}

/*
#header p {
 padding:5px;
 color:#fff;
 margin:0;
}
*/

#imgfloattwo {
 width:800px;
 text-align:left;
 background:url(Blinds.jpg) no-repeat left top;
}

.ttheading{ /*-- class for H1 */
 color : #1C56B2;
 font-size : 18px;
 margin-bottom: -12px;
 margin-top: 0px;
 background-color:#333333;
}


/*   comments  */

#navigation {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
}

#navigation ul{   /*PSITE taken absolute positioning out.*/
float:right;
width:143px;
list-style: none;
margin: 0;
padding: 0;
}

#navigation li{
border-bottom: 1px solid #ED9F9F;
width: 143px;  /*width of blocks of navigation*/
filter: alpha(opacity=70); /*   opacity only works when u put these 2 lines in Navigation UL or LI and not just navigation  */
opacity: 0.7;
}

#navigation li a{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 0px solid #000;
border-right: 10px solid #000;
background-color: #363636;
color: #FFFFFF;
text-decoration: none;
min-height:0; /*to fix gaps in list navigation and make opacity work*/  
}

#navigation li a:link, navigation li a:visited{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 0px solid #000;
border-right: 10px solid #000;
background-color: #363636;
color: #FFFFFF;
text-decoration: none;
}


#navigation li a:hover{
background-color:  #711515; /*  #711515 red,  #363636 */
color: #FFFFFF;  /* check semicolons, else opacity wont work! */
filter: alpha(opacity=60);  /*  THIS ONLY WORKS IN MOZILLA -- how do i get opacity on hover in IE?? */
opacity: 0.6;
}


#navigationTWO {
margin: 0;
padding: 0;
display: block;
height: 160px;
width: 133px;  /*width of blocks of navigation*/ 
float:right;
clear:right;
background-color: #363636;
border-left: 0px solid #000;
border-right: 10px solid #000;
filter: alpha(opacity=70); /*   opacity  */
opacity: 0.7;
}


#footer{ /*   PSITE taken absolute out. */
 border: #363636 2px solid;
 background-color: #363636;
 color:#fff;
 margin-top:1px;
 padding-top:5px;
 padding-right:10px;
 height: 35px;
 width: 786px;
 clear:both;
 text-align: right;
}

#footerWEB{ /*   PSITE taken absolute out. */
 border: #363636 0px solid;
 background-color: #fff;
 color:#000;
 margin-top:1px;
 padding-top:5px;
 padding-right:10px;
 height: 35px;
 width: 786px;
 clear:both;
 text-align: left;
}



#footerWEB a:link, a:visited{
text-decoration: underline;
color: #711515;
background-color: transparent;
}


/* mac hide \*/
* html #navigation li a {height:1%} /*to fix gaps in list navigation so shows like MOzilla is 1px inbetween, could also have fixed display block!*/
/* end hide */
.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}

 /* mac hide \*/
    * html .clearfix {height: 1%;}
      .clearfix {display: block;}
 /* End hide */