/* Maak je stedengids - cityzapper style */
/* used by every page */

html, body, span, applet, object, iframe {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	outline: 0;
  	font-size: 100%;
}

body {
  	background-color: #fff;
	background-image:url(../images/achtergrond.jpg);
	background-repeat:no-repeat;
	background-position:top;
  	margin: 0px 0px 0px 0px;
  	padding: 0px 0px 0px 0px; 
  	text-align: center; 
	color:#000;
}

h1 {
	font:normal 18px "Trebuchet MS", Arial;
	color:#000;
	margin:10px 0px 10px 2px;
}

h2 {
	font:normal 14px "Trebuchet MS", Arial;
	color:#666;
	display:inline;
}

h3 {
	font:bold 14px "Trebuchet MS", Arial;
	color:#000;
	margin:8px 10px 0px 10px;
}

h4 {
	font:bold 14px "Trebuchet MS", Arial;
	color:#FE8000;
}

h5 {
	font:bold 14px "Trebuchet MS", Arial;
	color:#FFF;
	margin:20px 25px 0px 20px;
}

/* center div */
#outerWrapper {
  margin: 0 auto 0 auto; 
  padding: 0px 0px 0px 0px; 
  text-align: left;
  width: 900px;
}

#toplinks {
	width:860px;
	height:15px;
	color:#FFF;
	font:normal 11px "Trebuchet MS", Arial;
	margin:10px 10px 0px 20px;
}

#toplinks a:link, #toplinks a:visited, #toplinks a:active {
	color:#FFF;
	text-decoration:none;
}

#toplinks a:hover {
	color:#FFF;
	text-decoration:underline;
}

#top  {
	width:880px;
	height:100px;
	color:#FFF;
	font:normal 14px "Trebuchet MS", Arial;
	margin:12px 10px 0px 10px;
}

#logo {
	width:500px;
	height:80px;
	margin:10px 0px 0px 0px;
}

#contentwrapper {
	width:900px;
	background-image:url(../images/contentwrapper.jpg);
	background-position:top;
	margin:10px 0px 0px 0px;
	position:relative;
}

#content {
	width:870px;
	color:#000;
	font:normal 12px "Trebuchet MS", Arial;
	padding:10px 0px 0px 0px;
	margin:10px 0px 15px 15px;
	clear:both;
	line-height:17px;
	position:relative;
}

#bottom  {
	width:900px;
	padding:3px 0px 3px 0px;
	color:#FFF;
	font:normal 10px "Trebuchet MS", Arial;
	text-align:center;
	clear:both;
}

/*step divs ----- */

#stepcontainer0 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step0.jpg);
	overflow:hidden;
}

#stepcontainer1 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step1.jpg);
	overflow:hidden;
}

#stepcontainer2 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step2.jpg);
	overflow:hidden;
}

#stepcontainer3 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step3.jpg);
	overflow:hidden;
}

#stepcontainer4 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step4.jpg);
	overflow:hidden;
}

#stepcontainer5 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step5.jpg);
	overflow:hidden;
}

#stepcontainer6 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step6.jpg);
	overflow:hidden;
}

#stepcontainer7 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step7.jpg);
	overflow:hidden;
}

#stepcontainer8 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step8.jpg);
	overflow:hidden;
}

#stepcontainer9 {
	width:890px;
	clear:both;
	height:35px;
	margin:10px 0px 0px 6px;
	background-image:url(../images/step9.jpg);
	overflow:hidden;
}

.step {
	width:88px;
	height:35px;
	color:#FFF;
	font:normal 14px "Trebuchet MS", Arial;
	margin:7px 0px 0px 0px;
	text-align:center;
	display:inline;
	float:left;
}

.step a:link, .step a:active, .step a:visited {
	color:#FFF;
	text-decoration:none;
}

.step a:hover {
	color:#FFF;
	text-decoration:underline;
}
	
/* end step divs -------- */

/* default page specifiek */

#creategids {
	background-image:url(../images/splash.gif);
	width:500px;
	height:400px;
	position:absolute;
	z-index:9999;
	left:200px;
	top:70px;
	color:#000000;
	text-align:center;
	font:normal 12px "Trebuchet MS", Arial;
}

#kalendercontainer {
	width:400px;
	position:absolute;
	left:50px;
	top:130px;
}

