/* The Corner Surf Shop - CSS */
/* General */
html {
font-size: 100%; /* IE hack */
}
body {
background: #000;
font-family: "Trebuchet MS", Georigia, Arial;
font-size: 0.75em;
color: #F2F2F2;
margin: 0;
padding: 0;
text-align: center;
}
a {
color: #06F;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
margin: 0 0 7px 0;
color: #0066ff;
font-size: 1.8em;
font-weight: bold;
}
h2 {
font-size: 1.5em;
margin-bottom: 6px;
}
h3 {
font-size: 1.3em;
margin-bottom: 5px;
}
h4 {
padding: 0;
margin-bottom: 3px;
font-size: 1em;
}
a img {
border: none;
}
ul {
list-style: square;
}
.x-small {
font-size: 0.8em;
}
.no-pad {
margin: 0;
padding: 0;
float: left;
}
.top-pad-small {
margin-top: 5px;
}
.bottom-pad {
margin-bottom: 20px;
}
.double-pad {
margin: 20px 0 20px 0;
}
/* Containers */
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#container-home {
width: 866px;
margin-left: auto;
margin-right: auto;
}
#container-webcam {
background: url(webcam/frame_bg.jpg) no-repeat;
width: 634px;
height: 521px;
margin: 30px auto 20px auto;
padding: 0 55px 0 0;
}
.relative {
position: relative;
}
* html #webcam-logo {  /* IE6 Hack */
position: absolute;
left: -317px;
top: 0;
}
#webcam-logo {
position: absolute;
left: 0;
top: 0;
}
* html #webcam-image {  /* IE6 Hack */
position: absolute;
left: -132px;
top: 154px;
}
#webcam-image {
position: absolute;
left: 185px;
top: 154px;
}


#webcam-news {
width: 550px;
margin: 0 auto 0 auto;
}

#content {
color: #efefef;
width: 608px;
padding: 52px 0 0 96px;
float: left;
text-align: left;
}
#content-right {
float: right;
width: 350px;
text-align: left;
}
#content-left {
width: 250px;
padding: 0;
text-align: center;
float: left;
}
/* Home */
#shop {
width: 800px;
height: 566px;
position: relative;
margin-left: auto;
margin-right: auto;
background: url(images/the-corner-surf-shop.jpg);
padding: 0;
}
#blurb {
width: 640px;
position: absolute;
top: 533px;
left: 45px;
margin: 0;
padding: 0;
}
#blurb h1 {
font-size: 1.2em;
font-weight: bold;
margin: 0;
color:#FFF;
}
/* Navigation */
#nav-container {
float: left;
margin: 0;
padding: 0;
}
#nav {
width: 866px;
height: 13px;
position: relative;
margin: 0;
padding: 0;
}
ul.menu {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 95px;
list-style: none;
}
ul.menu li {
float: left;
margin: 18px 40px 0 0;
padding: 0;
}
ul.menu li a:link, ul.menu li a:visited {
display: block;
height: 13px;
margin: 0;
padding: 0;
}
#home {
width: 44px;
background: url(images/home.gif);
}
#home a:hover {
overflow:hidden;
background: url(images/home.gif) 0 -32px no-repeat;
}
#products {
width: 66px;
background: url(images/products.gif);
}
#products a:hover {
overflow:hidden;
background: url(images/products.gif) 0 -32px no-repeat;
}
#history {
width: 56px;
height: 15px;
background: url(images/history.gif);
}
#history a:hover {
height: 15px;
overflow:hidden;
background: url(images/history.gif) 0 -30px no-repeat;
}
#contact {
width: 57px;
background: url(images/contact.gif);
}
#contact a:hover {
overflow:hidden;
background: url(images/contact.gif)  0 -32px no-repeat;
}
#links {
width: 57px;
background: url(images/links.gif);
}
#links a:hover {
overflow:hidden;
background: url(images/links.gif)  0 -32px no-repeat;
}
#mailinglist {
width: 123px;
height: 15px;
background: url(images/mailing-list.gif);
}
#mailinglist a:hover {
height: 15px;
overflow:hidden;
background: url(images/mailing-list.gif) 0 -30px no-repeat;
}
/* Footer */
#footer {
width: 800px;
float: left;
margin-top: 30px;
text-align: center;
color: #464646;
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#footer-home {
width: 800px;
float: left;
margin-top: 50px;
text-align: center;
color: #464646;
font-size: 0.8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#footer a, #footer-home a {
text-decoration: none;
}
/* Products */
.products {
}
.products img {
opacity: 0.90;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
}
.products a img {
opacity: 0.90;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
}
.products a:hover img {
opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
}
#special {
width: 147px;
padding: 0 50px 0 50px;
float: left;
}
#special-hdr {
width: 147px;
float: left;
}
#special-bdy {
color: #333;
text-align: justify;
width: 127px;
float: left;
padding: 3px 10px 3px 10px;
background: url(images/specials-bg.gif) repeat-y;
}
#special-ftr {
width: 147px;
height: 116px;
float: left;
background: url(images/specials-bottom.gif) no-repeat;
}
/* History */
.embed-img-right {
margin: 0 0 5px 20px;
float: right;
text-align: center;
}
.embed-img-left {
margin: 10px 20px 5px 0;
float: left;
text-align: center;
}
/* Contact */
#content-left-left {
width: 250px;
padding: 0;
text-align: left;
float: left;
}
.form {
color: #ebebeb;
font-size: 1.1em;
font-weight: bold;
margin: 0 0 0 20px;
width: 320px;

}
.title {
padding-bottom: 3px;
font-size: 1em;
}
.formfield {
color: #000;
font-size: 1.1em;
font-weight: bold;
padding: 3px 3px 0px 3px;
margin-bottom: 10px;
height: 20px;
width: 97%;
background: #B0B0B0;
border: #7C7C7C solid 1px;
}
textarea {
color: #000;
font-size: 1.2em;
font-weight: bold;
padding: 3px 3px 3px 3px;
background: #B0B0B0;
border: #7C7C7C solid 1px;
width: 97%;
height: 100%;
}
.formbutton {
color: #393838;
font-size: 1.1em;
font-weight: bold;
margin:  5px 3px 0 20px;
}