/*
 Theme Name: WOM
 Theme URI:
 Description: WOM
 Author:
 Author URI:
 Coded by: Tom Sramek - http://wwww.sramekdesign.com
 */

/*====================================================================================================
 * G L O B A L                                                                             G L O B A L  
 =====================================================================================================*/

/* Default font settings. 
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size: 100.01%; }
body { 
	  font-size: 85%;   
	  color: #000000; 
	  background: url(images/background.jpg) repeat;
	  font-family: Arial;	  
}

/* Links
-------------------------------------------------------------- */

a, 
a:link,
a:visited   { color: #117AC0; text-decoration: none; }
a:hover,
a:active,
a:focus     { color: red; outline:none; /*deletes dotted outline border*/ }
a img       { border: none; /*resets the amazing border*/ } 

/* Alignment
-------------------------------------------------------------- */

.aligncenter,
div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft      { float: left;  }
.alignright     { float: right; }

/* Headings
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6     { font-weight: normal; color: #117AC0; text-transform: uppercase; }
/*this should remain the only h1 tag on whole site*/
.headermeta h1             { font-size: 2.0em; }
/*title of the post*/
.post-content h2.permalink { padding: 5px 0px 5px 0px; line-height: 1; font-size: 1.5em; color: #117AC0; text-transform: uppercase; font-weight: normal; }
.post-content h2.permalink.page { background: url(images/permalink-bg.png) no-repeat bottom left; }
.post-content h2.permalink a { }
/*search results for...*/
h2#search                  { margin: 0 0 0 0; padding: 0.5em 0px 0.5em 10px; font-size: 1.5em; } 
/*title of the widget*/
h3.widgettitle             { width: auto; height: 30px; padding: 0 10px 0 10px; font-size: 1.4em; font-style: italic; line-height: 30px; background-color: #505050; color: #ffffff; }

/* Headings - entry
-------------------------------------------------------------- */

.entry h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
.entry h2 { font-size: 2em; margin-bottom: 0.75em; }
.entry h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
.entry h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
.entry h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
.entry h6 { font-size: 1em; font-weight: bold; }

/* Widget
-------------------------------------------------------------- */

.widget            { width: auto; margin: 0px 0 10px 0; }
.widget p          { padding: 10px 10px 10px 10px; }  
.widget ul         { list-style: none; padding: 10px 10px 10px 10px; }
.widget ul ul      { margin: 0 0 0 10px; padding: 0 0 0 0; }

/*Search form (by default in sidebar))
-------------------------------------------------------------- */

#searchform        { display: block; width: auto; height: 40px; line-height: 50px; background-color: #7B7B7B; }
#searchform p       { padding: 0 0 0 0; }
#searchform #searchfield { float: left; width: 196px; height: 20px; line-height: 20px; margin: 10px 0 0 10px; padding: 0px 2px 0 2px; border: 1px solid #ffffff; background: #505050; color: #ffffff; }
#searchform #searchsubmit { float: right; width: 50px; height: 22px /* #searchfield height +2px */; margin: 10px 10px 0 0px; border: 1px solid white; background: #505050; color: white;  cursor: pointer; }

/* Misc
-------------------------------------------------------------- */

.indent-9999px { text-indent: -9999px; }
.display-none  { display: none; }
.no-bg         { background: none !important; }
.with-360 { width: 360px; }

/*====================================================================================================
 * S T R U C T U R E                                                                 S T R U C T U R E
 ====================================================================================================*/

#container    { position: relative; width: 900px; margin: 0 auto; text-align: left; }
#header       { position: relative; width: auto; height: 160px; z-index: 10; }
/*wraps content and sidebar - important when using more than 2 columns*/
#wrapper      { position: relative; float: left; width: 900px; min-height: 300px;  background: url(images/content-middle.png) repeat-y center; }
/*wraps posts*/
#content      { position: relative; float: left; width: 420px; height: auto; margin: 0 0 0 150px; padding: 0 0 20px 0; z-index: 9999; }
.archive #content { background: url(images/permalink-bg.png) no-repeat top left; padding-top: 10px; }
/*wraps a post*/
.post-content { position: relative; width: auto; padding: 0 0px 10px 0px; }
.archive .post-content { background: url(images/permalink-bg.png) no-repeat bottom left; padding-bottom: 10px; }
#sidebar      { position: relative; float: right; width: 208px; height: 614px; margin: -50px 90px 0 0; background: url(images/sidebar.png) no-repeat; display: inline; z-index: 9999; }
#footer       { position: relative; width: auto; height: 50px; clear: both; z-index: 99999; }

#top { position: absolute; width: 900px; height: 215px; top: 0px; left: 0px; background: url(images/content-top.png) no-repeat; z-index: 10; }
#bottom { position: absolute; width: 900px; height: 555px; left: 0px; bottom: 0px; background: url(images/content-bottom.png) no-repeat; z-index: 10; }
#globe { position: absolute; width: 820px; height: 707px; top: 25px; left: 60px; background: url(images/globe.png) no-repeat; }

/*====================================================================================================
 * H E A D E R                                                                             H E A D E R
 ====================================================================================================*/

img.logo                 { position: absolute; width: 370px; height: 125px; top: 17px; left: 78px; }
.headermeta              { position: absolute; top: 80px; left: 25px; }
.headermeta .description { font-size: 1.6em; }

#top-menu { position: absolute; width: 100%; height: 30px; left: 0px; bottom: 0px; background-color: #000; z-index: 9999; }

/*Header - buttons
-------------------------------------------------------------- */
#header a.button { position: absolute; text-indent: -9999px; }
#header a.button:hover { z-index: 99999; }
#header a.button img { display: block; }

#header a.button#home {  top: 68px; left: 23px; }
#header a.button#home img { width: 79px; height: 38px; }
#header a.button#home:hover img { width: 82px; height: 39px; }

#header a.button#contact { top: 100px; left: 23px; }
#header a.button#contact img { width: 94px; height: 33px; }
#header a.button#contact:hover img { width: 97px; height: 35px; }

#header a.button#who { width: 162px; height: 84px; top: 60px; left: 430px; background: url(images/who.png) no-repeat; }
#header a.button#services { width: 139px; height: 63px; top: 10px; left: 445px; background: url(images/services-top.png) no-repeat; }
#header .button#follow-us { width: 94px; height: 62px; top: 250px; left: 23px; background: url(images/followus.png) no-repeat; z-index: 0; }
#header a.button#projects { width: 254px; height: 104px; top: 20px; right: 90px; background: url(images/projects-clients.png) no-repeat; z-index: 0; }

/*Header - social
-------------------------------------------------------------- */
#social { position: absolute; width: 58px; height: 124px; top: 133px; left: 73px; background: url(images/social.png) no-repeat;  z-index: 99999;}
#social a { position: absolute; display: block; text-indent: -9999px; }
#social a img { display: block; }

#social a.linkedin,
#social a.linkedin img { width: 27px; height: 25px; top: 8px; left: 8px; }
#social a.linkedin:hover img { width: 30px; height: 28px; }

#social a.facebook,
#social a.facebook img { width: 30px; height: 25px; top: 35px; left: 8px; }
#social a.facebook:hover img { width: 33px; height: 28px; }

#social a.twitter,
#social a.twitter img { width: 30px; height: 25px; top: 62px; left: 9px; }
#social a.twitter:hover img { width: 33px; height: 28px; }

#social a.delicious,
#social a.delicious img { width: 30px; height: 23px; top: 90px; left: 10px; }
#social a.delicious:hover img { width: 33px; height: 26px; }
/*====================================================================================================
 * F O O T E R                                                                             F O O T E R
 ====================================================================================================*/

.copyright { position: relative; width: 378px; height: 23px; margin: -15px 0 0 180px; padding: 0 0 0 0px; background: url(images/copyright.png) no-repeat; font-size: 0.6em; line-height: 23px; text-transform: uppercase; letter-spacing:0.0em; text-align: center; }
.copyright a { color: #000; border-bottom: 1px solid #BFBFBF; }

/*====================================================================================================
 * S I D E B A R                                                                         S I D E B A R
 ====================================================================================================*/
 
 /*Sidebar - widget
-------------------------------------------------------------- */

#sidebar .widget ul li  { font-size: 0.9em; }
 
 /*Sidebar - headings
-------------------------------------------------------------- */
.widget h3.heading { position: relative; display: block; text-indent: -9999px; }
.widget h3.heading#tweets { width: 139px; height: 42px; margin: 3px 0 0 5px; background: url(images/tweets.png) no-repeat; }
.widget h3.heading#news { width: 219px; height: 76px; margin: 0px 0 0 -20px; background: url(images/news.png) no-repeat; }
.widget h3.heading#conversations { width: 279px; height: 132px; margin: -50px 0 0 -18px; background: url(images/conversations.png) no-repeat; }

/*Sidebar - twitter
-------------------------------------------------------------- */
#tweet { margin: 0 0 0 0; }
ul.twitter  { width: 165px; }
ul.twitter li { padding: 0 0 5px 0; background: url(images/divider-sidebar.png) no-repeat bottom left; }

/*Sidebar - conversations
-------------------------------------------------------------- */
#conv ul { position: relative; width: 160px; margin: -35px 0 0 10px; z-index: 99999; }
#conv ul li { padding: 5px 0 5px 0; background: url(images/divider-sidebar.png) no-repeat top left; }
#conv ul li:first-child { background: none; }

/*Sidebar - news
-------------------------------------------------------------- */

.excerpts-news { width: 165px; height: auto; margin: 0 0 0 20px; }
.excerpts-news h4 { font-size: 0.9em;  }
.excerpts-news .excerpt { padding: 0 0 5px 0; font-size: 0.9em; }
.excerpts-news .excerpt .thumbnail { float: left; width: 63px; height: 60px; margin: 0 5px 0 0; background: url(images/thumb-bg-sidebar.png) no-repeat; }
.excerpts-news .excerpt .thumbnail img { margin: 4px 0 0 6px; }

/*====================================================================================================
 * C O N T E N T                                                                         C O N T E N T
 ====================================================================================================*/

.entry { padding: 0 20px 0 0px; font-size: 1.0em; line-height: 1.4em; /*post itself without permalink*/ }
.postmetadata               { padding: 0px 0px 0px 0px; color: #117AC0; }
.postmetadata.top           { width: 405px; height: 20px; line-height: 20px; background: url(images/meta-top.png) no-repeat bottom; font-size: 0.9em; } 
.postmetadata.bottom        {  } 

/* Post content - text elements
-------------------------------------------------------------- */

.entry p              { margin: 1em 0 1em 0; }
.entry img.left,
.entry img.alignleft  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.entry img.right,
.entry img.alignright { float: right; margin: 1.5em 0 1.5em 1.5em; }
.entry img            { max-width:100%; /*..because some images are too wide*/}

.entry blockquote          { margin: 1.5em; color: #666; font-style: italic; }
.entry strong              { font-weight: bold; }
.entry em, .entry dfn      { font-style: italic; }
.entry dfn                 { font-weight: bold; }
.entry sup, .entry sub     { line-height: 0; }

.entry abbr, 
.entry acronym     { border-bottom: 1px dotted #666; }
.entry address     { margin: 0 0 1.5em; font-style: italic; }
.entry del         { color: #666; }

.entry pre 				{ margin: 1.5em 0; white-space: pre; }
.entry pre, .entry code, .entry tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

/* Post content - lists
-------------------------------------------------------------- */

.entry li ul, 
.entry li ol       { margin: 0 1.5em; }
.entry ul,
.entry ol          { margin: 0 1.5em 1.5em 1.5em; }

.entry ul          { list-style-type: disc; }
.entry ol          { list-style-type: decimal; }

.entry dl          { margin: 0 0 1.5em 0; }
.entry dl dt       { font-weight: bold; }
.entry dd          { margin-left: 1.5em;}

/* Post content - tables
-------------------------------------------------------------- */

.entry table       { margin-bottom: 1.4em; width:100%; }
.entry th          { font-weight: bold; }
.entry thead th    { background: #c3d9ff; }
.entry th,
.entry td,
.entry caption     { padding: 4px 10px 4px 5px; }
.entry tr.even td  { background: #e5ecf9; }
.entry tfoot       { font-style: italic; }
.entry caption     { background: #eee; }

/* Post content - WP-captions - post content (optional rounded corners for browsers that support it)
-------------------------------------------------------------- */

.wp-caption        { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; /* -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; */ }
.wp-caption img    { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }

/* Post content - page navigation
-------------------------------------------------------------- */
.navigation           { line-height: 21px; padding: 20px 0px 0 0px; }
.navigation .next a,
.navigation .previous a { position: relative; display: block; width: 102px; height: 21px; text-indent: -9999px; }
.navigation .next a    { float: right; background: url(images/nieuwer.png) no-repeat; }
.navigation .previous a{ float: left; background: url(images/ouber.png) no-repeat; }

/*====================================================================================================
 * A R C H I V E                                                                         A R C H I V E
 ====================================================================================================*/

.archive .thumbnail2 { position: relative; float: right; width: 234px; height: 118px; margin: 0 10px 0 ; background: url(images/thumbnail-archive.png) no-repeat; }
.archive .thumbnail2 img { position: relative; display: block; margin: 9px 0 0 10px; }

/*====================================================================================================
 * H O M E                                                                                     H O M E 
 ====================================================================================================*/
#container-home    { position: relative; width: 1024px; height: 770px; margin: 0 auto; text-align: left; background: url(images/home-bg.png) no-repeat; }
.the-excerpts { position: absolute; display: block; }
.the-excerpts .excerpt { position: relative; font-size: 0.9em; padding: 0 0 5px 0; }
.the-excerpts .excerpt h3 {padding: 0 0 3px 0; }
.the-excerpts .excerpt .thumbnail { position: relative; float: left; margin: 0 5px 0 0; }
.the-excerpts .excerpt .thumbnail img { position: relative; display: block; }
.the-excerpts a.meer { position: absolute;  text-indent: -9999px; }
.the-excerpts a.meer img { display: block; width: 80px; height: 23px; }
.the-excerpts a.meer:hover img { width: 83px; height: 24px; }

/*news*/
.the-excerpts.news { width: 235px; height: 320px; top: 102px; left: 42px; }
.the-excerpts.news h3 { font-size: 1.1em; }
.the-excerpts.news .excerpt { padding: 0 0 5px 0; }
.the-excerpts.news .thumbnail { width: 111px; height: 73px; background: url(images/thumbnail-news-home.png) no-repeat; }
.the-excerpts.news .thumbnail img { margin: 6px 0 0 7px; }
.the-excerpts.news a.meer { left: -5px; bottom: -25px; }

/*tweets*/
#container-home #tweet { position: absolute; width: 169px; height: 165px; top: 82px; left: 321px; font-size: 0.9em; }
#container-home ul.twitter  { width: 165px; list-style: none; }
#container-home ul.twitter li { padding: 10px 0 10px 0; background: url(images/divider-sidebar.png) no-repeat top left; }
#container-home ul.twitter li:first-child { background: none; }

/*who*/
.the-excerpts.who { width: 417px; height: 171px; top: 71px; right: 47px; }
.the-excerpts.who h3 { font-size: 1.2em; }
.the-excerpts.who .excerpt {  }
.the-excerpts.who .thumbnail { width: 151px; height: 171px; margin: 0 10px 0 0; background: url(images/thumbnail-who-home.png) no-repeat bottom; }
.the-excerpts.who .thumbnail img { margin: 70px 0 0 7px; }
.the-excerpts.who a.meer { right: -10px; bottom: -13px; }

/*projects and clients*/
.the-excerpts.pc { width: 270px; height: 190px; top: 521px; left: 72px; }
.the-excerpts.pc .thumbnail { width: 128px; height: 94px; background: url(images/thumbnail-pc-home.png) no-repeat; }
.the-excerpts.pc .thumbnail img { margin: 6px 0 0 7px; }
.the-excerpts.pc a.meer { right: -15px; bottom: -18px; }

/*services*/
.the-excerpts.services { width: 378px; height: 273px; top: 450px; right: 80px; }
.the-excerpts.services h3 { font-size: 1.2em; }
.the-excerpts.services .excerpt { padding: 7px 0 9px 0; background: url(images/services-divider.png) no-repeat bottom; }
.the-excerpts.services .thumbnail { width: 112px; height: 79px; background: url(images/thumbnail-services-home.png) no-repeat; }
.the-excerpts.services .thumbnail img { margin: 6px 0 0 7px; }
.the-excerpts.services a.meer { right: -15px; bottom: -22px; }

/*conversations*/
#container-home #conv { position: absolute; width: 147px; height: 137px; top: 600px; left: 370px; font-size: 0.9em; }
#container-home #conv ul { width: 160px; margin: -35px 0 0 10px; }
#container-home #conv ul li { padding: 10px 5px 10px 5px; background: url(images/divider-sidebar.png) no-repeat top left; }
#container-home #conv ul li a { color: #000; }
#container-home #conv ul li:first-child { background: none; }

/*social*/
#social-home { position: absolute; width: 160px; height: 45px; left: 737px; top: 249px; } 

#social-home a { display: block; position: absolute; top: 6px; }
#social-home a img { display: block; width: 30px; height: 28px; }
#social-home a:hover img { width: 33px; height: 31px; }
#social-home a.linkedin { left: 8px; }
#social-home a.facebook { left: 45px; }
#social-home a.twitter { left: 83px; }
#social-home a.delicious { left: 115px; }

#container-home .copyright { position: absolute; width: 370px; height: 18px; top: 755px; left: 35px; line-height: 18px; background: none; }

/*buttons*/

#container-home a.button { position: absolute; text-indent: -9999px; z-index: 99999; }
#container-home a.button:hover { }
#container-home a.button img { display: block; }

#container-home a.button.home { top: 324px; left: 740px; }
#container-home a.button.home img { width: 107px; height: 71px;  }
#container-home a.button.home:hover img { width: 130px; height: 83px; }

#container-home a.button.contact { top: 447px; right: 465px; }
#container-home a.button.contact img { width: 167px; height: 56px;  }
#container-home a.button.contact:hover img { width: 199px; height: 66px; }

.loggedin { float: right; }
.img-wrapper { position: relative; width: 400px; height: 300px; padding: 20px 0 0 12px; background: url(images/img-wrapper.png) no-repeat; }
.img-wrapper img { position: relative; display: block; width: 370px; height: 260px; }

a.no-pointer { cursor: default; }
.home { font-weight: normal !important; }

/*====================================================================================================
 * H A C K S                                                                                 H A C K S 
 ====================================================================================================*/

/* clearfix 
-------------------------------------------------------------- */

.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { min-width: 0; display: inline-block; /* \*/ display: block; }
* html .clear { /* \*/ height: 1%; }