#geendatum {
	position:absolute;
	width:400px;
	left:30px;
	top:170px;
	text-align:center;
}

#cityname {
	position:absolute;
	left:10px;
	top:30px;
	color:#000000;
	width:480px;
	font:bold 28px "Trebuchet MS", Arial;
	text-align:center;
}

#kortingscode {
	position:absolute;
	left:200px;
	top:285px;
	width:100px;
	height:25px;
	font:normal 14px "Trebuchet MS", Arial;
	text-align:center;
	border:solid 1px #999;
	background-color:#F2F2F2;
}

#gidsaanmaken {
	position:absolute;
	width:100px;
	height:22px;
	left:200px;
	top:340px;
}

#venstersluiten {
	width:200px;
	height:20px;
	left:150px;
	top:370px;
	position:absolute;
	font:normal 11px "Trebuchet MS", Arial;
	color:#000000;
}

#venstersluiten a:link, #venstersluiten a:active, #venstersluiten a:visited, #venstersluiten a:hover {
	color:#000000;
	text-decoration:underline;
}

#kortingscodetekst {
	width:400px;
	font:normal 10px "Trebuchet MS", Arial;
	color:#000000;
	position:absolute;
	left:50px;
	top:265px;
	text-align:center;
}
#stadcontainer {
	width:550px;
	left:-10px;
	top:190px;
	position:absolute;
}

.stad {
	width:105px;
	height:105px;
	background-image:url(../images/kader-100x100.png);
	color:#333;
	font:normal 11px "Trebuchet MS", Arial;
	float:left;
	text-align:center;
	margin:0px 5px 5px 0px;
}

#kader1 {
	background-image:url(../images/kader-210x170.png);
	width:215px;
	height:175px;
	top:0px;
	left:-10px;
	position:absolute;
	overflow:hidden;
}

#kader2 {
	background-image:url(../images/kader-210x170.png);
	width:215px;
	height:175px;
	top:0px;
	left:215px;
	position:absolute;
	overflow:hidden;
}

#kader3 {
	background-image:url(../images/kader-210x170.png);
	width:215px;
	height:175px;
	top:0px;
	left:440px;
	position:absolute;
	overflow:hidden;
}

#kader4 {
	background-image:url(../images/kader-210x170.png);
	width:215px;
	height:175px;
	top:0px;
	left:665px;
	position:absolute;
	overflow:hidden;
	
}

#kaderpers {
	width:330px;
	height:255px;
	left:548px;
	top:190px;
	background-image:url(../images/kader-325x250-blauw.png);
	position:absolute;
}

#kadervideo {
	width:330px;
	height:255px;
	left:548px;
	top:455px;
	background-image:url(../images/kader-325x250-oranje.png);
	position:absolute;
	font:normal 11px "Trebuchet MS", Arial;
	color:000;
}

.kaderp {
	margin:5px 15px 0px 10px;
	font:normal 11px "Trebuchet MS", Arial;
	color:000;
	line-height:16px;
}

.kaderpersvideo {
	margin:10px 25px 20px 20px;
	font:normal 11px "Trebuchet MS", Arial;
	color:#000;
	line-height:17px;	
}

.cityimg {
	height:85px;
	width:85px;
	border:0px;
	margin:8px 0px 0px 0px;
}
/* end default page specifiek ---*/


/* step 1 page specifiek ---- */

#catcontainer {
	width:550px;
	margin:0px 0px 0px 0px;
	float:left;
}

#costcontainer {
	width:300px;
	height:450px;
	margin:0px 0px 0px 20px;
	float:left;
	background-image:url(../images/costbackground.jpg);
	background-position:top;
}

.step1inputcost {
	width:80px;
	height:20px;
	font:bold 12px "Trebuchet MS", Arial;
	color:#333;
	border:0px;
	text-align:right;
}

.step1inputcode {
	width:80px;
	height:20px;
	font:bold 12px "Trebuchet MS", Arial;
	color:#333;
	border:1px solid #666;
	text-align:right;
}

.step1inputcat {
	width:50px;
	height:20px;
	font:bold 12px "Trebuchet MS", Arial;
	color:#333;
	border:0px;
	text-align:right;
}

.tablesstep1 {
	width:100%;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
}

