/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

html {
	height:100%;
}

body {
  	min-width: 960px;
  	height:100%;
	font-family: 'Roboto', sans-serif; 
	font-weight:300; 
	-webkit-font-smoothing:antialiased;  
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}


/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11 {
  position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_3 {
  width: 220px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_6 {
  width: 460px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_9 {
  width: 700px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

.container_12 .grid_12 {
  width: 940px;
}

/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .prefix_1 {
  padding-left: 80px;
}

.container_12 .prefix_2 {
  padding-left: 160px;
}

.container_12 .prefix_3 {
  padding-left: 240px;
}

.container_12 .prefix_4 {
  padding-left: 320px;
}

.container_12 .prefix_5 {
  padding-left: 400px;
}

.container_12 .prefix_6 {
  padding-left: 480px;
}

.container_12 .prefix_7 {
  padding-left: 560px;
}

.container_12 .prefix_8 {
  padding-left: 640px;
}

.container_12 .prefix_9 {
  padding-left: 720px;
}

.container_12 .prefix_10 {
  padding-left: 800px;
}

.container_12 .prefix_11 {
  padding-left: 880px;
}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .suffix_1 {
  padding-right: 80px;
}

.container_12 .suffix_2 {
  padding-right: 160px;
}

.container_12 .suffix_3 {
  padding-right: 240px;
}

.container_12 .suffix_4 {
  padding-right: 320px;
}

.container_12 .suffix_5 {
  padding-right: 400px;
}

.container_12 .suffix_6 {
  padding-right: 480px;
}

.container_12 .suffix_7 {
  padding-right: 560px;
}

.container_12 .suffix_8 {
  padding-right: 640px;
}

.container_12 .suffix_9 {
  padding-right: 720px;
}

.container_12 .suffix_10 {
  padding-right: 800px;
}

.container_12 .suffix_11 {
  padding-right: 880px;
}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .push_1 {
  left: 80px;
}

.container_12 .push_2 {
  left: 160px;
}

.container_12 .push_3 {
  left: 240px;
}

.container_12 .push_4 {
  left: 320px;
}

.container_12 .push_5 {
  left: 400px;
}

.container_12 .push_6 {
  left: 480px;
}

.container_12 .push_7 {
  left: 560px;
}

.container_12 .push_8 {
  left: 640px;
}

.container_12 .push_9 {
  left: 720px;
}

.container_12 .push_10 {
  left: 800px;
}

.container_12 .push_11 {
  left: 880px;
}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .pull_1 {
  left: -80px;
}

.container_12 .pull_2 {
  left: -160px;
}

.container_12 .pull_3 {
  left: -240px;
}

.container_12 .pull_4 {
  left: -320px;
}

.container_12 .pull_5 {
  left: -400px;
}

.container_12 .pull_6 {
  left: -480px;
}

.container_12 .pull_7 {
  left: -560px;
}

.container_12 .pull_8 {
  left: -640px;
}

.container_12 .pull_9 {
  left: -720px;
}

.container_12 .pull_10 {
  left: -800px;
}

.container_12 .pull_11 {
  left: -880px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12 {
  zoom: 1;
}

/*YOURHOSTING*/

body{
	margin:0;
	padding:0;
	font-size: 14px;
	line-height:22px;
	color:#4e4e4e;
}

/* typography */
a img {
	border:none;
}
h1, 
h2, 
h3, 
h4, 
h5 {
	font-weight:300;	
	margin:0;
	letter-spacing:-0.5px;
}
h1 {
	letter-spacing:-1px;
}
h2 {
	font-size: 26px;
	margin:10px 0 30px;
}
a {
	text-decoration:none;
	color:#003fA0;
}
ul, ol {
	margin:0;
	padding:0;
}
ul {
	list-style-image: none;
	list-style-type: none;
}

.strong {font-weight:600;}
.center {
	text-align:center;
}

/* buttons */
.button {
	padding: 10px 20px;
	border: 1px solid;
	color: #fff;
	font-size: 16px;
	border-radius: 4px;	
}
	.button:hover {
		cursor:pointer;
	}
.button a {
	color:#fff;
}
.button i {
	position: relative;
	right: -5px;
	top: 0px;
	font-size: 12px;
}
.button.green {
	border-color: #a2d400 #81a900 #6a8b00 #81a900;
	background:#9ccc00 url('/static/images/parking/bg-btn.png') repeat-x 0 -25px;
}
	.button.green:hover {
		background:#9ccc00 url('/static/images/parking/bg-btn.png') repeat-x 0 -15px;
	}
	
#green-button {
	width:240px;
	color:#fff;
	position: absolute;
	cursor:pointer;
	margin:0 auto;
	left:0;
	right:0;
	top:250px;
	z-index:20;
}
.green-button i {
	font-size:23px;
}
.green-button span {
	position:relative;
	top:25px;
}
	
/* base */
#contentwrapper {
	background:#E6E6E6;
	position:relative;	
	text-align:center;
	padding:70px 0 50px;	
}
	#contentwrapper .grid_12.btm {
		margin-bottom:40px;
	}
#klanten .container_12 {
	padding-top:40px;
}
#top {
	height:100px;
}
	#top .grid_12 {
		margin:0;
	}
	#top .container_12 {
		top:50px;
		position:relative;
	}
