/* ========================== */
/* = Styles for Entopic.com = */
/* ========================== */

/* ================== */
/* = Main structure = */
/* ================== */

body{
  font-size: 62.5%;
  font-family: arial, helvetica, verdana, sans-serif;
  color: #333;
  background: #dbdbdb;  
}

#wrapper{
  width: 965px;
  margin: 45px auto 45px auto;
  position: relative;
}

#content{
  min-height: 512px;
  padding-top: 153px;
  padding-bottom: 20px;
  background: url(../images/backgrounds/content.gif) #fff 722px 0 repeat-y;
}

#content.newsarchive{
  background: url(../images/backgrounds/content-news.gif) #fff 668px 0 repeat-y;  
}

.has-visual #content{
  min-height: 309px;  
  padding-top: 291px;
}

#header{
  top: 0;
  position: absolute;
  width: 100%;
}

#navigation{
  background: #fff;
  padding: 24px 40px 14px 40px;
  border-bottom: 3px solid #dbdbdb;
}

#visual{
  height: 60px;
  background: #fff;
  border-top: 5px solid;
  width: 722px;
}

#visual img{
  float: right;
  margin: 6px 10px 0 0;
}

.has-visual #visual{
  width: 100%;
  height: 200px;
  border-bottom: 3px solid #dbdbdb !important;
  border-top: 0px none;
}

.has-visual #visual img, #home #visual img{
  padding: 0;
  margin: 0;
}

#footer{
  margin-top: 0.3em;
}

#footer,
#footer a{
  color: #6c6c6c;
}

/* =========== */
/* = Columns = */
/* =========== */

.has-visual #contentcolumn,
.has-visual #navbar{
  margin-top: 37px;
}

.has-visual #sidebar{
  margin-top: 23px;
}

#navbar{
  float: left;
  width: 205px;
  margin-right: 25px;
  padding-top: 5px;
}

#contentcolumn{
  float: right;
  width: 477px;
  margin-right: 258px;  
  margin-left: -735px;
}

#sidebar{
  float: right;
  width: 222px;
  padding-left: 3px;
  margin: 0 8px 0 10px;
}

/* ============== */
/* = Navigation = */
/* ============== */

#navigation img{
  float: left;
}

#navigation ul{
  margin-left: 35px;
  float: left;
  font-size: 1.6em;
  line-height: 47px;
  vertical-align: middle;  
}

#navigation ul li{
  float: left;
  margin-left: 40px;
}

#navigation a{
  color: #000;
}

#navigation a:hover, 
#navigation a.active{
  color: #2c509f;
}

/* ======== */
/* = Home = */
/* ======== */

#home #content{
  padding-top: 88px;
  padding-bottom: 0;
  min-height: 0;
}

#home #contentcolumn{
  float: left;
  margin: 0;
  margin-top: 203px;
  width: 722px;
}

#home #sidebar{
  margin-top: 18px;
}

#home #visual{
  height: 200px;
  border: none;
  top: 88px;
  position: absolute;
  border-bottom:3px solid #DBDBDB;
}

#home .row{
  background: url(../images/backgrounds/home-row-a.gif) 0 0 repeat;  
  border-bottom: 1px solid #dbdbdb;
}

#home .row div.item{  
  color: #666666;
  width: 206px;
  display: inline;
  float: left;
  padding: 18px 17px 34px 16px;
  cursor: pointer;
}

#home .row div.item a{
  color: #666666;
}

#home .row div.last{
  padding-right: 16px;
}

#home div.item h2{
  width: 158px;  
  padding-left: 50px;
  min-height: 32px;
  margin-bottom: 10px;
}

#home div.item a:hover{
  text-decoration: none;
}

#home div.item h2.webredactie{
  background: url(../images/icons/webredactie_gray.gif) 0 0 no-repeat;
}

#home div.item h2.migratie{
  background: url(../images/icons/migratie_gray.gif) 0 0 no-repeat;
}

