#shadow {
border:1px solid #bdc1a3;
/*Learn About it here: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ */
-moz-box-shadow: 3px 3px 4px #c0c0c0;
-webkit-box-shadow: 3px 3px 4px #c0c0c0;
box-shadow: 3px 3px 4px #c0c0c0;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#c0c0c0')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#c0c0c0');
}
#shadowDark {
}
.clear {
clear:both;
}
/*Nav Bar */
.navbar {
height:auto;
position:absolute;
left:250px;
bottom:15px;
margin:0 auto;
z-index:200;
font-size:17px;
letter-spacing:1.7px;
}
.navbar li {
display:inline;
list-style:none;
color:#0a456a;
height:100%;
padding:3px 3px;
margin:0 9px;
position:relative;
}
.navbar a {
text-decoration:none;
color:#0a456a;
}
.navbar img {
vertical-align: middle;
}
.navbar li:hover {
border-bottom:5px solid #0a456a;
}
.navbar ul {
position:relative;
z-index:200;
}
.navbar div {
visibility:hidden;
position:absolute;
top:32px;
left:0;
width:300px;
padding:5px;
font-size:75%;
overflow:hidden;
background:#F7F5F0 url(../images/nav-bg2.png) repeat-x top;
-moz-box-shadow: 0px 15px 15px 0px #252525;
-webkit-box-shadow: 0px 15px 15px 0px #252525;
box-shadow: 0px 15px 15px 0px #252525;
border-top:none;
}
.navbar div a {
display:block;
text-align:left;
text-decoration:none;
padding:10px;
border:none;
width:auto;
height: 20px;
margin:5px 0;
color:#1d1d1d;
}
.navbar div a:hover {
color: #666;
text-decoration:underline
}
/*End Nav Bar*/
/* === carrierTable Page ===*/
.carrierTable {
width:400px;
margin-left:45px;
background-color:#FFF
}
.carrierTable td {
width:50%;
height:120px;
padding:5px;
vertical-align:middle;
height:132px;
text-align:center;
border-top-color:#cccccc;
border-right-color:#cccccc;
border-bottom-color:#cccccc;
border-left-color:#cccccc;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-left-style:solid;
border-bottom-style:solid;
}
.carrierTable td a:hover {
text-decoration:none;
}
.comp_cell {
height:132px;
text-align:center;
border-top-color:#cccccc;
border-right-color:#cccccc;
border-bottom-color:#cccccc;
border-left-color:#cccccc;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-left-style:solid;
border-bottom-style:solid;
}
.carrierTable img {
max-width:200px;
}
/* === carrierTable Page ===*/
/* === active state === */
/*
Active state works with an #id tag that changes for every page. In the examples below (body#about) states that the tag is being given the about #id. The .active_ is specifying which active class is being called on the header.php.
So for instance, let's say we go to the about us page, is written in the header, since we're on about us the active variable ($active="";) on the page should be filled in with "about" and there fore posting "about" in the tag (). With this information the .active_ class comes into play. When each #id tag is enabled on the tag the corresponding .active_ class is given a background. ".activea" is associated with the "body#about" tag, essentially the #about .activea can be named what ever you wish (i.e. body#corner, body#puppy, or .activep, .activel, .activeabout) as long as the corresponding #id is labeled in the $active=""; attribute on each page (i.e. body#puppy --- $active="puppy"). The letter I've chosen behind the .active class is "a" which is a reference to "about" so body#about .activea {} is all related to the same $active variable, "about." This is my way of keeping things organized, however, you may use any variable you wish.
The next step you need to remember is to put the .active_ class on your nav system. So again, say we travel to the about us page and we already know that when we activate the about.php anchor tag the #id for the body is going to be "about". From this we can judge that the list item that holds the about.php anchor should have the .activea class associated with it (i.e. About Us). Once this is done the active state should recognize that when gets its value from the css and ignores the other classes as they are associated with other #id tags.
1. make sure you have a value in the $active variable on the top of each page which is associated with the $pageTitle variable but not the same (i.e. $pageTitle="About Us"; / $active="about"; or $active="abt";).
2. note that the body#(your $active value) on the css should match that from the top of the page for each page (i.e. "About Us Page" $active="about"; / body#about // "Contact Us Page" $active="cont" / body#cont).
3. add the .active_ classes to your nav system list items, make sure that these are also the same on the css sheet as well as the header (i.e. / body#about .activea {}).
4. make sure you have the list-active.png in your images folder. DONE!!!!
*/
body#about .activea {
background:url('images/list-active.png') repeat-x;
} /* For more active states copy and paste this style and change attributes to match above statements */
body#cont .activeco {
background:url('images/list-active.png') repeat-x;
}
.contactTable {
display:inline;
float:left;
width:600px;
margin-left:30px;
}
.contactTable td {
height:20px;
}
.quoteform {
margin-left:50px;
}
.quoteform td {
height:20px;
}
.quoteform input {
width:290px;
}
.quoteform select {
width:290px;
}
/*glossary*/
.glossary {
margin-left:40px;
font-size:12px;
}
.glossarytitle {
margin:10px 25px;
border-bottom:1px #333 solid;
font-size:14px;
}
.glossarytitle .backtotop:link {
margin-left:25px;
text-decoration:none;
color:#333;
}
.glossarytitle .backtotop:hover {
color:#999;
}
.glossarytitle .backtotop a:hover {
color:#999;
}