/* CSS Document */

.page-body{
	h1.page-title{
		margin-bottom:10px;	
	}
	.page-subtitle{
		display:block;
		margin-bottom:10px;	
		font-weight:normal;
		font-style:italic;
	}
	.page-body-text{
		margin-top:20px;
	}
	
	a{
		color:@default-link-color;	
	}
}


.sidebar-content-block{
	margin-bottom:20px;
	
	&.standaard{
	
		.block-header{
			background-image:url(../images/sidebar-arrow-left.png);
			background-position:left center;	
			background-repeat:no-repeat;
			
			padding-left:26px;
			font-family:@font-default;
			font-size:18px;
			width:264px;		
		}
		.block-content{
			width:264px;
			margin-left:26px;
			
			ul,li{
				padding:0px;
				margin:0px;
				list-style:none;			
			}
			ul{
				border-top:solid 1px #ffffff;
				margin-top:5px;
				li{
					border-bottom:solid 1px #ffffff;
					padding:4px 0px;
					
					&,a{
						font-weight:bold;
						color:@text-color-sidebar;
					}
				}
			}
		}
	}
	&.afbeelding{
		position:relative;
		.block-content-hldr{
			padding:30px;
			padding-top:35px;
			width:230px;
			position:absolute;
			top:0px;
			left:0px;
			color:#FFF;
			
			.block-header{
				font-family:@font-prophecy;	
				font-size:45px;
				line-height:40px;				
			}
			.block-content{
				line-height:1.3em;
				
				
				/* 20130819 Marcel: Opmaak nieuwsbrief formulier */
				.zijbalk-formulier {
					margin-top: 0px;
					
					input[name=email] {
						display: none;
					}
					
					.form-row, .fieldhldr {
						display: inline-block;
					}
					
					.labelhldr {
						display: none;
					}
					
					input[type=text] {
						width: 170px;
					}
					
					.main {
						position: relative;
					}
					
					input[type=submit] {
						position: absolute;
						bottom: 0px;
						right: 0px;
						height: 24px;
					}
					
					.custom-submit-button img {
						vertical-align: middle;
					}
					
					.hidden-submit-button {
						display: none;
					}
					
					.f_message{
						position: absolute;
						top: 50px;
						left: 0px;
						background-color: white;
						border: 1px solid red;
						box-shadow: 0px 0px 20px white;
						text-align: center;
						
						* {
							display: none;
						}
						
						h2 {
							display: inline;
							font-size: 1em;
							color: red;
						}
					}
				}
				
			}
			.block-button{
				margin-top:10px;
				.custom-button{
					.inline-block;	
					text-align:center;
					.button-text{
						.inline-block;	
						font-size:15px;
						vertical-align:middle;
						//display:block;
						padding:3px;	
					}
				}
			}
		}
	}
}

.social-media-component{
	background-image:url(../images/bg-socialmedia-default.png);
	background-position:right top;
	background-repeat:no-repeat;
	padding-top:45px;
	padding-right:30px;
	text-align:right;
	
	a.social-media-link{
		.inline-block;
		margin-left:2px;	
	}
	
	&.home{
		background-image:url(../images/bg-socialmedia-home.png);
		background-position:right top;
		background-repeat:no-repeat;
		padding:0px;
		height:199px;
		width:278px;
		
		text-align:left;
		
		.twitter-component{
			padding-top:20px;
			padding-left:25px;
			padding-right:25px;	
			height:140px;
			
			.twitter-component-header{
				font-family:@font-typeface;
				font-size:18px;
				color:#ffffff;
				letter-spacing: 2px;
				text-transform: uppercase;
			}
			.twitter-component-tweet{
				margin-top:10px;
				color:#FFF;
				font-family:@font-default;
			}
		}
		.social-media-links{
			margin-left:160px;	
		}
	}
}

