/* 

Default style for zog.nl
Million Pieces - December 2005

*/



/* =Structure                   */
/* default structure and layout */

#container {
  margin-left:auto;
  margin-right: auto;
  margin-top: 0;
  max-width: 1400px;
  min-width: 770px; /*was: 790*/
}

/* some magic, see for more information: http://www.positioniseverything.net/easyclearing.html */
#mainContainer:after,
div.fronttaal:after {
  content: '[DO NOT LEAVE IT IS NOT REAL]'; 
  clear: both; 
  display: block; 
  height: 0; 
  visibility: hidden;
}

/* inline block is not a valid css attribute, it's only used to trick IE/Mac */
/* maybe this can go away since Microsoft tells mac users to stop using IE */
#mainContainer {
  display: inline-block;
}

#mainContainer {
  display: block;
}

/* */
#mainContainer {
  margin-top: 1%;
}

#contentBlock_wrapper {
  float: left;
  width: 100%;
}

#contentBlock {
  margin: 0 11em 0 10em;/* = textresize 0 150px 0 150px; */
  padding-left: 3em;/* = textresize 20px;*/
  padding-top: 0px;
}

#navigationBlock {
  float: left;
  margin-left: -100%;
  width: 11em;
}

/* maybe merge these two extracontentblocks and set width with a class?*/
#extraContentBlock, #vote {
  background-color: #ffd643;
  float: right;
  margin-left: -150px;
  width: 150px;
  text-align: center;
  clear: right;
} 

#vote {
  margin-top: 10px;
  text-align: left;
  padding-left: 4px;
  width: 146px;
}

#vote h1 {
  text-align: center;
}

#vote .formcontainer {
  margin-bottom: 2px;
}

#vote .formcontainer .radiobutton .radiobutton {
  margin-right: 5px;
}

#vote .submit {
  margin-top: 5px;
  text-align: center;
}

#extraContentBlockSponsor {
  background-color: #ffd643;
  float: right;
  margin-left: -170px;
  width: 170px;
  text-align: left;
} 
  
/* =Header */
#header {
  background-color: #ffd643;
  background-image: url(../../images/headerbackground.png);
  background-position: left top;
  background-repeat: repeat-y;
  height: 8.1em;/* =textresize 130px;*/
  overflow: hidden;
}

#headerLogo {
  float: left;
  margin: 0;
  padding: 0;
}

#headerText {
  color: red;
  font-family: "Times New Roman", Times, serif;
  font-size: 2.3em;
  float: left;
  margin-top: 0;
  margin-left: 1.1em;/*40px;*/
  padding-top: 1.0em;/*40px;*/
}

#headerText span {
  color: #00408f;
  font-style: italic;
  font-size: 0.9em;
  margin-left: 0.5em;
}

#headerPhotoContainer {
  height: 6.9em;
  overflow: hidden;
}

#headerPhoto {
  float: right;
  margin: 0;
}

/* =Header =Navigation */

#headerNavContainer {
  clear: right;
  margin: 0;
  padding: 0;
}

#headerNavContainer ul {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em; /*10px;*/
  height: 8px;
  margin: 0;
  padding: 0;
  text-align: center;
}

#headerNavContainer ul li {
  background-color: #0DA566;
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 12%; 
}

#headerNavContainer ul li.sponsor {
  background-color: #0DA566;
  width: 16%; 
}

#headerNavContainer ul li a {
  color: white;
  float: right;
  font-weight: bold;
  font-size: 0.7em;/*11px;*/
  padding: 4px 0 3px 0;
  text-decoration: none;
  width: 100%;
}

#headerNavContainer ul li a:hover {
  background-color: #A9E7B0; 
  color: #006;
  width: 100%;
  font-weight: normal;
}

/* =Navigation */
#navlist {
  background-color:#0DA566;
  color: gray;
  font-size: 0.7em; /*verdana, sans-serif;*/
  margin-left: 0;
  margin-top: 0;
  padding: 1px;
  width: 14em;
}

#navlist li {
  border-left: 1px #004080 solid;
  border-bottom: 1px gray solid;
  list-style: none;
  margin: 0px;
  text-align: left;
}

#navlist li a {
  display: block;
  font-size: 1.1em;
  padding: 0.7em 0.5em 0.7em 0.9em;
  text-decoration: none;
  
}

#navlist li a:link {
  color: #ffffff;
}

#navlist li a:visited {
  color: #ffffff;
}

