@import url("content.css"); /* Generic content styles and helpers */
@import url("form.css"); /* Generic form styles */
@import url('model_list_item.css'); /* Model list styles, which may appear on every page */

/* --------------------
Colours:

a:link      #ee1d25
a:visited   #d19c9c

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

/* Elements */
body {
    background: white url('../img/body_bg.png') repeat-x;
    margin:0;
    padding:0;
}

/* Structures */
.nav {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}
.nav li {
    border-left: 1px solid #999;
    padding: 0 0.5em 0 0.8em;
    display: inline;
}
.nav li a  { padding: 0.5em; margin: -0.5em; /* Bulk up the links so they're easier to hit */ }
.nav li:first-child { border: none; padding-left: 0; }
.nav li:last-child  { padding-right: 0; }

/* Top-nav */
#top-navigation a,
#top-navigation a:link,
#top-navigation a:visited   { color:#333; text-decoration:none; }
#top-navigation a:hover     { color:#d19c9c; }

/* User-nav */
#user-navigation { text-align: right; }

#languages
{
    list-style: none;
    text-align: right;
}
#languages li   { display: inline; }


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

#pre-header
{
    text-shadow: white 0 1px 1px;
    margin: 5px 0;
}
#pre-header a    { text-decoration: none; }


#header {
    border-top: 2px solid #eee;
    background: #d4d4d4 no-repeat;
    clear:both;
    display:block;
    margin-bottom:20px;
    overflow:hidden;
    position:relative;
    width:960px;
    padding-top: 202px;
}

/* Explanation: the text for the header is part of the header's background image itself, so we position the header's textual content elements over where the text is placed in the background graphic and then hide their text: leaving
clickable link regions that we can then style with mouseovers if desired. */

#header h1
{
    margin: 0;
}

#header h1 a /* Storm logo link to homepage */
{
    position: absolute;
    top: 130px;
    left: 0;
    width: 204px;
    height: 64px;
    text-indent: -9000px;
}

#header #contact-info /* Opening hours, phone number */
{
    text-indent: -9000px;
}

#header #contact-email /* Link to contact email */
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    height: 24px;
    text-indent: -9000px;
}

#header #facebook /* Link to facebook page */
{
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    text-indent: -9000px;
}


/* Main-nav */
#main-navigation {
    background:#d4d4d4;
    font-size:14px;
    margin: 0.5em 10px;
    text-shadow: white 0 1px 1px;
}
#main-navigation a {
    color:#423f3f;
    text-decoration:none;
}

#main-navigation a:hover,
#main-navigation a:active,
#main-navigation a:focus    { color: #d19c9c; }


/* Search */

#search-form    { font-size: 14px; text-shadow: white 0 1px 1px; margin-top: 0.25em; text-align: right; }
#search label   { padding-right: 5px; }
#search-form #id_textsearch { width: 126px; }
#search-form #submit        { font-size: 96%; }


/* Page content column header strip */
/* -------------------------------- */

#content-header
{
    background: #eee;
    padding: 5px 10px;
    text-shadow: white 0 1px 1px;
    overflow: hidden;
    margin-bottom:20px;
    min-height: 1%;
}

#breadcrumbs { padding: 0 2em 0 0; margin: 0; float: left; }
#breadcrumbs li,  #bike-breadcrumbs li
{
    display: inline;
    padding-right: 1em;
    margin-left: 0.25em;
    background: url("../img/angle_divider.png") 100% 50% no-repeat;
    
}
#breadcrumbs li.current, #bike-breadcrumbs li.current
{
    padding-right: 0;
    background: transparent;
}
#breadcrumbs a, #bike-breadcrumbs a { text-decoration: none; }




/* Sidebar */
/* ------- */

.banner { display:block; text-align:center; }
.banner img { border:none; }


/* Shopping-cart sidebar */
/* --------------------- */

#shopping-cart-sidebar
{
    background-color: #d4d4d4;
    margin-bottom: 20px;
    padding: 0 10px;
    text-shadow: rgba(255, 255, 255, 0.33) 0 1px 1px;
}

#shopping-cart-sidebar h3
{
    font-size: 15px;
    background-color: #eee;
    padding: 0.25em 30px;
    margin: 0 -10px;
}

#shopping-cart-sidebar table
{
    width: 100%;
}

