/********************************************************************************************** Main Sections in CSS: 1. BASIC ELEMENTS Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. 2. LAYOUT Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site 3. PAGE COMMON STYLES Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc 4. PAGE SPECIFIC STYLES Define content styles that are specific to a particular page ***********************************************************************************************/ /* import core styles */ @import url(sprbase.css); /*------------------------------------------ // 1.BASIC ELEMENTS // Define styles for basic elements: body, h1-h6, ul, ol, a, p, etc. //------------------------------------------*/ body { color:#386d28; font-family:Verdana, Geneva, sans-serif; background: url(/brands/sprookjesboom/images/container-bg.jpg) left top no-repeat; } h1, h2 h3, h4, h5, h6, p, li { line-height:1.0em; } a { color:#386d28; } /*------------------------------------------ // 2.LAYOUT // Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site //------------------------------------------*/ /*---- Container ----*/ div#container { width:974px; margin:0 auto; } /*---- Header ----*/ div#header{ height:138px; position:relative; z-index:100; } /*---- Navigation ----*/ div#navigation{ background:url(/brands/sprookjesboom/images/navigation/navigation-bg.png) left top no-repeat; margin:-49px 0px 0px 0px ; position:relative; z-index:10; padding:82px 0px 0px;} /*---- Content ----*/ div#content{ position:relative; } /*div#content.home{ background:url(/brands/sprookjesboom/images/content/content-bg.png) left top no-repeat; height:601px; margin:0px -7px 12px 0px; position:relative; }*/ div#content.home{ left top no-repeat; height:601px; margin:0px -7px 12px 0px; position:relative; } div.draak{ background:url(/brands/sprookjesboom/images/content/content-bg1.jpg) left top no-repeat; height:601px; padding:10px 17px 1px 10px; overflow:hidden; width:946px; } div.assepoester { background:url(/brands/sprookjesboom/images/content/content-bg2.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.langnek{ background:url(/brands/sprookjesboom/images/content/content-bg12.jpg) left top no-repeat; height:601px; padding:10px 17px 1px 10px; overflow:hidden; width:946px; } div.heks { background:url(/brands/sprookjesboom/images/content/content-bg6.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.roodkapje{ background:url(/brands/sprookjesboom/images/content/content-bg8.jpg) left top no-repeat; height:601px; padding:10px 17px 1px 10px; overflow:hidden; width:946px; } div.kabouters { background:url(/brands/sprookjesboom/images/content/content-bg7.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.benjamin { background:url(/brands/sprookjesboom/images/content/content-bg5.jpg) left top no-repeat; height:601px; padding:10px 17px 1px 10px; overflow:hidden; width:946px; } div.kleinduimpje { background:url(/brands/sprookjesboom/images/content/content-bg11.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.sprookjesboom{ background:url(/brands/sprookjesboom/images/content/content-bg4.jpg) left top no-repeat; height:601px; padding:10px 17px 1px 10px; overflow:hidden; width:946px; } div.ezel { background:url(/brands/sprookjesboom/images/content/content-bg9.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.reus { background:url(/brands/sprookjesboom/images/content/content-bg13.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.wolf { background:url(/brands/sprookjesboom/images/content/content-bg3.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div.fakir { background:url(/brands/sprookjesboom/images/content/content-bg10.jpg) left top no-repeat; height:601px; width:946px; margin:0px -7px 0px 0px; padding:10px 17px 1px 10px; overflow:hidden; } div#content.two-column2 div#main { width:430px; float:left; } div#content.two-column2 div#sidebar { width:489px; float:right; } div#content.two-column1 div#main { width:724px; float:left; } div#content.two-column1 div#sidebar { width:231px; float:right; } /*---- Main ----*/ div#main { float:left; } div#main div.inner-main{ padding-top:15px; } /*---- Sidebar ----*/ div#sidebar { float:right; } /*---- Footer ----*/ div#footer{ background:url(/brands/sprookjesboom/images/footer/footer-bg.jpg) left top no-repeat; margin-right:-7px; position:relative; height:24px; padding:25px 12px 20px 12px; margin-top:45px; clear:both; } /*------------------------------------------ // 3. PAGE COMMON STYLES // Define content styles that are common to all the pages in the project. For example Logo in header, tabs in navigation, buttons, rounded boxes etc //------------------------------------------*/ /*---- Header - Logo ----*/ div#header div.logo{ width:264px; float:left; margin:36px 12px 0px 0px; position:relative; z-index:10; } /*---- Header - Global Navigation ----*/ div#global-navigation{ width:688px; position:relative; float:right; } /*---- Header - Global Navigation - Glows ----*/ div#global-navigation div.glows div.bewoners{ position:absolute; left:-230px; top:0; width:567px; height:172px; float:left; background:url(/brands/sprookjesboom/images/header/bewoners.png) left -17300px no-repeat; } div#global-navigation div.glows div.bewoners.hover, div#global-navigation div.glows div.bewoners.active { background:url(/brands/sprookjesboom/images/header/bewoners.png) left top no-repeat; } div#global-navigation div.glows div.filmpjes { position:absolute; left:-70px; top:0; width:535px; height:171px; background:url(/brands/sprookjesboom/images/header/filmpjes.png) left -17000px no-repeat; display:block; float:left; } div#global-navigation div.glows div.filmpjes.hover, div#global-navigation div.glows div.filmpjes.active{ background:url(/brands/sprookjesboom/images/header/filmpjes.png) left top no-repeat; } div#global-navigation div.glows div.kleurplaten{ position:absolute; left:77px; top:0; width:537px; height:171px;background:url(/brands/sprookjesboom/images/header/kleurplaten.png) -1px -17000px no-repeat; display:block; float:left; } div#global-navigation div.glows div.kleurplaten.hover, div#global-navigation div.glows div.kleurplaten.active { background:url(/brands/sprookjesboom/images/header/kleurplaten.png) left top no-repeat; } div#global-navigation div.glows div.avontuur{ position:absolute; left:188px; top:0; width:537px; height:171px; float:left; background:url(/brands/sprookjesboom/images/header/avontuur.png) left -17000px no-repeat; display:block; } div#global-navigation div.glows div.avontuur.hover, div#global-navigation div.glows div.avontuur.active { background:url(/brands/sprookjesboom/images/header/avontuur.png) left top no-repeat; } /*---- Header - Global Navigation - Links ----*/ div#global-navigation div.links a.bewoners { height:130px; left:-8px; position:absolute; top:34px; width:162px; z-index:5; text-decoration:none; background:transparent url(/brands/sprookjesboom/images/header/bewoners.png) no-repeat scroll -222px -206px; } div#global-navigation div.links a.filmpjes { position:absolute; left:155px; top:38px; width:130px; height:130px; display:block; z-index:5; text-decoration:none; background:transparent url(/brands/sprookjesboom/images/header/filmpjes.png) no-repeat scroll -225px -208px; } div#global-navigation div.links a.kleurplaten { position:absolute; left:293px; top:38px; width:140px; height:130px; display:block; z-index:5; text-decoration:none; background:transparent url(/brands/sprookjesboom/images/header/kleurplaten.png) no-repeat scroll -217px -208px; } div#global-navigation div.links a.avontuur { position:absolute; left:440px; top:38px; width:250px; height:130px; display:block; text-decoration:none; background:transparent url(/brands/sprookjesboom/images/header/avontuur.png) no-repeat scroll -252px -208px; } /*---- Navigation ----*/ div#navigation ul{ margin-top:-28px; position:relative; height:60px; overflow:hidden; } div#navigation ul li { float:left; height:64px; } div#navigation ul li.pipe { float:left; background:url(/brands/sprookjesboom/images/navigation/pipe.png) left top no-repeat; height:34px; margin-top:31px; width: 3px; } div#navigation ul li a{ float:left; display:block; padding:0px 17px; } div#navigation ul li.home a{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -15px -94px no-repeat; height:94px; width:120px; } div#navigation ul li.home a:hover , div#navigation ul li.home a.active{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -15px top no-repeat; height:94px; width:120px; } div#navigation ul li.latest-news a{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -168px -94px no-repeat; height:94px; width:140px; } div#navigation ul li.latest-news a:hover , div#navigation ul li.latest-news a.active{background:url(/brands/sprookjesboom/images/navigation/navigation.png) -168px top no-repeat; height:94px; width:140px; } div#navigation ul li.webshop a{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -352px -94px no-repeat; height:94px; width:90px; } div#navigation ul li.webshop a:hover , div#navigation ul li.webshop a.active{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -352px top no-repeat; height:94px; width:90px; } div#navigation ul li.post a{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -498px -94px no-repeat; height:94px; width:106px; } div#navigation ul li.post a:hover , div#navigation ul li.post a.active{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -498px top no-repeat; height:94px; width:106px; } div#navigation ul li.site a{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -658px -94px no-repeat; height:94px; width:330px; } div#navigation ul li.site a:hover , div#navigation ul li.site a.active{ background:url(/brands/sprookjesboom/images/navigation/navigation.png) -658px top no-repeat; height:94px; width:330px;} ul.subnav{ background:url(/brands/sprookjesboom/images/navigation/subnav-bg.gif) left top repeat-x; height:30px; width:946px; padding:0px 13px; } ul.subnav li{ display:inline; font-size:160%; color:#8fb728; font-weight:bold; margin-right:30px; line-height:30px; font-family:Garamond , Georgia, "Times New Roman", Times, serif; } ul.subnav li a{ color:#8fb728; } ul.subnav li a.active{ color:#a8e600; } ul.subnav li a:hover { text-decoration:none; } /*---- Subnav for character pages ----*/ ul.right { text-align: right;} ul.characternav li ul.right { width: auto; float: right;} ul.characternav li { float: left;} ul.subnav li.image{ margin-right: 10px;} ul.subnav li.right{ float: right; margin-right: 0;} /*---- Content ----*/ div#content h1{ line-height:24px; font-size:200%; color:#386d28; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; margin-bottom:16px; } div#content p{ color:#386d28; font-size:110%; line-height:16px; margin-bottom:16px; } div#content a.more-link { text-decoration:underline; } div#content a.more-link:hover{ text-decoration:none; } /*---- Content - Post Settings ----*/ div#content a { text-decoration:underline; } div#content a:hover { text-decoration:none; } div#content div.post h2{ line-height:24px; font-size:180%; color:#386d28; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; margin-bottom:16px; } div#content div.post h3{ line-height:24px; font-size:160%; color:#386d28; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; margin-bottom:16px; } div#content div.post h4{ line-height:24px; font-size:140%; color:#386d28; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; margin-bottom:16px; } div#content div.post ul{ margin:0px 0px 16px 24px; } div#content div.post ul li{ color:#386d28; font-size:110%; line-height:16px; list-style:disc; } div#content div.post ol { margin:0px 0px 16px 24px; } div#content div.post ol li{ color:#386d28; font-size:110%; line-height:16px; list-style:decimal; } div#content div.post blockquote{ font-style:italic; } /*---- Images in post section ----*/ div#content div.post img.aligncenter{ display:block; margin-left:auto; margin-right:auto;} div#content div.post img.alignright{display:inline; margin:0 0 2px 7px; padding:4px; float:right;} div#content div.post img{max-width:100%; padding:0;} div#content div.post img.alignleft{display:inline; margin:0 7px 2px 0; padding:4px; float:left; } /*---- Content - Image Frame ----*/ div.image-frame{ background:url(/brands/sprookjesboom/images/content/frame.png) left top no-repeat ; width:142px; height:107px; padding:5px 7px 5px 5px; position:relative; } div.image-frame1{ background:url(/brands/sprookjesboom/images/content/image-frame1.gif) left top no-repeat ; width:79px; height:59px; padding:2px 0px 0px 2px; } div.image-frame2{ background:url(/brands/sprookjesboom/images/content/frame2.png) left top no-repeat ; width:142px; height:107px; padding:5px 7px 5px 5px; position:relative; } div.image-frame3{ background:url(/brands/sprookjesboom/images/content/frame3.png) left top no-repeat ; width:160px; height:120px; padding:5px 7px 5px 5px; position:relative; } /*---- Content - Image Frame - Info ----*/ div.image-frame div.info{ background:#db3325; width:136px; height:21px; line-height:21px; padding:0px 3px; font-size:140%; color:#fff; font-family:Georgia; position:absolute; bottom:7px; left:5px; } div.image-frame div.info img{ margin-top:-6px; position:relative; } div.image-frame div.info1{ background:#009bbc; height:21px; line-height:21px; padding:0px 3px; width:136px; font-size:140%; color:#fff; font-family:Georgia; position:absolute; bottom:7px; left:5px; } div.image-frame div.info1 img{ margin-top:-6px; position:relative; } div.info2{ background:#865c9e; height:21px; line-height:21px; padding:0px 3px; width:136px; font-size:140%; color:#fff; font-family:Georgia; position:absolute; bottom:7px; left:5px; } div.info2 img{ margin-top:-6px; position:relative; } div.image-frame3 div.info3{ background:#bd2a5a; width:154px; height:21px; line-height:21px; padding:0px 3px; font-size:140%; color:#fff; font-family:Georgia; position:absolute; bottom:7px; left:5px; } div.image-frame3 div.info3 img{ margin-top:-6px; position:relative; } div#content div.image-frame div.info a, div#content div.image-frame div.info1 a, div#content div.image-frame div.info2 a, div#content div.image-frame2 div.info2 a, div#content div.image-frame3 div.info3 a { color:#fff; text-decoration:none; } div#content div.box-middle div.middle-left{ border-left:1px solid #769b2a; } div#content div.box-middle div.middle-left div.middle-right{ background:url(/brands/sprookjesboom/images/content/content-middle-right.png) right top repeat-y; } div#content div.box-middle div.middle-left div.middle-right div.middle{ background:#fff url(/brands/sprookjesboom/images/content/content-middle.gif) left bottom repeat-x; padding:10px 12px 1px; margin-right:4px; } div#content div.box-bottom div.bottom-left{ background:url(/brands/sprookjesboom/images/content/content-bottom-left.png) left bottom no-repeat; padding-left:18px; height:22px; line-height:22px; } div#content div.box-bottom div.bottom-left div.bottom-right{ background:url(/brands/sprookjesboom/images/content/content-bottom-right.png) right bottom no-repeat; padding-right:18px; height:22px; line-height:22px; } div#content div.box-bottom div.bottom-left div.bottom-right div.bottom-middle{ background:url(/brands/sprookjesboom/images/content/content-bottom-middle.png) left bottom repeat-x; height:22px; line-height:22px; } /*---- Sidebar ----*/ div#sidebar p a{ text-decoration:underline; color:#386d28; } div#sidebar p a:hover{ text-decoration:none; } div#sidebar div.flash{ margin-bottom:8px; } /*---- Footer ----*/ div#footer img.squirrel{ position:absolute; top:-42px; left:-18px; } div#footer ul.foot-nav{ float:right; } div#footer ul.foot-nav li{ float:left; color:#3c550f; font-size:140%; line-height:20px; margin-right:6px; font-family:Gill Sans MT , Verdana, Geneva, sans-serif } div#footer ul.foot-nav li a{ color:#3c550f; line-height:20px; } div#footer ul.foot-nav li a:hover{ text-decoration:none; } /*---- Boxes ----*/ /*---- Box1 ----*/ div.box1{ width:231px; position:relative; } div.box1 div.box1-top{ background:url(/brands/sprookjesboom/images/content/box1-top.png) left top no-repeat; height:29px; line-height:38px; padding:8px 12px 1px; } div.box1 div.box1-middle{ background:url(/brands/sprookjesboom/images/content/box1-middle.png) no-repeat top left; padding:0 2px; width:227px; overflow:hidden; } div.box1 img.box1-bottom{ position:absolute; bottom:0px; left:0; } /*---- Box2 ----*/ div.box2{ background:url(/brands/sprookjesboom/images/content/box2.png) left top no-repeat; height:545px; width:458px; padding:15px 15px 24px; margin-right:-6px; position:relative; } /*---- Box4 ----*/ div.box4 div.box4-top{ background:url(/brands/sprookjesboom/images/content/box4-top.gif) left top no-repeat ; height:14px; line-height:14px; } div.box4 div.box4-middle{ background:#fff url(/brands/sprookjesboom/images/content/content-middle.gif) left bottom repeat-x; border-right:2px solid #769b2a; width:465px; border-left:2px solid #769b2a; padding:4px 10px 1px; } div.box4 div.box4-bottom{ background:url(/brands/sprookjesboom/images/content/box4-bottom.gif) left bottom no-repeat ; height:10px; line-height:10px; } /*---- Box5 ----*/ div.box5{ background:url(/brands/sprookjesboom/images/content/box5.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; } /*---- Box5kleur ----*/ div.box5kleur{ background:url(/brands/sprookjesboom/images/content/box5kleurplaat.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; } /*---- Box6 ----*/ div.box6{ left top no-repeat; width:428px; height:321px; padding-right:10px; } /*---- Box6recept ----*/ div.box6recept{ left top no-repeat; width:428px; height:291px; padding-right:10px; } /*---- Box7 ----*/ div.box7{ background:url(/brands/sprookjesboom/images/content/box7.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; margin:0px 12px 10px 0px; } /*---- Box7 theater----*/ div.box7theater{ background:url(/brands/sprookjesboom/images/content/box7theater.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; margin:0px 12px 10px 0px; } /*---- Box7 dvd----*/ div.box7dvd{ background:url(/brands/sprookjesboom/images/content/box7dvd.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; margin:0px 12px 10px 0px; } /*---- Box7 rugzak----*/ div.box7rugzak{ background:url(/brands/sprookjesboom/images/content/box7rugzak.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; margin:0px 12px 10px 0px; } /*---- Box7 lunchbox----*/ div.box7lunchbox{ background:url(/brands/sprookjesboom/images/content/box7lunchbox.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; margin:0px 12px 10px 0px; } /*---- Box7 boek----*/ div.box7boek{ background:url(/brands/sprookjesboom/images/content/box7boek.jpg) left top no-repeat; width:412px; height:295px; padding:26px 0px 0px 14px; margin:0px 12px 10px 0px; } /*---- Box7 webshop single----*/ div.box7single{ left top no-repeat; width:428px; height:291px; padding-right:10px; } /*---- List1 ----*/ ul.list1 li{ margin-bottom:14px; width:100%; overflow:hidden; } ul.list1 li div.image-frame{ float:left; margin:0px 12px 10px 0px ; } ul.list1 li p{ margin-left:166px; } ul.list1 li p span.datestamp{ font-size:80%; display:block; } ul.list1 li p a.more-link{ color:#386d28; } /*---- List2 ----*/ ul.list2 li{background:url(/brands/sprookjesboom/images/content/list2-border.gif) left bottom repeat-x; padding-bottom:12px; margin-bottom:10px; width:100%; overflow:hidden; } ul.list2 li.last{ background:none; } ul.list2 li div.image-frame{ float:left; margin:0px 12px 0px 0px ; } ul.list2 li p{ color:#386d28; font-size:110%; line-height:16px; } ul.list2 li p span.datestamp{ font-size:80%; display:block; } ul.list2 li p a.more-link{ color:#386d28; } /*---- List3 ----*/ ul.list3{ width:100%; overflow:hidden; margin-top:18px; } ul.list3 li { float:left; margin:0 19px 0 0; width:154px; height: 140px; padding-bottom: 14px; } div#content ul.list3 li p{ color:#386d28; margin-bottom:9px; } ul.list3 li p a{ color:#386d28; } /*---- List4 ----*/ ul.list4{ margin-top:30px; } ul.list4 li { float:left; margin:0px 21px 53px 0px; width:172px; } ul.list4 li p{ color:#386d28; } ul.list4 li p a{ color:#386d28; } ul.list4 li.last{ margin-right:0px; } /*---- List1 ----*/ ol.list1{ margin:0px 0px 0px 22px; } ol.list1 li { font-size:110%; line-height:16px; list-style:decimal; color:#386d28; } ol.list1 li a{ text-decoration:underline; color:#386d28; } ol.list1 li a:hover{ text-decoration:none; } /*---- Pagination ----*/ div#pagination{ text-align:center; padding-top:10px; font-size:110%; color:#3e5a1d; } div#pagination a{ text-decoration:underline; } div#pagination span{ color:#3e5a1d; font-size:110%; } div#pagination a.previous{ margin-right:40px; text-decoration:underline; line-height:1.3em; } div#pagination span.previous{ margin-right:40px; text-decoration:none; line-height:1.3em; font-size:100%; } div#pagination a.next{ margin-left:40px; text-decoration:underline; line-height:1.3em; } div#pagination span.next{ margin-left:40px; text-decoration:none; line-height:1.3em; font-size:100%; } div#pagination a:hover { text-decoration:none; } /*------------------------------------------ // 4.1 INDEX PAGE SPECIFIC STYLES //------------------------------------------*/ div#content.home a.get-more{ position:absolute; left:85px; top:365px; width:228px; height:58px; } div#content.home a.get-more:hover{ text-decoration:none; } div#dashboard { clear:both; } div#dashboard div.section div.box1{ float:left; margin-right:16px; } div#dashboard div.section div.box1.last{ margin-right:0px; } /*------------------------------------------ // 6 WAARTEZIEN PAGE SPECIFIC STYLES //------------------------------------------*/ div#content.two-column2 div#sidebar div.box4 h1{ margin-bottom:8px; } div#content.two-column2 div#sidebar div.box4 h1.style1{ margin-bottom:0px; } div#content.two-column2 div#sidebar div.box4 p{ margin-bottom:12px; } div#content.two-column2 div#sidebar div.box4 div.image-frame1 { float:left; margin-right:16px; position:relative; } div#content.two-column2 div#sidebar div.box4 div.image-frame1 img.image1{ margin:3px 0px 0px -12px; position:relative; } div#content.two-column2 div#sidebar div.box4 div.image-frame1 img.image2{ margin:15px 0px 0px -7px; position:relative; } div#content.two-column2 div#sidebar div.box4 ul.list2{ margin:0px 0px 70px 15px ; } div#content.two-column2 div#sidebar div.box4 div.contact p{ margin-bottom:6px; } div#content.two-column2 div#sidebar div.box4 ul.list2{ margin-bottom:0px; } div#content.two-column2 div#sidebar div.box4 ul.list2 li { padding-bottom:5px; } div#content.two-column2 div#sidebar div.box4 div.section1{ margin-right:-20px; position:relative; } div#content.two-column2 div#sidebar div.box4 div.section1 div.image-frame { margin-right:6px; } /*------------------------------------------ // 7 DIGIT PAGE SPECIFIC STYLES //------------------------------------------*/ div#content.two-column1 div#sidebar{ padding-top:10px; } div#content.two-column1 div#sidebar div.box1{ margin-bottom:18px; } div#content.two-column1 img.pic{ position:absolute; bottom:0px; right:130px; } /*---- Main - Download Section ----*/ div#content.two-column1 div#main div.section#download { padding:39px 0px 9px; margin-bottom:18px; background:url(/brands/sprookjesboom/images/content/list2-border.gif) left bottom repeat-x; } div#content.two-column1 div#main div.section#download div.box5{ float:left; margin-right:12px; } div#content.two-column1 div#main div.section#download div.box5 ul{ margin-bottom:22px; } div#content.two-column1 div#main div.section#download div.box5 ul li{ float:left; margin:0px 2px; } div#content.two-column1 div#main div.section#download div.box5 p{ font-size:220%; font-weight:bold; color:#fff; line-height:16px; font-family:Garamond, Georgia, "Times New Roman", Times, serif; margin-bottom:24px; } div#content.two-column1 div#main div.section#download p { margin-bottom:4px; } div#content.two-column1 div#main div.section#download p a{ color:#386d28; text-decoration:underline; } div#content.two-column1 div#main div.section#download p a:hover{ text-decoration:none; } /*------------------------------------------ // 8 KARAKTERS PAGE SPECIFIC STYLES //------------------------------------------*/ div#content div.box2 h1{ margin-bottom:54px; } div#content div.box2 img{ float:right; margin:0px; } div#content div.box2 div.image-frame{ position:relative; } div#content div.box2 div.image-frame div.info1 img , div#content div.box2 div.image-frame div.info img { margin-top:-6px; position:relative; } div#content div.box2 ul { margin-bottom:30px; } div#content div.box2 ul li{ font-size:110%; color:#386d28; line-height:16px; margin-bottom:16px; } div#content div.box2 div.section { margin:20px -11px -11px; position:absolute; bottom: 17px; } div#content div.box2 div.section div.image-frame{ margin:0px 3px; } /*---- List4 ----*/ ul.list4 li.kabouters div.image-frame3 img{ margin-top:-25px; position:relative; } ul.list4 li.benjamin div.image-frame3 img{ margin-top:-33px; position:relative; } ul.list4 li.ezel , ul.list4 li.benjamin , ul.list4 li.kabouters{ margin-bottom:28px; } ul.list4 li.ezel div.image-frame3 img{ margin-top:-30px; position:relative; } ul.list4 li.fakir div.image-frame3 img{ margin-top:0px; position:relative; } ul.list4 li.reus div.image-frame3 img{ margin-top:-35px; position:relative; } ul.list4 li.klein div.image-frame3 img{ margin-top:-19px; position:relative; } ul.list4 li.langnek div.image-frame3 img{ margin-top:-57px; position:relative; } ul.list4 li.assepoester div.image-frame3 img{ margin-top:-34px; position:relative; } ul.list4 li.heks div.image-frame3 img{ margin-top:-42px; position:relative; } ul.list4 li.draak div.image-frame3 img{ margin-top:-44px; position:relative; } ul.list4 li.wolf div.image-frame3 img{ margin-top:-23px; position:relative; } ul.list4 li.roodkapje div.image-frame3 img{ margin-top:-21px; position:relative; } ul.list4 li.sprookjesboom div.image-frame3 img{ margin-top:0px; position:relative; } /*------------------------------------------ // 9 NEWS PAGE SPECIFIC STYLES //------------------------------------------*/ /*---- Sidebar - Action Form ----*/ div#content.two-column2 div#sidebar div.box4#action-form h1{ margin-bottom:0px; } div#content.two-column2 div#sidebar div.box4#action-form p{ margin-bottom:10px; } div#content.two-column2 div#sidebar div.box4#action-form table{ width:100%; } div#content.two-column2 div#sidebar div.box4#action-form table td {padding:5px 0px; font-size:110%; color:#386d28; line-height:16px; } div#content.two-column2 div#sidebar div.box4#action-form table td a { text-decoration:underline; color:#386d28; } div#content.two-column2 div#sidebar div.box4#action-form table td a:hover { text-decoration:none; } div#content.two-column2 p.back{ margin-bottom:0px; } div#content.two-column2 div#sidebar div.box4#action-form table td label{ display:block; line-height:16px; } div#content.two-column2 div#sidebar div.box4#action-form table td label.error{ color: #f00; } div#content.two-column2 div#sidebar div.box4#action-form table td textarea{ width:194px; border:1px solid #000; padding:5px; } div#content.two-column2 div#sidebar div.box4#action-form table td input.textbox{ width:194px; border:1px solid #000; padding:3px 5px; } input.file_1{ border:1px solid #000; } div#content .color1{ color:#386d28; } /*------------------------------------------ // 9 PRODUCT PAGE SPECIFIC STYLES //------------------------------------------*/ div#sidebar div.box1 h1 { margin-bottom:0px; } ul.list3 div.image-frame2{ float:left; } ul.list3 div.image-frame2 img.korning , ul.list3 div.image-frame2 img.new{ position:absolute; right:6px; top:5px; } /*---- List5 ----*/ ul.list5 { margin-bottom:53px; } ul.list5 li a.play{ background:url(/brands/sprookjesboom/images/content/play-btn.gif) left top no-repeat; display:block; height:18px; width:18px; float:left; text-decoration:none !important; } ul.list5 li a.stop{ background:url(/brands/sprookjesboom/images/content/stop-btn.gif) left top no-repeat; display:block; height:18px; width:18px; float:left; text-decoration:none !important; } ul.list5 li span.title{ background:url(/brands/sprookjesboom/images/content/title-box.gif) left top no-repeat; display:block; height:18px; width:180px; float:left; font-size:90%; color:#6c8a1e; line-height:16px; padding:0px 5px; } ul.list5 li a:hover{ text-decoration:none;} div#gallery { float:left; margin-right:14px; } div#gallery div.image-frame{ margin-bottom:22px; } div#main div.inner-main ul.list2 li p{ margin-bottom:0px; } /*------------------------------------------ // 10 ADDED BY THEO - COLOURS BV - 02-03-2010 //------------------------------------------*/ div #content #download span.downloadlink { padding-right: 10px;} /*---- Broadcast schedule ----*/ span.broadcastinfo { float: left; margin-bottom: 12px; color:#386d28; line-height: 16px; font-size: 110%; } img.broadcaststation { float: right;} div.overviewlink { margin-top: 10px; position: relative; } div.overviewlink a { float: right; font-weight: bold; color:#386d28; font-size: 1.2em; margin-right: 22px; }