body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;}

body {
    background-color: white;
}

table {
	border-collapse:collapse;
	border-spacing:0;}
	
fieldset,img { 
	border:0;}
	
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;}
	
ol,ul {
	list-style:none;}
	
caption,th {
	text-align:left;}
	
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;}
	
q:before,q:after {
	content:'';}
	
abbr,acronym { 
  border:0;}

a:link, a:visited {
  text-decoration: none;}
  
a:hover, a:active {
  text-decoration: underline;}

body {
  width: 1040px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  color: #000000;}
  body a {
  color: #000000;
  font-weight: bold;}
  
p {margin-bottom: 15px;}
 
#header {
	background: url(/images/header.gif) no-repeat top left;
	height: 195px;
	width: 1040px;
	margin: 5px 0 -5px 1px;}

/*making everything not float about using content, can i get rid of this div somehow?*/

#mainNav {
	background: url(/images/mainNav.gif) no-repeat top left;
	float: left;
	width: 141px;
	height: 562px;
	margin-left: 5px;
	padding: 5px 0 0 21px;}
	#mainNav li {
	  background: url(/images/mainNav_inactive.gif) no-repeat top left;
	  width: 105px;
	  padding-left: 20px;
	  line-height: 50px;
	  height: 50px;}
	  #mainNav .contact {padding-left: 10px;}
	  #mainNav .pricing {padding-left: 25px;}
	  #mainNav .home {padding-left: 30px;}

/*mainNav "current page" selector. all main-names must be here*/

#home #mainNav .home,
#services #mainNav .services,
#products #mainNav .products,
#pricing #mainNav .pricing,
#contact #mainNav .contact {
  background: url(/images/mainNav_active.gif) no-repeat top left;
  height: 53px;}

/*The name of the div containing the subnav, maincontent and secondary content is the same name as the sub-name of the page ie the name that will appear on the subnav tab. sems superfluous, can i merge it with content? currently floating so stuff doesnt stick on mainNav*/

#container {
  float:left;
  width: 821px;
  margin: 15px 0 0 -2px;}


#subNav { 
float: left;
background: #ffffff;
width: 821px;
height: 40px}
  #subNav li {
    font-size: medium;
    background: url(/images/subNav_inactive.gif) no-repeat top left;
    float: left;
    display: inline;
    width: 136px;}
    #subNav li a {
        margin-left: 20px;
        line-height: 40px;}
    #subNav .contact_lenses a,
    #subNav .opening_hours a,
    #subNav .price_contacts a,
    #subNav .special_offers a{
        margin-left: 10px;}
    #subNav .frame_repairs a {
        margin-left: 15px;}
    #subNav .advice a,
    #subNav .frames a,
    #subNav .price_frames a,
    #subNav .price_lenses a,
    #subNav .find_us a,
    #subNav .lenses a {
        margin-left: 35px;}
    
    #subNav .gallery {
    background: url(/images/subNav_inactive.gif) no-repeat top right;
    width: 120px;
  }
  

  

/*"current page" selector for the subnav bar. all subnav names must be here*/   


#welcome #subNav .welcome,
#warranties #subNav .warranties,
#concessions #subNav .concessions,
#order_times #subNav .order_times,
#eye_exams #subNav .eye_exams,
#frame_repairs #subNav .frame_repairs,
#advice #subNav .advice,
#frames #subNav .frames,
#lenses #subNav .lenses,
#sunglasses #subNav .sunglasses,
#contact_lenses #subNav .contact_lenses,
#accessories #subNav .accessories,
#eye_examinations #subNav .eye_examinations,
#price_frames #subNav .price_frames,
#price_lenses #subNav .price_lenses, 
#price_contacts #subNav .price_contacts,
#special_offers #subNav .special_offers,
#find_us #subNav .find_us,
#opening_hours #subNav .opening_hours,
#lens_materials #subNav .lenses,
#single_vision #subNav .lenses,
#multifocals #subNav .lenses,
#bifocals_trifocals #subNav .lenses,
#desk_work #subNav .lenses,
#scratch_resistance #subNav .lenses,
#anti_reflection #subNav .lenses,
#transitions #subNav .lenses,
#polarised #subNav .lenses,
#uv_tt #subNav .lenses,
#polished_edges #subNav .lenses,
#gallery #subNav .gallery {
  background: url(/images/subNav_active.gif) no-repeat top left;}

   #gallery #subNav .gallery {
    background: url(/images/subNav_active.gif) no-repeat top right;
    width: 120px;
  }
  
