/* Less Powah! - create variables here */

@color: #fff;

/* the Semantic Grid System - Awesomeness! */

@import 'grid.less';

@columns: 16;
@column-width: 73;
@gutter-width: 20;
@total-width: 100%; /* Fluid - schrap de total-width voor fixed width designs */

/* Classes - even more Powah! - Add your own! */

.radius(@radius) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}

.transition(@dur: 1s, @what: all) {
	-webkit-transition: @what @dur ease-in-out;
	-moz-transition: @what @dur ;
	-o-transition: @what @dur ease-in-out;
	transition: @what @dur ease-in-out;
}

.trans(@props: 1s ease-in-out) {
	transition: transform @props;
	-webkit-transition: -webkit-transform @props;
	-moz-transition: -moz-transform @props;
	-o-transition: -o-transform @props;
}

.rotate(@deg: 10deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: rotate(@deg);
	-o-transform: rotate(@deg);
}

.textShadow(@color, @horizontalOffset, @verticalOffset, @blur) {  
    -moz-text-shadow: @color @horizontalOffset @verticalOffset @blur;  
    -webkit-text-shadow: @color @horizontalOffset @verticalOffset @blur;  
    /* 
        filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@horizontalOffset, OffY=verticalOffset, Color='@color', Positive='true'); 
        -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=@horizontalOffset, OffY=verticalOffset, Color='@color', Positive='true')"; 
        *zoom: 1; 
    */  
  
    text-shadow: @color @horizontalOffset @verticalOffset @blur;  
}

.gradient(@startcolor, @endcolor){
	background: -webkit-gradient(linear, left top, left bottom, from(@startcolor), to(@endcolor)); /* for webkit browsers */
	background: -moz-linear-gradient(top, @startcolor,  @endcolor); /* for firefox 3.6+ */ 
	filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@startcolor~", EndColorStr="@endcolor~")";
}

/*Tables*/
th{
	border-bottom:none;
}

tbody{
	border-top:none;
}


.fonts() {
	/*font-family: "Century Gothic", "Lucida Sans", Arial;*/
	font-family: Arial, Helvetica, sans-serif;
}


.btn() {
	display: block;
	width: auto;
	padding: 2px 12px 2px 30px;
	background-color: #ddd;
	box-shadow: 0px 1px 2px #999;
	color: #fff;
	text-shadow: 0px 1px 1px #888;
	font-weight: bold;
	cursor: pointer;
	float: left;
	.radius(20px);
	&:hover {
		box-shadow: 0px 2px 2px #999;
	}
	&:active {
		box-shadow: 0px 1px 0px #999;
	}
}

/* Fonts */

@font-face {
	font-family: 'DanielRegular';
	src: url('daniel-webfont.eot');
	src: local('☺'), url('../fonts/daniel-webfont.woff') format('woff'), url('../fonts/daniel-webfont.ttf') format('truetype'), url('../fonts/daniel-webfont.svg#webfontqMGtI1M3') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-size-xsmall: 70%;
@font-size-default: 90%;
@font-size-middle: 120%;
@font-size-large: 170%;
@font-size-xlarge: 300%;


/* CSS */

body {
 color: #666;
 .fonts();
 font-size: 90%;
 line-height: 1.7em;
 margin: 0;
}

header {
	.column(16);
	border-bottom: dashed 1px #999;
	overflow: hidden;
	width: 918px;
	font-family: "Century Gothic", "Lucida Sans", Arial;

	#logo {
		background: url(../img/logo-mackens.jpg) no-repeat;
		width: 303px;
		height: 81px;
		display: block;
		float: left;
		margin: 0;
	}
	.block-superfish {
			

		ul{
			margin: 0;
			padding: 0;

			li {
				float: left;
				list-style: none;
			
				a {
					display: block;
					color: #000;
					padding: 5px 10px;
					text-decoration: none;
					border-right: 1px solid #000;
				}
			
				a:hover, a.active {
					background: #333;
					color: #fff;
				}

				ul {
					height: 100px;
					width: 300px;
					background: #333;

					li {
						width: 100px;
					}
				}
			}
		}
	}
	
	.online {
		position: absolute;
		right: 0;
		margin: 20px 15px 0 0;
		color: #ccc;
		font-size: @font-size-default;
	}
	
	#block-menu-menu-social-media {
		position: absolute;
		right: 0;
		margin: 31px 16px 0 0;
		
		ul {
			
			li {
				list-style: none;
				margin: 0;
				float: left;
				
				a {
					display: block;
					color: #333;
					padding: 0px 5px;
					text-decoration: none;
					font-size: @font-size-xsmall;
				}
			
				a:hover, a.active {
					background: #333;
					color: #fff;
				}
			}	
			
			li:first-child {
				border-right: 1px solid #333;
			}
	
		}
	}
}


