/* FONTS */
@import url(http://fonts.googleapis.com/css?family=Maven+Pro:400,500,700);


/* RESET CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 
/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none; } table {border-collapse: collapse; border-spacing: 0; }


/*--- CUSTOM -------------------------------------*/

body{background:url(/Sites/dtta.be/Template/img/pattern_1.png) repeat;}

header{/*background:#eee;*/ overflow:hidden;}
header .grid-960 img{margin-bottom:-2px;}

#logo{float:left;}

#padding-wrapper{padding:25px 0px 50px 0;}

html,body,h1,h2,h3,p,input{font-family: 'Maven Pro', sans-serif;}

p,a,input{font-size:16px;}

section{margin-bottom:15px;}
section h2{font-weight:700; font-size:18px; color:#f13d3d;}
section p{line-height:1.1em; color:#333;}

#contentarea{ background:#fff; padding:2em; box-sizing:border-box; -moz-box-sizing:border-box; padding:50px; margin:0px auto; opacity:.95; border-bottom:solid 3px #f13d3d;}

.grid-960{width:960px; margin:auto; clear:both; overflow:hidden;}



nav{display:block; clear:both;}
nav li{float:left; }

#nav-main-container{width:940px; padding:10px; background: rgba(0,0,0,.4); border-bottom: solid 3px #ffd016; }
#nav-main{float:left;}
#nav-main li a{padding:0px 15px; line-height:32px; height:32px; margin-right:10px; border-radius: 2px; display:inline-block; background:#f13d3d; text-decoration:none; color:#fff; transition:background .2s;}
#nav-main li a:hover{background:#ffba16;}

#nav-sub .grid-960{background:#ddd; display:block; height:32px; overflow:visible; box-sizing:border-box; -moz-box-sizing:border-box; /*border:solid 1px #ddd; border-radius:2px;*/}
#nav-sub li a{padding:0px 10px; height:32px; font-size:14px; line-height:32px; display:inline-block; text-decoration:none; color:#666; /*border-right:solid 1px #ddd;*/}
#nav-sub li a:hover{background:#ffd016; /*border-right:solid 1px #ffd735;*/ text-shadow:0px 1px 1px #fff; color:#444;}

#searchbar-wrapper{float:right;}

#search{float:left; background:#fff; border:solid 1px #ddd; margin:0; padding:0px 7px; height:32px; color:#555; border-top-left-radius:2px; border-bottom-left-radius:2px; }
#search:focus{outline:none; border:solid 1px #f13d3d;}
#btn-search{float:right; background:#f13d3d url(/Sites/dtta.be/Template/img/searchicon.png) no-repeat; border:none; height:32px; width:32px; border-top-right-radius:2px; border-bottom-right-radius:2px; transition:background .2s;}
#btn-search:hover{cursor:pointer; background-color:#ffba16;}

#nav-main li a.current{background:#ffba16;} 
#nav-sub li a.current{background:#fff;}


#races{
    margin-top: 10px;
}
#races tr {
	padding-bottom: 10px;
	border-bottom: 1px dashed #f13d3d;
}

#races > tbody > tr > td {
	padding-right: 15px;
	padding-bottom: 5px;
	padding-top: 5px;
}
#races > tbody > tr > th{
	font-weight: bold;
    padding-bottom: 5px;
}
/*---------------------------------------*/

ul#dropdown {
	position:relative;
	float:left;
}

ul#dropdown li {
	display:inline;
	margin:0;
	padding:0;
	float:left;
	position:relative;
}

ul#dropdown li a {
	color:#616161;
	text-decoration:none;
	display:inline-block;
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

ul#navigation li a:hover{color:orangered;}

/*--- dropdown -----------------------------------------------------*/

/*-- HOVER OFF --*/
ul#dropdown ul, ul#dropdown ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;    
	width:180px;
	background:#eee; /*f8f8f8*/
	box-shadow:1px 1px 3px #ccc;
}

ul#dropdown ul:hover/*, ul#dropdown ul li ul */{
	-webkit-transition:opacity 0.5s ease, visibility 0.5s ease; 
	-moz-transition:opacity 0.5s ease, visibility 0.5s ease; 
	-o-transition:opacity 0.5s ease, visibility 0.5s ease; 
	transition:opacity 0.5s ease, visibility 0.5s ease; 
}

ul#dropdown ul{
	-webkit-transition:opacity 0.1s ease, visibility 0.1s ease; 
	-moz-transition:opacity 0.1s ease, visibility 0.1s ease; 
	-o-transition:opacity 0.1s ease, visibility 0.1s ease; 
	transition:opacity 0.1s ease, visibility 0.1s ease; 
}

/*-------------*/


ul#dropdown ul li ul {
    top: 0;
    left: 181px;
}

ul#dropdown ul li {
	clear:both;
	width:100%;
}