.home-page{
	.vrije-sidebar-content-wrapper.content-wrapper{
		width:960px;
		text-align:left;
		margin:0px auto;
		position:relative;
		z-index:999;	
		
		.page-sidebar{
			position:absolute;
			right:0px;
			bottom:0px;
			width: 290px;
			overflow: visible;
			
			.sidebar-content-block{
				margin-bottom:0px;
				margin-top:20px;	
			}
		}
	}
	
	/*
	.zijbalk-formulier{
		width:260px;
		margin-top:0px!important;
		.omschrijving,
		.f_message{
			display:none;	
		}
		.form-row{
			.inline-block;
			.labelhldr{
				display:none;	
			}
			.fieldhldr{
				.inline-block;
				vertical-align:bottom;
				width:200px;
				input{
					width:190px;
					border-color:#562342;
				}
			}
			
			&.highlight{
				input{
					border-color:#F00;	
					background-color:#ffeaea;
				}
			}
		}
		a.custom-submit-button{
			.inline-block;	
		}
		.hidden-submit-button{
			display:none;	
		}
	}
	*/
	
				/* 20130819 Marcel: Opmaak nieuwsbrief formulier */
				.zijbalk-formulier {
					margin-top: 0px;
					
					input[name=email] {
						display: none;
					}
					
					.form-row, .fieldhldr {
						display: inline-block;
					}
					
					.labelhldr {
						display: none;
					}
					
					input[type=text] {
						width: 170px;
					}
					
					.main {
						position: relative;
					}
					
					input[type=submit] {
						position: absolute;
						bottom: 0px;
						right: 0px;
						height: 24px;
					}
					
					.custom-submit-button img {
						vertical-align: middle;
					}
					
					.hidden-submit-button {
						display: none;
					}
					
					.f_message{
						position: absolute;
						top: 50px;
						left: 0px;
						background-color: white;
						border: 1px solid red;
						box-shadow: 0px 0px 20px white;
						text-align: center;
						
						* {
							display: none;
						}
						
						h2 {
							display: inline;
							font-size: 1em;
							color: red;
						}
					}
				}
}


// Assortiment homepage
#thema-carrousel-wrapper,
.carrousel-nav-wrapper{
	position:relative;
}
#thema-carrousel-wrapper{
	text-align:center;	
	.carrousel-items{
		margin:0px auto;	
		overflow:hidden;
		text-align:left;
	}
}
.carrousel-navigation{
	position:absolute;
	bottom:20px;
	left:0px;
	z-index:15;
	ul#nav
	ul#nav li,{
		padding:0px;
		margin:0px;
		list-style:none;	
	}
	ul#nav{
		li{
			float:left;
			list-style:none;
			padding:0px;
			margin-right:10px;
			a{
				display:block;
				padding: 5px;
				background-color: #ffffff;
				-webkit-box-shadow: 0px 0px 5px 1px #cdcdcd;
				box-shadow: 0px 0px 5px 1px #cdcdcd;
			}
		}
	}
}



.content_afbeelding{
	margin:15px;
	margin-top:0px;
}

.content_afbeelding.left{
	float:left;
	margin-left:0px;
}

.content_afbeelding.right{
	float:right;
	margin-right:0px;
}

.assortiment-zoeken {
	background-image: url(../images/sidebar-arrow-left.png);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 26px;
	
   
    
	.block-header {
		padding-left: 0px !important;
		background: none !important;
		//margin-top: 10px;
		display: block;
        width:auto;
        
        &.main-header-lg{
            font-size:22px;
            margin-bottom: 10px;
            >img{
                vertical-align: top;
            }
        }
	}

    .block-header{
        display: none;
    }
    .filter-row{
        border-bottom: dotted 1px @default-text-color;
        padding:5px 0;
    }
    
	input, select {
		//border: 1px solid @form-field-border;
		//width: 100%;
		//padding: 4px;
	}
	
	input[type=text] {
		width: 254px;
        padding: 4px;
        
	}
    
    
	.searchButton {
		display: inline-block;
		background-color: @menu-default-color;
		margin-top: 10px;
		text-align: center;
		color: @submenu-default-color;
		padding: 2px 20px;
		//width: 100px;
		border: none;
        cursor: pointer;
        
		//width: 80px;
		font-weight: bold;
		line-height: 20px;
	}
}
.assortiment-zoeken-bck {
	background-image: url(../images/sidebar-arrow-left.png);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 26px;
	
	.block-header {
		padding-left: 0px !important;
		background: none !important;
		//margin-top: 10px;
		display: block;
	}

	input, select {
		border: 1px solid @form-field-border;
		width: 100%;
		padding: 4px;
	}
	
	input {
		width: 254px;
	}
	
	.searchButton {
		display: inline-block;
		background-color: @menu-default-color;
		margin-top: 10px;
		text-align: center;
		color: @submenu-default-color;
		padding: 2px 20px;
		width: 100px;
		border: none;
		width: 80px;
		font-weight: bold;
		line-height: 20px;
	}
}

