html, body { margin: 0; padding: 0; background-color: #DDFE77; }
body { font-family: 'Maven Pro', sans-serif; font-size: 14px; }
#header { height: 120px; line-height: 40px; background-color: #30277d; }
#header .container { width: 320px; margin: 0 auto; color: #FFF; text-transform: uppercase; }
#header .container .logo { background-color: #30277d; float: left; padding-left: 14px; width: 306px; height: 50px; font-size: 28px; font-weight: 700; padding-top: 70px; }
#header .container .logo span { color: #e30513; }
#header .container .search { position: absolute; top: 35px; left: 0px; padding: 0px 14px; width: 292px; height: 35px; overflow: hidden; }
#header .container .search input { width: 280px; }
#header .container .menu { position: absolute; top: 0px; background-color: #30277d; left: 0; width: 306px; height: 35px; padding-left: 14px; }
#header .container .menu ul { margin: 0; padding: 0; outline: 0; height: 35px; }
#header .container .menu ul li { float: left; list-style-type: none; }
#header .container .menu ul li a { display: block; text-decoration: none; color: #FFF; margin-right: 20px; }
#header .container .menu ul li.shoppingcart { float: left; display: block; padding-top: 4px; }
#header .container .menu ul:after { content: ""; display: table; clear: both; }
#header .container .menu:after { content: ""; display: table; clear: both; }
#header .container:after { content: ""; display: table; clear: both; }

#subheader { margin-bottom: 20px; }
#subheader .container { width: 320px; margin: 0 auto; height: 100px; }
#subheader .container .logo { float: left; padding-left: 60px; width: 106px; height: 109px; margin-top: -13px; }
#subheader .container .slogan { display: none; float: left; width: 767px; height: 100px; line-height: 50px; color: #30277d; text-transform: uppercase; text-align: center; font-weight: 700; }
#subheader .container .slogan ul { margin: 0; padding: 0; outline: 0; }
#subheader .container .slogan ul li { list-style-type: none; background: url('/images/bullet.png') no-repeat center left; padding-left: 15px; display: inline; text-decoration: none; margin-right: 8px; }
#subheader .container .slogan ul li:first-child { background: none; padding-left: 0; }
#subheader .container .slogan ul li:last-child { margin-right: 0; }
#subheader .container .slogan span { font-size: 18px; }
#subheader .container .flags { float: right; width: 53px; padding-top: 13px;  }
#subheader .container .flags a { float: left; width: 24px; height: 24px; display: block; overflow: hidden; }
#subheader .container .flags a:first-child { margin-right: 5px; }
#subheader .container:after { content: ""; display: table; clear: both; }

#subtitle { margin-bottom: 20px; }
#subtitle .container { width: 320px; margin: 0 auto; text-align: center; color: #e30513; font-weight: 700; font-size: 120%; }
#subtitle .container:after { content: ""; display: table; clear: both; }

#content { margin-bottom: 20px; }
#content #breadcrumb, #content #back { width: 292px; margin: 0 auto; text-transform: uppercase; padding: 0px 14px; margin-bottom: 20px; }
#content #back { margin-top: 20px; }
#content #breadcrumb a, #content #back a { text-decoration: none; color: #30277d; }
#content .container { width: 292px; margin: 0 auto; }
#content .container .thumb { float: left; position: relative; width: 138px; margin-bottom: 8px; }
#content .container .thumb a { color: #FFF; text-decoration: none; }
#content .container .thumb:nth-child(2n+2) { margin-left: 12px; }
#content .container .thumb .image:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
#content .container .thumb .image { background-color: #FFF; height: 175px; width: 138px; overflow: hidden; border: 1px solid #aaa; margin-bottom: 5px; text-align: center; }
#content .container .thumb .image img { max-height: 175px; max-width: 138px; vertical-align: middle; }
#content .container .thumb .article { width: 140px; height: 100px; text-align: right; }
#content .container .thumb .article .articlenumber { height: 25px; font-weight: 700; }
#content .container .thumb .article .articlenumber a { color: #000; }
#content .container .thumb .article .description { height: 50px; overflow: hidden; }
#content .container .thumb .article .price { height: 25px; font-weight: 700; }
#content .container .thumb .article .price_sold { height: 25px; font-weight: 700; color: red; text-decoration: line-through; }

#content .container .thumb:hover { cursor: pointer; }
#content .container .thumb:hover > .image { border: 1px solid #e30513; }
#content .container .thumb:hover > .article { color: #e30513; }

#content .container .subcategory { float: left; margin-right: 8px; margin-bottom: 8px; border: 1px solid #000; padding: 8px; }
#content .container .subcategory:hover { cursor: pointer; border: 1px solid #e30513; color: #e30513; }
#content .container .active { border: 1px solid #e30513; color: #e30513; }
#content .container .subcategories { margin-bottom: 10px; }
#content .container .subcategories:after { content: ""; display: table; clear: both; }

/* Shops & Groepen */
#content .container .tile { float: left; width: 138px; height: 178px; margin-bottom: 18px; }
#content .container .tile:nth-child(even) { margin-right: 12px; }
#content .container .tile .image { border: 1px solid #aaa; width: 138px; height: 138px; overflow: hidden; margin-bottom: 10px; }
#content .container .tile .image img { width: 138px; height: 138px; }
#content .container .tile .cat { width: 140px; height: 40px; color: #30277d; text-align: center; font-weight: 700; font-size: 110%; }
#content .container .tile:hover { cursor: pointer; }
#content .container .tile:hover > .image, #content .container .tile.active > .image  { border: 1px solid #e30513; }
#content .container .tile:hover > .cat, #content .container .tile.active > .cat { color: #e30513; }
#content .container:after { content: ""; display: table; clear: both; }

#content .container .detail .image { width: 292px; }
#content .container .detail .image img { max-width: 292px; }
#content .container .detail .article { width: 292px; }
#content .container .detail .article .price { font-size: 130%; font-weight: 700; }
#content .container .detail .article .orderbutton { width: 50%; height: 30px; text-align: center; color: #FFF; background-color: #30277d; text-transform: uppercase; border: none; margin: 0px; padding: 0px; }
#content .container .detail:after { content: ""; display: table; clear: both; }

/* Checkout */
#content .container .payment_method { width: 100%; text-align: center; border: 1px solid #aaa; padding: 10px; margin-bottom: 10px; cursor: pointer; box-sizing: border-box; }

#footer { background-color: #30277d; color: #FFF; }
#footer .container { width: 320px; margin: 0 auto; padding-top: 15px; }
#footer .container .openingshours { float: left; width: 350px; padding-right: 50px; }
#footer .container .title { text-transform: uppercase; color: #e3fe00; font-weight: 700; }
#footer .container .openingshours table { padding: 0; margin: 0; border: 0; font-size: 14px; color: #FFF; line-height: 200%; width: 100%; }
#footer .container .openingshours p { font-size: 12px; }
#footer .container .contact { padding-left: 14px; float: left; width: 306px; }
#footer .container .contact p { margin-top: 0px; line-height: 200%; }
#footer .container .social { float: left; padding: 14px; width: 192px; }
#footer .container .social img { margin-top: 5px; }
#footer .container .index { display: none; float: left; width: 200px; }
#footer .container .index ul { margin: 0; padding: 0; outline: 0; }
#footer .container .index ul li { list-style-type: none; }
#footer .container .index ul li a { margin-bottom: 10px; color: #e3fe00; width: 100%; font-weight: 700; background: url('/../become/images/index_arrow.png') no-repeat center left; padding-left: 15px; display: block; float: left; text-decoration: none; text-transform: uppercase; }
#footer .container:after { content: ""; display: table; clear: both; }