footer {
	border-top: dashed 1px #999;
	font-size: 80%;
	color: #bbb;
	clear: both;
	.column(16);
	margin-top: 30px;
	overflow: hidden;	
	font-family: "Century Gothic", "Lucida Sans", Arial;
	
	.textbanner {
		.column(8);
		margin: 0;
		padding: 0 0 0 10px;
		color: #bbb;
		text-decoration: none;
	}
	
	.region-footer {
		.column(8);
		text-align: right;
		
		a {
			color: #bbb;
			text-decoration: none;
		}
		a:hover {
			color: #999;
		}
	
	}

	a.theaimlogo {
		background: url("/sites/all/themes/mackens/img/logo-theaim.png") no-repeat scroll 0 -18px transparent;
		display: block;
		height: 18px;
		width: 70px;
		float: right;
		text-indent: -5000px;
		color: #fff;
		margin: 0 10px 0 0;
	}

	a.theaimlogo:hover {
		background-position: 0 0;
	}
	
}

#content-text, #sidebar {
	overflow: hidden;
}

#content-text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: @font-size-default;
	
	.field-name-body {
		padding: 0 10px 0 0;		


		a {
			color: #666;
			text-decoration: underline;
		}
	
		a:hover {
			color: #888;
			text-decoration: none;
		}
		
		p {
			
		}

	}
}


.right, .floatright{ float:right; }

h1 {
	.fonts();
	font-size: 70%;
	font-weight: normal;
	position: absolute;
	bottom: -25px;
	margin: 0 0 0 16px;
	color: #999;

}

h2 {
	color: #333;
	margin: 5px 0 15px 0;
	line-height: 1.2em;
	font-size: @font-size-large;
}

h3 {
	color: #000;
	margin: 5px 0 10px 0;
	font-family: "Century Gothic", "Lucida Sans", Arial;
	font-size: @font-size-middle;
	font-weight: normal;
	
	a {
		text-decoration: none;
		color: #000;
	}
}

h4 {
	color: #000;
	margin: 5px 0 10px 0;
	font-family: "Century Gothic", "Lucida Sans", Arial;
	font-size: @font-size-default;
	font-weight: normal;
	
	a {
		text-decoration: none;
		color: #000;
	}
}

p {
	margin: 0 0 15px 0;
}

a {
	color: #666;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}


.breadcrumb {
	font-size: 80%;
	padding: 5px 0;
	color: #bbb;
	.column(16);

	a {
		color: #bbb;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
}



input[type=submit] {
	-webkit-appearance: none;
}

article, aside, header, nav, section { 
	display: block; 
	clear: both;
	overflow: hidden;
}

img { border: 0px; }
iframe { border: 0px; }
fieldset { border-width: 0px; }

.clearfix:after {content: "."; display: block; height: 0;  clear: both; visibility: hidden;} /* Clearfix */
.clearfix {display:inline-block;} /*ie7 doesn't validate - but fixes the prob ...*/
.clearfix {display:block;} /*opera & safari */

#admin-menu { position: fixed !important; } /* Fixed admin menu */
#admin-menu:hover{ top: 0px; }


#block-block-2 {
	position: absolute;
	bottom: 0;
	margin: 0 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	line-height: 1.5em;
	color: #999;
			
	a {
		color: #999;
	}
}


.page-node-28 {
	a.btn-route {
		display: none;
	}
}


a.btn-route {
	background: url(../img/btn-route.jpg) no-repeat 100% 0 ;
	display: block;
	height: 40px;
	margin: 0 0 20px 0;
}

a.btn-route:hover {
	background: url(../img/btn-route.jpg) no-repeat 100% -40px;
}

.social-buttons {
	padding: 5px 0 0 0;
	margin: 30px 0 0 0;
	border-top: dashed 1px #999;
}


/* Home */

.node-type-home {

	#sidebar {
		.column(5); 
		padding-bottom: 150px;
		
		.view-latest-news {
			height: 352px;
			position: relative;

			.views-row {
				position: absolute;
				bottom: 0;
			}
		}
	}

	#content-text {
		.column(11);
	
		.view-nodequeue-1 {
			overflow: hidden;
		
			ul {
				list-style-type: none;
				padding: 0;
				margin: 0;
				width: 632px;
			
				li {
					float: left;
					margin: 4px 8px 4px 0;
					height: 150px;
					
					a {
						display: block;
						width: 150px;
						height: 150px;
					}

					img {
						
					}	
				}
				
			}
		}
	}
}



/* infopagina/webform/nieuws*/

.node-type-page, .node-type-webform, .node-type-nieuws {

	#content-text {
		.column(9);
	
	}
	
	#sidebar {
		.column(7;
		
		p {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 90%;
		}
	}

}

.node-type-webform {

	.webform-client-form {
		
		.form-item {
			margin: 0 0 2px 0;
			
			input {
				margin: 0;
			}

			.form-radios {
				float: left;
				width: 350px;
			}

			label {
				width: 150px;
				float: left;
				margin: 0;
			}

			label.option {
				float:none;
				}

			.form-textarea-wrapper {
				width: 350px;
				float: left;
				margin: 2px 0 0 0;
				
				textarea {
					font-family: arial;
					height: 100px;
					
				}
			}
		}
		
		input.form-submit {
			margin: 5px 0 0 150px;
		}
	}

	.field-name-field-webform-omsch-rechts {
		padding: 46px 0 0 46px;	
	}
}


