/*
TABLE OF CONTENTS

  HTML Elements
  Page Structure
  Navigation
  Headings
  Content Area
  Forms
  Clear
  Footer

  60afef = 7di blauw
  e03522 = 7di rood
  333333 = donker grijs (achtergrond)

/* ---------- @ HTML Elements -----------*/

* {	margin: 0; padding: 0;} 
body, html { background: #f2f2f2; color:#666; }
body, form { font: 12px/19px Verdana,Geneva,sans-serif; }


/* ---------- @ BASE -----------*/

h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:1.8em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:1.5em;margin-bottom:0.3em;}
h3 {font-size:1.3em;line-height:1;margin-bottom:0.2em;}
h4 {font-size:1.1em;line-height:1.1;margin-bottom:0.1em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:0em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {font-size: 1em; margin:0 0 1em;}
p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}

/* ---------- @ AREAS -----------*/

#logo {
	padding: 5px 0;
}

#wrap_header, #wrap_footer {
	background: #000000;
	color: #fff;
}

#wrap_content a{
	color: #fffff; 
	text-decoration: none; 
}

#wrap_content {
	color: #333333;
	padding: 30px 0;
	overflow: visible;
}

#wrap_content .container {
	background: white;
	padding: 10px 0;
	border: 1px solid #cecece;
}

/* ---------- @ TOPNAV -----------*/

#topnav a:link, #topnav a:hover, #topnav a:active, #topnav a:visited {
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}

/* ---------- @ PAGINATION -----------*/

.nav-prev a, .nav-next a {
	font-weight: bold;
	font-size: 14px;
	color: #60afef;
}

/* ---------- @ CONTENT - INTRO -----------*/

.intro {
	border: 1px solid #cecece;
	background: #f2f2f2;
	margin: 0 0 10px 10px;
	padding: 10px;
}

/* ---------- @ CONTENT - ARTICLE -----------*/

.article {
	padding: 10px 0px 0px 10px;
}

.article h1 {
	font: bold 16px/19px Tahoma, Verdana, Helvetica, Arial;
}

.article h2 {
	height: 20px;
	display: block;
	padding: 0 0 4px 0;	
	margin: 0px;
	font: bold 18px Tahoma, Verdana, Helvetica, Arial;
	color: #000;
}

.article h2 a {
	color: #000;
}

.article h3 {
	padding: 4px 0 4px 0;	
	font: bold 14px/19px Tahoma, Verdana, Helvetica, Arial;
	color: #000;
}

.article h4 {
	padding: 4px 0 4px 0;	
	font: bold 12px/19px Tahoma, Verdana, Helvetica, Arial;
	color: #000;
}

.imgright {
	float: right;
	padding: 5px;
}

.imgleft {
	float: left;
	padding: 5px;
}

img.border {
	border: 1px solid #cecece;
	margin: 5px;
}

/* head */

.article {
	overflow: hidden;
}

.article .article-header, .article .project-header {
	background: url('http://www.7di.nl/themes/7di/article_red.png') no-repeat top left;
	height: 50px;
	color: #ffffff;
}

.article .article-header.sub, .article .project-header.sub {
	background: url('http://www.7di.nl/themes/7di/article_red_sub.png') no-repeat top left;
}

.article .article-header h2, .article .project-header h2 {
	font: bold 16px/30px "Verdana", sans-serif;
	color: #ffffff;
	margin: 0px;
	padding-left: 40px;
}

.article .article-header h2 a, .article .project-header h2 a {
	color: #ffffff;
}

.article .project-header {
	height: 60px;
}

.article .project-header .links {
	color: #fff;
	padding-left: 40px;
	padding-top: 5px;
	padding-bottom: 10px;
}

.article .project-header .links a {
	font-weight: normal;
	color: #ffffff;
	font-size: 12px;
}

/* body */

.article .article-body  {
	padding: 0 0 16px 0;
}

.article .article-body p {
	margin: 0 0 10px 0;
}

.article .article-body ul {
	margin: 0 0 10px 0;
	padding: 0 0 0 15px;
}

.article .article-body li {
	display: list-item;
	font-size: 12px/19px;
	color: #323232;
	list-style-type: disc;
}

table th {
	font-weight: bold;
}

/* footer */

.article .article-nav {
	height: 21px;
	position: relative;
	border-top: 1px #f2f2f2 solid;
	border-bottom: 1px #f2f2f2 solid;
	padding: 0 0 5px 0;
	margin: 0 0 0 0;
}

.article .article-nav p {
	display: inline;
	font: bold 11px Tahoma, Verdana, Helvetica, Arial;
}

