/*
-----------------------------------------------
Superior - Master Stylesheet
Author:   Bas van Ekkendonk
Version:  2008.05 | edit: 21-1-2009
----------------------------------------------- */

/* Grids
----------------------------------------------- */

@import url("grid.css");  /* Grid Import */
@import url("table.css");  /* Table Import */
@import url("fieldset.css");  /* Fieldset Import */

/* Globals
----------------------------------------------- */

body {	background: #fff url('../i/bg-3.jpg') top center no-repeat; }
body.oranje { background: #ff6c00 url('../i/main-bg-oranje.jpg') top center no-repeat; }
body.oranje p { color: #fff; text-shadow: #ff5600 0 0 0; }
body.oranje a { color: #ff5600; text-shadow: #ddd 0 0 0; }
body.oranje #subnav a,
body.oranje .innerfooter a,
body.oranje .sidebar a { color: #fff; text-shadow: #ff5600 0 0 0;}
body.oranje h4 { text-shadow: #ff5600 0 0 0;}

h2 { color: #4e4e4e; }


/* Header
----------------------------------------------- */

#header {
	margin: 0 auto;
	width: 820px;
}

	#logo {
	margin: 20px 0;
	float: left;
	}
	
		#logo h1 { display: none; }
	
	#subnav {
		margin-top: 15px;
		padding: 0 2px 0 4px;
		padding-bottom: 22px !important;
		float: right;
		width: 140px;
		background: url('../i/subnav-bg.png') no-repeat;
	}
	
		#subnav ul {
			margin: 0; padding: 0;
			list-style-type: none;
		}
		
		#subnav ul li a {
			display: block;
			padding: 0.3em 0 0 1em;
		  	font-size: 1em;	
			height: 2em;
			color: #cd0000; 
			border: 0;

		}

		#subnav ul li a:hover {
			color: #252525;
		}


/* Header banner
----------------------------------------------- */

#hbanner {
	clear: both;
	margin: 5px auto 0 auto;
	width: 960px; height: 130px;
}

	#hbanner ul, #hbanner li { margin: 0 auto; padding: 0; list-style: none; }
	#fp-banner ul li {height: 250px;}
	
	.loading {
		 background: #f00 url('../i/icons/spinner.gif') no-repeat 20px 20px;
	}


/* Frontpage grid
----------------------------------------------- */

