/** 
 * hwko.css 
 * 
 * Screen styles (all parts) for helpwandkunstopsporen.nl that are not covered
 * by the Starters Kit Rijksoverheid
 * 
 * @version			1.0.0
 * @date			2009-10-21
 * @lastmodified	-
 * @author			Occhio (Marco Verheul)
 * @project			helpwandkunstopsporen.nl
 * @link			http://www.helpwandkunstopsporen.nl
 * @cssdoc			version 1.0
 *
 */

/* ------------------------------- 
 General styles
------------------------------- */

.clear {
	clear: both;
}

.hidden {
	display: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

#service_menu {
	display: none;
}

#googleMap td {
	background-color: #fff;
	vertical-align: top;
}

#googleMap td a,
#googleMap td a:link,
#googleMap td a:active,
#googleMap td a:visited {
	color: #0162cd;
}

/* ------------------------------- 
 Styles on multiple pages
------------------------------- */

/*--- site title above mainnav ---*/
h1#sitename {
	position: relative;
	margin: 0;
	padding: 0 0 0 24px;
	background-color: #BDDFED;
	font-size: 1.8em;
	font-weight: bold;
	text-align: left;
}

h1#sitename span {
	position: relative;
	background: none;
	font-weight: normal;
	font-style: italic;
}

/*--- change sideInfo bg-color for empty sidebars ---*/
body.page6 #sideInfo,
body.page7 #sideInfo,
body.page13 #sideInfo,
body.page15 #sideInfo,
body.page16 #sideInfo,
body.page19 #sideInfo,
body.page33 #sideInfo {
	background-color: #fff;
}

body.page5 form p.mandatory,
body.page9 form p.mandatory {
	width: 440px;
}

/*--- form errors ---*/
.message_err h2 {
	font-weight: bold;
	margin: 0 0 1em 0;
}

.ofb_errorText {
	color: red;
}

/*--- Steps sidebar ---*/
#sideInfo .selectedStep h3,
#sideInfo .selectedStep p {
	color: #154273;
}


/*--- search box in header ---*/

form#zoeken li {
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	background-color: #046F96;
	border: none;
}

form#zoeken li input {
	float: left;
}


/* ------------------------------- 
 Homepage
------------------------------- */

/*--- titel onder main image ---*/
p.mainImgTitle {
	width: 430px;
	margin: 0;
	padding: 0;
	background-color: #bddfed;
}
p.mainImgTitle img {
	margin: 0;
	padding: 0;
}
p.mainImgTitle span {
	display: block;
	margin: 0;
	padding: 0 1em;
	height: 2.2em;
	line-height: 2.2em;
	font-size: 1.2em;
	font-weight: bold;
}

/*--- lijst met gegegevns over kunstwerk ---*/
ul.artDetails {
	margin: 16px 0 0 0;
}

ul.artDetails li {
	margin: 0.2em 0;
	padding: 0 0 0 1em;
}

/*--- thumbnails (Recente toevoegingen) ---*/
div.recentThumbs img.first {
	margin-left: 0;
}
div.recentThumbs img {
	margin-left: 16px;
}

/*--- link (Voeg kunstwerk toe) ---*/
p.boldLink {
	text-align: center;
	padding: 1em 0;
}
p.boldLink a {
	color: #000;
	font-size: 1.2em;
	font-weight: bold;
}

/*--- overig ---*/
.tong {
	margin-bottom: 16px;
	height: 332px;
}

.tong h3 {
	margin: 0 0 1em 0;
}



/* ------------------------------- 
 Details page
------------------------------- */

/* --- fix for strange layout for search box: does not occur on other pages --- */
body.hwko-details div.search,
body.hwko-details form#zoeken,
body.hwko-details form#zoeken fieldset {
	height: 20px;
}
body.hwko-details form#zoeken input {
	float: left;
	margin: 0;
}

/*--- breadcrumbs ---*/
.breadcrumb {
	margin-left: 260px;
	width: 600px;
}

#content .content_main.wide {
	width:650px;
}

#content .content_main {
	left: 260px;
}

body.hwko-details div.message_err {
	margin-bottom: 2em;
}

/*--- light blue sidebar with info ---*/

#sideInfo {
	width: 245px;
	margin: 86px 0 0 28px;
	padding: 1em 0 3em 0;
	background-color: #bddfed;
}
#sideInfo h2,
#sideInfo h3,
#sideInfo h4 {
	display: block;
	margin-left: 12px;
}
#sideInfo p {
	margin-left: 12px;
	text-align: justify;
}