#header {
	background: url(/static/images/parking/bg-mijnwebsite.jpg) #c8ccb9 center -60px repeat-x;
	height:295px;
	color:#fff;
	position:relative;
	z-index:1;
}
	#header h1 {
		font-size:34px;
		line-height:38px;
		color:#fff;
		margin-bottom:20px;
		}
#header .check-list {
	font-size:20px;
	line-height:30px;
	margin-bottom:20px;
}
	#header .check-list i {
		font-size:15px;
		margin-right:8px;
	}
#header .content {
	position:relative;
	top:40px;
}


/*CONTENT ELEMENTS*/

.yh-logo {
	display: inline;
	float: left;
	position: relative;
	margin-left: 0;
	margin-right: 0;
}

#socialmedia {
	position:relative;
	top:10px;
}	
#caution {
	background:rgba(51,51,51,0.9);
	color:#fff;
	position:relative;
	z-index:2;
	text-align:center;
	height:140px;
}
	#caution .content {
		position:relative;
		top:17px;
	}
	#caution h2 {
		margin:0;
	}
	#caution a {
		color:#fff;
		text-decoration:underline;
	}
#arrow {
	position: absolute;
	left: 390px;
	top: 130px;
}

h2#lines {
	position:relative;
	text-align:center;
}
	h2#lines span {
		background: #E6E6E6;
		padding: 0 15px;
		position: relative;
		z-index: 1;
		display:inline-block;
	}
	h2#lines:before {
	  background: #c9c9c9;
	  content: "";
	  display: block;
	  height: 2px;
	  position: absolute;
	  top: 50%;
	  width: 100%;
	}
	h2#lines:before {
	  left: 0;
	}
.templates:hover {
	cursor:pointer;
}	
.blur { 
	-webkit-filter: blur(8px); 
	-moz-filter: blur(8px); 
	-o-filter: blur(8px); 
	-ms-filter: blur(8px); 
	filter: blur(8px); 
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
	cursor:pointer;
	background:rgba(255,255,255,0.1);
	}
.opacity {
	opacity:0.5;
}
.hide {
	display:none;
}
.blue-arrow {
	display:inline-block;
	background: url('/static/images/shared/arrows/small/ul_blue.png') no-repeat scroll left 6px;
	padding-left: 1em;
}
#blocks {
	text-align:center;
}		
	#blocks a {
		font-size:18px;
		color:#4E4E4E;
	}	
	#blocks ul {
		list-style-type:none;
	}
		#blocks ul li {
			float:left;
			display:block;
			width:311px;
			height:215px;
		}	
.border {
	border-left:1px solid #E0E0E0;
	border-right:1px solid  #E0E0E0;
}		 
#blocks-content {
	background:#fbfbfb;
	height:215px;
	text-align:center;
	border-radius:4px;
	-webkit-box-shadow:  0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	box-shadow:  0px 0px 8px 0px rgba(0, 0, 0, 0.1);
	margin-top:20px;
}
	a.b1 {
		display:block;
		height:215px;
		width:313px;
		background:url(/static/images/parking/cijfer.png) no-repeat center 60px;
	}
	
	a.b2 {
		display: block;
		height: 151px;
		width: 313px;
		background: url(https://www.yourhosting.nl/static/images/werelden2/tevreden.png) no-repeat center 9px;
	}	
	a.b3 {
		display:block;
		height:215px;
		width:313px;
		background:url(/static/images/parking/tijden.png) no-repeat center 40px;
	}
	
	.reasons {
		position:relative;
		top:150px;
	}

#registreren {
	margin:90px 0;
}
#klanten {
	background:#fff;
	height:500px;
}

