/* stylesheet by kenneth.r.richardson@gmail.com*/
/*------------------------general html-----------------------------------
1) for common html on all pages
-------------------------------------------------------------------------*/
/*
green #8DDE35
light blue 
medium blue #0a1f5c #081745
dark blue
torq #245A62
lime green #8DDE35
*/

body, div, span, p, a, img, ul, ol, li, caption, table, thead, tbody, tfoot, tr, th, td, form, fieldset, legend, label, dl, dt, dd, blockquote, applet, object, h1, h2, h3, h4, h5 
{border:0;
    margin-left:auto;
    margin-right:auto;}

body {padding:5px 0; 
	  background:url("../style/bg.gif") 0 0 repeat-x; 
	  font:11px "arial", serif;
	  background-color:#0a1f5c; 
	  color:#FFF; 
	  margin-top:0px;
      }
	
a {color:#FFF;}
a:hover {color:#8DDE35;}

h1, h2, h3, h4, h5, h6 {margin:15px 0 10px 0;}
h1 {font-size:16px;}
h2 {font-size:14px;}
h3 {font-size:12px;}
h1, h2, h3 {font-weight:normal;}
h4, h5 {font-size:11px;}

p, table, ul, ol, dl, fieldset {margin:15px 0;}

table {border-collapse:collapse; 
	border-spacing:0; 
	font-size:11px;}
th {
	text-align:center; 
	font-weight:bold;}
th, td {padding:3px 7px;}

ul, ol {margin-left:30px;}
ul ul, ol ol {
	margin:0; 
	margin-left:20px;}
ol {list-style-type:decimal;}
li {display:list-item;}

dt {font-weight:bold;}
dd {margin-left:30px;}

fieldset {position:relative; 
	padding:10px;}
legend {position:absolute; 
	top:-1em; 
	margin:0; 
	padding:5px 10px; 
	font-size:11px; 
	font-weight:bold;}


.box {min-height:1px;}
.box:after {display:block;
    text-align:center; 
	visibility:hidden; 
	clear:both; 
	line-height:0; 
	font-size:0; 
	content:".";}

.relative {position:relative;}

.clear {clear:both;}

.f-left {float:left;} 
 img.f-left {float:left; 
	margin-right:15px;}
.f-right {float:right;} 
 img.f-right {float:right; 
	margin-left:15px;}

.t-left {text-align:left;}
.t-center {text-align:center;}
.t-right {text-align:right;}
.t-justify {text-align:justify;}

.va-top {vertical-align:top;}
.va-middle {vertical-align:middle;}
.va-bottom {vertical-align:bottom;}

.nom {margin:0;}
.nomt {margin-top:0;}
.nomb {margin-bottom:0;}

.noshow {display:none;}


.bigger {font-size:12px;}
.smaller {font-size:10px;}

 
ul.ul-style01 {margin:15px 0; 
	padding:0;
	padding-left:15px; 
	list-style:none;}
ul.ul-style01 li {margin:0; 
	padding:0; 
	padding-left:15px; 
	background:url("../style/ul-style01.gif") 0 6px no-repeat;} 
   
/* ----------------------------------------------------------------------------------------------------------
2) defines layout
---------------------------------------------------------------------------------------------------------- */

  #main {width:960px;
         margin:0 auto;
         position:relative;
         text-align:left;
         }

    #header {position:relative; 
		width:960px; height:200px; 
		background:url("../style/main_header.png") 0 0 no-repeat; 
		overflow:hidden;
		background-color:#081745;}
		
        #logo {position:absolute; 
			top:0; 
			right:20px;
			margin:0;
			font-weight:normal; 
			color:#245A62;}
			        
        #logo a {
			display:inline; 
			padding:5px 10px 0 10px; 
			text-decoration:none; 
	        color:#FFFFFF;
	        font-size: 12px;}
	        
		#logo a:hover 
		{
			color:#8DDE35;
			}
		
        #logo span {font-weight:bold; 
			color:#8DDE35;}

    #nav {padding:0 20px; 
		background:url("../style/nav-bottom.gif") 0 100% no-repeat;
		overflow:hidden;
		background-color:#050F2E;
		text-align:center;
        width:920px;}
		
    #nav ul {margin:0; 
		padding-left:75px; 
		list-style:none;
		text-align:center;
        background:#050F2E;
        width:960px;
        }
		
    #nav ul li {display:inline;
       width:960px;
		margin:0; 
		padding:0;
        background:#050F2E;
		}
		
    #nav ul li a {display:block;
        
		float:left; 
		padding:10px 14px 10px 15px; 
		text-decoration:underline;
		border-right:2px solid #245A62;
		font-size:12px; 
		text-transform:uppercase;
		font-weight:bold;
		text-decoration:none;
		color:#ffffff;
        background:#050F2E;}
		
    #nav ul li#nav-active a {border:0; 
		font-weight:bold; 
		text-decoration:none;
		background:#8DDE35; 
		color:#050f2e;}
		
    #nav ul li a:hover {text-decoration:none;
		background:#8DDE35;
		border-right:2px solid #8DDE35; 
		color:black;}

    #cols-top {clear:both; 
		width:960px; 
		height:15px; 
		margin-top:10px; 
		background:url("../style/cols-top.gif") 0 100% no-repeat; 
		font-size:0; 
		line-height:0;}
		
    #cols-bottom {clear:both; 
		width:960px; 
		height:15px; 
		margin-bottom:10px; 
		background:url("../style/cols-bottom.gif") 0 0 no-repeat; 
		font-size:0; 
		line-height:0;}
		
    #cols {clear:both; 
		width:960px; 
		background:url("../style/cols.gif") 0 0 repeat-y;}
    
        #content {float:left; 
			width:650px; 
			overflow:hidden;
			background:#081745;}
			
			#content .generalinfo
			{
				padding: 22px;
				text-align:justify;
			}
			#content .generalinfo h3
			{
				color:#A3B8F5;
			}
			
        #content .content-padding {padding:0px;}
        
        #aside {float:right; 
			width:300px; 
			overflow:hidden;
			background:#081745;}
			
        #aside .aside-padding {padding:0 15px;}
        
            #aside .title {margin:0; 
				padding:10px 15px; 
				font-size:12px; 
				font-weight:bold;
				border-bottom:1px solid #152F52; 
				background:#050F2E; 
				color:#8DDE35;}

            #aside #search {padding:15px 0; 
				text-align:center;}
				
            #aside #search #search-input {width:170px; 
				padding:5px; 
				font:11px "arial",sans-serif; 
				border:1px solid #152F52; 
				border-right:1px solid #1F477A; 
				border-bottom:1px solid #1F477A; 
				background:#050F2E; 
				color:#FFF;}
				
            #aside #search #search-submit {padding:4px 5px; 
				border:0; 
				font:bold 11px "arial",sans-serif; 
				background:#8DDE35; 
				color:#050F2E;}
            
            #aside table#archive {margin:5px 0 10px 0; 
				padding:0; 
				width:270px;}
				
            #aside table#archive a {text-decoration:none;
				text-indent:25px;
				}
			#aside table#archive a:hover
			{
			}	
			
            #aside table {padding:3px 0;}
            /*#aside table#archive td {background:url("../style/dot.gif") 0 100% repeat-x;}*/
            .right_table_data{background:url("../style/dot.gif") 0 100% repeat-x;}
            #right_table_data2{background:url("../style/dot.gif") 0 100% repeat-x;}
            #aside table#archive2 {margin:5px 0 10px 0; 
				padding:0; 
				width:270px;}
				
            #aside table#archive2 a {text-decoration:none;}
            #aside table#archive2 td 
            {
                padding:3px 0;
                background:url("../style/dot.gif") 0 100% repeat-x;
            }
            #aside table#archive3 {margin:5px 0 10px 0; 
				padding:0; 
				width:270px;}
				
            #aside table#archive3 a {text-decoration:none;}
            #aside table#archive3 td 
            {
                padding:3px 0;
                vertical-align:middle;
                background:url("../style/dot.gif") 0 100% repeat-x;
            }
            
            
    
            #aside ul#rss {margin:10px 0; 
				padding:0; 
				list-style:none;}
				
            #aside ul#rss li 
            {
				display:block; 
				float:left; 
				width:135px; 
				margin:0; 
				padding:0;}
				
            #aside ul#rss li a {display:block; 
				padding:7px 0 7px 40px; 
				background:url("../style/rss.gif") 0 50% no-repeat; 
				text-decoration:underline;}    

    #footer-top {clear:both; 
		width:960px; 
		height:15px; 
		background:url("../style/footer-top.gif") 0 100% no-repeat; 
		font-size:0; 
		line-height:0px;
		background-color:#8DDE35;}
		
    #footer-bottom {clear:both; 
		width:960px; 
		height:15px; 
		background:url("../style/footer-bottom.gif") 0 100% no-repeat; 
		font-size:0; 
		line-height:0;
		background-color:#8DDE35;} 
		       
    #footer {
        width:960px;
		text-align:center;
		font-size:10px;
		background:#8DDE35; 
		color:#050F2E;
		height:15px;}
	#footer a 
	{
	    color:#050F2E;
	    font-weight:bold;
	}
	#footer a:hover
	{
	    color:#FFFFFF;
	}
		
    #footer p {margin:0;
               
               }
    #footer img 
    {
        
       float:right;
       padding-bottom: 0px;
   
    }
    
    #footer a {font-weight:bold; 
		text-decoration:none; 
		color:#050F2E;}
		
    #footer a:hover {text-decoration:underline;}
    