.errcode {
	color:#F00;
	font:bold 11px "Trebuchet MS", Arial;
}
/* end step 1 page specifiel -- */

.sep {
	width:100%;
	height:10px;
	clear:both;
	overflow:hidden;
}


/* step2 specifiek ---- */

.tablesstep2 {
	width:100%;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
}

.step2text {
	width:500px;
	height:20px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

.step2textarea {
	width:500px;
	height:70px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

.step2menu {
	width:200px;
	height:20px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

/*end step2 specifiek --- */


/* step3 specifiek ---- */

.tablesstep3 {
	width:100%;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
}

.step3text {
	width:500px;
	height:20px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

/* end step 3 specifiek ---*/


/* step4 specifiek ---- */

.tablesstep4 {
	width:100%;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
}

.step4textarea {
	width:500px;
	height:100px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

#maxchar {
	width:200px;
	font:normal 12px "Trebuchet MS", Arial;
}

.createalert {
	margin:20px 0px 5px 120px;
	width:600px;
	height:50px;
	font:bold 14px "Trebuchet MS", Arial;
	color:#F60;
	border:0px;
}

/* end step 4 specifiek ---*/


/* step5 specifiek ---- */

#previewcontainer {
	width:890px;
	margin:0px 0px 0px 0px;
	clear:both;
}

.previewimg {
	border:1px solid #333;
	margin:5px 0px 0px 5px;
	float:left;
}

.previewlargeimg {
	width:173px;
	height:127px;
	border:1px solid #333;
	margin:5px 0px 0px 5px;
	float:left;
}

.previewsep {
	width:100%;
	height:2px;
	overflow:hidden;
	clear:both;
}

/* end step 5 specifiek ---*/


/* step6 specifiek ---- */

.tablesstep6 {
	width:100%;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
}

.step6text {
	width:500px;
	height:20px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

/* end step 6 specifiek ---*/


/* step7 specifiek ---- */

.tablesstep7 {
	width:100%;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
}

.step7text {
	width:500px;
	height:20px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

.tablestep7td1 {
	width:190px;
}

.tablestep7td2 {
	width:30px;
}

/* end step 7 specifiek ---*/


/* step8 specifiek ---- */

.tablesstep8 {
	width:500px;
	padding:1px 1px 1px 1px;
	border-collapse:collapse;
	margin:0px 0px 0px 0px;
	font:normal 12px "Trebuchet MS", Arial;
	clear:both;
}

.step8text {
	width:300px;
	height:20px;
	font:normal 12px "Trebuchet MS", Arial;
	border:1px solid #999;
}

.tablestep8td1 {
	width:200px;
}

.tablestep8td2 {
	width:30px;
}

#divtekststep8 {
	width:500px;
	color:#000;
	font:normal 12px "Trebuchet MS", Arial;
	margin:0px 20px 0px 0px;
	float:left;
}

#previewgids {
	width:150px;
	height:200px;
	float:left;
}

/* end step 8 specifiek ---*/

/* form objects --- */

form {
	display:inline;
}
.button {
	background-color:#2590e5;
	border-left:1px solid #3B9BE8;
	border-top:1px solid #3B9BE8;
	border-right:1px solid #026EC7;
	border-bottom:1px solid #026EC7;
	color:#FFF;
	font:bold 12px 'Trebuchet MS', Arial;
	height:24px;
	width:120px;
}

/* end form objects */

/*contact pagina */

.contacttable{
	width:100%;
	color:#000;
	font:bold 12px 'Trebuchet MS', Arial;
	margin:0px 0px 0px -3px;
}

.contactinputtext {
	width:650px;
	height:22px;
	color:#000;
	font:bold 12px 'Trebuchet MS', Arial;
	border:solid 1px #CCC;
}

.contactinputtextarea {
	width:650px;
	height:80px;
	color:#000;
	font:bold 12px 'Trebuchet MS', Arial;
	border:solid 1px #CCC;
}

.contactinputselect {
	width:400px;
	height:22px;
	color:#000;
	font:bold 12px 'Trebuchet MS', Arial;
	border:solid 1px #CCC;
}
	
.contactinputbutton {
	width:200px;
	height:22px;
	color:#000;
	font:bold 12px 'Trebuchet MS', Arial;
	border:solid 1px #333;
	background-color:#CCC;
}

/*einde contact pagina */