#home div.item h2.op_locatie{
  background: url(../images/icons/op_locatie_gray.gif) 0 0 no-repeat;
}

#home div.item h2.design{
  background: url(../images/icons/design_gray.gif) 0 0 no-repeat;
}

#home div.item h2.email{
  background: url(../images/icons/email_gray.gif) 0 0 no-repeat;
}

#home div.item h2.intranet{
  background: url(../images/icons/intranet_gray.gif) 0 0 no-repeat;
}

#home div.item:hover h2.webredactie,
#home div.hover h2.webredactie{
  background-image: url(../images/icons/webredactie.gif);
}

#home div.item:hover h2.migratie,
#home div.hover h2.migratie{
  background-image: url(../images/icons/migratie.gif);
}

#home div.item:hover h2.op_locatie,
#home div.hover h2.op_locatie{
  background-image: url(../images/icons/op_locatie.gif);
}

#home div.item:hover h2.design,
#home div.hover h2.design{
  background-image: url(../images/icons/design.gif);
}

#home div.item:hover h2.email,
#home div.hover h2.email{
  background-image: url(../images/icons/email.gif);
}

#home div.item:hover h2.intranet,
#home div.hover h2.intranet{
  background-image: url(../images/icons/intranet.gif);
}

/* ================= */
/* = Subnavigation = */
/* ================= */

ul.subnav{
  font-size: 1.3em;
  text-align: right;
}

ul.subnav li{
  margin-bottom: 6px;
}

ul.subnav li li{
  margin-top: 5px;  
  margin-bottom: 0;
}

ul.subnav li ul{
  margin-bottom: 35px;
}

ul.subnav li.active li a,
ul.subnav a{
  color: #333;
}

ul.subnav li.active li a:hover,
ul.subnav a:hover,
ul.subnav li.active li.active a,
ul.subnav li.active a{
  color: #2c509f;
}

/* ======== */
/* = Info = */
/* ======== */

dl.attention,
dl.info{
  margin-bottom: 20px;
}

dl.info dt{
  font-weight: bold;
  padding-bottom: 2px;
  margin-bottom: 0.2em;
  border-bottom: 2px dotted #000;  
}

dl.info.news{
  border-bottom: 2px dotted #000;
}

dl.info.news dt{
  color: #333 !important;
  border-color: #000 !important;
}

#home dl.info dt{
  border-bottom: 0 none;
}

/* ============= */
/* = Attention = */
/* ============= */

dl.attention{
  background: url(../images/backgrounds/attention.png) #000 0 0 no-repeat;  
}

dl.attention dt{
  color: #fff;
  font-weight: bold;
  padding-bottom: 2px;
  margin: 0 10px 10px 10px;
  padding-top: 10px;
  border-bottom: 2px dotted #fff;  
  text-transform: uppercase;
}

dl.attention dd{
  padding: 0 10px 10px 10px;
  color: #fff;
  background: url(../images/backgrounds/attention.png) -477px 100% no-repeat;    
}

/* ============= */
/* = links = */
/* ============= */

ul.links{
  margin-bottom: 1em;
}

ul.links li{
  margin-bottom: 8px;
}

ul.links li a{
  color: #333;
  display: block;
  padding-left: 9px;
  background: url(../images/backgrounds/links-a.gif) 0 4px no-repeat;
}

ul.links li a:hover{
  background-image: url(../images/backgrounds/links-a-hover.gif);
  color: #094fa3;
  text-decoration: none;
}

/* ============ */
/* = Tagcloud = */
/* ============ */

ul.tagcloud{
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 2px dotted #bcbcbc;
}

ul.tagcloud li{
  display: inline;
  padding-right: 5px;
}

ul.tagcloud li span{
  left:-999px;
  position:absolute;
  width:990px;
}

ul.tagcloud a{
  color: #999;
}

ul.tagcloud a:hover{
  text-decoration: none;
  background-color: #e6edf6
}

