/*
***********************************************************
www.surfingthenations.com

Title:			style.css
Browser(s): 	All

Author: 		Grayden

***********************************************************
*/


/* Body */
/* ----------------------------------------- */

body {
background-color: #000000;
font-family: Arial,Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #666666;
text-align: center;
padding: 0px;
margin: 0px;
}

p {
line-height: 20px;
margin: 0px 0px 15px 0px;
}

.green {
color: #D5F000;
padding: 0px 10px 0px 0px;
}

h1 {
font-size: 40px;
color: #FFFFFF; 
}

h2 {
font-size: 25px;
color: #FFFFFF;
margin: 0px 0px 10px 0px; 
}

h3 {
font-size: 20px;
margin: 15px 0px 10px 0px;
font-weight: normal;
color: #FFFFFF;
}

h4 {
font-size: 12px;
margin: 0px 0px 10px 0px;
font-weight: normal;
color: #FFFFFF;
text-align: right;
}

/* ----------------------------------------- */

/* Wrapper */
/* ----------------------------------------- */

div#wrapper {
width: 900px;
margin: 0px auto;
text-align: left;
}

/* ----------------------------------------- */

/* Header */
/* ----------------------------------------- */

div#header {
width: 874px;
height: 1%;
overflow: hidden;
padding: 0px 13px 20px 13px;
border-bottom: 1px dotted #545454;
}

div#header-left {
float: left;
padding: 20px 0px 0px 0px;
}

div#header-right {
float: right;
height: 1%;
overflow: hidden;
}

ul#main-nav li {
float: left;
list-style-type: none;
padding: 0px 0px 0px 5px;
}

ul#main-nav li a, ul#main-nav li a:visited  {
text-decoration: none;
color: #545454;
font-size: 12px;
margin: 0px ;
padding: 10px 5px; 
border-top: 3px solid #000000;
display: block; 
}

ul#main-nav li a:hover, ul#main-nav li a#current {
color: #FFFFFF;
border-top: 3px solid #e2fe00;
}

div.info {
color: #FFFFFF;
margin: 45px 0px 0px 0px;
display: block;
text-align: right;
font-size: 18px;
}

/* ----------------------------------------- */


/* Home */
/* ----------------------------------------- */

div#floating {
width: 874px;
height: 1%;
overflow: hidden;
}

div#floating img {
float: left;
width: 605px;
height: 145px;
}

div#floating p {
display: block;
width: 200px;
height: 1%;
float: right;
font-size: 12px;
color: #FFFFFF;
}

div#banners {
width: 874px;
margin: 0px auto;
padding: 10px 0px 25px 0px;
margin: 0px 0px 28px 0px;
border-bottom: 1px dotted #555555;
height: 1%;
overflow: hidden;
}

.box_1 {
width: 212px;
height: 310px;
text-decoration: none;
display: block;
background-image: url(../images/box_1.jpg);
background-position: 0 0;
text-indent: -9999px;
float: right;
margin-right:8px;
}

.box_1:hover { 
background-position:0 -310px; 
}

.box_2 {
width: 212px;
height: 310px;
text-decoration: none;
display: block;
background-image: url(../images/box_2.jpg);
background-position: 0 0;
text-indent: -9999px;
float: right;
margin-right:9px;
}

.box_2:hover { 
background-position:0 -310px; 
}

.box_3 {
width: 212px;
height: 310px;
text-decoration: none;
display: block;
background-image: url(../images/box_3.jpg);
background-position: 0 0;
text-indent: -9999px;
float: right;
margin-right:8px;
}

.box_3:hover { 
background-position:0 -310px; 
}

.box_4 {
width: 212px;
height: 310px;
text-decoration: none;
display: block;
background-image: url(../images/box_4.jpg);
background-position: 0 0;
text-indent: -9999px;
float: right;
}

.box_4:hover { 
background-position:0 -310px; 
}

.giving-back {
width: 588px;
height: 327px;
text-decoration: none;
display: block;
background-image: url(../images/surfing_giving_back.jpg);
background-position: 0 -330px;
text-indent: -9999px;
}

.giving-back:hover { 
background-position:0 0; 
}

/* ----------------------------------------- */


/* Content */
/* ----------------------------------------- */

div#content {
width: 874px;
height: 1%;
overflow: hidden;
padding: 20px 13px;
}

div#content-left {
float: left;
width: 133px;
padding: 38px 0px 0px 0px;
}

ul.sub-nav {
margin: 0px 0px 30px 0px;
padding: 0px;
list-style-type: none;
}

ul.sub-nav li {
display: block;
clear: left;
height: 1%;
overflow: hidden;
}

