/*
Theme Name: Suburbia
Author URI: http://www.wpshower.com
Description: Suburbia is a clean and flexible WordPress grid-based magazine theme designed in a modern and minimalist style. This theme is also suitable for blogs and misc. projects. Suburbia supports all WordPress 3.0 features and gives you an extra flexibility in every single step you make.
Author: WPSHOWER & MOODYGUY
Version: 1.1
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Tags: grids, magazine, modern, stylish, minimalist
Copyright: (c) 2010 WPSHOWER
*/

/* RESET */

html,body,div,span,applet,object,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,strong,sub,sup,tt,var,b,u,i,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;text-align:left;}
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;}

body { background-color: #e0e0e0; font: normal 11px 'Droid Sans',Arial,Verdana,sans-serif; color: #333; padding-bottom: 30px; letter-spacing:1px}
p {margin: 12px 0; }
ol, ul {padding-left: 40px; margin: 11px 0;}
ol {list-style: decimal;}
ul {list-style: square;}

/* CLEAR */

.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* LINKS */

a { text-decoration: none; color: #660066; }
a:hover{ text-decoration: underline; color: #660066; }
h2 a { color: #000;  }

a.stiff { background-color: #ccffff; }
a img { border: 0; }

/* WRAPPER */

#wrapper { background: #fff; width: 980px; margin: 30px auto 0; }

/* HEADER */

.header { height: 50px; border-bottom: 5px solid #eee; padding: 15px; position: relative;}
.desc { width: 350px; height: 30px; position: absolute; top: 0; right: 0; padding: 5px 20px 0;float:right }
div.desc
  {
  margin-top:18px;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.desc img
  {
  display:inline;
  margin:3px;
  opacity:0.7;
  filter:alpha(opacity=70); /* For IE8 and earlier */
  }
div.desc a:hover img
  {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
  }
.space { width: 145px; height: 35px; border-right: 1px solid #FFF; position: absolute; top: 0; left: 0; padding: 5px 20px 0; }
.space p {margin: 0;}
.header .dem-home { margin: 0 0 0 1px; }
.header img { margin: 0 0 0 190px; }

/* FOOTER */

.footer { display: block; height: 30px; border-top: 30px solid #E0E0E0; margin-top: -1px; font: italic 10px 'Droid Sans',Arial,Verdana,sans-serif;; position: relative; padding-left:10px; color:#000; }
p.about { position: absolute; top: 0px; right: 20px;color:#000;font: italic 10px 'Droid Sans',Arial,Verdana,sans-serif; }
.footer a{ font-size: 10px; font: italic 10px 'Droid Sans',Arial,Verdana,sans-serif; }
input { width: 97px; margin: 0 auto 10px auto; padding: 10px; border: 1px solid #E0E0E0; }

/* HOMEPAGE LOGO TRICK */

.dem-home { margin: 0 0 0 1px; width: 155px; height: 155px;}
.logo-space { height: 55px; }

/* ARTICLE */

.post { border-right: 1px solid #e0e0e0; float: left; display: block; position: relative; }
.two h2, #single h2 { font: bold 14px 'Droid Sans',Arial,Verdana,sans-serif; color: #000;}
.post h4, .post h5, .post h6 { color: #000; border-top: 5px solid #e0e0e0; margin: 20px 0 0; padding: 10px 0 0 0; }

.two p, #single p { font: normal 11px 'Droid Sans',Arial,Verdana,sans-serif; }
.post .time { background-color: #e6e6e6; text-transform: uppercase; font-size: 9px; position: absolute; bottom: 20px; right: 20px; padding: 0 5px; }
.post .time a { color: #835504; }

/* ARTICLE ONE */

.one { width: 224px; height: 260px; overflow: hidden; padding: 10px; border-top: 1px solid #e0e0e0;}
.one h2 { font: bold 14px Helvetica,Verdana,Arial,sans-serif; color: #000;}
.one p { font: normal 11px Helvetica,Verdana,Arial,sans-serif; }
.one img { width: 220px; height:110px;}
.post { word-wrap: break-word; }

/* ARTICLE TWO */

.two { width: 351px; height: 275px; padding: 20px;}
.two img { width: 350px; }

.two .moreBottom {
  position:absolute;
  line-height:1.2;
  margin-bottom:0px;
  top:290px;
  font: italic 11px 'Droid Sans',Arial,Verdana,sans-serif;
  color: #cc00cc;

}

.one .moreBottom {
  position:absolute;
  line-height:1.2;
  margin-bottom:0px;
  top:260px;
  left:10px;
  font: italic 11px 'Droid Sans',Arial,Verdana,sans-serif;
  color: #cc00cc;

}
/* ARTICLE SINGLE */

#single { width: 546px; margin-right: -1px; padding: 0 20px 25px;  float: left; min-height: 300px;}
#single h1 { font: bold 18px 'Droid Sans',Arial,Verdana,sans-serif; color: #000; padding: 10px 0 10px 0; border-bottom : 5px solid #e0e0e0; margin: 10px 0 20px 0; }
#single h2 { font: bold 14px 'Droid Sans',Arial,Verdana,sans-serif; color: #000; padding: 5px 0px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
#single h3 { font: bold 12px 'Droid Sans',Arial,Verdana,sans-serif; color: #000; border-top: 5px solid #e0e0e0; margin-top: 20px; padding: 10px 0 0 0; }
#single h4, #single h5, #single h6 { color: #000; border-top: 5px solid #e0e0e0; margin: 20px 0 0; padding: 10px 0 0 0; }
#single img { max-width: 546px; }
#single strong { font-weight: normal; color: #000; text-shadow: 2px 2px 2px #ccffff; }
#single blockquote { background-color: #e0e0e0; opacity: 0.8; margin: 20px; padding: 10px 15px; }
h2 a, h3 a, h4 a, h5 a, h6 a {color: #000;}

.recent span {display: block; font-size: 11px;}
.recent li {margin-bottom: 12px;}

.err404 {font-size: 30px; margin: 0;}

/* ARTICLE ASIDE */

.aside { width: 155px; height: 274px; overflow: hidden; float: left; border-right:1px solid #E0E0E0; padding: 20px; }
.aside h3 { font: bold 12px 'Droid Sans',Arial,Verdana,sans-serif; color: #000;  margin: 10px 0 0; padding: 10px 0 0 0; }
.aside ul, .meta ul, .aside ol, .meta ol { margin-bottom: 10px 0px; list-style: none; padding: 0;}

/* ARTICLE META */

.meta { width: 155px; float: left; padding: 100px 20px 120px; border-bottom: 1px solid #e0e0e0;}
.meta img.dem {position: relative; margin: -80px 0 20px; width: 155px; height: 155px;}
.meta h3 { font: bold 12px Helvetica,Verdana,Arial,sans-serif; color: #000; border-top: 5px solid #e0e0e0; margin: 20px 0 0; padding: 10px 0 0 0; }

/* ARTICLE BOTTOM */

.bottom { width: 155px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #E0E0E0; float: left; border-right:1px solid #E0E0E0; padding: 0 20px; overflow: hidden;}
.bottom h3 { font: bold 12px 'Droid Sans',Arial,Verdana,sans-serif; color: #000; border-top: 5px solid #e0e0e0; margin-top: 20px; padding: 10px 0 0 0; }
.bottom ul { margin: 15px 0; padding: 0; }
.bottom li { margin: 0; padding: 0; list-style-type: none; }

#wp-calendar {width: 100%;}

.navigation h3 {margin-bottom: 5px;}
.previouspostslink {margin-right: 10px;}

/* HOVER */

.one:hover, .two:hover { background-color: #f9f9f9; cursor:default; }

/* SEPIA */

.post .sepia { margin:  0 0 20px; }
.two .sepia { width: 350px; height: 110px; }
.one .sepia { width: 155px; height: 109px; }
#single .sepia { width: 546px; height: 384px; }

/* WP image classes */

.entry-content img { margin: 0 0 1.5em 0; }

img { margin: 0; height: auto; max-width: 785px; width: auto; }
.attachment img { max-width: 785px; }
.alignnone, img.alignnone {display: block; clear: both; margin-bottom: 12px;}
.alignleft, img.alignleft { margin-right: 12px; display: inline; float: left; }
.alignright, img.alignright { margin-left: 12px; display: inline; float: right; margin-right: 12px; }
.aligncenter, img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; }
img.alignleft, img.alignright, img.aligncenter { margin-bottom: 12px; }
.wp-caption { margin-bottom: 12px; text-align: center; padding-top: 5px }
.wp-caption img { border: 0 none; padding: 0; margin: 0; }
.wp-caption p.wp-caption-text { font: normal 11px Helvetica,Verdana,Arial,sans-serif!important; line-height: 1.5; font-size: 10px; margin: 0; font-style: italic; }
.wp-smiley { margin: 0 !important; max-height: 1em; }
.gallery { margin: 0 auto 18px; }
.gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; }
.gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 15px; }
.gallery dl { margin: 0; }
.gallery br+br { display: none; }
.attachment img { /* single attachment images should be centered */ display: block; margin: 0 auto; }

blockquote.left { margin-right: 20px; text-align: right; margin-left: 0; width: 33%; float: left; }
blockquote.right { margin-left: 20px; text-align: left; margin-right: 0; width: 33%; float: right; }
.post-edit-link { margin:20px 0 0; padding:10px 0 0; font-weight: normal;}

/* Comments */

#comments { width: 540px; }
#respond h3 span {float: left;}

#commentform { clear: both; }
#commentform p {margin: 0;}
#comment { width: 350px; clear: both; }
.login {float: right; font-weight: normal; font-style: normal;}
.comment-meta {float: left; width: 125px;}
.comment-date {font-size: 10px; color: #aaaab4; margin-bottom: 15px;}
.comment { margin-top:35px; border-top: 1px solid #e0e0e0; list-style: none; zoom: 1;}
.comment p, .comment ul, .comment ol {margin-left: 125px;}
.comment ul.children {margin-left: 55px;}
#cancel-comment-reply { padding:5px 0; }
.commentlist, .commentlist ul { padding-left: 0;}

.reply { margin-left: 125px;}
.reply a {color:#835504;}
textarea#comment { width: 518px; border: 1px solid #E0E0E0; padding: 10px; margin-bottom: 10px; overflow: auto; font: normal 12px "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;}
#author, #email, #url {width: 518px; font: normal 12px Helvetica,Verdana,Arial,sans-serif;}
.avatar { float:left; height:55px; padding-right:10px; width:55px; }
.submit { margin-top: 10px; }
#submit {border: none; background: #835504; color: #fff; cursor: pointer;}
.comment-reply-link { color: black; }

/* SIDEBAR LEFT */
h3.sidebar-left{
font: bold 12px 'Droid Sans',Arial,Verdana,sans-serif; color: #000; padding: 0px; margin: 10px 0px 10px 0px;
}

/* NAVIGATIE */
.menu-hoofdmenu-container { font: bold 10px 'Droid Sans',Arial,Verdana,sans-serif; color: #cc00cc ;width:160px;}
.menu-hoofdmenu-container ul {margin:0px; padding:0px;}
.menu-hoofdmenu-container li {list-style: none;} 

ul.menu {background:#FFF;}
ul.menu li {
 border-bottom: #ddd dotted;
 border-width: 1px;
}

.menu-hoofdmenu-container a {
 color: #cc00cc;
 cursor: pointer;
 display:block;
 height:20px;
 line-height: 20px;
 text-indent: 5px;
 text-decoration:none;
 width:100%;
}
.menu-hoofdmenu-container a:hover{
  color: #FFFFFF;
 text-decoration:none;
}

.menu-hoofdmenu-container li:hover {
 color: #FFFFFF;
 background: #cc00cc;
 position: relative;
}