li.popularity-1 .tag{ font-size: 1.1em; }
li.popularity-2 .tag{ font-size: 1.2em; }
li.popularity-3 .tag{ font-size: 1.4em; }
li.popularity-4 .tag{ font-size: 1.6em; }
li.popularity-5 .tag{ font-size: 1.8em; }

/* ======== */
/* = News = */
/* ======== */

ul.news{
  margin-top: 1em;
}

ul.news li{
  padding-top: 7px;
  margin-bottom: 30px;
}

ul.news li span.date{
  font-size: 1.1em;
}

ul.news img{
  margin-left: -86px;
  margin-top: -7px;
  float: left;
}

div.news{
  padding-left: 86px;
}

.news .archive{
  padding: 24px 0 0 86px;
  margin-left: -86px;
  border-top: 2px dotted #ccc;
}

.archive li{
  font-weight: bold;
  clear: both;
}

.archive li a{
  color: #333;
  display: block;
  position: relative;
  margin-left: 69px;
  cursor: pointer;
}

.archive li a:hover{
  color: #094fa3;
  text-decoration: none;
}

.archive li span.date{
  font-size: 0.846em;
  font-weight: normal;  
  margin-left: -70px;
  position: absolute;
  top: 0;
}

.archive{
  margin-right: -100%;
  width: 418px;
  float: left;
}

.news .archive{
  margin-right: 0;
  float: none;
  width: auto;
}
.news li h2 a{
  color: #333;
}
.news li h2 a:hover{
  color: #094fa3;
  text-decoration: none;
}
.years{
  float: right;
  width: 52px;
  text-align: right;
}

.years a{
  color: #333;
}

.years .active a{
  color: #094fa3;
}
.years a:hover{
  color: #094fa3;
  text-decoration: none;
}
/* =========== */
/* = Sitemap = */
/* =========== */

ul.sitemap{
  float: left;
  width: 228px;
  margin-right: 18px;
}

ul.sitemap.right{
  margin-right: 0;
}

ul.sitemap a{
  display: block;
  color: #333;
  margin-bottom: 4px;
}

ul.sitemap a:hover{
  color: #2c509f;
}

ul.sitemap li{
  border-bottom: 2px dotted #ccc;
  padding-bottom: 1em;
  margin-bottom: 1em;
}

ul.sitemap li.last{
  border-bottom: 0 none;
}

ul.sitemap li li{
  border-bottom: 0 none;
  padding-bottom: 0;
  margin-bottom: 0;
  padding-left: 10px;
}

ul.sitemap li li li a{
  padding-left: 9px;
  background: url(../images/backgrounds/links-a.gif) 0 4px no-repeat;
}

ul.sitemap li li li a:hover{
  background-image: url(../images/backgrounds/links-a-hover.gif);
}
/* =========== */
/* = Clients = */
/* =========== */

ul.clients{
  margin-top: 3px;
}

ul.clients li{
  float: left;
  padding: 5px;
  padding-bottom: 4px;  
  padding-right: 4px;
}
ul.clients li a,
ul.clients li img{
  width: 70px;
  height: 70px;
  float: left;
}

ul.clients{
  background: url(../images/backgrounds/clients-li.gif) 0 0 repeat;
}

img.client{
  border: 1px solid #ddd;
}


/* ==================== */
/* = Collapsing block = */
/* ==================== */