ul.sub-nav a, ul.sub-nav a:visited {
font-size: 14px;
padding: 1px 5px 2px 5px;
margin: 0px 0px 5px 0px;
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
float: right;
font-weight:none;
}

ul.sub-nav a:hover, ul.sub-nav a#current {
background-color: #D5F000;
}



/* ----------------------------------------- */


/*sub-nav2 When the links are too long*/
/* ----------------------------------------- */

ul.sub-nav2 {
margin: 0px 0px 30px 0px;
padding: 0px;
list-style-type: none;
overflow: hidden;
}

ul.sub-nav2 a, ul.sub-nav2 a:visited {
font-size: 15px;
padding: 3px;
margin: 0px 0px 3px 0px;
color: #000000;
background-color: #FFFFFF;
text-decoration: none;
float: right;
}

ul.sub-nav2 a:hover, ul.sub-nav2 a#current {
background-color: #D5F000;
}

/* -------------- End Sub-nav2 --------------------------- */


div#content-right {
float: right;
width: 728px;
height: 1%;
overflow: hidden;
}

div#main-content {
height: 1%;
overflow: hidden;
margin: 0px 0px 20px 0px;
}

div#main-content-left {
float: left;
width: 500px; 
}

div#main-content-right {
float: right;
width: 204px;
}

p.action-links a, p.action-links a:visited {
background-color: #D3EF00;
color: #000000;
padding: 1px 5px 2px 5px;
text-decoration: none;
}

p.action-links a:hover {
background-color: #FFFFFF;
}

span.small-title {
color: #D3EF00;
font-size: 14px;
margin: 5px 0px;
display: block;
}

.other-links a, .other-links a:visited{
color: #00b0aa;
padding: 2px;
cursor:pointer;
text-decoration:none;
}

p.other-links a:hover {
text-decoration: none;
}

img.main-image {
display: block;
border-bottom: 8px solid #D5F000;
margin: 0px 0px 15px 0px;
}

div.real-stories {
overflow: hidden;
height: 1%;
border-bottom: 1px dotted #333333;
margin: 0px 0px 15px 0px;
}

img.real-stories-pic {
float: left;
margin: 3px 25px 0px 0px;
}

span.real-stories-title {
color: #D3EF00;
font-size: 16px;
}

p.block-link {
text-align: right;
}

p.block-link a, p.block-link a:visited{
background-color: #E2FE00;
color: #000000;
padding: 0 7px 0 7px;
margin: 10px 0px 0px 5px;
text-decoration: none;
font-size:12px;
font-weight:bold
}

p.block-link a:hover {
background-color: #FFFFFF;
}

div#more-info {
margin-top:30px;
font-size:12px;
}

ul.photos li {
width: 204px;
padding: 0px 17px;
margin: 0px 0px 25px 0px;
float: left;
border-bottom: 1px solid #555555;
display: block;
font-size:12px;
}

.media_box {
width: 204px;
font-size:12px;
float: left;
margin-right:30px;
}



.green-title {
font-size: 14px;
color: #D5F000;
margin-top:10px;
padding: 0px 10px 0px 0px;
}

.float-right {
float:right;
margin-top:14px;
}

.float-left {
float:left;
}

.dotted-line {
border-bottom: 1px dotted #545454;
width:673px;
height:1px;
background-color:#000000;
margin-bottom:25px;
}


/* ----------------------------------------- */

/* Home Page */
/* ----------------------------------------- */

div#home-left {
float: left;
width: 620px;

}


div#home-right {
float: right;
width: 232px;
font-size:12px;
}

div#home-right h3 {
font-size: 20px;
margin: 0px 0px 10px 0px;
font-weight: normal;
color: #FFFFFF;
}


 
/* ----------------------------------------- */ 

/* Footer */
/* ----------------------------------------- */

div#footer {
width: 874px;
height: 1%;
overflow: hidden;
padding: 10px 13px 20px 13px;
border-top: 1px solid #FFFFFF;
}

div#footer-left {
float: left;
}

ul#sec-nav li {
float: left;
list-style-type: none;
padding: 0px 15px 0px 0px;
}

ul#sec-nav li a, ul#sec-nav li a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
display: block; 
}

ul#sec-nav li a:hover {
color: #00B0AA;
}

div#copy-info {
color: #FFFFFF;
font-size: 11px;
margin: 30px 0px 0px 0px;
line-height: 15px;
}

ul#connect li {
float: left;
list-style-type: none;
padding: 0px 0px 0px 15px;
color: #FFFFFF;
font-size: 11px;
}

ul#connect li a, ul#connect li a:visited {
text-decoration: none;
display: block; 
}

div#footer-right {
float: right;
height: 1%;
overflow: hidden;
}

/* ----------------------------------------- */

/* Clear */
.clear 			{ clear: both; }