#navlist li a:hover {
  background: #A9E7B0;
  border-left: 3px #ffd643 solid;
  color: #00408f;
  font-weight: bold;
}

#navlist li#zog {
  background-color:#B9CBE0;
  border-bottom: 0;
}

#navlist li#zog a:link {
  color: #006;
}

#navlist li#zog a:visited {
  color: #006;
}

#navlist li#zog a:hover {
  background: #00408f;
  border-left: 3px #ffd643 solid;
  color: #ffffff;
}

#navlist li#geschenken {
  background-color: #DD3636;
}

#navlist li#geschenken a:link {
  background-color: #DD3636;
}

#navlist li#geschenken a:visited {
  color: #ffffff;
}

#navlist li#geschenken a:hover {
  background: #FF8E8E;
  color: #00408f;
}

/* =Structure =Logos */
#logos {
  text-align: center;
}

#logos img {
  padding: 5px;
  border: none;
}

#google {
  text-align: center;
}

#taf {
  text-align: center;
}

#rss {
  text-align: center;
}

#mainArticle, #staticArticle {
  margin: 0px;
  padding: 0;
}

#staticArticle {
  padding-bottom: 10px;
}

#mainArticle p, #staticArticle p {
  margin-right: 2em;
}

#mainArticlebla {
  margin: 0px;
  padding: 0;
  margin-left: -100px;
}

#headlines {
  margin-top: 10px;
}

#highlights {
  padding: 0;
  width: 100%;
  clear: both;
}

#highlightLeft {
  float: left;
  margin-left: 0;
  margin-right: 5px;
  width: 55%;
  padding: 0 0 0 0;
  min-height: 10em;
}

#highlightRight {
  float: right;
  margin: 0;
  width: 40%;
}

img.highlight {
  float: left;
  margin-right: 5px;
  display: inline-block;
}

img.fronttaal {
  float: left;
  margin-right: 4px;
}

div.fronttaal {
  clear: right;
  margin-bottom: 10px;
  overflow: hidden;
}

div.fronttaal img {
  border: 1px solid #fff;
}

div.fronttaal img:hover {
  border: 1px solid;
}

/* =Structure =ExtraBlock */
div.extra {
  text-align: center;
}

div.extra img {
  border: 1px solid #0d51a6;
}

/* =Error */
#errorpage {
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 1em;
  width: 40%;
}

/* =Generic */

body {
  font-family:Arial,Helvetica,sans-serif;
  margin:2px;
  padding:0;
}

h1, h2 {
  font-weight: bold;
  margin-top: 0px;
  padding: 0px;
  margin-bottom: 0.3em;
}

h1.article,
#mainArticle h1 {
  color: #000066;
  font-size: 1em;
  margin: 0 0 0.3em 0;
}

h2.article,
h2.faq,
#mainArticle h2 {
  color: #000066;
  font-size: 0.8em;/*12px;*/
  margin: 1px;
}
h2.faq {
  margin-top: 15px;
}

h3 {
  color: #000066;
  font-size: 0.75em;
  margin: 0;
}

h1.extra {
  color: #000066;
  font-size: 0.9em;/*14px;*/
  /*font-style: italic;*/
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 3px;
}

h2.extra {
  color: #000066;
  font-size: 0.85em;/*14px;*/
  /*font-style: italic;*/
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 3px;
}

#extraContentBlock h3 a:hover {
  text-decoration: underline;
}

p.extra a:link,
p.extra a:visited {
  font-weight: bold;
  color: #0d51a6;
  text-decoration: none;
  border: 0;
}

p.extra a:hover {
  font-weight: bold;
  color: #0d51a6;
  text-decoration: underline;
}

div.article, img.mainArticle {
  display: inline;
  float:right;
  
  padding: 0; 
  text-align:center;
  
}

span.geverstabel {
  color: blue;
  font-family: Arial;
  font size: 1em;
}

img.mainArticle {
  margin:0px 5px 5px 5px;
}

div.article {
  margin:24px 5px 5px 5px;
  width:210px;
}

div.form {
  display: inline;
  float:right;
  margin:0;
  padding: 0;
  text-align:center;
}

div.articleRight {
  display: inline;
  float:right;
  margin:23px 5px 5px 5px;
  padding: 0;
  width:210px;
}

div#europe {
  width:310px;
}

div#country {
  width:290px;
}