div.clients h2,
div.collapsing h2{
  line-height: 24px;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
div.clients h2{
  cursor: auto;
}
div.clients .window{
  margin-bottom: 2em;
}
div.collapsing h2 span{
  padding-right: 15px;
  background: url(../images/backgrounds/collapsing-h2-open.gif) 100% 50% no-repeat;
}

div.collapsing h2.closed span{
  background: url(../images/backgrounds/collapsing-h2-closed.gif) 100% 50% no-repeat;  
}

div.clients div.window
div.collapsing div.window{
  padding-bottom: 1em;
  border-bottom: 1px solid #ddd;
}

div.clients div.window.last,
div.collapsing div.window.last{
  border-bottom: 0 none;
}

div.collapsing div.window.closed{
  display: none;
}

/* ========= */
/* = Forms = */
/* ========= */

form{
  margin-top: 1em;
}

form table.fields{
  width: 100%;
  border-collapse: collapse;
}

form table.fields th{
  width: 25%;
  padding-right: 1em;
}

form table.fields td,
form table.fields th{
  text-align: left;
  vertical-align: top;
  padding-bottom: 0.5em;
  font-weight: normal;
}

textarea.text,
input.text{
  border: none;
  padding: 1px 5px;
  border-bottom: 1px solid #f5f5f5;
  border-right: 1px solid #efefef;
  background: url(../images/backgrounds/input-text.gif) 0 0 no-repeat;
}

textarea.text{
  padding: 3px 5px;
  height: 50px;
  font-family: arial,helvetica,verdana,sans-serif;
}

textarea.large{
  height: 150px;
}

textarea.low{
  height: 75px;
}
select,
input.text,
textarea.text{
  width: 90%;  
}

select.medium,
input.medium{
  width: 45%;
}

.checkboxes.vertical label{
  display: block;
}

form p.error{
  border: 2px solid #bf1e25;
  color: #bf1e25;
  padding: 10px;
  margin-bottom: 1.5em;
}

div.error,
label.invalid{
  color: #bf1e25;
}

div.submit{
  text-align: right;
  margin-right: 28px;
}

div.submit button{
  float: right;
}

div.inputarea{
  margin-bottom: 5px;
}
/* =========== */
/* = Buttons = */
/* =========== */

a.button,
button{
  font-size: 1.2em;
  background: url(../images/backgrounds/button-small.gif) 0 0 no-repeat;
  color: #000;
  float: left;
}

.text a.button,
form button{
  font-size: 0.92em;
  text-decoration: none;
}

a.button span,
button span{
  float: left;
  padding: 0 13px 0 11px;  
  line-height: 20px;
  vertical-align: middle;
  background: url(../images/backgrounds/button-small.gif) 100% -30px no-repeat;  
}

/* ========== */
/* = Button = */
/* ========== */

a.button_yellow {
  margin: 0;
  color: #333;
  cursor: pointer;
  display: inline-block;  
  font-weight: bold;
  padding-left: 20px;
  background: url(../images/backgrounds/button-yellow.gif) 0 0 no-repeat;
}

a.button_yellow span{
  float: left;
  margin: 0;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  padding: 0 20px 0 0;
  background: url(../images/backgrounds/button-yellow.gif) 100% 0 no-repeat;  
}

a.button_yellow:hover{
  background-position: 0 -40px;
  text-decoration: none;
}

a.button_yellow:hover span{
  background-position: 100% -40px;  
}
/* ========= */
/* = Media = */
/* ========= */

#content div.media{
  background: #fff;
}

div.left div.media,
div.media.left{
  float: left;
  padding: 0 10px 10px 0;
}

div.right div.media,
div.media.right{
  float: right;
  padding: 0 0 10px 10px;
}

div.media.center{
  margin: 0 auto;
  margin-bottom: 1em;
}

div.media p.caption{
  font-style: italic;
  color: #999;
}

#sidebar div.media{
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ================== */
/* = Text elementen = */
/* ================== */

div.text ul,
div.text ol,
div.text p{
  margin-bottom: 1em;
}

div.text ul li{
  background: url(../images/backgrounds/links-a.gif) no-repeat scroll 0 4px;
  padding-left: 12px;
}

div.text ol{
  overflow: auto;
  padding-left: 2em;  
  list-style: decimal outside;
}

img.client,
div.text img.left{
  float: left;
  margin: 0 10px 10px 0;
}

div.text img.right{
  float: right;
  margin: 0 0 10px 10px;
}

div.text img.block{
  border: 0 none;
  display: block;
}

div.text table tr td {
  vertical-align: top;
}