#contents {
clear:both;
background: url(/images/mainBox_tile.gif) repeat-y top left;
overflow: auto;
}

#backgroundhook {
  background: url(/images/mainBox_top.gif) no-repeat top left;
  overflow: auto;
}

#welcome #backgroundhook,
#eye_exams #backgroundhook,
#frames #backgroundhook,
#eye_examinations #backgroundhook,
#find_us #backgroundhook {
  background: url(/images/mainBox_top_first.gif) no-repeat top left;
  overflow: auto;
}

#mainContent {
  float: left;
  padding: 10px 30px 30px 30px;
  width: 394px;
  min-height:435px;
  height:auto !important;
  height:435px;
  margin: 0 10px 10px 0;
  font-size: medium;}
  #mainContent h2 {
    font-weight: bold;
    font-size: x-large;
    margin: 25px 0 15px 0;}
    #mainContent h3 {
      font-weight: bold;
      margin: 25px 0 15px 0;}

/*min-height hack in main and secondary content for ie6, but should work universally...*/

#mainContent .mini_nav {
    margin: 5px 0 10px 0;}
  #mainContent .mini_nav a {
      text-decoration: underline;
      font-weight: normal;}
    #mainContent .mini_nav #this {
        font-weight: bold;}

#mainContent #opening th, #mainContent #opening td {
    width: 100px;
    padding-left: 20px;}
  #mainContent #opening .odd {
    background-color: #F3F5D3;}

#secondaryContent {
float: left;
background: #E7EBA7;
width: 336px;
min-height: 500px;
height:auto !important;
height:500px;
margin-top: 42px;}
  #secondaryContent .roundingBox {
    background: url(/images/roundingBox_top.gif) no-repeat top left;
    padding-top: 10px;
    min-height:414px;
    height:auto !important;
    height:414px;}
        #lens_materials #secondaryContent{
        min-height:660px;
        height:auto !important;
        height:660px;}
        #eye_exams #secondaryContent{
        min-height:720px;
        height:auto !important;
        height:720px;}
        #gallery #secondaryContent{
        min-height:1600px;
        height:auto !important;
        height:1600px;}
        #contact_lenses #secondaryContent{
        min-height:790px;
        height:auto !important;
        height:790px;}
        #find_us #secondaryContent{
        min-height:780px;
        height:auto !important;
        height:780px;}
        #home #secondaryContent{
        min-height:550px;
        height:auto !important;
        height:550px;}
        #multifocals #secondaryContent{
        min-height:880px;
        height:auto !important;
        height:880px;}

#secondaryContent h2 {
  font-weight: bold;
  margin: 20px 0 20px 110px;
  font-size: larger;}
  #secondaryContent #t_and_c {
    margin-left: 60px;} 

#secondaryContent .nesty_nav {
  margin: 0 0 50px 25px;}
  #secondaryContent .nesty_nav li a{
    text-decoration: underline;}
    #secondaryContent .nesty_nav li #this_one {
      text-decoration: none;}


  
#secondaryContent .display {
  margin-left: 6px;}
  #secondaryContent .display img{
    display: block;
    float: left;
    margin: 10px 0 0 10px;}
 
/*gallery*/
 
.thumbs td {
  padding: 10px 15px 10px 15px;}
  #mainContent .thumbs {
    margin: -5px 0 0 -20px;}
  #secondaryContent .thumbs {
    margin-left: 20px;}
  #gallery #secondaryContent h2 {
    font-size: x-large;}
    
#footer {
  clear: both;	
  background: url(/images/footer.gif) no-repeat top left;
  height: 80px;
  margin-left: 7px;}
  #footer p {
    padding-top: 33px;
    margin-left: 180px;
    color:#ffffff;}
    #footer p a {
    color: #FFFFFF;
    font-weight: normal;}