#header-images {
	
	.field-name-field-merken-logo {
		.column(5); 
	}
	.field-name-field-merken-afbeeldingheader {
		.column(11);
	}
}

.node-type-merken {

	#sidebar {
		.column(5); 
		padding-bottom: 170px;
	}

	#content-text {
		.column(11);
	
		
		
		.views-field-field-merken-afbeeldingen {
			overflow: hidden;
			width: 632px;
			
			img {
				margin: 0 8px 4px 0;
			}
		}
	}
}



.node-type-fotoshoot {

	#sidebar {
	.column(8); 
		
	}	
	
	#content-text {
	.column(8);
	}
	
	#imageData {
	
		#imageDetails, #bottomNavZoom {
			display: none !important;
		}
		#bottomNav {
			height: 33px !important;
			
			#bottomNavClose  {
				margin: 0;
			}
		}
	}
}


/* nieuws */

.newswidget-open{
	border-bottom: 1px solid #4b4b4b;
	padding: 0 10px;
			
	.news-text {
		color: #999;
		font-family: "Century Gothic", "Lucida Sans", Arial;
		font-size: 80%;
		line-height: 1.7em;
	}
			
	.read-more {
		text-align: right;
		font-size: (@font-size-xsmall);
		line-height: 1em;
			
		a {
			text-decoration: none;
			background: url(../img/icon-plus.jpg) no-repeat 100%;
			padding: 0 20px 0 0;
		}
		
		a:hover {
			color: #999;
		}
	}
}

.newswidget {
			
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				
				li {
					margin: 0;
				
					h3 {
						margin: 0;
						
						a {
							background: #f2f2f2;
							border-bottom: 1px solid #4b4b4b;
							padding: 10px;
							display: block;
						}
						a:hover {
							background: #e7e7e7;
						}
					}
				}
			}
			
			.pager {
				float: right;
				font-size: (@font-size-xsmall);
				margin: 15px 0 0 0;
				
				.pager-last, .pager-first {
					display: none;
				}
				
				li {
					border-right: 1px solid #999;
					padding: 0 3px;
				
					a {
						text-decoration: none;
					}
					
					a:hover, a.active {
						
					}

				}
				
				li:last-child {
					border: none;
				}

				.pager-next {
					border: none;
				}
			}
}


/* Admin stuff */

nav.tabs {
	position: absolute;
	left: -50px;
	background: #fff;
	background: rgba(255,255,255,0.9);
	padding: 2px;
	border: 1px solid #ccc;
	overflow: hidden;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	opacity: 0;
	.transition(0.5s);
	ul {
		margin: 0px;
		padding: 0px;
		a {
			color: #555;
			display: block;
			padding: 2px 5px;
			text-decoration: none;
			&:hover {
				background: #555;
				color: #fff;
			}
		}
	}
}

section:hover > nav.tabs, article:hover > nav.tabs, div:hover > nav.tabs {
		left: 0px;
		opacity: 1;
}

div.contextual-links-wrapper {
	position: relative;
	float: right;
}

div.contextual-links-wrapper, div:hover > div > a.contextual-links-trigger, footer:hover > div > a.contextual-links-trigger {
	display: block;
}


/* Fix internet explorer indien nodig */

.ie7 {
	/* Alles voor IE7 */
}

.ie8 {
	/* Alles voor IE8 */
}


/* Voorbeeldcode - delete deze comment gerust */

.container {
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	position: relative;
}

header nav {
	.column(12);
}

header .header_right {
	.column(3);
}


/* Verschillende schermgroottes */

@media only screen
and (max-width: 519px) {
 /* Single Fluid Width Column (iPhone) */
}
 
@media only screen
and (min-width: 520px)
and (max-width: 759px) {
  /* Single Fixed Width Column */
}
 
@media only screen
and (min-width: 760px)
and (max-width: 959px) {
  /* Two Fixed Width Columns, Medium Padding (iPad) */
}
 
@media only screen 
and (min-width: 960px) {
  /* Two Fixed Width Columns, Large Padding (Desktop) */
}





/* Slideshow pager */

. view-fotoshootitems {
	width: 450px;
}


#widget_pager_top_fotoshootitems-block {
	position: absolute;
	z-index: 10;
	margin: -15px 0 0 0;
	
	
	.views-slideshow-pager-field-item {
	background: #333;
	width: 15px;
	height: 15px;
	float: left;
	margin: 0 2px 0 0;
	}
	
	.views-slideshow-pager-field-item:hover, .views-slideshow-pager-field-item.active {
	cursor: pointer;
	background: #666;
	}

	
}



/* thumbs item list */

.view-thumb-slider  {

	.item-list  {
	
		ul {
			margin: 0;
			width: 456px;
		
			li {
				list-style: none;
				float:left;
				margin: 0 6px 6px 0;
			}
		}
	}
}


#site-map {
	margin: 0 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	
	li {
		font-size: 90%;
	}
}

.page-user {
	.tabs {
		display: none;
	}
}

#news-brand {
	padding: 10px;
	background: #f7f7f7;
	
	span {
		font-weight: bold;
	}
}