.text table tr th{
  text-align: left;
}

/* ========= */
/* = Color = */
/* ========= */

.has-visual .green  #visual, .green  dl.attention{ background-color: #82b62c; }
.has-visual .orange #visual, .orange dl.attention{ background-color: #e98019; }
.has-visual .yellow #visual, .yellow dl.attention{ background-color: #efca00; }
.has-visual .purple #visual, .purple dl.attention{ background-color: #822b8a; }
.has-visual .red    #visual, .red    dl.attention{ background-color: #bf1e25; }
.has-visual .blue   #visual, .blue   dl.attention{ background-color: #007dc6; }

.green  #visual{ border-color: #82b62c; }
.orange #visual{ border-color: #e98019; }
.yellow #visual{ border-color: #efca00; }
.purple #visual{ border-color: #822b8a; }
.red    #visual{ border-color: #bf1e25; }
.blue   #visual{ border-color: #007dc6; }

.green  h1,
.green .info dt,
#home div.item:hover h2.intranet a,
#home div.hover h2.intranet a,
h2.green { 
  color: #82b62c; 
}

.orange h1,
.orange .info dt,
#home div.item:hover h2.email a,
#home div.hover h2.email a,
h2.orange{ 
  color: #dd7917; 
}

.yellow h1,
.yellow .info dt,
#home div.item:hover h2.op_locatie a,
#home div.hover h2.op_locatie a,
h2.yellow{ 
  color: #c1a300; 
}

.purple h1,
.purple .info dt,
#home div.item:hover h2.migratie a,
#home div.hover h2.migratie a,
h2.purple{
  color: #822b8a; 
}

.red    h1,
.red .info dt,
#home div.item:hover h2.design a,
#home div.hover h2.design a,
h2.red{
  color: #bf1e25; 
}

.blue   h1,
.blue .info dt,
#home div.item:hover h2.webredactie a,
#home div.hover h2.webredactie a,
h2.blue{ 
  color: #094fa3; 
}

.green  dl.info dt{ border-color: #82b62c; }
.orange dl.info dt{ border-color: #dd7917; }
.yellow dl.info dt{ border-color: #c1a300; }
.purple dl.info dt{ border-color: #822b8a; }
.red    dl.info dt{ border-color: #bf1e25; }
.blue   dl.info dt{ border-color: #094fa3; }

/* ===================== */
/* = Reusable elements = */
/* ===================== */

.heading{
  background: #fff;
  padding-bottom: 20px;
}

div.more{
  text-align: right;
}

.hidden{
  display: none;
}

/* ========= */
/* = Fonts = */
/* ========= */

p.meta{
  font-size: 1.1em;
}

h1{
  font-size: 1.8em;
}

h2{
  font-size: 1.35em;
}

.text,
.archive,
a.more,
div.more,
ul.sitemap,
form,
.years{
  line-height: 1.38;
  font-size: 1.3em;
}

form .text{
  font-size: 1em;
}

ul.links,
dl.info dt,
dl.attention dt{
  font-size: 1.2em;
}

.text p{
  margin-bottom: 1em;
}

#home .row div.item a.more,
a{
  color: #2069d5;
}

#home .row a.more:hover,
a:hover{
  text-decoration: underline;
}

#home .row h2{
  font-size: 1.6em;
  text-transform: uppercase;
}

#home .row p{
  font-size: 1.4em;
}

/* ==================== */
/* = Social bookmarks = */
/* ==================== */
#socialbookmarks{
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
  margin-top: -35px;
}

#postit{
/*  width: 237px;*/
  position: relative; 
  margin: -10px -8px 10px -4px;
}

/* ============ */
/* = Clearing = */
/* ============ */

dl.info dd:after,
.row:after,
ul.clients:after,
.submit:after,
ul.news li:after,
#content:after,
#navigation:after{
	content: ".";
	visibility: hidden;
	clear: both;
	display: block;
	height: 0px;
}