/*--- image box ---*/

div.detailImage {
	width: 420px;
	float: left;
	margin: 0;
	padding: 0;
}
div.detailImage img {
	margin: 0 0 1em 0;
}
div.detailThumbs {
	width: 210px;
	float: left;
	margin: 0;
	padding: 0;
}
div.detailThumbs img {
	margin: 0 0 22px 0;
}
div.detailThumbs ul {
	background-color: #bddfed;
	padding: 1em;
}

/*--- form (aanvullende gegevens) ---*/

input#antiSpamCode {
	border: 1px solid #000;
	width: 20.2em;
	margin: 0 0 0.5em 11.6em;
}

body.hwko-details input.submit {
	margin: 10px 0 0 165px;
}


/* ------------------------------- 
 Steps - Sidebar General
------------------------------- */

/*--- change sideInfo bg-color ---*/
body.page5 #sideInfo,
body.page11 #sideInfo,
body.page8 #sideInfo,
body.page9 #sideInfo {
	padding: 0;
	background-color: #fff;
	/*border: 1px solid red;*/
}

body.page5 #sideInfo h2,
body.page11 #sideInfo h2,
body.page8 #sideInfo h2,
body.page9 #sideInfo h2 {
	margin-top: 0;
}

#sideInfo h3,
#sideInfo p {
	color: #666;
}

#sideInfo .selectedStep {
	padding: 0.4em 0;
	background-color: #f5f5f5;
}

#sideInfo .selectedStep h3,
#sideInfo .selectedStep p {
	color: #154273;
}

#sideInfo .doneStep h3 a {
	color: #154273;
}

#sideInfo .doneStep h3 a:hover {
	color: #0162cd;
}


/* ------------------------------- 
 Steps - SpanInfo's
------------------------------- */

form li {
	position: relative;
}

form li .spanInfo {
	width: 158px;
	padding: 10px;
	color: #666;
	background-color: #FEF1BC;
	font-style: italic;
	position: absolute;
	top: 0;
	right: -190px;
}


/* ------------------------------- 
 Step 1a - Form styles
------------------------------- */

.checkAddressLabel,
.checkAddressValue {
	font-size: 1.2em;
}
.checkAddressLabel {
	font-weight: bold;
}

table.doubleEntries td {
	vertical-align: top;
}

/* ------------------------------- 
 Step 2 - Form styles
------------------------------- */

.spanInfo {
	display: none;
}

form legend {
	margin: 0;
	padding: 2em 0 1em 0;
}

form input.textinput {
	background: #fff;
	color: #000;
	border: 1px solid #000;
	width: 20em;
	padding: 0.2em;
}

form li {
	clear: both;
	width: 66.67%;
	padding: 0.4em 1em;
	background-color: #f5f5f5;
	border-bottom: 0.2em solid #fff;
}

label {
	display: block;
	width: 14em;
	float: left;
}

form li div.radio label {
	width: auto;
	margin-left: 14em;
}

form li select {
	width: 20.2em;
}

div.explanation li {
	background-color: transparent;
	border: none;
	font-size: 90%;
}

div#infoBox {
	padding: 0 1em;
}

a.expanded {
	color: red;
	outline: 1px solid green;
	margin: 0 0 1em 0;
}

body.page8 input.proceed {
	margin-right: 1em;
}


/* ------------------------------- 
  Information - artists
------------------------------- */

.artistCol {
	width: 33%;
}



/* ------------------------------- 
  Zoeken
------------------------------- */

/*--- sidebar ---*/
body.page6 #sideInfo {
	margin-top: 50px;
	padding: 0;
}

body.page6 #sideInfo .theme {
	margin: 0;
	padding: 1em 0;
}

body.page6 #sideInfo .theme p {
	margin: 0 0 1em 0;
}

body.page6 input#search_1 {
	margin: 10px 0 0 165px;
}

body.page6 form li select {
	width: 20.5em;
}


/*--- zoekresultaat ---*/

#GoogleMap {
	float: right;
	width: 50%;
	/*outline: 1px solid red;*/
}

#searchWrapper {
	margin-top: 2em;
}

#searchWrapper table {
	width: 48%;
	/*outline: 1px solid green;*/
}

#searchWrapper th,
#searchWrapper td {
	vertical-align: top;
	background-color: #fff;
}


/*--- zoekresultaat - paging ---*/
.filterNavigationWrapper {
	margin-right: 25px;
}