div.sponsorphoto {
  float:right;
  margin:0px 5px 50px 5px;
  padding: 0;
  text-align:center;
  width:240px;
  height: 300px;
}

div#firstSponsorImage {
  margin-left: auto;
  margin-right: auto;
  width: 156px;
}

div#sponsorImages {
  margin-left: auto;
  margin-right: auto;
  width: 312px;
}

div#children {
  margin-bottom: 20px;
  margin-right: 50px;
}

img.firstSponsorImage {
  margin: 3px;
}

img.sponsorImages {
  float: left;
  margin: 3px;
}

img.article {
  border:1px solid #0d51a6;
}

img.article, img.staticArticle {
  border:1px solid #0d51a6;
}

img.staticArticle {
  float: left;
  margin-right: 10px;
}

span.imageline {
  color: #0d51a6;
  font-size: 0.75em;
}

img.icon {
  border:1px solid #0d51a6;
  clear: left;
  float: left;
  margin-top: 0px;
  margin-right: 5px;
  margin-bottom: 10px;
}

img.plattegrond {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p, form {
  color: #0d51a6;
  font-size: 0.75em;
  margin: 0 10px 10px 0;
  padding: 0;
}

form#sponsorInfoform {
  margin: 0 20px 10px 0;
}

.mainpage {
  color: #0d51a6;
  font-size: 0.75em;
}

ul.route {
  color: #0d51a6;
  font-size: 0.75em;
  list-style-type: none; 
  margin-top: 0.5em;
}

div.vcard {
  color: #0d51a6;
  font-size: 0.75em;
  margin-bottom: 1.5em;
}

div.adr {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

div.tel {
  margin-bottom: 0em;
}

abbr.type {
  border: 0;
}

div.formcontainersubmit {
  padding-left: 0.5em;
}

div.special {
  margin-bottom: 0.5em;
}

#amountmessage {
  font-size: 0.9em;
  vertical-align: middle;
  padding: 0 0 8px 4px;
}

div.specialFormText {
  border: 1px solid #0d51a6;
  margin: 0.5em;
  padding: 0.5em;
  font-size: 1em;

}

div.specialFormTextNoJavascript {
  margin-right: 18em;
}

div.specialFormTextJavascript {
  
}

div.specialFormText p {
  font-size: 1em;
  padding: 0em;
  margin: 0;
} 

div.specialFormText p.telephone {
  font-size: 1em;
  padding: 0em;
  margin: 0;
  margin-bottom: 0.5em;
}


div.formmessage p {
  text-align: center;
  font-weight: bold;
}

p.formcontainer {
  font-size: 1em;
}

label, span.label {
	margin: 0;
	padding: 0 0 0 4px;
	width: 156px;
	float: left;
}

label.radiobutton {
	float: none;
	margin-right: 1em;
	padding: 0 0 0 0.2em;
}

label.paymentoption {
  display: block;
  padding: 0;

}
div.paymentoptions {
  float: left;
}

label.checkbox {
  width: 90%;
  margin-bottom: 0.2em;
}

label.checkboxplus {
  width: 60%;
  float: left;
}

div.checkboxplus {
  width: 60em;
}


#bedrag {
  display: inline;
  float: left;
}


label.checkbox input {
  padding: 0;
}

label.checkbox input, label.checkboxplus input {
  margin: 0 0.5em 0 0;
}

label.message {
  margin-bottom: 1em;
  width:30em;
}

textarea {
  clear: left;
  display: block;
  max-width: 30em;
}

legend {
  font-weight: bold;
}

fieldset {
  border:1px solid #0d51a6;
  margin: 0.5em;
  padding: 1em;
}

fieldset.radiobutton {
  padding: 0.2em 0 0.2em 0.5em;
}

fieldset.gender {
  border: 0;
  padding-left: 0;
  margin-left: 0.1em;
}

input, textarea, select, option {
  color: #0d51a6;
  font-size: 0.9em;
  margin-bottom: 0.5em;
}

input, textarea, select {
  border:1px solid #0d51a6;
}

#subject {
  width: 14em;
}

#creditcardbrands {
  width: 12em;
}

input.error {
  border:1px solid red;
}

label.error, span.error, span.reserved, span.reserveddetail, legend.error{
  color:red;
}
ul#imagegallery li span.reserved {
  display: block;
  font-size: 0.9em;
  text-align: center;
}

span.nameOfChild {
  font-weight: bold;
}

