/* webdev: Pim Rijpsma - pim.rijpsma@gmail.com */

.generic-nav, .section-nav, .right-pane, .filter-pane, .sort-pane, .thumb-button, .icon-back, .media-box, #paging, #navigation,  canvas{ display:none !important; }


body{ margin: 0; padding: 0; background: #FFFFFF; color: #000; font: 70%/1.6em Arial, Helvetica, "Lucida Grande", sans-serif; text-align: center; }

a{ color: #666666; text-decoration: underline; outline: none; -moz-outline: none; }
a:hover{ color: #1F98F8; text-decoration: underline; }

h1 a, h2 a, h3 a, h4 a, h5 a{ text-decoration: none; }
h1{ color: #000; margin: 0; padding: 0; font: normal 180% Arial, Helvetica, "Lucida Grande", sans-serif; letter-spacing: 0px; text-transform: capitalize;}
h2{ color: #000; margin: 0; padding: 0 0 0 0; font: normal 170% Arial, Helvetica, "Lucida Grande", sans-serif; letter-spacing: 0px; }
h3{ color: #000; margin: 0; padding: 0 0 0.4em 0; font: bold 135% Arial, Helvetica, "Lucida Grande", sans-serif; letter-spacing: 0px; }
h4{ color: #000; margin: 0; padding: 0 0 0.2em 0; font: normal 120% Arial, Helvetica, "Lucida Grande", sans-serif; }
h5{ color: #000; margin: 0; padding: 0; font: normal 105% Arial, Helvetica, "Lucida Grande", sans-serif; }

p{ margin: 0; padding: 0 0 2em 0; color: #666666; }
blockquote{ margin: 0 0 2em 0; font-size: 140%; color: #999999; font-style: italic; line-height: 1.4em; padding: 0 2em; }
img, img a{ border: none; }

ul, ol{ list-style-type: disc; display:block; margin: 0 0 2em 1em; padding: 0 0 0 2em; }
ul li, ol li , ol li a, ul li a{ line-height: normal; position: relative; }
ul li, ol li{ padding: 0.3em 0; line-height: 1.5em; list-style-type: disc; }
ul.no-bullets{ margin: 0 0 0.8em 0; padding: 0; list-style-type: none; }
ul.no-bullets li{ list-style-type: none; }


form{ margin: 0; padding: 0; }
form p, .form p{ padding: 0.3em 0; margin: 0; clear: both; width: 100%; }
fieldset{ border: none; margin: 1em 0; padding: 0; width: 100%; }
input, textarea{ font: normal 100% Arial, Helvetica, "Lucida Grande", sans-serif; background: #FFF;  border: 1px solid #CBCBCB !important; padding: 2px 4px; width: 98%;  }
input.button, a.button{ cursor: pointer; -moz-border-radius:3px; -webkit-border-radius: 3px; width: auto; white-space: nowrap; border: 1px none #1F98F8 !important; padding: 4px 12px; color: #FFF !important; background: #1F98F8 !important; text-decoration: none; font-weight: bold; }
input.button:hover, a.button:hover{  -moz-border-radius:3px; -webkit-border-radius: 3px; border: 1px none #EBEBEB !important; background: #EBEBEB !important; color: #1F98F8 !important;  padding: 4px 12px; text-decoration: none; font-weight: bold; }
input.checkbox, input.radio{ background: none; border: none; display: inline; float: left; width: 14px; }
label{ display: block; clear: both; margin: 0 0 0.2em 0; cursor: pointer; line-height: 1.4em; }
label.inline, ul li label{ display: block; clear: none; margin: 0 0 0 4px; float: left; width: 85%; }
label:hover{ text-decoration: underline; }
input.fillout{ width: 98%; }

div.checkout-pane{ -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #1F98F8 url(../images/bg-checkout-pane.gif) top left repeat; color: #FFF; margin: 0; padding: 0; float: left; width: 100%; }
div.checkout-pane p{ color: #FFF; }
div.checkout-pane input, div.checkout-pane textarea{ font: normal 100% Arial, Helvetica, "Lucida Grande", sans-serif; background: #FFF;  border: 1px solid #CBCBCB !important; padding: 2px 4px; width: 74%; float: right;  }
div.checkout-pane label.inline{ color: #FFF; display: inline; clear: none; margin: 0 0 0 4px; float: left; width: 20%; }
div.checkout-pane .two-third-pane{ background: #1F98F8; width: 58%; padding-right: 50px; }
div.checkout-pane input.button, div.checkout-pane a.button{ cursor: pointer; -moz-border-radius:3px; -webkit-border-radius: 3px; width: auto; white-space: nowrap; border: 1px none #FFF !important; padding: 4px 12px; color: #FFF !important; background: #005C97 !important; text-decoration: none; font-weight: bold; }
div.checkout-pane input.button:hover, div.checkout-pane a.button:hover{  -moz-border-radius:3px; -webkit-border-radius: 3px; border: 1px none #EBEBEB !important; background: #EBEBEB !important; color: #005C97 !important;  padding: 4px 12px; text-decoration: none; font-weight: bold; }


/* toolbox */
.center{ margin: auto auto; }
.center-txt{ text-align: center; }
.center-page{ margin: 0 auto; overflow: hidden; }
.clear{ clear: both; display: block; }
.clear-right{ clear: right; }
.clear-left{ clear: left; }
.no-clear{ clear: none; display: inline; }
.intro-txt{ margin-top: 1em; font-size: 145%; line-height: 1.5em; }
.big-txt{ font-size: 120%; }
.big-nav *{ font-size: 110%; }
.normal-txt{ font-size: 100%; }
.small-txt{ font-size: 96%; }
.xsmall-txt{ font-size: 88%; }
.line-height-normal{ line-height: normal; }
.left{ float: left;}
.left-img{ margin: 8px 24px 8px 0; float: left; }
.left-txt { text-align: left; }
.line {margin: 0 0 2em 0; width: 100%; border-top: 1px #CBCBCB solid; float: left; }
.padding{ padding: 20px; }
.padding-small{ padding: 10px; }
.padding-xsmall{ padding: 5px; }
.padding-small-content{ padding: 0px; }
.no-margin{ margin: 0; }
.no-margin-bott{ margin-bottom: 0; }
.no-padding{ padding: 0 !important; }
.no-pad-bott{ padding-bottom: 0; }
.no-border{ border: none !important; }
.nofloat{ float: none; }
.right{ float: right; }
.right-img{ float: right; margin: 8px 0 8px 24px; }
.right-txt{ text-align: right; }
.rnd-small{ /*-moz-border-radius:4px;*/ -webkit-border-radius: 2px; }
.rnd-big{ /*-moz-border-radius:6px;*/ -webkit-border-radius: 6px; }
.ui-effects-transfer { border: 3px dotted #1F98F8; } 

.mtop{ margin-top: 10px; }
.mbott{ margin-bottom: 10px; }
.mleft{ margin-left: 10px; }
.mright{ margin-right: 10px; }
.mstop{ margin-top: 5px; }
.msbott{ margin-bottom: 5px; }
.msleft{ margin-left: 5px; }
.msright{ margin-right: 5px; }

.ptop{ padding-top: 10px; }
.pbott{ padding-bottom: 10px; }
.pleft{ padding-left: 10px; }
.pright{ padding-right: 10px; }
.pstop{ padding-top: 5px; }
.psbott{ padding-bottom: 5px; }
.psleft{ padding-left: 5px; }
.psright{ padding-right: 5px; }

.spacer{ margin-right: 20px; }
.date{ margin: 0.4em 0 0.2em 0; clear: both; display: block; }
.block{ display: block; }
.wrap{ width: auto; }
.no-wrap{ white-space: nowrap }
.hide{ display: none; }
.noscript, .print{ display: none; }
.auto{ width: auto; }
.fillout{ width: 100%; }
.inline{ display: inline; }
.overflow-hidden{ overflow: hidden !important; }

.clearfix:after {	content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix {	display: inline-block; }
html[xmlns] .clearfix {	display: block; }
* html .clearfix { height: 1%; }

/* end toolbox */


/* color styles */
.black-txt, .black-txt * { color: #000 !important;  }
a.black-txt:hover, .black-txt a:hover { color: #000 !important; }
.white-txt, .white-txt * { color: #FFF !important;  }
a.white-txt:hover, .white-txt a:hover  { color: #FFF !important; }
.grey-txt, .grey-txt * { color: #989898 !important;  }
a.grey-txt:hover, .grey-txt a:hover  { color: #989898 !important; }


/* collection // cross-browser: display: inline block li > div */
ul.collection { padding: 0; margin: 10px 0 0 0; list-style: none; }
ul.collection li { position: relative; margin: 0 10px 10px 0; padding: 0; width: 32.3%; min-height: 100px; border: 1px none #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 100px; }
ul.collection li:hover{ background: #F9F9F9; }
ul.collection li div{ position: relative; } 
ul.collection li div.thumb-container{ position: relative; padding: 10px; }
ul.collection li div.thumb-photo{ cursor: pointer; width: 100%; text-align: center; margin: 0 0 10px 0; }
ul.collection li div img{ position: relative; width: 100%; border: 1px solid #F9F9F9; /*max-height: 100px;*/ }
ul.collection li p{ margin: 0; padding: 0; color: #989898; }
ul.collection li .thumb-button{ -moz-border-radius:2px; -webkit-border-radius: 2px; background: #E5E5E5; color: #1F98F8; float: right; padding: 6px 8px; position: relative; bottom: 10px; right: 0px; font-size: 110%; text-decoration: none; }
ul.collection li .thumb-button:hover{ text-decoration: underline; color: #FFF; }
ul.collection li h4{ font-size: 130%;}

/* boxes-overview // cross-browser: display: inline block li > div */
ul.boxes-overview { padding: 0; margin: 10px 0 0 0; list-style: none; }
ul.boxes-overview li { position: relative; margin: 0 10px 10px 0; padding: 0; width: 32.3%; min-height: 100px; border: 1px none #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 100px; }
ul.boxes-overview li:hover{ background: #F9F9F9; }
ul.boxes-overview li div{ position: relative; } 
ul.boxes-overview li div.thumb-container{ position: relative; padding: 10px; }
ul.boxes-overview li div.thumb-photo{ cursor: pointer; width: 100%; text-align: center; margin: 0 0 10px 0; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; }
ul.boxes-overview li div img{ position: relative; width: 32%; min-height: 8.8%;/*height workarround for safari*/ margin: 1px; border: 1px none #F9F9F9; float: left; }
ul.boxes-overview li p{ margin: 0; padding: 0; color: #989898; }
ul.boxes-overview li .thumb-button{ -moz-border-radius:2px; -webkit-border-radius: 2px; background: #E5E5E5; color: #1F98F8; float: right; padding: 6px 8px; position: absolute; bottom: 10px; right: 10px; font-size: 110%; text-decoration: none; }
ul.boxes-overview li .thumb-button:hover{ text-decoration: underline; color: #FFF; }
ul.boxes-overview li h4{ font-size: 130%;}

/* boxes // cross-browser: display: inline block li > div */
ul.boxes { padding: 0; margin: 10px 0 0 0; list-style: none; }
ul.boxes li { position: relative; margin: 0 10px 10px 0; padding: 0; width: 47.5%; min-height: 100px; border: 1px none #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 100px; }
ul.boxes li:hover{ background: #E5E5E5; }
ul.boxes li div{ position: relative; } 
ul.boxes li div.thumb-container{ position: relative; padding: 10px; }
ul.boxes li div.thumb-photo{ cursor: pointer; width: 100%; text-align: center; margin: 0 0 10px 0; }
ul.boxes li div img{ position: relative; width: 100%; border: 1px solid #F9F9F9; /*max-height: 100px;*/ }
ul.boxes li p{ margin: 0; padding: 0; color: #989898; }
ul.boxes li .thumb-button{ -moz-border-radius:2px; -webkit-border-radius: 2px; background: #E5E5E5; color: #1F98F8; float: right; padding: 6px 8px; position: relative; bottom: 10px; right: 0px; font-size: 110%; text-decoration: none; }
ul.boxes li .thumb-button:hover{ text-decoration: underline; color: #FFF; }
ul.boxes li h4{ font-size: 130%; color: #000000 !important; padding: 0 0 0.2em 0 !important; margin: 0 !important; }
ul.boxes li h5{ font-size: 110%; color: #000000 !important; padding: 0 0 0.2em 0 !important; margin: 0 !important; }

/* shop // cross-browser: display: inline block li > div */
ul.shop { padding: 0; margin: 10px 0 0 0; list-style: none; }
ul.shop li { cursor: pointer; position: relative; margin: 0 10px 10px 0; padding: 0; width: 32.3%; min-height: 100px; border: 1px none #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 100px; }
ul.shop li:hover{ background: #E5E5E5; }
ul.shop li div{ position: relative; } 
ul.shop li div.thumb-container{ position: relative; padding: 10px; }
ul.shop li div.thumb-photo{ width: 100%; text-align: center; margin: 0 0 10px 0; }
ul.shop li div img{ position: relative; width: 100%; border: 1px solid #F9F9F9; /*max-height: 100px;*/ }
ul.shop li p{ margin: 0; padding: 0 0 1em 0; color: #989898; }
ul.shop li h5{ font-size: 110%; color: #989898; }
ul.shop li a{ color: #1F98F8; text-decoration: none; font-weight: bold; background: url(../images/icon-shop-link.gif) 100% 70% no-repeat; padding: 0 12px 0 0; }

li.last{ margin: 0 -15px 10px 0 !important; /*border: 1px solid red !important;*/ }
#collection li.last-nav, #boxes li.last-nav, #gifts li.last-nav{ margin: 0 10px 0 0 !important; /*border: 1px solid red !important;*/ }

/* content helpers layout */
.full-pane{ width: 90%; overflow: hidden; }
.third-pane{ width: 33%; overflow: hidden; }
.two-third-pane{ width: 66%; overflow: hidden; }
.half-pane{ width: 50%; overflow: hidden; }
.split-pane{ width: 48%; overflow: hidden; }

.media-box{ margin: 1em 0 2em 0; }
.media-box div{ background-color: #CCC; }
.media-box div img{display: block; margin: 0; padding: 0; }
.media-box p{ margin: 0; padding: 0; }
.bg-white p{ color: #999; }

/* page layout */
#framework{ position: relative; width: 100%; text-align: left; }
#container{ width: 100%; height: 100%; float: left; }

#header{ position: relative; width: 100%; min-height: auto; _height: auto; background: #FFF; padding-bottom: 1em; border-bottom: #E4E4E4 1px solid; float: left; }
#homepage #header{ position: relative; width: 100%; min-height: auto; _height: auto; background: #FFF; }
#concept #header{ position: relative; width: 100%; min-height: auto; _height: auto; background: #FFF; }
#header .company-title a{ float: right; height: 48px; width: 132px; overflow: hidden; display: block; }
#header .company-title a span{ display: none; }
#homepage #header .company-title{ display: none;}

#content{ width: 100%; height: 100%; float: left; }
#content .content-pane{ width: auto; }
#content .content-footer-pane{ width: 100%; clear: both; float: left; }
#content .home-pane-left{ float: left; width: 48%; }
#content .home-pane-right{ float: right; width: 48%; }
#content .logo-pane{ width: 100%; float: left; }
#content .logo-pane .cycle-logo{ width: 137px; height: 256px; float: right; }
#content .left-pane{ width: 100%; float: left; }

#content .border-top{ border-top: #E4E4E4 1px none; }
#content .border-bottom{ border-bottom: #E4E4E4 1px solid; }
#content .artist-info{ border-bottom: #E4E4E4 1px solid; width: 100%; float: left; margin-bottom: 10px; }
#content .artist-info p{color: #000 !important; }

#content .detail{ width: 100%; padding: 20px 0 0 0; }
#content .detail li{ vertical-align: top; }
#content .detail .third-pane{ width: 30%; }
#content .detail img.detail-photo{ width: 97.5%; }
#content .detail h4{ padding: 0 0 1em 0; color: #666666; }
#content .detail .thumb-button{ -moz-border-radius:2px; -webkit-border-radius: 2px; background: #1F98F8; color: #FFF; float: right; padding: 3px 8px; ; font-size: 110%; text-decoration: none; }
#content .detail .thumb-button:hover{ -moz-border-radius:2px; -webkit-border-radius: 2px; background: #E5E5E5; color: #1F98F8; float: right; padding: 3px 8px; ; font-size: 110%; text-decoration: none; }

#concept #footer{ color: #666; width: 100%; border-top: 1px #E4E4E4 solid; padding: 1em 0; margin: 0 0 20px 0; height: auto; clear: both; float: left; }
#footer{ color: #999; width: 100%; border-top: 1px #E4E4E4 solid; padding: 20px 0; margin: 20px 0 20px 0; height: auto; clear: both; float: left; }
#footer.small{ color: #999; width: 100%; border-top: 1px #E4E4E4 solid; padding: 20px 0; margin: 20px 0 20px 0; height: auto; clear: both; float: left; }
#footer a{ color: #999; text-decoration: none; }
#footer a:hover{ color: #000; text-decoration: none; }


/* table checkout */
table.checkout{ width: 100%; margin: 0 0 2em 0; border-collapse: collapse; font-size: 110%; }
table.checkout thead td{ padding: 0.1em 0.3em; border-top: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; text-align: left; color: #999; }
table.checkout td{ padding: 0.4em 0.4em; border-bottom: 1px solid #E4E4E4; text-align: left; vertical-align: top; width: auto; color: #666;}
table.checkout td img{ width: 100px; height: 100px; margin: 0; padding: 0; float: left; width: auto; }
table.checkout td.odd{ background: #F5F5F5;}