/* - DOCUMENT INFORMATION
------------------------------------------------- 
	Website Name: Webshop voor starters
	Version: 1.0
	Ontwikkeling: Pendo Internet Solutions ism Web Creative
*/

.videodetector {
	position      : relative;
	width         : 100%;
	height        : 0;
	padding-bottom: 60%;
}

.videodetector iframe {
	position: absolute;
	top     : 0;
	left    : 0;
	width   : 100%;
	height  : 100%;
}

/* - CONTENTS
-------------------------------------------------
    - Globaal .............................. 1.0
    	- Tekst ............................ 1.1
		- Tabel ............................ 1.2
		- Album ............................ 1.3
    	- Menu ............................. 1.4		   	  	
    	- Slider / Header .................. 1.5
   		- Footer ........................... 1.6			        
*/


/* - 1.0 - GLOBAAL
---------------------------------------------- */

	


	html { 
		background: url("http://www.loslopers.nl/uploads/template/website_62/page_background.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
	}	
	
	body {
		background-color: transparent;
		font-family: 'oxygenregular';
		color: #000000;
	}
	
	.maincontent { padding-bottom: 20px; }
	
	.wrapper {
		margin-top:15px;
	}
	
	.content {
		max-width:910px;
		margin: 0 auto;
		background-color: #ebebeb;
		color: #000000;
	}
	
	.content ul, .content ul li {
		color: #000000;
	}
	.content ul {
		padding-left: 15px;
		overflow: hidden;
	}
	.content img {
		max-width: 100%;
		height: auto !important;	
	}
	
	.content a { color: #2187ba; }
	.content a:hover, .content a:focus, .content a:active { color: #234172; }
	.content p { 
		color: #000000;
		text-align: left;
	}
	
	a,a:active,a:visited,a:link {color:#234172;}
	a:hover{color:#2187ba;}

	h1 {
		font-size: 18px;
		color: #000000;	
		font-family: 'oxygenbold';
	}
	h2 {
		font-size: 16px;
		color: #000000;	
		font-family: 'oxygenbold';
	}
	h3 {
		font-size: 14px;
		color: #ffffff;	
		font-family: 'oxygenbold';
	}
	h4 {
		font-size: 14px;
		color: #ffffff;	
		font-family: 'oxygenbold';
	}
	h5 {
		font-size: 12px;
		color: #ffffff;
		font-family: 'oxygenbold';	
	}
	
	/* Sidebar */
	.content .sidebar {
		background-color: #2187ba;	
		color: #ffffff;
	}
	.content .sidebar a {
		color: #ffffff;	
	}
	.content .sidebar a:hover, .content .sidebar a:active, .content .sidebar a:focus {
		color: #dddddd;	
	}
	.content .sidebar h2 { color: #ffffff; }
	p.date { font-size: 0.8em; margin-bottom: 10px; font-style:italic; }

	.contactgroup .columns {
		width: 100%;
		font-size: 16px;
		color: #000000;	
		font-family: 'oxygenbold';
		padding-top: 10px; padding-bottom: 10px;	
		margin-bottom: 10px;
	}


	/* - 1.1 - TEKST
	------------------------------------------ */	

	.title {
		padding: 10px 15px;
		margin-bottom: 15px;
		float:left;
		width: 100%;		
		background-color: #2187ba;
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		border-radius: 5px; 
	}
	
	.title h1 {
		margin: 0 0 10px 0;
		font-size: 28px;
		text-transform: uppercase;
	}
	
	.title h1 span {
		color: #fff;
	}
	
	.title img {
		margin: 0 15px 0 0;
		float:left;
	}
	
	.title .slogan {
		color:#fff;
		font-size: 22px;
		text-transform: uppercase;
		font-weight: bold;
	}


	.shoppingcart {
		margin: 15px 0 15px 0;
		float:left;
		width: 100%;		
		background-color: #2187ba;
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		border-radius: 5px; 	
		overflow: hidden;	
	}
	
	.shoppingcart .cart {
		margin-right: 10px;
		padding:15px;
		float:left;
		background-color: #234172;
	}
	
	.shoppingcart .products {
		padding: 10px;
		color:#fff;
		font-size:16px;
	}
	
	.shoppingcart .products span {
		margin-top: 5px;
		display: block;
		font-size: 12px;
	}
	
	
	.copyright {
		padding: 5px 8px;
		background-color: #2187ba;
		text-align: right;
		font-size: 12px;
		color: #ffffff;
	}
	
	.copyright a {
		color: #ffffff;
	}
	
	fieldset { border-color: #ffffff; }
	
	.copyright span {
/*		padding-left: 15px;
		background: url(library/images/icons/heart.png) no-repeat left center;
*/
	}
	
	.top-bar { 
		margin-bottom: 0;
		background-color: #000000;
	}
	
	/*.top-bar ul > li a:not(.name) {
		color: #ffffff;	
	}*/
	
	.top-bar ul > li.has-dropdown .dropdown {
		background-color: #ffffff;
	}
	
	.top-bar ul > li:hover a:not(.name), .top-bar ul > li:active a:not(.name), .top-bar ul > li:focus a:not(.name),
	.top-bar ul > li.active a:not(.name) {
		background-color: #333333;
		color: #cccccc;
	}	
	
	.content h2 {
		margin: 35px 0 20px 0;
		font-weight: normal;
		font-size: 22px;
	}
	
	.terug {
		padding: 5px 0;
		margin: 15px 0 10px 0;
		font-weight: normal;
		font-size: 15px;
	}
	
	ul.breadcrumbs {
    	background-color: #f6f6f6;
    	border-color: #e9e9e9;
	}
	ul.breadcrumbs li a {
		color: #989898;	
	}
	ul.breadcrumbs li.current a, ul.breadcrumbs li a:hover, ul.breadcrumbs li a:focus {
		color: %BREADCRUMP_LINK_COLOR_HOVER%;	
	}
	
	.cat_rel {
		margin-bottom: 20px;
		padding: 8px;
		position: relative;
		border: 1px solid #234172;
	}
	.album_rel, .cat_rel {
		margin-bottom: 20px;
		padding: 3px;
		position: relative;
		border: 1px solid #234172;
	}
	.album_rel .img_container {
		height: 140px; overflow: hidden;	
	}
	
	.row.products .columns, .row.album .columns { float: left; }
	.viewalbum { margin-bottom: 20px; }
	
	.album_rel .rel, .cat_rel .rel {
		position: relative;
		overflow: hidden;
		height: 140px;
		
	}
	.prod_name {
		font-size: 14px;
		margin-bottom:10px;
		width:100%;		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}	
	
	
	.cat_rel .price {
		line-height:1.4;
		padding-left:6px;
		position: absolute;
		z-index: 999;
		background-color:#234172;
		bottom: 38px; right: 10px;
		-webkit-border-radius: 10%; 
		-moz-border-radius: 10%; 
		border-radius: 10%;
		color: #fff;
		text-align: center;
		font-size: 18px;
		overflow:hidden;
	}
	@media only screen and (max-width: 767px) {
		.cat_rel .price {
			font-size: 16px;
		}
	}	
	@media only screen and (max-width: 400px) {
		.cat_rel .price {
			font-size: 14px;
		}
	}	

	.cat_rel .price span.numb {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 4px;
		padding-right: 10px;
		float:let;
		background-color: #2187ba;
		
	}

	.cat_rel .btw {
		padding:3px;
		line-height:1.4;
		padding-left:6px;
		position: absolute;
		z-index: 999;
		background-color:#2187ba;
		bottom: 15px; right: 10px;
		-webkit-border-radius: 10%; 
		-moz-border-radius: 10%; 
		border-radius: 10%;
		color: #fff;
		text-align: center;
		font-size: 10px;
		overflow:hidden;
	}
	
	
	
	.cat_rel img {
		margin-bottom: 5px;
		width: 100%;
	}
	.album_rel img {
		margin-bottom: 0px;
		width: 100%;
	}
	
	.cat_rel .button {
		width: 100%;
	}
	
	.button {
		border: 0;
		font-weight: normal;
		text-transform: uppercase;
	}
	.button.right { margin-left: 5px; }
	
	.button.green {
		background-color:#000000;
	}
	.button.green, .button.green:focus, .button.green:visited, .button.green:active {
		color: #ffffff;	
	}
	.button.green:hover {
		color: #cccccc;
	}
	
	.button.black {
		background-color: #000;
	}
	
	.button.shopcart_empty {
		background-image: url(library/images/icons/shoppingcart.png);
		background-repeat: no-repeat;
		background-position: 20px 13px;
		padding-left:60px;
	}
	
	.button.shopcart_empty:hover {
		background-image: url(library/images/icons/shoppingcart_full.png);
		background-repeat: no-repeat;
		background-position: 20px 13px;
		padding-left:60px;
	}	
	
	footer {
    	margin: 0 auto 5px auto;
		max-width: 910px;
	}
	
	footer .row{
		padding-top: 20px; padding-bottom: 20px;
		background-color: #222222;
		color: #ffffff;
	}
	footer.smaller .row {
		padding-top: 5px; padding-bottom: 5px;	
	}
	footer.smaller .row .columns {
		text-align: center;
	}
	footer .row a { color: #ffffff; }
	footer .row a:hover, footer .row a:active, footer .row a:focus { color: #dddddd; }




	.product_info {
		float:left;
	}	
	.product_info h2 {
		margin-top: 0;
	}
	
	.product_info a.button.medium.green {
		margin-top: 5px;
		font-size: 20px;
		line-height: 30px;
		margin-bottom: 25px;
	}
	
	.product_info a.button.medium.green img { margin-right: 10px; margin-top: 3px;}
	
	.product_info p {color:#000000;}

	.product_image {
		position: relative;
	}
	.product_image img {
		width: 100%;	
	}

	.product_image .price {
		line-height:1.4;
		padding-left:6px;
		position: absolute;
		z-index: 999;
		background-color:#234172;
		bottom: 33px; right: 10px;
		-webkit-border-radius: 10%; 
		-moz-border-radius: 10%; 
		border-radius: 10%;
		color: #fff;
		text-align: center;
		font-size: 21px;
		overflow:hidden;
	}
	

	
	.product_image .price span.numb {
		margin-left:5px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		float:let;
		background-color: #2187ba;
		
	}

	.product_image .btw {
		padding:3px;
		line-height:1.4;
		padding-left:6px;
		position: absolute;
		z-index: 999;
		background-color:#2187ba;
		bottom: 10px; right: 10px;
		-webkit-border-radius: 10%; 
		-moz-border-radius: 10%; 
		border-radius: 10%;
		color: #fff;
		text-align: center;
		font-size: 10px;
		overflow:hidden;
	}
	
	.product_thumbs {
		float:left; 
		list-style-type: none;
	}
	
	.product_thumbs li {
	   	float: left;
		height: 40px;
		margin: 5px 10px 0 0;
		opacity: 0.4;
		overflow: hidden;
		width: 20%;
	}
	.product_thumbs li img {
		width: 100%;	
	}

	.product_thumbs li:hover {
		opacity: 1.0;
	}


	.pay_off .head{
		margin: 15px 0;
		font-size: 22px;
		background-color: #f7f7f7;
		float:left;
		width: 100%;
		color: #acacac;
	}
	
	.pay_off .head a {
		padding: 10px;
		float:left;
		width: 100%;
		color: #000000;
	}

	.pay_off .arrow_down {
		margin-top: 5px;
		width: 23px; height: 13px;
		float:right;
		background: url(library/images/icons/arrow_down.png) no-repeat left center;
	}

	.pay_off .arrow_up {
		margin-top: 5px;
		width: 23px; height: 13px;
		float:right;
		background: url(library/images/icons/arrow_up.png) no-repeat left center;
	}
	
	.pay_off ul.items {
		float:left;
		list-style-type: none;
		width: 100%;
	}
	
	.pay_off ul.items li {
		float:left;
		width: 100%;
		background-color: #f9f9f9;
		border-bottom: 1px solid #d1d1d1;
	}
	
	.pay_off ul.items li.alt {
		background-color: #fff;
	}	
	
	.pay_off ul.items li .thumb img {
		margin: 10px;
	}
	
	.pay_off ul.items li .name {
	    font-family: 'oxygenbold';
		font-size: 19px;
		color:#000;
	}
	
	.pay_off ul.items li .name span {
		font-family: 'oxygenregular';
		display: block; 
		font-size: 14px;
		color:#a2a2a2;
	}
	
	.pay_off ul.items li .name, .pay_off ul.items li .what, .pay_off ul.items li .price, .pay_off ul.items li .total {
		margin-top: 30px;
		font-size: 19px;
	}

	.pay_off ul.items li .thumb { width: 15%; float:left;}
	.pay_off ul.items li .thumb img {
	    width: -moz-calc(100% - 20px);
		width: -webkit-calc(100% - 20px);
		width: calc(100% - 20px);	
	}
	.pay_off ul.items li .name {width: 40%; float:left;}
	.pay_off ul.items li .price {width: 20%; float:left; color:#323232;}
	.pay_off ul.items li .what {width: 10%; float:left;}
	.pay_off ul.items li .total {width: 15%; float:left; text-align: right; padding-right: 10px; color:#323232;}
	
	form.custom {margin-bottom:0;}
	
	form.custom div.custom.dropdown {font-size: 19px; height: 40px; line-height: 38px; margin-top: 15px;}
	form.custom div.custom.dropdown a.current {height: 40px;line-height: 38px; border-color:#2db08f;}
	form.custom div.custom.dropdown a.selector {height: 40px;line-height: 38px; border-color:#2db08f;}
	form.custom div.custom.dropdown ul li.selected, form.custom div.custom.dropdown ul li.selected:hover, form.custom div.custom.dropdown ul li:hover { background: none repeat scroll 0 0 #e5fff8;}	 		
	form.custom div.custom.dropdown ul	{top:40px;line-height: 38px;}
	
	.custom.dropdown, .custom.dropdown ul {width: auto!important;}
	
	.subtotal, .sendcosts, .alltotal {
		margin-bottom: 10px;
		float:right;
		width: 25%;
		margin-right: 2%;
	
		font-size: 18px;
		color: #a2a2a2;
	}
	
	.subtotal span, .sendcosts span, .alltotal span{ float:right;}
	
	.pay_off .button {
		margin-bottom: 20px; margin-top: 15px;
		font-size: 20px;
		line-height: 30px;	
	}
	
	.pay_off .button img {
	    margin-right: 10px;
	    margin-top: 3px;
	}
	.pay_off .pay_information label, .pay_off .pay_information .input-replacer {
		margin: 8px 0;
		color:#b9b9b9;
	}
	
	.pay_off .pay_information label {
		color: #4C4C4C;	
	}
	
	.pay_off .pay_information .alt {
		background-color: #f9f9f9;
	}
	
	.pay_information {
		margin: 0 10px;
	}
	
	.pay_information img {
		margin-bottom: 20px;
	}
	
	.pay_information .heading {font-size: 18px;}
	
	.pay_information p {
		color:#b9b9b9;
	}
	
	label {
		color: #000000;	
	}
	
	input[type="text"], input[type="file"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
	    border: 1px solid #000000;
	    border-radius: 0;
	    box-shadow: inherit;
	    display: block;
	    font-family: inherit;
	    font-size: 14px;
	    height: 32px;
	    margin: 0 0 12px;
	    padding: 6px;
	    transition: all 0.15s linear 0s;
	    width: 100%;
	}	
	input[type="*"].error, textarea.error {
		border-color: red;	
	}
	textarea, .pay_information textarea {
		height: 100px;
	}
	
	form.custom div.custom.dropdown a.current,
	form.custom div.custom.dropdown a.selector {
		border: 1px solid #000000;	
		font-size: 14px;
	}
	
	.pay_information .button img {margin-bottom: 0;}


	
@media only screen and (max-width: 910px) {
	.wrapper {margin-top: 20px;}

	.row.navig .twelve.columns {padding: 0;}
	
	.title h1 {
    font-size: 24px;}
    
    .row.np .twelve.columns {padding: 0;}
}	
	
	
@media only screen and (max-width: 767px) {
	h2 {text-align: left;}
	.button.medium {font-size: 11px;}
	.row.navig .twelve.columns {padding: 0;}
	.row.navig .name a img {width: 200px;}
	.wrapper { margin-top:0px; }	
	footer {margin-bottom: 0;}
	.product_image img {width: 100%;}
	
	.pay_off ul.items li .thumb { width: 25%;}
	.pay_off ul.items li .name {width: 75%; padding-left: 10px; }
	.pay_off ul.items li .price {width: 25%; }
	.pay_off ul.items li .what {width: 25%; }
	.pay_off ul.items li .total {width: 25%; }	
	
	.subtotal, .sendcosts, .alltotal {width: 94%;}
	.cat_rel .button.medium {font-size: 11px;}
	.button.medium {
    font-size: 20px;
}
	
}	
.clear { clear: both; }
/* Sidebar */
ul.side {
	list-style-type: none;
	clear: both;
	padding-left: 0px;
}
ul.side li { color: #ffffff; }
ul.side.social { margin-bottom: 10px; }
ul.side.social li { float: left; margin: 3px; }

ul.side.social:before,
ul.side.social:after {
  content:"";
  display:table;
}
ul.side.social:after {
  clear:both;
}
ul.side.social {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

p.footer { margin-bottom: 0; }
.edit_cart {
	padding: 10px;	
}

.nws_archief {
	border-bottom: 2px dotted #234172;	
}
.nws_archief .columns {
	padding-top: 3px; padding-bottom: 3px;
}




.sticky {
	overflow: visible;
}

.contain-to-grid .top-bar {
    max-width: 910px;
}


.top-bar ul > li.has-dropdown .dropdown {
    background-color: #000;
}

@media only screen and (max-width: 767px) {
	.sticky {
		position: fixed;
	}
	
	.content {padding-top: 45px;}
}