#shopping-cart-sidebar td
{
    padding: 0.25em 0;
}
#shopping-cart-sidebar td a
{
    padding: 0.25em 0.5em;
    margin: 0 -0.5em;
}
#shopping-cart-sidebar .quantity
{
    width: 10px;
    padding-right: 10px;
    text-align: right;
}
#shopping-cart-sidebar .total
{
    border-top: 1px dotted #8b8a8a;
    color: #676464;
    text-align: right;
}
#shopping-cart-sidebar .cart-is-empty
{
    padding: 10px 10px 1px 20px;
}
#shopping-cart-sidebar-heading a
{
    color: black;
    text-decoration:none;
}
#shopping-cart-reseller-link
{
    text-align: center;
    margin: 1em 0;
}



#shopping-cart-sidebar .total .price { color: black; }

#shopping-cart-checkout img
{
    display: block;
    margin: 10px -10px;
    padding-top: 4px;
    background: url("../img/shadow_faint_top.png") repeat-x;
    -webkit-transition: opacity 0.3s ease-out;
}
#shopping-cart-checkout:hover img,
#shopping-cart-checkout:focus img  { opacity: 0.8; }
#shopping-cart-checkout:active img { opacity: 0.7; }


/* Shop nav */
/* -------- */

#shop-navigation
{
    background:#e6e6e6;
    font-size:15px;
    list-style:none;
    margin-bottom:20px;
    border-bottom: 1px solid white;
}

#shop-navigation h4
{
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

#shop-navigation a,
#shop-navigation span
{
    border-bottom:1px solid #fff;
    color:#000;
    display:block;
    line-height:30px;
    padding:0 10px 0 30px;
    margin: 0;
    text-decoration:none;
}


#shop-navigation .selected>a,
#shop-navigation .selected>span,
#shop-navigation .selected>h4>a { color: black !important; }

#shop-navigation a:hover,
#shop-navigation a:active,
#shop-navigation a:focus    { color: #d19c9c; }
#shop-navigation ul
{
    background:#f9f9f9;
    font-size:13px;
    list-style:none;
    padding-left:30px;
    margin: 0;
    border-bottom: 1px solid white;
}
#shop-navigation ul ul { list-style: none; padding-left:15px; border-bottom: 0; }

#shop-navigation ul a,
#shop-navigation ul span {
    background-color: transparent;
    border: 0;
    line-height:1.75;
    padding:0 5px;
    margin-left: -5px;
    color: #676464;
}
#shop-navigation ul a:hover { background: #f1f1f1; }

.subcategories .expands>a                   { display: inline !important; padding-right: 20px !important; background: 100% 50% no-repeat !important; }
.subcategories .expands:hover>a             { color: #d19c9c !important; background-image: url("../img/arrow_down_grey.png") !important; }
.subcategories .selected>.expands:hover>a   { background-image: url("../img/arrow_up_grey.png") !important; }

#shop-navigation ul ul              { display: none; }
#shop-navigation ul li.selected > ul  { display: block; }


/* Ratings */
.rating
{
    display: block;
    display: inline-block;
    vertical-align: text-bottom;
    width: 75px;
    height: 15px;
    background: url("../img/rating_star_black.png");
    overflow:hidden;
}
.rating span
{
    background: url("../img/rating_star_black.png") 0 15px;
    display: block;
    width: 0;
    height: 0;
    padding-top: 15px;
    overflow: hidden;
}
.rating.med {
    background:url('../img/rating_star_black_med.png');
    height:12px;
    width:60px;
}
.rating.med span { background:url('../img/rating_star_black_med.png') 0 12px; }
.rating.sml {
    background:url('../img/rating_star_black_sml.png');
    height:10px;
    width:50px;
}
.rating.sml span { background:url('../img/rating_star_black_sml.png') 0 10px; }


/* Catalogues */
.catalogue a { display:block;}

/* Footer */
#footer { margin:20px 10px; text-align:center; border-top: 1px solid #eee; }
.payment-types { display:inline-block; width:491px; }
.payment-types li {
    background:url('../img/banks.png') no-repeat left top;
    border:none;
    height:35px;
    margin:0 5px;
    overflow:hidden;
    text-indent:-9999px;
    float: left;
    padding: 0;
}
li.op { background-position:left top; width:34px; }
li.sampo { background-position:-40px top; width:55px; }
li.aktia { background-position:-104px top; width:34px; }
li.nordea { background-position:-235px top; width:59px; }
li.visa { background-position:-300px top; width:26px; }
li.verified-by-visa { background-position:-336px top; width:38px; }
li.mastercard { background-position:-146px top; width:25px; }
li.mastercard-securecode { background-position:-419px top; width:43px; }
li.matkahuolto { background-position:-177px top; width:51px; }
li.posti { background-position:-382px top; width:26px; }