/* -------------------------------------------------------------
File: primary CSS file for Grote Kerk Den Haag site
Author: Matthijs Abeelen
License: Copyright 2008-
Description: This base stylesheet declares the base styles for
the main non-specific sections of the site
------------------------------------------------------------- */

/* Reset */
html,body,span,applet,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,
dfn,em,font,img,ins,kbd,q,s,samp,small,strike,tt,var,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
  margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body{ line-height:1; }
ol,ul{ list-style:none; }
blockquote,q{ quotes:none; }
blockquote:before,blockquote:after,q:before,q:after{ content:'';content:none; }
:focus{ outline:0; }
ins{ text-decoration:none; }
del{ text-decoration:line-through; }
table{ border-collapse:collapse;border-spacing:0; }

/* Typography */
body{ font:12px/1.4 Arial,'Liberation Sans',FreeSans, Verdana, sans-serif;color:#000;
background-color:#000;
}
a:focus{ outline:1px dotted invert; }
hr{ border-color:#ccc;border-style:solid;border-width:1px 0 0;clear:both;height:0; }
h1{ font-size:25px;}
h2{ font-size:20px;line-height:24px;text-transform:uppercase;font-weight:normal; }
h3{ font-size:18px;text-transform:uppercase;font-weight:normal; }
h4{ font-size:16px; }
h5{ font-size:14px; }
h6{ font-size:12px; }
ol{ list-style:decimal; }
ul{ list-style:square; }
li{ margin-left:30px; }
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{ margin-bottom:16px; }

/* clearing */
html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear{ background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;
  overflow:hidden;visibility:hidden;width:0;height:0; }
.clearfix:after{ clear:both;content:'.';display:block;visibility:hidden;height:0; }
.clearfix{ display:inline-block; }
* html .clearfix{ height:1%; }
.clearfix{ display:block}

/* Colors */
h2, h3 { color:#cd944a; }
#menu { background:#000; }
#menu ul li a { color: #fff; }
#menu ul li li a { color: #b2b2b2}
#menu ul li a:hover,
#menu ul li a.active { color: #cd944a; }
#menu ul li li a:hover { color:#cd944a;background:transparent url(../gfx/menu-arrow.gif) 0 60% no-repeat; }

/* Layout grid */
#container { width:912px;margin:0 auto 0 0;}
#header { height:36px; }
#contentwrapper {  }
#menu { float:left;width:180px; }
#maincontent { float:right;width:720px;background:#fff;  }
#topcontent { height: 289px; }
.textcontent { float:left;margin-top: 20px;margin-left:37px;width:424px; }
.imagecontent { float:right;width:228px; margin:20px 8px 0 0; }

/* Agenda layout */
body#agenda .textcontent { float:right;width:683px; margin:20px 0px 0px 0px; }
body#nieuws .textcontent { float:right;width:683px; margin:20px 0px 0px 0px; }

/* Home layout */
#home #container { width:992px; background:#000; }
#home #maincontent { width:800px; }

/* Design */

/* Header */
#header { position:relative; background-color: #000; }
#logo { position:absolute;left:190px;top:0;width:200px;height:36px;margin:0;padding:0;background:transparent url(../gfx/logo.gif) 0 0 no-repeat;text-indent:-9999px; }
#logo a { display:block;width:200px;height:36px; }
#extranav { position:absolute;right:10px;bottom:5px;margin:0;text-align:right;color:#fff;text-transform:uppercase; }
#extranav a { font-size:9px;line-height:18px;padding:3px 4px;color:#fff;text-decoration:none; }
#extranav a img { position:relative;bottom:-3px; }

/* Menu */
#menu { font-size:12px;line-height:16px; }
#menu ul { margin-left: 12px;border-bottom:1px solid #fff; }
#menu ul li { margin:0;padding:2px 0;border-top:1px solid #fff;}
#menu ul li a { display:block;padding:6px 0;text-transform:uppercase;text-decoration:none;font-weight:normal; }
#menu ul li ul { margin-left: 0;border-bottom:none; }
#menu ul li ul li { margin:0;padding:1px 0;border-width:0; }
#menu ul li ul li a { text-transform:none;padding:0 0 0 12px; }
#menu ul li ul li ul { margin-bottom: 0px; }
#menu ul li ul li ul li a { text-transform:none;margin:0 0 0 12px; }


/* Topcontent */
#topcontent img { margin:0;padding:0; }
#photonav { margin:-4px 0 0;padding:0 10px 0 0;text-align:right; }
#photonav a { font-size:9px;line-height:12px;color:#000;text-transform:uppercase;text-decoration:none;margin:0;padding:0 3px; }
#photonav a.previous { background:transparent url(../gfx/arrow-left.gif) 0 40% no-repeat;padding-left:12px; }
#photonav a.next { background:transparent url(../gfx/arrow-right.gif) 100% 40% no-repeat;padding-right:12px; }

/* Text content */
/*
#maincontent li {list-style-type:decimal;background:transparent url(../gfx/bg-list-item.gif) 0 3px no-repeat;padding-left:12px;margin: 0px 0 0 2em;}
*/
#maincontent ol li {list-style-type:decimal; margin: 0px 0 0 3em;}
#maincontent ul li {list-style-type:disc; margin: 0px 0 0 3em;}

/* Home page */
#home #maincontent { height:576px;background:transparent url() 0 0 no-repeat;position:relative; }
#home .textcontent_home { height:152px;width:161px;background-color:#fff;float:left; padding: 12px; margin: 12px 0px 0px 12px; overflow: auto; }
.textcontent_home p.meta { color:#888;text-transform:uppercase;position:absolute;bottom:10px;width:380px; }
.textcontent_home p.meta .morelink { color:#888;position:absolute;right:0; }
/*#home #footer { clear:both;height:64px;background:transparent url(../gfx/bg-footer-home.gif) 0 0 no-repeat; }*/
#home #footer { clear:both;height:64px;}
/* Agenda page */
.agendaitem { clear:both;float:left;width:100%; }
.agendaitem .content { margin-top: 16px; float:left;width:430px;background:transparent url(../gfx/bg-hd-dot.gif) 0 3px repeat-x; }
.agendaitem img { float:right;margin-top:25px; }
.agendaitem .date { margin-bottom:0; }
.agendaitem .date span { padding-right:5px;background:#fff; }
.agendaitem ul { list-style:none; }
.agendaitem ul li { margin-left:0; }
.agendaitem ul li strong { text-transform:uppercase;font-size:11px; }
.agendaitem h2, .agendaitem h3 { margin-bottom:0; }

/* Agenda page */
.nieuwsitem { clear:both;float:left;width:100%; }
.nieuwsitem .content { float:left;width:430px;background:transparent url(../gfx/bg-hd-dot.gif) 0 3px repeat-x; }
.nieuwsitem img { float:right;margin-top:10px; }
.nieuwsitem .date { margin-bottom:0; }
.nieuwsitem .date span { padding-right:5px;background:#fff; }
.nieuwsitem h2, .nieuwsitem h3 { margin-bottom:0; }

/* Image content */
.imagecontent img { margin: 2px 0 20px; }

/* Offerte */
#offerteformulier h3, #informatiepakketformulier h3{background-color:#cd944a;color:#fff;padding-left:5px;}
#offerteformulier div, #informatiepakketformulier div{clear: left;margin: 0;padding: 5px 0 8px 0;padding-left: 185px;height:1%;}
#offerteformulier label, #informatiepakketformulier label{float: left;margin-left: -185px;width: 180px;}
#offerteformulier input{}
#offerteformulier input[type="text"], #informatiepakketformulier input[type="text"]{width: 180px;}
#offerteformulier textarea, #informatiepakketformulier textarea{width: 250px;height: 150px;}
#offerteformulier .frmButton, #informatiepakketformulier .frmButton{border: 1px solid #cd944a; background-color:#fff;margin-top:16px;}
#offerteformulier .buttonbar, #informatiepakketformulier .buttonBar{margin-left:-185px; mar\gin-left: -92px;}

.hidden {display: none;}

.visible {display: block;}

.inline {display:inline;}

#headerimage	{padding:0; margin:0;}

.frmButton-disable	{
  border: 1px solid #ccc;
  color: #ccc;
}
.lees-meer	{margin-top: -1em; padding-top:1px;}

/******** styles for 360 vr image *****/
.itemblok {
  width:600px;
  padding: 20px 0;
  min-height:160px;
}

.thumbText	{
  width:480px;
  padding:0 20px 0 0px;
  text-align:left;
}

.plaatje	{
  float:left;
  width:120px;
  height:120px;
  padding:0 2em 1em 0;
}

.linksThreeSixty {clear:both;}

.Bold_golden
{
  font-weight: bold;
  color:#cd944a;
}

.zwart {color:#000;}

h1, h2, h3, h4, h5, h6 {color:#cd944a;}
/*
#textcontent1	{
background:transparent !important;
}


#textcontent1 h2	{
color:#FFF;
text-transform:uppercase;
}
*/

/* SJM: align extra blocks to the left side */
#div_evenementtype_type_extra,
#div_theekoffie_extra,
#div_remarks_extra { margin-left: -185px !important; }

#textcontent ol { margin-left: 2em }

.red { color: #f00 }

.date_detail { margin-top: 15px }