span.reserveddetail {
  display: block;
  font-size: 1.2em;
  text-align: center;
}

span.error {
  vertical-align: middle;
  padding: 0 0 4px 4px;
}

input.radiobutton, input.checkbox {
  margin: 0;
  border: 0;
}

input.checkboxtext {
  clear: both;
  float: left;
  margin-left: 5px;
}

fieldset.radiobutton input#peraltie {
  margin-bottom: 0.2em;
}

.smallinput {
  width: 6em;
}

.middleinput {
  width: 10em;
}

.largeinput {
  width: 15em;
}

.requiredinfo {
  color: red;  
}

#mainArticle ul,
ul.articleList {
  list-style-type: circle;
  margin-top: 0;
  padding-bottom: 1em;

}

#mainArticle ul,
ul.articleList li,
ol.articleList li,
ul.extra,ol.extra {
  color: #0d51a6;
  font-size: 0.75em; 
  line-height:1.4em;
  margin-bottom: 0px;
  margin-top: 0;
}

ul.articleList li,
ol.articleList li {
  font-size: 1em;
}

/* misschien???
ul.articleList li:before {
	content: "\00BB \0020";
	}*/

ul.mainpage {
  position: relative;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 15px;
}

ul.mainpage + p {
  margin-top: 0;
  margin-left: 0.4em;
}

ul.mainpage li {
  line-height:1.4em;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: 0px;
}

ul#imagegallery {
  display: inline;
  float: right;
  list-style-type: none;
  margin-right: 15px;
  margin-top: 20px;
  width: 97%;  
}

ul#childrenList {
  display: inline;
  float: right;
  
  list-style-type: none;
  margin-right: 15px;
  margin-top: 20px;
  width: 97%;  
}

ul#imagegallery li { 
  display: inline; 
  float: left;
  height: 200px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 5px;
  width: 101px; 
  padding: 0;
}

ul#imagegallery li.family {
  margin-right: 110px;
  height: 240px;
}


ul#imagegallery li a { 
  display: block; 
  height: 190px;
  text-decoration: none;
  width: 101px;
  margin: 0;
  padding: 0;
}

ul#imagegallery li a:hover span, 
ul#childrenList li a:hover span,
a.children:hover { 
  color: red; 
}

ul#imagegallery li img {
  border:1px solid #0d51a6;
  display: inline;
  margin: 0;
  padding: 0;
}

ul#imagegallery li img:hover {
  border:1px solid red;
}


ul#imagegallery li p {
  text-align: center;
  width: 101px;
  margin: 0;
  padding: 0;
}

ul#imagegallery li a:hover p { 
  color: red; 
}

ul#imagegallery li p.familytext {
  font-size: 1em;
  text-align: left;
  margin-bottom: 0.4em;
}

ul#imagegallery li h3 {
  text-align: center;
}

span.familytext {
  display:inline;
  font-size: 0.75em;
  margin-left: 5px;
  margin-right: 5px;
  position: absolute;
  width: 100px;
}

dl {
  color: #0d51a6;
  margin-top: 0;
  font-size: 0.75em;
}

dt {
  font-size: 1.3em;
  font-weight: bold;
}

dl.articleList dt {
  font-size: 1em;
  display: inline;
}

dl.articleList dd {
  margin-left: 0;
}

p a,
p a:visited {
  text-decoration: underline;
  /*border-bottom: 1px dashed;*/
  color: #7ba0ce;  
}
  
a {
  color: #0d51a6;
  text-decoration: none;
}

h2.article a:hover,
h1.article a:hover,
ul.mainpage a:hover,
a.faq:hover {
  text-decoration: underline;
}

a.faq:hover {
  color: #0d51a6;
}

a.faq:visited {
  color: #7ba0ce;   
}

a.faq {
  color: #7ba0ce; 
  font-size: 0.55em;
}
p a:hover,
ul.articleList li a:hover {
    /*border-bottom: 1px solid;*/
    color: #0d51a6;
    text-decoration: underline;
}

p.paging {
  margin-top: 1em;
}

#ideallogo {
  margin-left: 1em;
}

/* otherwise ie will get two lines!!*/
p.extra a:hover {
  border-bottom: 0;
  color: #0d51a6;
}

a:visited {
  color: #0d51a6;	
}

h1 a,h1 a:hover,h1 a:link,h1 a:visited {
  color: #000066;
  font-size: 1em;
}

