/* ------------------------------------------------------------------- Kunstmaan - LIJN Toerisme Vlaanderen 1. Structure 2. Typography 3. Post (Column01) 4. Pagenumbers 5. Column02 6. small post columns ------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- 1. Structure -------------------------------------------- */ div#wrapper {background-color:#FFF;} div#up {margin:0 auto; width:956px; background:#fff url(../img/css_backgrounds/body-shadow.gif) no-repeat top left; overflow:hidden;} div#bgDown {background:#fff url(../img/css_backgrounds/bg-footer.jpg) top center no-repeat;} div#down {margin:0 auto; width:956px; } div#up div#container {margin:0 auto; width:940px;/*background-color:#FF0;*/} div#up div#container div#header {height:293px;} /*div#up div#container div#header a {display:block; width:940px; height:293px;}*/ div#up div#container div#column01 {float:left; /*width:641px;*/ width:586px; background-color:#fff; padding:25px 30px 0 25px; overflow: hidden;} div#up div#container div#column02 {float:left; /*width:299px;*/ width:290px; padding-left:9px; background:#fff url(../img/css_backgrounds/column02-shadow.gif) top left no-repeat; } div#banner div {margin:0 auto; width:916px; padding-left:24px; padding-top:24px; } .block {display:block;} div hr { display:none; } div.hr { border-top:#666 1px solid; margin-bottom:43px; } /* ------------------------------------------------------------------------------------- 2. Typography -------------------------------------------- */ body { font-family:Arial, Helvetica, sans-serif; color:#333; font-size:0.75em; /*=12px*/ } /* links */ a, a:link, a:visited, a:hover, a:active { color:#333; } a:visited { color:#666; } a.green, a.green:link, a.green:active, a.green:visited, a.green:hover { display:block; width:100px; float:right; padding:5px 0; text-align:center; background-color:#0698A5; color:#fff; text-decoration:none; margin-left:5px; } /* paragraphs */ p { margin: 0 0 1.5em; line-height: 20px; font-size:1.17em; } p.smallTxt { font-size:0.83em; color:#666666; } p.ttl { margin: 0 0 0.75em; font-size:10px; color:#666666; } p.content { line-height: 20px; font-size:1.17em; /* 14px */ } p.error { font-size:12px; color:#F00; font-weight:bold; margin:1em 0; } p.thanks { font-size:13px; font-weight:normal; } /* headings */ h1 { color:#fff; font-size:1.92em; margin-bottom:15px; } h1 a, h1 a:link, h1 a:active, h1 a:visited, h1 a:hover { color:#fff; font-size:1em; text-decoration:none; } h1.results {} span h1 { color:#0698A5;} h2 { margin-bottom:15px;color:#0698A5;font-size:2.08em;/*font-size:25px;*/ } h2 a.ttl { color:#0698A5; font-size:1em; text-decoration:none; } h2.content { font-size:1.67em; } h3.bg { display:block; /*width:290px; orginal size */ width:238px; background:#fff url(../img/css_backgrounds/bg-ttl.gif) top left no-repeat; position:relative; color:#0698A5; font-size:20px; padding:18px 12px 18px 40px; } h3 a.ttl { color:#0698A5; font-size:20px; text-decoration:none; position:relative; } h3 span.ttl { display:block; float:left; } h3 span.rss { display:block; float:right; } h3 span.rss a { display:block; width:15px; height:15px; margin-top:2px; background:url(../img/icons/ico-rss.gif) top left no-repeat; text-indent:-9999px; } h3.content { color:#333333; font-size:1.42em; margin-bottom:15px; } h4 { margin:0 0 15px 0; } h4 a.ttl { font-size:20px; color:#0698A5; text-decoration:none; } h5 { margin:0 0 15px 0; } h5 a.ttl { font-size:14px; color:#0698A5; text-decoration:none; } h5.ttl_list { display:block; background:url(../img/css_backgrounds/bg-titles-lists.gif) no-repeat top left; padding:13px 10px 7px; } h5.ttl_tag_cloud { display:block; background:url(../img/css_backgrounds/bg-titles-lists.gif) no-repeat top left; padding:13px 10px 7px; font-size:14px; color:#0698A5; } /* Defaults */ input.inputTxt { border:#CCC 1px solid; } /*div.floatingPlayerBox_gsvb { margin-left:270px; } div.floatingPlayer_gsvb { margin-left:270px; }*/ /* ------------------------------------------------------------------------------------- 3. Post (Column01) -------------------------------------------- */ /* header */ div.boxHeader { border-top:#50B7C0 8px solid; background-color:#0698A5; } div.twoBlue { height:16px; } div.boxHeader h1 { display:block; float:left; width:356px; padding:15px; margin:0; font-weight:normal; } div.rate { float:right; width:178px; position:relative; padding-right:22px; padding-top:3px; } div#up div#container div#column01 div.boxHeader div.rate p { font-size:10px; color:#FFF; margin:0; text-align:right; } div.deco {background:#FAF9F5 url(../img/css_backgrounds/deco-header.jpg) no-repeat 95% 0; height:21px; } div#up div#container div#column01 { min-height: 300px; } /* ????????????????? */ div#up div#container div#column01 div.post { margin-bottom:45px; } div#up div#container div#column01 div.post p { line-height: 20px; font-size:1.17em; /* 14px */ } div#up div#container div#column01 div.post ul { margin: 0 0 1.5em; } div#up div#container div#column01 div.post ul li { line-height: 20px; font-size:14px; list-style:disc; margin-left:15px; } div#up div#container div#column01 div.post ol { margin: 0 0 1.5em; } div#up div#container div#column01 div.post ol li { line-height: 20px; font-size:14px; font-weight:bold; list-style:decimal; margin-left:28px; } div#up div#container div#column01 div.post ol li p { font-weight:normal; margin:0; } div#up div#container div#column01 div.postInfo { margin-bottom:7px; background-color:#FAF9F5; border-bottom:#CCCCCC 1px solid; } div#up div#container div#column01 div.postInfo div.authorPic { float:left; padding-right:12px; } div#up div#container div#column01 div.postInfo div.info { float:left; width:436px; padding-top:10px; } div#up div#container div#column01 div.postInfo div.info p { font-size:1em; line-height:1em; color:#666; margin: 0 0 0.5em; } div#up div#container div#column01 div.postInfo div.info p a { text-decoration:none; font-weight:bold; } div#up div#container div#column01 div.postInfo div.info p a.author, a.author:link, a.author:active, a.author:visited, a.author:hover { color:#0698A5; font-weight:bold; } div#up div#container div#column01 div.postInfo div.info p a.comments, a.comments:link, a.comments:active, a.comments:visited, a.comments:hover { color:#666; font-weight:normal; text-decoration:underline; } div.quote_box { color:#C5006A; font-size:2.08em; width:500px; margin-left:-10px; margin-bottom: 1.5em; } div.quote p { margin:0;} div.quote_left {width:450px;height:35px;background:url(../img/icons/quote_left.gif) no-repeat top left;} div.quote_right {width:450px;height:25px;background:url(../img/icons/quote_right.gif) no-repeat top right;} div#up div#container div#column01 div.post div.postImg { margin: 0 0 1.5em 0; } div#up div#container div#column01 div.post div.postMov { margin: 0 0 1.5em 0; } div#up div#container div#column01 div.post div.postMov p span { display:block; margin: 0.5em 0 0; text-decoration:underline; background:#fff url(../img/icons/ico-youtube.ico) top left no-repeat; padding-left:20px; line-height:16px; } /* btns react & share */ div.interact { border:#CCC 1px solid; border-width:0 0 1px 0; padding:5px 0 0; margin: 0 0 1.5em; } div.interact div.btns { float:left; } div.interact div.rate { float:right; width: 180px; position:relative; } div.interact div.rate p { margin:0; padding: 0; text-align:right; font-size:0.83em; color: #666666;} div.interact div.rate p span.vote { color: #cccccc;} div.stars { clear:both; padding-top:0px; position:absolute; right:19px;} div.interact div.btns ul { } div#up div#container div#column01 div.interact div.btns ul.nav li { display:block; height:38px; font-size:12px; float:left; position:relative; } div.interact div.btns ul.nav li a { display:block; color:#0698A5; padding-left:35px; background:#fff url(../img/general/arrow-l.gif) top left no-repeat; line-height:28px; } div.interact div.btns ul.nav li.first { margin-left:0; } /* subnav @ share */ div.interact div.btns ul.nav li ul.subnav { position:absolute; display:none; top:38px; } div#up div#container div#column01 div.interact div.btns ul.nav li ul.subnav li { display:block; width:155px; height:31px; clear:both; margin-left:0; } div.interact div.btns ul.nav li ul.subnav li a { display:block; width:155px; height:31px; padding:0; text-indent:-9999px; } div.interact div.btns ul.nav li ul.subnav li a.mail { background:#fff url(../img/general/nav-mail.gif) top left no-repeat; } div.interact div.btns ul.nav li ul.subnav li a.twitter { background:#fff url(../img/general/nav-twitter.gif) top left no-repeat; } div.interact div.btns ul.nav li ul.subnav li a.hyves { background:#fff url(../img/general/nav-hyves.gif) top left no-repeat; } div.interact div.btns ul.nav li ul.subnav li a.facebook { background:#fff url(../img/general/nav-facebook.gif) top left no-repeat; } div.interact div.btns ul.nav li ul.subnav li.close {border:#EBEBEB 1px solid; border-width:0 1px 1px 1px; width:153px; height:23px;} div.interact div.btns ul.nav li ul.subnav li a.close { width:147px; height:21px; background:#FFF; text-align:right; font-size:10px; text-decoration:none; line-height:21px; padding-right:6px; } /* links more articles */ div#up div#container div#column01 div.post div.articles { border:#CCC 1px solid; padding:15px; } div#up div#container div#column01 div.post div.articles p { color:#0698A5; font-weight:bold; font-size:1.33em; } div#up div#container div#column01 div.post div.articles ul.articles { margin:0; } div#up div#container div#column01 div.post div.articles ul.articles li { line-height:1.33em; list-style:none; margin:0; font-size:1.17em; } div#up div#container div#column01 div.post div.articles ul.articles li a { color:#0698A5; padding-left:15px; background:#fff url(../img/general/arrow-m.gif) top left no-repeat; } /* more @ small post */ div#up div#container div#column01 div.post div.more p { margin:0; } div#up div#container div#column01 div.post div.more p.btnFullPost { float:left; } div#up div#container div#column01 div.post div.more p.btnBack { float:right; background:url(../img/general/arrow-s.gif) top right no-repeat; padding-right:15px; } div#up div#container div#column01 div.post p.btnFullPost a { display:block; width:109px; background-color: #0698A5; text-decoration: none; text-align: center; padding: 5px 0; color: #FFF; } /* comments */ div#up div#container div#column01 div#place_reaction h2 { display:block;color:#0698A5; font-size:1.67em; border:#EBEBEB 1px solid; border-width:1px 0; padding:10px 0; } div#up div#container div#column01 div#comments h2 { display:block;color:#0698A5; font-size:1.67em; border:#EBEBEB 1px solid; border-width:1px 0; padding:10px 0; } div#up div#container div#column01 div#comments div.comment_box div.comment { } div#up div#container div#column01 div#comments div.comment_box div.comment p { color:#666; } div#up div#container div#column01 div#comments div.comment_box div.comment p.author { margin-bottom:0.5em; } div#up div#container div#column01 div#comments div.comment_box div.comment p.content {line-height: 20px; font-size:1.17em; color:#333; } div#up div#container div#column01 h2.articles { display:block;color:#0698A5; font-size:1.67em; border:#EBEBEB 1px solid; border-width:1px 0; padding:10px 0; } /* ------------------------------------------------------------------------------------- 4. Pagenumbers -------------------------------------------- */ div#up div#container div#column01 div#pages { margin-bottom:50px; color:#333; background-color:#F7F5EE; padding:6px 10px; } div#up div#container div#column01 div#pages a { color:#666; } div#up div#container div#column01 div#pages div#prev { float:left; width:50px; } div#up div#container div#column01 div#pages div#numbers { float:left; width:463px; text-align:center; } div#up div#container div#column01 div#pages div#next { float:right; width:50px; } div#up div#container div#column01 div#pages div#prev_article { float:left; padding:6px 10px; width: 50%; } div#up div#container div#column01 div#pages div#next_article { padding:6px 10px; text-align: right; } /* ------------------------------------------------------------------------------------- 5. Column02 -------------------------------------------- */ div#up div#container div#column02 div#searchBox { background-color:#EFECDF; padding:10px 0; padding-left:10px; margin-top: 1px } div#up div#container div#column02 div#searchBox input.inputTxt { width:200px; } div#up div#container div#column02 div#searchBox input.btnSearch { width:65px; border:none; text-align:center; background-color:#333; color:#fff; text-decoration:none; font-size:10px; } div#up div#container div#column02 div#smallPost {} div#up div#container div#column02 div#smallPost div.items { border-right:#0698A5 12px solid; } div#up div#container div#column02 div#smallPost div.post { padding:15px 25px 16px 10px; border-bottom:#EBEBEB 1px solid; } div#up div#container div#column02 div#smallPost div.post p { line-height:18px; } div#up div#container div#column02 div#smallPost div.post p.smallTxt { line-height:100%; margin:0 0 0.75em; } div#up div#container div#column02 div#smallPost div.post img { float:left; padding-right:10px; padding-bottom:3px; padding-top:3px; } div#up div#container div#column02 div#smallPost div.post div.btns {} div#up div#container div#column02 div#smallPost div.post div#movie { float:left; width:100px; height:74px; overflow:hidden; padding-top:2px; } div#up div#container div#column02 div#smallPost div.post div.movie_ttl { padding-left:105px; } div#up div#container div#column02 div#writers { padding-top:10px; } div#up div#container div#column02 div#writers h3 { margin-bottom:10px; } div#up div#container div#column02 div#writers img { margin-right:14px; margin-bottom:10px; float:left; border:#CCCCCC 1px solid; } div#up div#container div#column02 div#writers img.last { margin-right:0; float:right; } div#up div#container div#column02 div#writers_new { padding-top:10px; } div#up div#container div#column02 div#writers_new a { display:block; float:left; width:96px; height:72px; background-color:#FFF; text-align:left; overflow:hidden; } div#up div#container div#column02 div#writers_new img { width:95px; height:71px; } div#up div#container div#column02 div#media { padding-top:10px; } div#up div#container div#column02 div#media div#flickr { width:290px; overflow:hidden; } div#up div#container div#column02 div#media div#flickr div { float:left; width:96px; height:72px; background-color:#FFF; text-align:left; overflow:hidden; } div#up div#container div#column02 div#media div#flickr div a { display:block; width:95px; height:71px; overflow:hidden; } div#up div#container div#column02 div#media div#flickr div a img { display:block; width: auto; height: 71px; overflow:hidden; } div#up div#container div#column02 div#media div#videoBar { width:288px; height:72px; overflow:hidden; padding-top:5px; } div#up div#container div#column02 div#locations { padding:10px 0; padding-top:20px; border-bottom:#EBEBEB 1px solid; } div#up div#container div#column02 div#locations h5 { margin:10px 0 15px 15px; } div#up div#container div#column02 div#locations ul { margin-left:15px; padding-right:12px; } div#up div#container div#column02 div#locations ul li { background:url(../img/general/arrow-s.gif) top left no-repeat; padding-left:15px; padding-bottom:8px; } div#up div#container div#column02 div#uptodate { padding:10px 0; padding-top:20px; } div#up div#container div#column02 div#subscribe { border-right:#0698A5 12px solid; color:#0698A5; font-size:15px; font-weight:bold; } div#up div#container div#column02 div#subscribe div { border:#CCC 1px solid; border-width:1px 0; padding:20px 0 16px 10px; } div#up div#container div#column02 div#subscribe div input.btnSubscribe { width:50px; border:none; text-align:center; background-color:#0698A5; color:#fff; text-decoration:none; } div#up div#container div#column02 div.banner { padding:10px 0; } div#up div#container div#column02 div#commonLinks { margin:2em 0; font-size:12px; } div#up div#container div#column02 div#commonLinks ul.links { margin:0 12px 1em 10px; } div#up div#container div#column02 div#commonLinks ul.links li { background:url(../img/general/arrow-s.gif) top left no-repeat; padding-left:21px; padding-bottom:8px; line-height:14px; } div#up div#container div#column02 div#commonLinks ul.recent_comments li span { display:block; font-weight:bold; } div#up div#container div#column02 div#colorBlock { width:290px; height:74px; background:#F0F0F0; } div#cloud { text-align:left; padding-left:10px; padding-right:12px; } div#cloud li { display:inline; padding-right:5px; } div#cloud a.tag1 { font-size:1em; font-weight:100; text-decoration:none; } div#cloud a.tag2 { font-size:1.38em; font-weight:200; text-decoration:none; } div#cloud a.tag3 { font-size:1.58em; font-weight:300; text-decoration:none; } div#cloud a.tag4 { font-size:1.78em; font-weight:400; text-decoration:none; } div#cloud a.tag5 { font-size:1.98em; font-weight:500; text-decoration:none; } p.overview a { display:block; float:right; width:109px; height:19px; background:#fff url(../img/buttons/btn-overview.gif) top left no-repeat; text-indent:-9999px; } /* colors */ .magenta { color:#C5006A; } .cyaan { color:#0698A5; } /* ------------------------------------------------------------------------------------- 6. small post columns -------------------------------------------- */ div.smallPostRow { margin: 0px; padding: 0px; width: 586px; overflow: hidden; } div.smallPostColumn { float:left; width:283px; } /*div.smallPostRow > div.smallPostColumn:first-child { margin-right:20px; }*/ div.smallPostRow div.smallPostColumn.first { margin-right:20px; } div.smallPostColumn div.boxHeader h2 { display:block; margin:0; font-weight:normal; padding:15px; } div.smallPostColumn div.boxHeader h2 a.ttl { color:#FFF; } div#up div#container div#column01 div.smallPostColumn div.postInfo div.info { float:left; width:161px; } div.smallPostImg { padding-bottom:16px; } div.smallPostColumn p.btnFullPost a { background:url(../img/general/arrow-s.gif) no-repeat 100% 50%; color:#0698A5; padding-right:13px; } div.twoSmallPosts {} div.twoSmallPosts div.top { background:url(../img/css_backgrounds/bg-top-smallposts.gif) repeat-y 0 0; height:8px; } div.twoSmallPosts div.boxHeader { background:url(../img/css_backgrounds/bg-ttl-smallposts.gif) repeat-y 0 0; border:0; } div.twoSmallPosts div.boxHeader h2 { display:block; float:left; padding:15px; width:253px; font-weight:normal; } div.twoSmallPosts div.boxHeader h2 a.ttl { color:#FFF; } div.twoSmallPosts div.boxHeader h2.first { margin-right:20px; } div.boxDeco div.deco { float:left; width:283px; } div.boxDeco div.deco:first-child { margin-right:20px; } div.boxPostInfo { margin-bottom:7px; } div.twoSmallPosts div.postInfo { float:left; width:283px; margin:0; } div.twoSmallPosts div.postInfo.first { margin-right:20px; } div#up div#container div#column01 div.twoSmallPosts div.postInfo div.info { width:161px; } div.twoSmallPosts div.content { float:left; width:283px; } div.twoSmallPosts div.content.first { margin-right:20px; } div.twoSmallPosts div.content img { margin-bottom:16px; } div.boxBtnFullPost { margin-bottom:1.5em; } div.twoSmallPosts p.btnFullPost { display:block; float:left; width:283px; } div.twoSmallPosts p.btnFullPost.first { margin-right:20px; } div.twoSmallPosts p.btnFullPost a { background:url(../img/general/arrow-s.gif) no-repeat 100% 50%; color:#0698A5; padding-right:13px; } div.post p img { margin: 10px; }