/*
 * Project:		The Longboard Store
 * Date:		2009/08/03
/* ---------------------------------------- */

* { margin: 0; padding: 0; }

html { min-height: 100%; margin: 0 0 1px; font-size: 100.01%; }
body { background: #696969 url(../images/background-a.jpg); font-size: 62.5%; }

@media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } }

body, textarea, input, select, option, button { color: #555; font-family: Verdana,Geneva,sans-serif; line-height: 1.25; }
li, dt, dd, p, th, td, caption, pre { font-size: 1.1em; }
ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; }

a { color: #555; text-decoration: none; }
a:hover, a:focus, a:active { color: #ba4818; text-decoration: none; }

span.warning { color: #ba4818; }

ul, ol, dd, blockquote { padding-left: 40px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
li *, li p, li li, dt *, dd *, p *, th *, td * { font-size: 1em; }

img { border: none; -ms-interpolation-mode: bicubic; }
pre { font-family: "Courier New",monospace; white-space: pre-wrap; }
table { border-collapse: collapse; border-spacing: 0; }
button { overflow: visible; padding: 0 10px; cursor: pointer; } button::-moz-focus-inner { padding: 0; border: none; }

hr { overflow: hidden; height: 1px; margin: 15px 0 !important; margin: -5px 0 8px; padding: 0; border: none; background-color: #ccc; color: #ccc; }
*:first-child+html hr { margin: -7px 0 8px !important; }

.offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; }

span.small { font-size: 80%; }

/* LAYOUT
------------------------------------------- */

#root { width: 770px; margin: 0 auto; }
 #header { }
  #logo { margin: 0; }
   #logo a { }
    #logo img { display: block; }
  #skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; }
   #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10001px; top: 0; z-index: 10001; width: 215px; margin: 15px 0 0 15px; padding: 2px 0; background: #333; color: #fff; text-align: center; text-decoration: none; }
 #top { overflow: hidden; width: 100%; margin: 0 0 3px; padding: 3px 0; background: #c8c8c8;  }
  #nav { display: inline; float: left; list-style: none; margin: 3px 0 0 10px; padding: 0; }
   #nav li { float: left; padding: 0 7px 0 8px; background: url(../images/sep-a.gif) 0 50% no-repeat; }
   #nav li:first-child,
   #nav li.first { padding-left: 0; background: none; }
    #nav li a { }
    #nav li a.active { color: #ba1818 !important; }
    #nav li em { position: absolute; left: -10001px; top: -10001px; }
  #search { position: relative; display: inline; float: right; margin: 0 10px 0 0; }
   #search p { margin: 0; }
    #search p label { text-transform: lowercase; }
    .js #search p label { position: absolute; left: 4px; top: 3px; }
    #search p input { width: 169px; height: 13px; margin: 0; padding: 2px; border: 1px solid #aaa; }
    .js #search p input { width: 137px; padding-right: 34px; }
    .js #search p button { display: none; position: absolute; right: 1px; top: 1px; width: 30px; height: 17px; padding: 0; border: none; border-left: 1px solid #aaa; background: #eee; text-align: center; text-transform: uppercase; }
    * html.js #search p button { right: 0; top: 2px; }
 #content { overflow: hidden; width: 100%; margin: 0 0 3px; padding: 10px 0; background: url(../images/background-b.gif) repeat-y; }
  #secondary { display: inline; float: left; width: 175px; margin: 0 25px 0 10px; }
  #primary { float: left; width: 350px; }
  #tertiary { display: inline; float: right; width: 175px; margin: 0 10px 0 0; }
 #footer { padding-bottom: 30px; }
  #footer ul { overflow: hidden; list-style: none; width: 100%; margin: 0 0 7px; padding: 5px 0; background: #c8c8c8; }
   #footer ul li { float: left; padding: 0 7px 0 8px; background: url(../images/sep-a.gif) 0 50% no-repeat; }
   #footer ul li:first-child,
   #footer ul li.first { padding-left: 10px; background: none; }
    #footer ul li a.active { color: #ba1818 !important; }  
  #footer p { margin: 0 0 3px; padding: 0 10px; color: #c8c8c8; font-size: 1em; }
   #footer p a { color: #c8c8c8; }
   
/* GENERAL
------------------------------------------- */

/* headers */

h1, h2, h3, h4, h5, h6 { }
h1 { font-size: 1.2em; }
h2 { font-size: 1.1em; text-transform: uppercase; }
h3 { font-size: 1.1em; text-transform: uppercase; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.0em; }
h6 { font-size: 1.0em; }

/* containers */

div.sidenav-a { margin: 0 0 15px; }
 div.sidenav-a h2 { margin: 0 0 1px; font-size: 1.1em; }
 div.sidenav-a ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 10px; }
  div.sidenav-a ul li { }
   div.sidenav-a ul li a.active { color: #ba1818 !important; }

div.twitter-a { }
 div.twitter-a h2 { width: 100%; height: 17px; background: url(../images/twitter-a.png) no-repeat; text-indent: -10001px; }
 div.twitter-a ul { list-style: none; margin: 0 0 10px; padding: 0; }
  div.twitter-a ul li { margin: 0 0 3px; }
   div.twitter-a ul li a { display: block; color: #aaa; font-size: 9px; font-style: italic; }
   
/* tables */

table { }
 table th, table td { padding: 5px 10px; border: 1px solid #ccc; }
 
/* forms */

form.a { display: block; margin: 0 0 15px; }
 form.a div.errors { margin: 0 0 10px; padding: 10px; border: 1px solid #900; background: #ba4818; }
  form.a div.errors p { margin: 0 0 5px; font-size: 1em; font-weight: bold; }
  form.a div.errors ul { list-style: none; margin: 0; padding: 0; }
   form.a div.errors ul li { padding-left: 7px; background: url(../images/bullet-a.gif) 0 5px no-repeat; font-size: 0.9em; }
 form.a p { margin: 0 0 5px; }
  form.a p label { float: left; width: 80px; padding: 1px 10px 0 0; }
  form.a p label.radio { float: left; width: 100%; padding: 0 0 4px 0; }
  form.a p label.radio input { float: left; padding: 0; }
  form.a p label.radio input.inputRadio { width: 12px; }
  form.a p label.radio span { padding: 0 0 0 10px; }
  form.a p input { width: 175px; margin: 0; padding: 2px; border: 1px solid #bbb; }
  form.a p textarea { overflow: auto; width: 175px; margin: 0; padding: 2px; border: 1px solid #bbb; }
  form.a p select { width: 181px; margin: 0; padding: 2px; border: 1px solid #bbb; }
 form.a p.submit { margin-top: 10px; padding-left: 90px; }
  form.a p button { }
 
button.clean-a { margin: 0; padding: 0; border: none; background: none; font-weight: bold; vertical-align: middle; }
 
/* lists */

ul.a { margin: 0 0 10px; padding: 0 0 0 15px; }

ul.details-a { list-style: none; margin: 0 0 10px; padding: 0; }
 ul.details-a li { text-align: right; }
  ul.details-a li strong { float: left; font-weight: normal; }
 ul.details-a li.price { margin-top: 10px; padding-right: 4px; font-weight: bold; }
  ul.details-a li.price strong { font-weight: bold; }

ul.products-a { overflow: hidden; list-style: none; width: 366px; margin: 0 0 15px -16px; padding: 0; }
 ul.products-a li { display: inline; overflow: hidden; float: left; width: 75px; margin: 0 0 10px 16px; padding: 0; font-size: 1em; text-align: center; }
 ul.products-a li.separate { display: block; overflow: hidden; clear: both; float: none; width: 100%; height: 1px; margin: 0; padding: 0; font-size: 1px; text-indent: -10001px; }
 ul.products-a li.third { margin-left: 18px; }
  ul.products-a li img { display: block; overflow: hidden; margin: 0 auto -10px; }
 
/* paragraphs */

p.breadcrumbs-a { }
 p.breadcrumbs-a a.active,
 p.breadcrumbs-a strong { color: #ba1818 !important; font-weight: normal; }

/* links */

a.a { background: #fff; }

a.help-a { display: block; overflow: hidden; width: 152px; height: 45px; margin: 0; background: url(../images/help-a.gif) 50% 50% no-repeat; text-indent: -10001px; }

/* other */

.sep-a { margin-bottom: 10px !important; padding-bottom: 11px !important; background: url(../images/sep-b.gif) -2px 100% repeat-x; }
div.sep-a { padding-bottom: 1px !important; }

.ttn { text-transform: none !important; }

.center { text-align: center; }

/* ELEMENTS
------------------------------------------- */

#quick { }
 #quick h2 { margin: 0 0 5px; font-size: 1.1em; }
 #quick p { position: relative; width: 100%; margin: 0 0 5px; }
  #quick p label { display: block; margin: 0 0 3px; }
  .js #quick p label { position: absolute; left: 4px; top: 3px; text-transform: lowercase; }
  #quick p input { width: 169px; padding: 2px; border: 1px solid #bbb; }
  #quick p textarea { width: 169px; padding: 2px; border: 1px solid #bbb; }
  #quick p button { padding: 0; border: none; background: none; }
  #quick p button:hover { color: #ba4818; }
 
/* FANCYBOX
------------------------------------------- */
html, body { height: 100%; }
div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666; display: none; z-index: 30; }
* html div#fancy_overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); }
div#fancy_wrap { text-align: left; }
div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; }
div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url(../images/fancybox/fancy_progress.png) no-repeat; }
div#fancy_loading_overlay { position: absolute; background-color: #FFF; z-index: 30; }
div#fancy_loading_icon { position: absolute; background: url(../images/fancybox/fancy_loading.gif) no-repeat; z-index: 35; width: 16px; height: 16px; }
div#fancy_outer { position: absolute;    top: 0;    left: 0;    z-index: 90;    padding: 18px 18px 33px 18px;    margin: 0;    overflow: hidden;    background: transparent;    display: none; }
div#fancy_inner { position: relative; width:100%; height:100%; border: 1px solid #BBB; background: #FFF; }
div#fancy_content { margin: 0; z-index: 100; position: absolute; }
div#fancy_div { background: #000; color: #FFF; height: 100%; width: 100%; z-index: 100; }
img#fancy_img { position: absolute; top: 0; left: 0; border:0; padding: 0; margin: 0; z-index: 100; width: 100%; height: 100%; }
div#fancy_close { position: absolute; top: -12px; right: -15px; height: 30px; width: 30px; background: url(../images/fancybox/fancy_closebox.png) top left no-repeat; cursor: pointer; z-index: 181; display: none; }
#fancy_frame { position: relative; width: 100%; height: 100%; display: none; }
#fancy_ajax { width: 100%; height: 100%; overflow: auto; }
a#fancy_left, a#fancy_right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; z-index: 111; display: none; background-image: url(data:image/gif;base64,AAAA); outline: none; }
a#fancy_left { left: 0px; }
a#fancy_right { right: 0px; }
span.fancy_ico { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; z-index: 112; cursor: pointer; display: block; }
span#fancy_left_ico { left: -9999px; background: transparent url(../images/fancybox/fancy_left.png) no-repeat; }
span#fancy_right_ico { right: -9999px; background: transparent url(../images/fancybox/fancy_right.png) no-repeat; }
a#fancy_left:hover {  visibility: visible; }
a#fancy_right:hover {  visibility: visible; }
a#fancy_left:hover span { left: 20px; }
a#fancy_right:hover span { right: 20px; }
.fancy_bigIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; }
div#fancy_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; border: 0; padding: 0; margin: 0; }
div.fancy_bg { position: absolute; display: block; z-index: 70; border: 0; padding: 0; margin: 0; }
div.fancy_bg_n { top: -18px; width: 100%; height: 18px; background: transparent url(../images/fancybox/fancy_shadow_n.png) repeat-x; }
div.fancy_bg_ne { top: -18px; right: -13px; width: 13px; height: 18px; background: transparent url(../images/fancybox/fancy_shadow_ne.png) no-repeat; }
div.fancy_bg_e { right: -13px; height: 100%; width: 13px; background: transparent url(../images/fancybox/fancy_shadow_e.png) repeat-y; }
div.fancy_bg_se { bottom: -18px; right: -13px; width: 13px; height: 18px; background: transparent url(../images/fancybox/fancy_shadow_se.png) no-repeat; }
div.fancy_bg_s { bottom: -18px; width: 100%; height: 18px; background: transparent url(../images/fancybox/fancy_shadow_s.png) repeat-x; }
div.fancy_bg_sw { bottom: -18px; left: -13px; width: 13px; height: 18px; background: transparent url(../images/fancybox/fancy_shadow_sw.png) no-repeat; }
div.fancy_bg_w { left: -13px; height: 100%; width: 13px; background: transparent url(../images/fancybox/fancy_shadow_w.png) repeat-y; }
div.fancy_bg_nw { top: -18px; left: -13px; width: 13px; height: 18px; background: transparent url(../images/fancybox/fancy_shadow_nw.png) no-repeat; }
div#fancy_title { position: absolute; bottom: -33px; left: 0; width: 100%; z-index: 100; display: none; }
div#fancy_title div { color: #FFF; font: bold 12px Arial; padding-bottom: 3px; }
div#fancy_title table { margin: 0 auto; }
div#fancy_title table td { padding: 0; vertical-align: middle; }
td#fancy_title_left { height: 32px; width: 15px; background: transparent url(../images/fancybox/fancy_title_left.png) repeat-x; }
td#fancy_title_main { height: 32px; background: transparent url(../images/fancybox/fancy_title_main.png) repeat-x; }
td#fancy_title_right { height: 32px; width: 15px; background: transparent url(../images/fancybox/fancy_title_right.png) repeat-x; }
#cart-list tr td, #cart-list tr th { border: 0px;}
#cart-list thead tr {  background: url(../images/sep-b.gif) -2px 100% repeat-x; }
#cart-list tbody tr.last { background: url(../images/sep-b.gif) -2px 100% repeat-x; }
#cart-list tfoot td.first { text-align: right; }
#cart-list tfoot td.total { font-weight: bold; }
#cart-list tr th { text-align: left;}
#cart-list table tbody input { width: 18px;}
a.clean-a { font-weight: bold;}
#notice { margin: 0 0 10px; padding: 10px; border: 1px solid #c8c8c8; background: #ffc; }
  #notice p { margin: 0px; font-size: 1em; font-weight: bold; }
#errors { margin: 0 0 10px; padding: 10px; border: 2px solid #ba4818; background: #ffc; }
    #errors p { margin: 0px; font-size: 1em; font-weight: bold; }
div.fieldWithErrors { display: inline;}
div.fieldWithErrors label { float: left; width: 80px; padding: 1px 10px 0 0; }
div.fieldWithErrors input { width: 175px; margin: 0; padding: 2px; border: 1px solid #bbb; background: #ffc; }
div.fieldWithErrors textarea { overflow: auto; width: 175px; margin: 0; padding: 2px; border: 1px solid #bbb; background: #ffc; }
div.fieldWithErrors select { width: 181px; margin: 0; padding: 2px; border: 1px solid #bbb; }
a.single-image img { border: 0; }
td.first select, p.small-select select{ width: 169px;  border: 1px solid #bbb; }
p.small-select input { width: 165px; padding: 2px; border: 1px solid #bbb; }
p.contact-last { display: none; }