/* 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;
}

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;
    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;
}

#nav ul
{
    margin: 0;
    padding-left: 75px;
    list-style: none;
    text-align: center;
    background: #050F2E;
}

#nav ul li
{
    display: inline;
    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;
    padding: 0;
    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;
    text-align: center;
    width: 960px;
}
#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: 0px solid #152F52;
    background: #050F2E;
    
}


#shopstory-img
{
    float: left;
    padding: 5px;
    border: solid 0px #050F2E;
}

#shopstory-desc
{
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
}

#shopstory-desc-in
{
    padding-right: 15px;
}
#shopstory-desc-in p
{
    margin-bottom: 0;
}


#shopstory-title
{
    padding-left: 155px;
    border-bottom: 0px solid #164372;
    
}

#shopstory h2{
height:50px;
width:200px;
padding-left:500px;
}


#shopstory p.info a
{
    color: #050F2E;
}
#shopstory p.info a:hover
{
    color: #FFF;
}





#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
---------------------------------------------------------------------------------------------------------- */
#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;
}

#registrationForm
{
    border: solid 2px #FFFFFF;
    background-color: #050F2E;
    padding: 15px;
}
#registrationForm H2
{
    color: #A3B8F5;
}
#registrationFormName, #registrationContactInfo, #registrationAddress, #registrationInfo
{
    border: dashed 0px #0A1F5C;
    padding: 5px;
    font-style: italic;
}
#registrationForm input
{
    font-size: 11px;
}

/* ----------------------------------------------------------------------------------------------------------
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;
}

/* ----------------------------------------------------------------------------------------------------------
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;
}

#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;
}

#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;
}