.low, .low a, a.low {}
.low a:hover, a:hover.low {color:#FFF;}

.high, .high a, a.high {color:#FFF;}
.high a:hover, a:hover.high {color:#8DDE35;}

/* ----------------------------------------------------------------------------------------------------------
3) Page: Home
---------------------------------------------------------------------------------------------------------- */

		#feeddiv{
		text-align:left;
		padding-right:10px;
		}

		#feeddiv li{
		clear: both;
		margin-bottom: 1em;
		}
		#feeddiv2{
		text-align:left;
		padding-right:10px;
		}

		#feeddiv2 li{
		clear: both;
		margin-bottom: 1em;
		}
		#feeddiv3{
		text-align:left;
		padding-right:10px;
		}

		#feeddiv3 li{
		clear: both;
		margin-bottom: 1em;
		}
		#feedSurfNews h3
		{
			color:#A3B8F5;
			font-weight:bold;
			
			height:15px;
			width:600px;
		}
		#feedSurfNews li
		{
			clear: both;
			text-align:justify;
			padding-right:10px;
			border-bottom: dashed 1px gray;
		}



#shopstory {padding:15px 0px 18px 15px; 
	border-bottom:1px solid #152F52; 
	background:#050F2E;}
	
#shopstory h2 {font-size:135%;
	text-decoration: underline;
	color: #FFFFFF;}
	