@assortiment-home-blok-breedte:194px;

#assortiment-home{
    text-align: center;
    .assortiment-home-container{
        width:(@assortiment-home-blok-breedte * 7);
        height:(@assortiment-home-blok-breedte * 3);

        text-align: left;
        margin:auto;
        .assortiment-home-links,
        .assortiment-home-rechts{
            float:left;
            width:@assortiment-home-blok-breedte;
            overflow: hidden;
        }
        .assortiment-home-midden{
            float:left;
            position: relative;
            width:(@assortiment-home-blok-breedte * 5);
            height:(@assortiment-home-blok-breedte * 3);
            .assortiment-home-blok{
                height:194px;
                overflow: hidden;

            }
        }
        .assortiment-home-blok{
            float:left;
            min-width:194px;
            >a{
                display: block;
                padding:0;
                margin:0;
                background-color: #000000;

                -webkit-transition: all 500ms ease-out 1s;
                -moz-transition: all 500ms ease-out 1s;
                -o-transition: all 500ms ease-out 1s;
                transition: all 500ms ease-out 1s;

                &:hover{
                    >img{

                        -webkit-transition: all 500ms ease-out;
                        -moz-transition: all 500ms ease-out;
                        -o-transition: all 500ms ease-out;
                        transition: all 500ms ease-out;
                        opacity: 0.80;
                        filter: alpha(opacity=80); /* For IE8 and earlier */
                    }
                }
            }
            img{
                display: block;
                max-width: 100%;
                height: auto;
            }
        }

        .assortiment-home-filter{
            position: absolute;
            bottom: 0;
            right:0;
            width:@assortiment-home-blok-breedte;
            height: (@assortiment-home-blok-breedte * 2);
            background-color: #000000;
            background-image: url(../images/assortiment-filter-header.jpg);
            background-position: top;
            background-repeat: no-repeat;
            box-sizing: border-box;
            padding-top:70px;
            color:#ffffff;

            .assortiment-zoeken {
                background: none;
                padding:0 10px;                
                font-size:12px;
                line-height:1.2em;
                >img.filter-header{
                    display: none;
                }
                
                input[type=text]{
                    width: 160px!important;
                    height:20px;
                    line-height:20px;
                    vertical-align: middle;
                    padding:0 5px;
                }
                
                .block-header{
                    display: none;
                }
                .filter-row{
                    border-bottom: dotted 1px #ffffff;
                }

                .form-field{
                    line-height:1.2em;
                    vertical-align: top;
                    margin-bottom:2px;
                    
                    input[type=checkbox]{
                        display: inline-block;
                        margin-bottom:0px;
                        vertical-align: bottom;
                    }
                }


                .filter-button-wrapper{
                    text-align: center;
                    padding-top:20px;
                    .searchButton{
                        background-color: #eabc07;
                        width: auto;
                        height:22px;
                        line-height: 22px;
                        vertical-align: middle;
                        padding:0 10px;
                        -webkit-border-radius: 6px;
                        border-radius: 6px;
                        cursor: pointer;
                        margin:0;
                    }
                }
            }
        }
    }
}