a.moreinfo,a.moverinfo:hover,a.moreinfo:link,a.moreinfo:visited {
  color: #000066;
  font-size: 0.85em;
}

a.moreinfo:hover {
  color: #0d51a6;
}

p.extra {
  /*font-style: italic;*/
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  margin-top: 5px;
}

p.sponsor {
  margin-top: 5px; 
  margin-bottom: 0px; 
}

p.sponsor span {
  display: block;
  margin-bottom: 10px;
}

/* move to other area?*/
div#mailoptions, div#noscriptmailoptions {
  margin-top: 0.5em;
  margin-left: 1.2em;
}

div.anonymous {
  clear: both;
}

div#donorsubmit {
  clear: both;
  margin-top: 2.5em;
}

/* footer */
.footer p,
.footerSponsor p{
  color: #909090;
  font-size: 0.6em;
  margin: 0;
  margin-top: 3px;
  padding: 0 0.75em 0.5em 0;
  text-align: center;  
}

.footer { 
  border-top: solid 0.01em #c7c7c7;
  margin: 10px 155px 0 10.5em;
}

.footerSponsor { 
  border-top: solid 0.01em #c7c7c7;
  margin: 10px 175px 0 10.5em;
}

.printfooter {
  display: none;
}

.footerHomepage {
  display: none;
}

#currencyconverter {
  width: 250px;
  display: inline;
}

.answer {
  font-size: 0.8em;
  color: #0d51a6;
}

.graph {
  position: relative; /* IE is dumb */
  width: 135px;
  border: 1px solid #0DA566;
  padding: 2px;
  margin-right: 0em;
  margin-left: 0;
  margin-bottom: 0.2em;
}

.graph .bar {
  display: block;
  position: relative;
  background: #0DA566;
  text-align: center;
  color: #333;
  height: 1em;
  line-height: 1em;
  font-size: 0.8em;
}

.graph .bar span {
  position: absolute;
  left: 1em;
  width: 100px;
  color: #000066;
  font-size: 0.9em;
}


span.sproject,
span.sproject a {
  color: #000066;
  display: block;
  font-weight:bold;
  font-size: 1em;
  margin: 1px;
  text-decoration: none;
}

span.sproject a:hover {
  text-decoration: underline;
}

/* =Generic =Sponsor */
div.shelterListItem,
div.countryListItem,
div.familiesListItem {
  clear: both;
}

div.shelterListItem img,
div.countryListItem img,
div.familiesListItem img {
  border:1px solid #0D51A6;
  float: left;
  margin-bottom: 10px;
  margin-right: 10px;
  
}

div.shelterListItem a:hover,
div.countryListItem a:hover, 
div.familiesListItem a:hover{
  color: red;
}

div.shelterListItem ul li,
div.countryListItem ul li {
  margin-left: 15px;
}

div.shelterListItem ul,
div.countryListItem ul {
  margin-left: 75px;
}

div#extraimages {
  clear: both;
  margin-bottom: 20px;
}

/* =Generic =Gevers */

div.gevers {
  height: 80px;
  margin-top: 0px;
  width: 100%;
}

div.geversImage {
  margin-left: 0px;
  width: 140px;
  height: 80px;
  margin-top: 0px;
}

div.geversImage img {
  border:0px solid #0D51A6;
  float: right;
}

div.geversListItem {
	margin-top: -80px;
	margin-left: 160px;
}

div.geversListItem a:hover {
  color: red;
}

div.geversListItem ul li {
  margin-left: 15px;
}

div.geversListItem ul {
  margin-left: 75px;
}



div#extraimages {
  clear: both;
  margin-bottom: 20px;
}

/* =Generic =catalogus */

div.catalogus {
  height: 190px;
  margin-top: 0px;
  width: 100%;
}

div.catalogusImage {
  margin-left: 0px;
  width: 200px;
  height: 165px;
  margin-top: 0px;
}

div.catalogusImage img {
  border:1px solid #0D51A6;
  float: right;
}

div.catalogusListItem {
	margin-top: -165px;
	margin-left: 210px;
	height: 160px;
	border-top: 1px solid #0D51A6;
}

div.catalogusListItem a:hover {
  color: red;
}

div.catalogusListItem ul li {
  margin-left: 0px;
}

div.catalogusListItem ul {
  margin-left: 0px;
}

h3#catalogus {
  color: #000066;
  font-size: 0.75em;
  margin: 0;
}