/* CREDITS * ---------------------------------------------------------- * Title: Paintball Events - CSS Main Stylesheet * Author: David Candreva * Date: 14/05/09 * Last Edit: 15/05/09 David Candreva * ---------------------------------------------------------- * Inventis - Web Architects - We design the Web! * www.inventis.be */ /* Algemene Stylesz ---------------------------------------------------------- */ textarea, body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } body{ color:#FFF; background:#000 url(../images/layout/elements/body/tile.png) repeat-x center 158px; } /*default elements*/ strong, b{ font-weight:bold; } em{ font-style:italic; } abbr, acronym{ cursor:help; } .clear{ clear:both; } a{ text-decoration:none; } a:focus{ outline:none; } a:hover{text-decoration:none; } .np{ padding:0 !important; } /* Container ---------------------------------------------------------- */ div#container{ width:948px; margin:0 auto; position:relative; } /* bloodsplash */ span.bloodsplash{ width:72px; height:123px; display:block; position:absolute; top:350px; right:0; background:url(../images/layout/elements/bloodsplash.png) no-repeat 0 0; } /* Header ---------------------------------------------------------- */ div#header{ height:391px; background:url(../images/layout/elements/header/background.png) no-repeat 0 0;} div#header a.headername{ position:absolute; left:365px; top:0px; height:90px; width:210px; display:block; } /* navigation */ div#header ul.navigation{ position:absolute; left:28px; top:99px; } div#header ul.navigation li{ float:left; } div#header ul.navigation li a{ display:block; height:39px; text-indent:-9000px; background:url(../images/layout/elements/header/navigation/background.png) no-repeat 0 0; } div#header ul.navigation li a.activities{ width:116px; } div#header ul.navigation li a.media{ width:156px; background-position:-116px 0; } div#header ul.navigation li a.info{ width:172px; background-position:-272px 0; } div#header ul.navigation li a.news { width:160px; background-position:-444px 0; } div#header ul.navigation li a.prices{ width:99px; background-position:-604px 0; } div#header ul.navigation li a.forum{ width:96px; background-position:-703px 0; } div#header ul.navigation li a.contact{ width:94px; background-position:-799px 0; } div#header ul.navigation li a.activities:hover, div#header ul.navigation li.active a.activities{ background-position:0 -39px; } div#header ul.navigation li a.media:hover, div#header ul.navigation li.active a.media{ background-position:-116px -39px; } div#header ul.navigation li a.info:hover, div#header ul.navigation li.active a.info{ background-position:-272px -39px; } div#header ul.navigation li a.news:hover, div#header ul.navigation li.active a.news{ background-position:-444px -39px; } div#header ul.navigation li a.prices:hover, div#header ul.navigation li.active a.prices{ background-position:-604px -39px; } div#header ul.navigation li a.forum:hover, div#header ul.navigation li.active a.forum{ background-position:-703px -39px; } div#header ul.navigation li a.contact:hover, div#header ul.navigation li.active a.contact{ background-position:-799px -39px; } /* news */ div#header div.news{ width:355px; position:absolute; top:224px; left:88px; } div#header div.news h2{ font-size:16px; line-height:16px; float:left; display:block; width:315px; } div#header div.news em{ background:#c1322b; font-size:10px; font-style:normal; margin:2px 5px 0 0; padding:2px 4px; float:left; } div#header div.news div.content{ line-height:18px; padding:0 0 20px 0; clear:both; } div#header div.news a.more{ padding:0 0 0 16px; color:#FFF; position:absolute; bottom:0; right:0; font-size:10px; background:url(../images/layout/elements/header/news/more.png) no-repeat 0 center; } /* Breadcrumb ---------------------------------------------------------- */ div#breadcrumb{ height:50px; background:url(../images/layout/elements/breadcrumb/background.png) no-repeat 25px 0; } div#breadcrumb ol{ padding:0 0 0 45px; line-height:40px; } div#breadcrumb ol li{ font-size:14px; font-weight:bold; float:left; color:#c1322b; margin:0 9px 0 0; } div#breadcrumb ol li a{ padding:0 17px 0 0; color:#65743b; text-decoration:none; background:url(../images/layout/elements/breadcrumb/seperator.png) no-repeat right center; } /* Content ---------------------------------------------------------- */ div#content{ margin:0 0 0 27px; padding:15px 0 0 31px; width:867px; min-height:400px; height:auto !important; height:370px; background:#262e23 url(../images/layout/elements/content/tile.png) no-repeat 0 0; } /* buttons */ div#content div.buttons{ float:left; width:116px; } div#content div.buttons a.btn_paintball{ width:116px; height:114px; display:block; text-indent:-9000px; background:url(../images/layout/elements/content/buttons/button_paintball.png) no-repeat 0 0; } div#content div.buttons a.btn_paintball:hover{ background-position:left bottom; } div#content div.buttons a.btn_vrijgezellen{ width:116px; height:120px; display:block; text-indent:-9000px; background:url(../images/layout/elements/content/buttons/button_vrijgezellen.png) no-repeat 0 0; } div#content div.buttons a.btn_vrijgezellen:hover{ background-position:left bottom; } div#content div.buttons a.btn_adventure{ width:116px; height:114px; display:block; text-indent:-9000px; background:url(../images/layout/elements/content/buttons/button_adventure.png) no-repeat 0 0; } div#content div.buttons a.btn_adventure:hover{ background-position:left bottom; } /* markup */ div#content div.markup{ line-height:18px; color:#f5fbd5; } div#content div.markup h1{ color:#6e7f3d; font-size:21px; padding:8px 0 0 0; } div#content div.markup h2{ margin-top:15px; } div#content div.markup p{ margin:7px 0; } div#content div.markup a{ color:#bf332b; text-decoration:underline; } div#content div.markup ul{ clear:both;} /*div#content div.markup ul li a{ color:#f5fbd5; text-decoration:none; }*/ /*div#content div.markup ul li {margin-left:25px; list-style:square;}*/ div#content div.markup div.image{ width:209px; /*height:130px;*/ margin:7px 0; padding:7px 0 7px 0; background:url(../images/layout/elements/content/markup/image_background_2.png) 0 0; } div#content div.markup div.image img{ margin:0 auto; display:block; border:1px solid #25291b; } div#content div.markup div.map{ margin:20px 0 7px 0; padding:7px; background:url(../images/layout/elements/content/markup/image_background_2.png) 0 0; } div#content div.markup div#gmap{ width:634px; height:400px; margin:0 auto; display:block; border:1px solid #25291b; overflow:hidden; } div#content a.more{ float:right; padding:0 0 0 16px; color:#FFF; font-size:10px; background:url(../images/layout/elements/header/news/more.png) no-repeat 0 center; } /* content small */ div#content div.content_small{ float:left; width:220px; padding:0 30px 0 60px; background:url(../images/layout/elements/content/buttons/line.png) repeat-y 30px 0; } /* content big */ div#content div.content_big{ float:left; width:650px; padding:0 30px 0 60px; background:url(../images/layout/elements/content/buttons/line.png) repeat-y 30px 0; } /* introduction */ div#content div.introduction{ position:relative; width:415px; height:317px; float:left; background:url(../images/layout/elements/content/introduction_background.png) no-repeat 0 0; } div#content div.introduction p{ position:absolute; line-height:18px; left:18px; bottom:22px; color:#f5fbd5; font-weight:bold; width:360px; } /* nieuwsbrief */ div#nieuwsbrief{position:relative; width:415px; float:right; margin:10px 10px 0px 0px; } div#nieuwsbrief label{ line-height:18px; padding-bottom:2px; margin:0px; color:#F5FBD5; font-weight:bold; font-size:14px; } div#nieuwsbrief input{ margin:4px 0 0 0; float:left; color:#F5FBD5; width:200px; padding:2px; background:#455525; border:1px solid #4d7020; } div#nieuwsbrief input:focus{ border:1px solid #68a00d; } div#nieuwsbrief span.error{color:#B33125; clear:both; width:380px; float:left; display:block; padding:0 0 0 18px; font-size:11px; background:url(../images/layout/icon_error.gif) no-repeat 0 0; } div#nieuwsbrief button{ float:left; margin: 3px 0 0 4px; cursor:pointer; border:0; padding:0; width:80px; height:25px; text-indent:-9000px; background:url(../images/layout/elements/content/forms/send.png) no-repeat 0 0; } div#nieuwsbrief button:hover{ background-position:left bottom; } /* product detail */ ul.product_detail{ padding:0 0 0 14px; } ul.product_detail li{ padding:0 0 0 13px; background:url(../images/layout/elements/content/markup/bullet.png) no-repeat 0 5px; } ul.product_detail li h3{ color:#c1322b; display:inline; } /* pagination */ div#content div.pagination{ text-align:center; } div#content div.pagination table a{ text-decoration:none; color:#97b477; } div#content div.pagination table td{ font-size:11px; padding:0 8px; line-height:25px; background:url(../images/layout/elements/content/pagination/tile.png) repeat-x 0 0; } div#content div.pagination table td.first{ color:#40581f; padding:0 13px; background:url(../images/layout/elements/content/pagination/background.png) no-repeat left 0; } div#content div.pagination table td.active{ background:url(../images/layout/elements/content/pagination/active.png) repeat-x 0 0; } div#content div.pagination table td.active a{ color:#FFF; } div#content div.pagination table td a:hover{ color:#FFF; } div#content div.pagination table td.last{ color:#40581f; display:block; height:25px; padding:0 13px; background:url(../images/layout/elements/content/pagination/background.png) no-repeat right 0; } div#content div.pagination table td.last a{ padding:0; } /* address */ div.two_col div.second address{ padding:7px 0 0 7px; } /* media */ div#content div.markup ul.media li{ list-style-type:none; list-style-image:none; margin-left:0px; } ul.media{ width:100%; clear:both; overflow:hidden; } ul.media li{ float:left; margin:15px; position:relative; width:140px; height:170px; background:url(../images/layout/elements/content/media/background.png) no-repeat 0 0; } ul.media#detail li{ float:left; position:relative; width:140px; height:140px; background:url(../images/layout/elements/content/media/background_2.png) no-repeat 0 0; } ul.media li h3{ display:block; width:100%; position:absolute; bottom:10px; text-align:center; left:0; } ul.media li em{ background:#c1322b; font-style:normal; font-size:10px; padding:1px 4px; position:absolute; top:7px; left:7px; } ul.media li img{ margin:3px 0 0 3px; } ul.media li.first{ margin-left:0; } ul.media li.last{ margin-right:0; } /* detail_list */ div#content div.detail_list{ padding:5px 0 0 0; } div#content div.detail_list div.entry{ width:100%; clear:both; overflow:hidden; background:url(../images/layout/elements/content/detail_list/tile.png) no-repeat left bottom; padding-bottom:25px; margin-bottom:25px; } div#content div.detail_list div.content{ width:415px; float:left; padding:0 25px 0 0; } div#content div.detail_list div.content em{ background:#c1322b; font-size:10px; font-style:normal; margin:2px 5px 0 0; padding:0px 4px; float:left; } div#content div.detail_list div.content h2{ float:left; width:370px; margin:2px 0 0 0; } div#content div.detail_list div.content div.text{ clear:both; } div#content div.detail_list div.content ul.details{ padding:0 0 0 5px; } div#content div.detail_list div.content ul.details li{ padding:0 0 0 13px; background:url(../images/layout/elements/content/markup/bullet.png) no-repeat 0 5px; } div#content div.detail_list div.content ul.details li strong{ color:#c1322b; } div#content div.detail_list div.image_holder{ float:left; } /* two_col */ div.two_col{ width:100%; } div.two_col div.col{ float:left; } div.two_col div.first{ width:415px; overflow:hidden; } div.two_col div.second{ padding:0 0 0 25px; overflow:hidden; } /* Forms ---------------------------------------------------------- */ form.default{ width:100%; padding:20px 0 0 0; } /* fieldset */ form.default fieldset{ } form.default fieldset legend{ border:1px solid black; } /* entry */ form.default div.entry{ clear:both; /*overflow:hidden;*/ margin:0 0 10px; padding:0 5px 0 0; } /* error */ form.default div.error{ } form.default span.error{ color:#B33125; float:right; display:block; line-height:18px; padding:0 0 0 18px; font-size:11px; background:url(../images/layout/icon_error.gif) no-repeat 0 0; } /* text */ form.default div.text label{ line-height:18px; float:left; padding-bottom:2px; } form.default div.text input{ color:#F5FBD5; width:98%; padding:5px 4px; background:#455525; border:1px solid #4d7020; } form.default div.text input:focus{ border:1px solid #68a00d; } form.default div.text div{ width:100%; clear:both; } form.default div.text input.small{ width:25%; } /* textarea */ /*form.default div.textarea label{ clear:both; line-height:18px; display:block; padding-bottom:2px; }*/ form.default div.textarea label{ line-height:18px; float:left; padding-bottom:2px; } form.default div.textarea textarea{ padding:5px 4px; color:#F5FBD5; width:98%; background:#455525; border:1px solid #4d7020; } form.default div.textarea textarea:focus{ border:1px solid #68a00d; } /* radiobutton */ form.default div.radio label{ float:left; } form.default div.radio div{ width:100%; display:block; clear:both; } form.default div.radio div label{ float:none; width:100%; display:block; } form.default div.radio div div.hidden_options{ padding:5px 0 5px 45px; display:none; } /* checkbox */ form.default div.checkbox label{ float:left; } form.default div.checkbox div{ width:100%; display:block; clear:both; } form.default div.checkbox div label{ float:none; width:100%; display:block; } /* select */ form.default div.select select{ clear:both; display:block; } form.default div.select label{ display:block; float:left; } /* button */ form.default div.button{ text-align:right; } form.default div.button button{ cursor:pointer; border:0; padding:0; } form.default div.button button.frm_send{ width:80px; height:25px; text-indent:-9000px; background:url(../images/layout/elements/content/forms/send.png) no-repeat 0 0; } form.default div.button button.frm_send:hover{ background-position:left bottom; } /* Footer ---------------------------------------------------------- */ div#footer{ position:relative; height:221px; background:url(../images/layout/elements/footer/background.png) no-repeat 0 0; } /* credits */ div#footer a#inventis{ position:absolute; top:26px; right:30px; width:68px; height:18px; display:block; text-indent:-9000px; overflow:hidden; background:url(../images/layout/elements/footer/inventis.png) no-repeat 0 0; } div#footer a#inventis:hover{ background-position:left bottom; } /* address */ div#footer address{ position:absolute; left:71px; top:29px; font-size:11px; color:#97b477; } div#footer address br{ display:none; } div#footer address span{ margin-right:11px; } div#footer address span a{ color:#97b477; text-decoration:none; }