#fp-grid {
	clear: both;
	margin: 98px auto 0 auto;
	width: 823px;
	height: 90px; }

	.box1, .box2, .domain-search {float:left; display: inline;}
	.box1, .box2 { margin-top: 14px; margin-right: 4px; width: 208px; height: 90px; }
	.box1 { background: url('../i/fp-box1.png') top no-repeat;}
		.box1 strong { display: block; margin: 8px 0 0 8px; color: #ffd2d2; text-shadow: #8b0000 0 0 2px;}
		.box1 p { display: block; margin: 0 8px 0 8px; color: #fff; text-shadow: #6a0000 0 0 2px; font-size: 11px; line-height: 12px; }
	.box2 { background: url('../i/fp-box2.png') top no-repeat;}
		.box2 strong { display: block; margin: 8px 0 0 8px; color: #e0e0e0; text-shadow: #182128 0 0 2px;}
		.box2 p { display: block; margin: 0 8px 0 8px; color: #fff; text-shadow: #182128 0 0 2px; font-size: 11px; line-height: 12px; }

	.domain-search { background: url('../i/fp-domain-search.png') top no-repeat; width: 399px; height: 89px; }
		.domain-search strong { display: block; margin: 22px 0 0 30px; color: #656565; }
		.fp-ds { margin: 2px 0 0 34px; font-size: 20px; border: none; background: none; width: 240px; }

	.fp-leesverder {
		display: block;
		margin: -9px 0 0 127px;
		color: #a6a6a6;
		font-size: 11px;
	}
	
	a.fp-box1 {
		color: #fff;
		-webkit-transition-property: none; 
		cursor: pointer;}
	
	a span.fp-leesverder {color: #6e6e6e;}
	a:hover span.fp-leesverder {
		color: #000;
		-webkit-transition-property: color, text-shadow;
	  	-webkit-transition-duration: .5s;
	  	-webkit-transition-timing-function: ease-in; 
		}
	
	input.ds {
		float: left;
		position: relative;
		margin: -31px 0 0 300px;
		width: 83px; height: 40px;
		background:url('../i/zoek-button.png') no-repeat;
		border: none;
		cursor: pointer;
	}
	
	input.ds:hover {background-position-y: -42px;}


/* Menu
----------------------------------------------- */

#menu {
	padding: 0; margin: 0;
	float: left;
	width: 100%;
	overflow: hidden;
	position: relative;
	#width: 960px;
	background: url('../i/menu-bg2.png') no-repeat top left;
	}
	
#menu ul {
	clear: left;
	float: left;
	margin: 0;
	position: relative;
	left: 50%;
	text-align: center;
	list-style-type: none;
	#margin: 0 auto;
	padding: 0;
	#width: 820px;
}

#menu ul li {
	padding: 0; margin: 0 15px 0 15px;
	display: block;
	float: left;
	list-style: none;
	position: relative;
	right: 50%;
}

#menu ul li a {
	display: block;
	margin: 7px 0 11px 0px;
	padding: 4px 8px 2px 8px;
	text-decoration: none;
	font-weight: normal;
	font-family: "lucida grande", "lucida sans", "calibri", Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px;
	color: #dedede;
	text-shadow: #707070 0 0 5px;
}

#menu li.active a {color: #fff; text-shadow: #bbb 0 0 5px; }

#menu a:hover { color: #fff; }

#menu a.bestellen {
	display: block;
	*/ background: transparent url(../i/bestellen-menu-button.png) no-repeat; */
	text-shadow: #811616 0 0 5px;
	#-moz-border-radius: 5px;
	#-webkit-border-radius: 5px;
	-webkit-transition-property: background-color, color, text-shadow;
  	-webkit-transition-duration: .5s;
  	-webkit-transition-timing-function: ease-in;
} 

#menu a.bestellen:hover {
	display: block;
	/* background: transparent url(../i/bestellen-menu-button-over.png) no-repeat;  */
	#-moz-border-radius: 5px;
	#-webkit-border-radius: 5px;
	color: #fff;
	-webkit-transition-timing-function: ease-out;
}

/* Content
----------------------------------------------- */

#content {
	
}

	.inner {
		width: 820px;
		margin: 25px auto 0 auto;
	}
	
	.sidebar {
		float: left;
		width: 185px;
	}
	
		.sidebar ul { margin: 0; padding: 0; list-style: none; }
		
		.sidebar li a {
			display: block;
			padding: 2px 0 2px 16px;
			border: 0;
			background: transparent url('../i/tilde.png') 0 2px no-repeat;
		}
		
		.sidebar p { padding: 12px 0 4px 4px; font-weight: bold; }
		
		.input { 
			padding: 12px 8px 0 8px;
			background: url('../i/input-bg.png') no-repeat;
			width: 166px; height: 35px;
		}
	
	.column {
		float: left;
		margin-left: 8px;
		padding-bottom: 10px;
	}
	
		.w1 {width: 614px;} /* was 550px */
		.w2 {width: 462px;}
		.w3 {width: 820px; margin: 0 70px 0 69px;}

	.spec {
		margin-left: 22px;
		width: 140px;
		float:left;
	}

	ul.list li,	
	.spec ul li {
		margin: 0 0 0 -16px; padding-left: 16px;
		background: url('../i/bg-bullet.gif') 2px 0.6em no-repeat;
		list-style: none;
}

	.pdf ul li {
		padding-left: 30px;
		background: #ccc url('../i/icons/pdf-icon.gif') no-repeat left;
	}


	.spec ul {
		margin-top: 0; padding: 6px 0 6px 16px;
		border-top: 3px double #aaa;
		border-bottom: 3px double #aaa;
	}

img.right, img.left { padding: 4px; background-color: #fff; border: 1px solid #bebebe; }

/* Alerts and highlighters
----------------------------------------------- */
.highlight {
	background-color: #ffff99;
}

#alert {
	margin: 2px 0 10px 0;
	padding: 10px 8px 10px 34px;
	background: #fbfbfb url(i/alert.gif) left no-repeat;
	border: 1px dashed #ccc;
}