.article .article-nav p.lees-verder,
.article .article-nav p.reacties,
.article .article-nav p.auteur,
.article .article-nav p.datum,
.article p.breadcrumb {
	float: left;
	position: relative;
	top: 6px;
	left: 2px;
}

.article .article-nav p.lees-verder,
.article .article-nav p.auteur,
.article .article-nav p.reacties {
	background: url('http://www.7di.nl/themes/7di/divider.gif') no-repeat center right;
	padding-right: 10px;
}

.article .article-nav p.lees-verder a {
	color: #e03522;
}

.article .article-nav p.auteur a {
	color: #60afef;
}

.article .article-nav p.reacties,
.article .article-nav p.auteur,
.article .article-nav p.datum  {
	padding-left: 10px
}

.article .article-nav p.reacties a,
.article .article-nav p.auteur,
.article .article-nav p.datum {
	color: #999;
}

.article .socialmedia-buttons {
	position: absolute;
	top: 5px;
	right: 1px;
	color: #999;
}

.article .socialmedia-buttons span {
	float: right;
	padding-right: 140px;
}

ul.socialshare {
	margin: 0;
	padding: 0;
	float: right;
	width: auto;
	list-style: none;
	font-size: 1.1em;
}
ul.socialshare li {
	float: right;
	margin: 0; 
	padding: 5px 0 0 7px;
	position: relative;
}
ul.socialshare li a {
	float: left; 
	font-size: 1.4em;
	height: 20px;
	color: #ffffff;
	text-decoration: none;
}

.article .socialmedia-buttons img {
	padding-left: 11px;
	margin-left: 10px;
	background: url('http://www.7di.nl/themes/7di/divider.gif') no-repeat left 3px;
}

.article .socialmedia-buttons a {
	position: relative;
	top: 3px;
}	

.article .article-steden {
	height: 21px;
	position: relative;
	border-bottom: 1px #f2f2f2 solid;
	padding: 0 0 5px 0;
	margin: 0 0 0 0;
	
	font: bold 11px Tahoma, Verdana, Helvetica, Arial;
	color: #60afef;
}

.article .article-relations {
	height: 21px;
	position: relative;
	border-bottom: 1px #f2f2f2 solid;
	padding: 0 0 5px 0;
	margin: 0 0 14px 0;
	
	font: bold 11px Tahoma, Verdana, Helvetica, Arial;
	color: #60afef;
}


.article .article-meta p {
	display: inline;
}

.article .article-meta p,
.article .article-steden p,
.article .article-relations p {
	float: left;
	position: relative;
	top: 6px;
	left: 2px;
	padding-right: 2px;
	color: #999;
}

.article .article-relations p.thema {
	background: url('http://www.7di.nl/themes/7di/divider.gif') no-repeat center right;
	padding-right: 10px;
}

.article .article-relations p.initiatief {
	padding-left: 10px;
}

.article .article-steden p a,
.article .article-relations p a {
	text-decoration: none;
	color: #60afef;
}

.article .article-relations p {
	border-right: 1px #f2f2f2 solid;
}

.article .article-relations p {
	display: inline;
}

/* PAGINATION */

.pagination {
	padding: 10px 0px 0px 10px;
}

table.wensenlijst th {
	font-weight: bold;
}

table.wensenlijst td {
	padding: 2px 5px 2px 0px;
}

/* ---------- @ RIGHT BLOCK -----------*/

.block {
}

.block-heading.red {
	background: url('http://www.7di.nl/themes/7di/block_red.png') no-repeat center left;
	height: 35px;
	color: #ffffff;
}

.block-heading.blue {
	background: url('http://www.7di.nl/themes/7di/block_blue.png') no-repeat center left;
	height: 35px;
	color: #ffffff;
}

.block-heading h2 {
	font: bold 18px/35px "Verdana", sans-serif;
	color: #ffffff;
	margin: 0px;
	padding-left: 60px;
}

.block-content {
	padding: 5px 10px 10px 20px;
}

.block-content ul {
	margin: 0 0 10px 0;
	padding: 0 0 0 20px;
}

.block-content li {
	display: list-item;
	list-style-type: disc;
}

/* twitter */


div.twitter p.small {
	padding: 0px;
	font-size: 0.9em;
	border-bottom: 1px solid #cecece;
}

div.twitter img {
	float: left;
	padding: 5px 5px 0 0;
}

div.twitter .tweet {
	border-bottom: 1px solid #cecece;
	padding: 3px 0;
	min-height: 58px;
}

div.twitter a {
	color: #e03522;
	font-weight: bold;
}

div.twitter span.date {
	color: #60afef;
	font-weight: bold;
}

/* themas */
ul.themalijst li span {
	color: #60afef;
	float: right;
}

/* ---------- @ CONTENT - SUB_ITEMS -----------*/