ul#dropdown ul li a {
	background:none;
	text-decoration:none;
	display:inline-block;
	float:left;
	clear:both;
	border-right:solid 2px #ddd;
}
ul#dropdown ul li a:hover{
	border-right:solid 2px #ffd016;	
}

/*--- mobile ---------------------------------------------------------------------*/

@media screen and (max-width: 1023px)  {

	/*dropdown menu*/
	ul#dropdown, ul#navigation li{float:none;}
	ul#dropdown ul{overflow:hidden;}
	ul#dropdown li{float:none; display:block; border-bottom:solid 1px rgba(0,0,0,.1);}
	ul#dropdown li a{display:block; width:100%; text-align:center; padding:7px 0;}
	ul#dropdown li ul{width:100%;}
	ul#dropdown ul.sublist{background:#555;}
	ul#dropdown ul.sublist a{text-shadow:none; color:#bbb;}
	ul#dropdown ul{display:none;}
}

/*--- big screen -----------------------------------------------------------------*/

@media all and (min-width: 1024px) {
	
	ul#dropdown li ul
	{
		-webkit-transition:opacity 1s ease-in, visibility 1s ease-in; 
		-moz-transition:opacity 1s ease-in, visibility 1s ease-in; 
		-o-transition:opacity 1s ease-in, visibility 1s ease-in; 
		transition:opacity 1s ease-in, visibility 1s ease-in; 
	}

	ul#dropdown li:hover > ul
	{
		display:block;
		visibility:visible;	
		opacity:1;
		-webkit-transition:opacity 0.1s ease, visibility 0.1s ease; 
		-moz-transition:opacity 0.1s ease, visibility 0.1s ease; 
		-o-transition:opacity 0.1s ease, visibility 0.1s ease; 
		transition:opacity 0.1s ease, visibility 0.1s ease; 
	}


	ul#dropdown ul, ul#dropdown ul li ul
	{
		position: absolute;
		z-index: 99999;
		visibility:hidden;
    	opacity:0;
	}
	ul#dropdown li a:hover 
	{
		background:#f8f8f8;
		color:#282828;
	}
	ul#dropdown li:hover > a 
	{
		background:#f8f8f8;
	}

	ul#dropdown ul li a 
	{
		width:150px;
		padding:1px 15px;
	}


/*--- STICKY FOOTER ------------------------------------------------*/

html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -310px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
	height: 310px; /* .push must be the same height as .footer */
}

footer{height:310px; background:rgba(0,0,0,.5); border-top:solid 3px #ffd016; position:relative;}

/*--------------------------------------------------------------------*/


footer .grid-960{padding-top:20px;}

#next-event {width: 416px; min-height: 197px; float: right; background:#444; }

#next-event h2{padding:8px 20px; background:#f13d3d;}
#next-event p{padding:8px 20px 10px 20px; color:#ccc; line-height:1.1em;}
#next-event span{font-weight:700;}
#next-event p a{color: #FFBA16; }

#debacker{padding:10px 15px 15px 10px; background:#fff;}

#facebook{width:48px; height:48px; position:absolute; bottom:0px; background: url(/Sites/dtta.be/Template/img/fb-sprite.png) no-repeat; background-position:0px 0px; transition:background-position .5s;}
#facebook:hover{background-position:0px -48px; cursor:pointer;}
#copyright{padding-top:50px; text-align:center; display:block; color:#777;}
#copyright a{color: #ffba16;}
/*--- Media Queries -------------------------------------*/

@media screen and (max-width: 1023px)  {

	.grid-960,#nav-main-container{width:100%;}
	#banner{width:100%;}
	#searchbar-wrapper{float:left;}
	#contentarea{padding:40px;}

	#debacker{width:80%; padding:2% 5%; height:auto; margin:0px auto 20px auto; display:block;}
	#next-event{width:90%; margin:auto; display:block; float:none; min-height:2em;}

	footer,.push,.wrapper{height:auto; margin:0;} /*disable sticky footer*/
	#facebook{position:static; margin:auto; display:block; margin-bottom:20px;}
	#copyright{padding:2em;}
}

/*--- iPhone 5 ----------------------------------------------------*/

@media screen and (max-width: 640px)  {

	#contentarea{padding:25px;}
	footer{background:none; border:none;}
	#copyright{color:#222;}


}

/*------------------------------------------------------*/

form label
{
    width: 7em;
    float: left;
    text-align: left;
    margin-right: 0.5em;
    display: block
}
form input{
    width: 150px
}
form textarea{
    width: 250px;
    height: 150px;
}

	#nieuws {width: 250px; min-height: 197px; float: right; background:#444; }
	#nieuws a {color: #ffffff; }

	#nieuws h2{padding:8px 20px; background:#f13d3d;}
	#nieuws p{padding:8px 20px 10px 20px; color:#ccc; line-height:1.1em;}
	#nieuws span{font-weight:700;}