#shopstory h2 a:hover {color:#000;}

#shopstory h2, #shopstory p.info  {margin:0;}

#shopstory p.info {font-size:10px;padding-left:20px;
                    
	color:#050F2E;}
	
#shopstory p.info a {color:#050F2E;}
#shopstory p.info a:hover {color:#FFF;}

#shopstory #shopstory-img 
{
	float:left;
	padding:11px;
	border:solid 3px #66B319;
	}
	
#shopstory #shopstory-desc {padding:10px;                
	text-align: justify;}
	
	
	
#shopstory #shopstory-title {padding:10px; 
	border-bottom:1px solid #80D620; 
	background:#66B319;}
	
#shopstory #shopstory-desc-in {padding-right:15px;}
#shopstory #shopstory-desc-in p {margin-bottom:0;
                                 }

#photos {margin-bottom:15px; font-size:0;}
#photos img {display:block; 
	float:left; 
	width:116px; 
	height:90px; 
	margin-right:10px;}

.columnhalf {background:url("../style/dot-02.gif") 50% 0 repeat-y;
             
             }

    .columnhalf-left 
    {
        float:left; 
        width:318px;
        padding-top:15px;
        }
    .columnhalf-left h4{padding-left:8px; color:#A3B8F5;}
    .columnhalf-left h3{color: #8DDE35;}
    .columnhalf-left .article {padding-left:8px;}
    .columnhalf-left .article h4 {margin:0; margin-bottom:3px;}
    .columnhalf-left .article.bg {background:url("../style/header_bg.png") 0 0 repeat-x;}
    .columnhalf-left .article p {margin:0;}
    .columnhalf-left .article p.info {margin:0px; background:#050F2E;
		margin-bottom:0px; 
		font-weight:normal; 
		font-size:10px;
		}
    
    .columnhalf-right {float:right; width:320px;}
    .columnhalf-right h4{color:#A3B8F5; padding-left:10px;}
    .columnhalf-right h3{color:#8DDE35;}
    .columnhalf-right .article.bg {background:url("../style/header_bg.png") 0 0 repeat-x;}
    .columnhalf-right .article p {color:#A3B8F5; margin:0px;}
    .columnhalf-right .article p.info {color:#8DDE35; margin:0px;}
    .columnhalf-right .article p.info a {color:#FFF;}
    .columnhalf-right .article p.info a:hover {color:#BEED8D;}
    
  #pagehighlightA
  {
	margin-left:10px;
	margin-right:10px;
	background: #050F2E;
	color: #FFFFFF;
	padding: 10px;
	border: 2px solid #F3F1F1;
	text-align:justify;
	font-weight: normal;
  }
  #pagehighlightB
  {
	margin-left:10px;
	margin-right:10px;
	color: #FFFFFF;
	padding: 10px;
	border: 0px solid #050F2E;
	text-align:justify;
	font-weight: normal;
  }
    
    .hx-style01 {font-size:10px; 
	font-weight:bold; 
	text-transform:uppercase; 
	color:#8DDE35;}

	.separator {
	text-align:center; 
	width:650px; 
	height:50px; 
	background:url("../style/separator.png") 0 0 no-repeat; 
	font-size:0;}

/* ----------------------------------------------------------------------------------------------------------
4) Google map - driving directions
---------------------------------------------------------------------------------------------------------- */
#map_canvas 
{
	margin-left: 10px;
	border:5px solid #152F52; 
border-right:5px solid #1F477A; 
border-bottom:5px solid #1F477A; 
	
}
#mapInfowindow
{
    border:solid 1px blue;
    padding:5px;
}
#fromAddress
{
font:11px "arial",sans-serif; 
border:1px solid #152F52; 
border-right:1px solid #1F477A; 
border-bottom:1px solid #1F477A; 
background:#050F2E; 
color:#FFF;
}
#toAddress
{
font:11px "arial",sans-serif; 
border:1px solid #152F52; 
border-right:1px solid #1F477A; 
border-bottom:1px solid #1F477A; 
background:#050F2E; 
color:#FFF;
visibility:hidden;

}
#locale
{
font:11px "arial",sans-serif; 
border:1px solid #152F52; 
border-right:1px solid #1F477A; 
border-bottom:1px solid #1F477A; 
background:#050F2E; 
color:#FFF;   
}
#Submit1
{
border:0; 
font:bold 11px "arial",sans-serif; 
background:#8DDE35; 
color:#050F2E;    
}

h3.section {
	margin-top: 1em;
}

#vertical_slide, #horizontal_slide {
	background: #050F2E;
	color: #FFFFFF;
	padding: 10px;
	border: 2px solid #F3F1F1;
	
}

div.marginbottom {
	/* Since the Fx.Slide element resets margins, we set a margin on the above element */
	margin-bottom: 10px;
}
/* ----------------------------------------------------------------------------------------------------------
5) SURF SCHOOL REGISTRATION FORM
---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------
5) SURF SCHOOL REGISTRATION FORM
---------------------------------------------------------------------------------------------------------- */
.shopForm{padding:0 15px 0 15px;}
#registrationHowTo
{
 border: dotted 2px #A3B8F5; 
 padding:5px;  
 background:#050F2E url('../style/ss_bg.jpg');
 text-align:center;  
}
#registrationHowTo h2
{
    color:#FFFFFF;
    font-weight:bold;
    text-decoration:underline;
    border-bottom:1px dotted blue;
}

#registrationForm
{
	border:solid 2px #FFFFFF;
	background-color:#050F2E;
	padding: 15px;
    text-align:left;
    font-size:11px;
	
}
#registrationForm H2{color:#A3B8F5;}

.registrationName {width:175px;margin-left:5px;}

.registrationPhone1{width:125px;margin:1px 0 1px 3px;}
.registrationPhone2{width:125px;margin:1px 0 1px 17px;}
.registrationPhone3{width:125px;margin:1px 0 1px 17px;}

.address{width:225px;margin:1px 0 1px 8px;}
.city{width:225px;margin:0 0 1px 64px;}
.state{margin:1px 0 1px 57px;}
.zipcode{margin:1px 0 1px 67px;width:50px;}
.email {width:200px;margin:0 0 1px 5px;}
.yourHeight{margin:0 0 1px 22px;}
.yourWeight{margin:1px 0 0 19px;}
.birthYear{width:40px;margin:1px 0 1px 3px;}
.error_strings{color:red;}

#ConfirmHeader {text-align:center;font-family: Arial,Helvetica,sans-serif;
}
#ConfirmHeader ul{margin:0; padding:0; list-style:none;}

#ConfirmHeader li{display:inline;margin:0; padding:0;}

#ConfirmHeader a:link{padding:0px 5px 0px 5px;text-decoration:underline;
		border-right:1px solid #A3B8F5;font-size:10px;text-transform:uppercase;font-weight:bold;
		text-decoration:none;color:#A3B8F5; text-align:center;}

#ConfirmHeader a:hover{display:inline;padding:0px 5px 0px 5px;text-decoration:underline;
		border-right:1px solid #A3B8F5;font-size:10px;text-transform:uppercase;font-weight:bold;
		text-decoration:none;color:#8DDE35; text-align:center;}

#ConfirmHeader a:visited{display:inline;padding:0px 5px 0px 5px;text-decoration:underline;
		border-right:1px solid #A3B8F5;font-size:10px;text-transform:uppercase;font-weight:bold;
		text-decoration:none;color:#A3B8F5; text-align:center;}
#formConfirm{
    margin-left:auto;
    margin-right:auto;
        width:600px;
        border:solid 2px #FFFFFF;
	background-color:#050F2E;
	padding: 15px;
    text-align:left;
    font-size:11px;}
#formConfirm b{color:#8DDE35;font-weight:bold;}
#formConfirm h2{color:#A3B8F5;font-weight:bold; text-align:center;}



				
/* ----------------------------------------------------------------------------------------------------------
6) IMAGE GALLERY
---------------------------------------------------------------------------------------------------------- */

.highslide {
	cursor: url("../images/zoomin.cur"), pointer;
    outline: none;
    
}
.highslide img {
	border: 2px solid #FFFFFF;
}
.highslide:hover img {
	border: 2px solid #66B319;
}

.highslide-image {
    border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    color: white;
    border-bottom: solid 2px #66B319;
    border-top: solid 2px #66B319;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: #305067;
}
.highslide-loading {
    display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
    text-decoration: none;
	padding: 3px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
    background-color: black;
    
    padding-left: 22px;
    background-image: url("../images/loader.gif");
    background-repeat: no-repeat;
    background-position: 3px 1px;
    
}

a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: White;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
/* ----------------------------------------------------------------------------------------------------------
7) OFF THE LIP HOME PAGE BLOG LINKS
---------------------------------------------------------------------------------------------------------- */
#blog_links
{
    
    padding-bottom:1px;
    background: url("../style/header_bg.png") 0 0 repeat-x;
}
#blog_links h3
{
    color: #8DDE35;
    padding-left:5px;
    font-size:11px;
}
#blog_links p
{
    padding-left:5px;
    font-style:italic;
}
#blog-links p.postDate
{
    color:Blue;
}
#designby {color:#8DDE35; width:960px;margin-left:auto; margin-right:auto; text-align:center;}
#designby a:link {font-size:11px;color:#8DDE35; text-align:center; width:960px; text-decoration:none;}
#designby a:hover {color:#A3B8F5; text-decoration:underline;}