.sub_items {
	padding: 10px 0px 0px 10px;
}

.sub_heading {
	background: url('http://www.7di.nl/themes/7di/article_blue.png?12') no-repeat center left;
	height: 50px;
	color: #ffffff;
}

.sub_heading h2 {
	font: bold 16px/30px "Verdana", sans-serif;
	color: #ffffff;
	margin: 0px;
	padding-left: 40px;
}

.sub_items .article {
	padding: 0;
	margin: 0;
}

.sub_items .article .article-header {
	background: none;
	height: auto;
	color: #000;
}

.sub_items .article .article-header h2 {
	font: bold 20px/35px "Verdana", sans-serif;
	color: #000;
	margin: 0px;
	padding: 0 0 15px 0;
}

.sub_items .article .article-header h2 a {
	color: #000;
}

/* ---------- @ CONTENT - REACTIES -----------*/

#comments { width: 642px;position:relative;margin:5px 0 0;padding:5px 0 0 0; }
#comments .comment{margin:0;width:100%;list-style-type:none;}

#comments .comment-container  { position:relative; margin: 0 0 20px 0; }
#comments .comment-container .comment-content  { float: left; width: 459px; padding: 10px; }
#comments .comment-container .avatar  { float:left; margin: 0 10px 10px 0; }
#comments .comment-head .name  { margin: 0; font-weight: bold; font-size: 15px; }
#comments .comment-head .date, #comments .comment-head .edit, #comments .comment-head .perma { font-size: 11px; }
#comments .comment-entry p  { margin: 0 0 10px 0;}
#comments .reply {padding-top:10px;}
#comments .reply a { font: 11px/18px Arial, Helvetica, sans-serif; background: #eee; border-color:#888; color:#555 !important; text-shadow: none; }
#comments .reply a:hover { background-color: #e6e6e6;}

/********** contact form **********/

#contactform { margin:0; padding:0px 0;}
#contactform * {color:#7a7a7a;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both;}
#contactform li.buttons { margin:5px 0 5px 0; float:none; clear:both;}
#contactform label { float:left; margin:0; width:150px; padding:5px 0; font:normal 14px Arial, Helvetica, sans-serif; color:#343434; text-align: right;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { border:1px solid #dfdfdf; margin:5px 0; padding:5px 2px; height:15px; background:#f8f8f8; float:left;}
#contactform textarea { border:1px solid #dfdfdf; margin:10px 0; padding:2px; background:#f8f8f8; height:150px; float:left;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 1px; border:0; color:#FFF; float:left;}
#contactform li.screenReader {visibility: hidden;}
#contact-page li small {clear: both; float: left; padding-right: 20px; width: 100px; font-size: 11px; font-style: italic; font-weight: normal;}

/********** saef form **********/

#saefform { margin:0; padding:0px 0;}
#saefform * {color:#7a7a7a;}
#saefform ol { margin:0; padding:0; list-style:none;}
#saefform li { margin:0; padding:0; background:none; border:none; display:block; clear:both;}
#saefform li.buttons { margin:5px 0 5px 0; float:none; clear:both;}
#saefform label { float:left; margin:0; width:245px; padding:5px 5px; font:normal 14px Arial, Helvetica, sans-serif; color:#343434; text-align: right;}
#saefform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#saefform input.text { border:1px solid #dfdfdf; margin:5px 0; padding:5px 2px; height:15px; background:#f8f8f8; float:left;}
#saefform textarea { border:1px solid #dfdfdf; margin:10px 0; padding:2px; background:#f8f8f8; height:150px; float:left; margin-left: 250px; width: 400px;}
#saefform li.buttons input { padding:10px; margin:0 0 0 1px; border:0; color:#000; font-size: 14px; float:left;}
#saefform li.screenReader {visibility: hidden;}
#saefform li small {clear: both; float: left; padding-right: 20px; width: 250px; font-size: 11px; font-style: italic; font-weight: normal;}
#saefform div.playa_wrap { }
#saefform div.wygwam_wrap { padding-left: 250px;}


small a.verwijderen {
	color: red;
	font-size: 10px;
	font-weight: bold;
}

/* boxes */

hr {
	border-color: red;
}

/* ---------- @ GENERAL - DEFINITION LIST -----------*/
dl {
    padding: 0.5em;
}

dt {
	float: left;
	clear: left;
	width: 75px;
	text-align: right;
	font-weight: bold;
}
  
dt:after {
	content: ":";
}

dd {
	margin: 0 0 0 80px;
	padding: 0 0 0.5em 0;
}


/* ---------- @ DEVELOPMENT -----------*/

.red {
background: red;
}

.green {
background: green;
}

.yellow {
background: yellow;
}