.melding {
	margin-bottom: 10px;
	padding: 10px;
	background: #ffff99;
	border: 3px double #ccc;
	opacity: 0.7;
	color: #111;
	text-align: center;
	font-weight: bold;
}

.green { color: #390; font-weight: bold; }

/* Button(s)
----------------------------------------------- */

a.btn {
		display: block;
	/*	float: left; */
		margin: 0;
		padding: 0;
		font: 11px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif !important;
		color: #445;
		text-decoration: none!important;
		text-shadow: #FFF 1px 1px 0;
		background: url('../i/btn-2-l.png') 0 0 no-repeat;
		height: 24px;
		overflow: hidden;
		cursor: pointer;
		-webkit-transition-property: none; 

	}
	
	* html a.btn { display: inline; }
	
	a.btn:hover {
		color: #223;
		text-decoration: none;
		background-position: 0 -24px;
                -webkit-transition-property: none;

	}
	
a.btn:active {
		color: #000;
		text-decoration: none;
		background-position: 0 -48px;
	}
		a.btn span {
			float: left;
			margin-left: 12px;
			padding: 4px 12px 6px 0;
			font-size: 100%;
			background: url('../i/btn-2.png') 100% 0 no-repeat;
			height: 24px;
		}
		
		a.btn:hover span {
			background-position: 100% -24px;
		}
		
		a.btn:active span {
			background-position: 100% -48px;
		}


/* Footer
----------------------------------------------- */

#footer {
	float: left;
	margin: 10px 0 10px 0;
	background: url('../i/footer.png') no-repeat;
}

	.fp {top: 100px;}
	.innerfooter {	
		position: relative;
		display: block;
		margin: 0 auto 0 50px;
		width: 820px; height: 40px;
		border-top: 3px double #dedede;
		padding: 9px 20px 30px 10px;
	}
	
	#footer ul {margin: 0; padding: 0; list-style: none; display: block; clear: both;}
	#footer li {
		font-size: 10px; 
		float: left; 
	}

/* Bestellen
----------------------------------------------- */
/* bestellen */

.container_16{margin-left:auto;margin-right:auto;width:760px;}
.grid_8 {display:inline;float:left;margin-left:10px;margin-right:10px;width:360px}

.rad-radiobutton {
		display: table-cell;
		float: left;
		padding: 6px 8px 6px 8px;
		-webkit-border-top-left-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
	}
	
		.rad-radiobutton input {
			font-size: 32px;
		}
	
	.pakketgrid ul {
		list-style-type: none; 
		margin:0; 
		padding: 0;
	}
	
		.pakketgrid ul li {
			height: 130px;
		}
	
	.pakketgrid label {
		margin: 0; padding: 0;
	}

	.pakket-box {
		display: block;
		float: left;
		background: rgba(0,0,0,0.1) url(../i/overlay.png) repeat-x;
		-webkit-border-radius: 8px;
		-webkit-border-top-left-radius: 0;
		-moz-border-radius: 8px;
		-moz-border-radius-topleft: 0;
		border-radius: 8px;
		border-top-left-radius: 0;
		padding: 0 8px 8px 8px;
		width: 260px;
		text-shadow: 0 -1px 1px rgba(255,255,255,0.25);
		cursor: pointer;
	}
		
		.pakket-box:hover {
			background-color: rgba(0,0,0,0.15);
		}
		
		.pakket-box h6 {
			font-family: "lucida grande", "lucida sans", Helvetica, sans-serif;
			font-size: 14px;
			font-weight: bold;
			padding: 9px 0 8px -6px; margin: 0;
		}
		
		.pakket-omschrijving {
			padding: 0 0 4px 0; margin: 0;
		}
		
		.selected {
			background: #fff;
			background: rgba(255,255,255,0.8);
		}
	
	.input-domein {font-size: 18px; width: 270px;}
	
	.prijs {
		float: left;
		padding: 0; margin: 0;
		font-size: 13px;
		font-weight: bold;
	}
	
		.korting {
			float: right;
			margin: 0 0 0 6px;
			padding: 0 4px 0 4px;
			font-weight: bold;
			background: #390 url(../i/overlay.png) repeat-x;
			color: #fff;
			text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
			border-bottom: 1px solid rgba(0,0,0,0.25);
			-moz-border-radius: 5px; 
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
/* einde bestellen */