#klanten .active{
	background:transparent url(https://www.yourhosting.nl/static/images/content/parkeerpagina2/bg-twt-active.png) repeat-x bottom;
}
#watzeggenklanten ul {
		margin:0 auto;
		display:block;
		line-height:40px;
		height:123px;
		background:transparent url(https://www.yourhosting.nl/static/images/content/parkeerpagina2/bg-klanten.png) no-repeat center bottom;
		list-style-type:none;
	}	
	#watzeggenklanten li {
		position:relative;
		width:96px;
		height:123px;
		float:left;
		background:none;
		}		
	#watzeggenklanten li:hover {
		background:transparent url(https://www.yourhosting.nl/static/images/content/parkeerpagina2/bg-twt-active.png) repeat-x bottom;
		}	
	#watzeggenklanten a {
		outline:none;
		height:123px;
		display:block;
		background:transparent url(https://www.yourhosting.nl/static/images/content/parkeerpagina2/twt-img.png) no-repeat center;		
	}	
#tweets {
	height:155px;
}
		#t1 a{
			background-image:url(https://www.yourhosting.nl/static/images/shared/footer3/tweet-pics/twt-20.png);}
		#t2 a{
			background-image:url(https://www.yourhosting.nl/static/images/shared/footer3/tweet-pics/twt-19.png);}
		#t3 a{
			background-image:url(https://www.yourhosting.nl/static/images/shared/footer3/tweet-pics/twt-16.png);}
		#t4 a{
			background-image:url(https://www.yourhosting.nl/static/images/shared/footer3/tweet-pics/twt-18.png);}
		#t5 a{
			background-image:url(https://www.yourhosting.nl/static/images/shared/footer3/tweet-pics/twt-17.png);}		
		#t6 a{
			background-image:url(/static/images/shared/footer3/tweet-pics/twt-25.png);}
		#t7 a{
			background-image:url(/static/images/shared/footer3/tweet-pics/twt-23.png);}
		#t8 a{
			background-image:url(/static/images/shared/footer3/tweet-pics/twt-28.png);}		
		#t9 a{
			background-image:url(/static/images/shared/footer3/tweet-pics/twt-27.png);}
		#t10 a{
			background-image:url(/static/images/shared/footer3/tweet-pics/twt-26.png);}		

.twt-pointer{
	height:16px;
	background:transparent url(https://www.yourhosting.nl/static/images/content/parkeerpagina2/arrow-down.png) no-repeat center;
	position:absolute;
	display:none;
	bottom:-14px;
	width:320px;
	z-index:50;
	width:96px;
	bottom:-14px;
}
.tweet-wrapper{
	width:500px;
	margin:0 auto;
}
.twt{
	width:500px;
	position:absolute;
	display:none;
	padding-top:30px;
}
	.twt h3{
		font-size:20px;
		color:#7fa20a;
		margin-bottom:15px;
	}
	.twt p{
		font-size:13px;
		line-height:20px;
		color:#343434;
	}
	.twt span{
		color:#CCC;
		font-size:11px;
		margin-top:10px;
		display:block;
	}
	.twt a{
		text-decoration:none;
		color:#343434;
		font-style:oblique;
		font-size:15px;
	}
#magnify {
	position: absolute;
	right: 0;
	z-index: 999;
	top: 210px;
	width: 337px;
	height: 402px;
	background: transparent url(https://www.yourhosting.nl/static/images/content/parkeerpagina2/vergrootglas.png) no-repeat;
}
#sidebar {
	position:fixed;
	height:100%;
	background:#222222;
	z-index:4;
}
@media screen and (max-width: 960px) {
  #sidebar {
	display:none;
  }
}
.overlay-box {
	position:fixed;
	right:0;
	top:-1px;
	width:230px;
	z-index:4;
	background:#fff;
	padding:10px;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 0 0 0 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
	.overlay-box h3 {
		margin: 0;
		margin-bottom: 10px;
		font-weight: normal;
		font-size: 18px;
		line-height: 22px;
	
	}
	.overlay-box p {
		margin: 0;
		line-height: 18px;
	}