/* ----------------------------------------------------------------------- Auteur: Marnix van der Heide // Peter van Wees Datum: 17-06-2008 Laatst gewijzigd: 02-07-2008 Filename: basis.css Doel: basisbestand voor css Copyright: (C) SkeletonSport.com 2008 Versie: 1.1.0 ----------------------------------------------------------------------- Opmerkingen: CSS Bestand voor de websites skeletonsport.com, bobsleighsport.com en lugesport.com. De website kan worden weergegeven in de volgende kleurstellingen (oproepen via ): scheme1 = blauw scheme2 = rood scheme3 = groen ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- Basisgegevens van de website ----------------------------------------------------------------------- */ body { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; margin: 0px; background: url(../images/main_bg.jpg) #888888 repeat-x 0px 0px; font-size: 90%; text-align: center; font-family: arial,sans-serif; font-size:9pt; } html { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; background: url(../images/main_bg.jpg) #888888 repeat-x 0px 0px; font-size: 90%; text-align: center; font-family: arial,sans-serif; font-size:9pt; } h1{ font-family: "century gothic", arial, sans-serif; font-size: 18px; white-space: nowrap; font-weight: bold; margin: 0 0 10px 0; } .scheme2 h1{ color:#851718; } .scheme3 h1{ color:#054a07; } .scheme1 h1{ color:#3c4d61; } h2{ font-family: arial, sans-serif; font-size: 12px; white-space: nowrap; font-weight: bold; margin: 0 0 10px 0; } h4{ font-family: arial, sans-serif; font-size: 13px; white-space: nowrap; font-weight: bold; margin: 0 0 10px 0; } img { display: block; border: 0; } hr{ background: url(../images/line.jpg); width:450px; } input, .ins, .insearch, .ind, .inm, .inl, .inusr, .inpass{ border: 1px solid #a9a9a9; margin-bottom: 2px; background-color: #ffffff; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 11px; } /* ----------------------------------------------------------------------- Structuur van de website ----------------------------------------------------------------------- */ #container { background: url(../images/container_repeat.jpg) repeat-y 0px; margin: 0px auto; width: 1020px; POSITION: relative; HEIGHT: auto; } #top_bg { background: url(../images/container_top.jpg) no-repeat 0px 0px; width: 1020px; position: relative; HEIGHT: 133px; } #header { margin: 0px auto; width: 100%; POSITION: relative; height: 85px; width:300px; top: 14px; left: 20px; float:left; } .scheme1 #header{ background: url(../images/Skeleton.jpg) no-repeat center top; } .scheme2 #header{ background: url(../images/Bobsleighsport.jpg) no-repeat center top; } .scheme3 #header{ background: url(../images/Lugesport.jpg) no-repeat center top; } #adv_container { margin: auto; width: 100%; POSITION: relative; height: 60px; width:468px; top: 29px; left: 200px; float:left; } #content { FLOAT: left; margin: 0px; width: 500px; POSITION: relative; HEIGHT: auto } #footer { clear: both; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; padding-top: 50px; font-family: "century gothic"; color:#FFFFFF; font-size:10px; BACKGROUND: url(../images/container_bottom.jpg) no-repeat left bottom; height: 0px; TEXT-ALIGN: center } .scheme1 #footer a{ text-decoration:none; color:#ffffff; } .scheme2 #footer a{ text-decoration:none; color:#ffffff; } .scheme3 #footer a{ text-decoration:none; color:#ffffff; } .scheme1 #footer a:hover{ text-decoration:underline; } .scheme2 #footer a:hover{ text-decoration:underline; } .scheme3 #footer a:hover{ text-decoration:underline; } /* ----------------------------------------------------------------------- Site linkbalk ----------------------------------------------------------------------- */ fieldset { border: none; padding: 0; margin: 0; } #top { position:relative; top: 28px; height: 34px; font-size: 0; /* IE */ } #linkNav { margin: 0 auto; width: 980px; height: 20px; overflow: hidden; } #linkNav ul { margin: 0 10px 0 0; padding: 0; float: right; list-style: none; } #linkNav ul li { float: left; } #linkNav ul li a { display: block; width: 148px; height: 20px; margin-left: -20px; background-repeat: no-repeat; } #linkNav ul li a span { display: none; } #linkNav ul li a.skeleton_nav { background-image: url(../images/nav/skeletonsport.gif); } #linkNav ul li a.bobsleighsport_nav { background-image: url(../images/nav/bobsleighsport.gif); } #linkNav ul li a.lugesport_nav { background-image: url(../images/nav/lugesport.gif); } #linkNav ul li a:hover { background-position: 0 -20px; } #linkNav ul li a.active { background-position: 0 0px; } #linkNav ul li a.active:hover { background-position: 0 -20px; } /* ----------------------------------------------------------------------- Searchbalk ----------------------------------------------------------------------- */ #searchbox { float: right; height: 33px; width: 160px; padding: 1px; margin: 0px 18px 0 0; position: relative; } #searchbox input.text { width: 75px; height: 16px; padding: 0px 3px; vertical-align: top; color: #ffffff; background-color: transparent; font-family: Tahoma, Helvetica, sans-serif; font-size: 9pt; border: 1px solid #787878; } #searchbox input.submit { left: 0px; top: 2px; right: 0; width: 16px; height: 18px; padding: 0px 0px; margin-top:1px } /* ----------------------------------------------------------------------- Menu ----------------------------------------------------------------------- */ #menu { width: 1020px; height: 33px; background:url(../images/menu.jpg) } .menustart { width: 40px; height: 33px; float:left; } .insitemenu{ font-family: "century gothic"; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; list-style-type: none; padding: 0px; margin: 0px; float:left } .insitemenu ul{ margin: 0; padding: 0; position:absolute; } .insitemenu ul li{ display: inline; list-style-type: none; padding: 0; margin: 0; } .insitemenu ul li a{ float: left; color: #FFFFFF; text-decoration: none; font-family: "century gothic"; width: 80px; height: 33px; line-height: 22px; background-repeat: no-repeat; } .insitemenu .hr { width: 2px; height: 33px; margin-top:auto; float:left; border:0; background-repeat: no-repeat; background:url(../images/stripe.jpg) } /* Kleur schema afhankelijk, zie ook opmerkingen bovenaan */ .scheme1 #menu{background-position:0px 0px} .scheme2 #menu{background-position:0px -48px} .scheme3 #menu{background-position:0px -96px} /* Kleur schema afhankelijk, zie ook opmerkingen bovenaan */ .scheme1 .insitemenu ul li a{ background-image: url(../images/menu_blue.jpg);} .scheme2 .insitemenu ul li a{ background-image: url(../images/menu_red.jpg);} .scheme3 .insitemenu ul li a{ background-image: url(../images/menu_green.jpg);} .scheme1 .insitemenu .hr{ background-position:0px 0px} .scheme2 .insitemenu .hr{ background-position:0px -33px} .scheme3 .insitemenu .hr{ background-position:0px -66px} #menu ul li a:hover { background-position: 0 -33px; text-decoration:underline; } #menu ul li a.active { background-position: 0 -0px; } #menu ul li a.active:hover { background-position: 0 -33px; } /* ----------------------------------------------------------------------- Containers ----------------------------------------------------------------------- */ /* The linker container */ #globalcontentleft{ width:210px; float:left; overflow:hidden; position:relative; top:0px; left:40px; z-index:10000; margin:0px 0px 0px 0px; } /* De rechter container */ #globalcontentright{ width:210px; float:right; overflow:hidden; position:relative; top:0px; right:40px; z-index:10000; margin:0px 0px 0px 0px; } /* De middelste container */ #globalcontentmiddle{ width:480px; float:left; overflow:hidden; position:relative; top:0px; left:60px; right:20px; z-index:10000; margin:3px 10px 10px 3px; } /* De grootste container */ #globalcontentbig{ width:708px; float:left; overflow:hidden; position:relative; top:0px; left:60px; right:20px; z-index:10000; margin:3px 0px 0px 0px; } /* De boxafbeelding */ .cbar .boxtop, .cbar .box, .cbar .boxbottom{ background-image: url(../images/box.jpg); } .cbar_big .boxtop, .cbar_big .box, .cbar_big .boxbottom{ background-image: url(../images/box_big.jpg); } .cbar_biggest .boxtop, .cbar_biggest .box, .cbar_biggest .boxbottom{ background-image: url(../images/box_biggest.jpg); } /* De box */ .cbar .box { background-position: 0px 0px; text-align:left; padding:2px 8px 0px 8px; } .cbar .boxbottom{ background-position:210px -20px; height:29px; width:210px; overflow:hidden; margin-bottom: 3px; position: relative; top: -12px; } .cbar .boxtop{ background-position:210px -0px; height:10px; width:210px; overflow:hidden; margin-top:3px; } .cbar_big .box { width:480px; background-position: 0px 0px; text-align:left; padding:0px 0px 0px 8px; } .cbar_big .boxbottom{ background-position: 480px -20px; height:29px; overflow:hidden; margin-bottom: 3px; position: relative; top: 0px; } .cbar_big .boxtop{ width:480px; background-position: 480px 0px; height:9px; overflow:hidden; margin-top:3px; } .cbar_biggest .box { width:710px; background-position: 0px 0px; text-align:left; padding:2px 2px 0px 8px; } .cbar_biggest .boxbottom{ background-position:708px -20px; height:29px; overflow:hidden; margin-bottom: 3px; position: relative; top: 0px; } .cbar_biggest .boxtop{ width:710px; background-position: 708px 0px; height:9px; overflow:hidden; margin-top:3px; } /* ----------------------------------------------------------------------- Labels ----------------------------------------------------------------------- */ .labeltop_dark{ font-family: "century gothic"; font-weight:bold; color:#FFFFFF; font-size:14px; position:static; display:block; height: 20px; width: 188px; padding: 3px; margin: 0px 1px; background:url(../images/box_button_dark.jpg); } .labeltop_light{ font-family: "century gothic"; font-weight:bold; color:#FFFFFF; font-size:14px; position:static; display:block; height: 20px; width: 188px; padding: 3px; margin: 0px 1px; background:url(../images/box_button_light.jpg); } .labeltop_dark a, .labeltop_light a{ text-decoration:none; color:#FFFFFF; } .labeltop_dark a, .labeltop_light a:hover{ text-decoration:underline; } .scheme1 .labeltop_dark{ background-position:0px 0px; } .scheme2 .labeltop_dark{ background-position:0px -26px; } .scheme3 .labeltop_dark{ background-position:0px -52px; } .scheme1 .labeltop_light{ background-position:0px 0px; } .scheme2 .labeltop_light{ background-position:0px -26px; } .scheme3 .labeltop_light{ background-position:0px -52px; } .labelcontent{ font-family: arial,sans-serif; font-size: 11px; position:static; display:block; width: 190px; background: url(../images/menu_label.jpg); background-repeat: no-repeat; background-position: bottom left; padding: 4px; margin: 0px 1px 12px; } .labelcontent ul { list-style: none; margin: 0 0 0 0; padding: 0 0 0 0; text-align: left; border: 0; } .labelcontent ul li img{ display: block; float: left; margin: 3px 3px 3px 3px; } .labelcontent ul li { padding: 0 0 0 0; margin: 0 0 0 0; line-height:18px; } .labelcontent ul li a { color:#1e1e1e; display: block; margin: 0 0 0 0; padding: 0 0 0 0; font-size: 11px; line-height: 15px; height:15px; overflow: hidden; white-space: nowrap; text-decoration:none; } .labelcontent ul li a:hover { text-decoration: underline; } .scheme1 .labelcontent ul li a:visited { color: #00126b; } .scheme2 .labelcontent ul li a:visited { color: #6b0000; } .scheme3 .labelcontent ul li a:visited { color: #196b00; } /* ----------------------------------------------------------------------- Content ----------------------------------------------------------------------- */ .cbar_big .content{ width:450px; } .cbar_biggest .content{ width:690px; } .content p.info, .content p.info a { font-size: 11px; color: #6e6e6e; text-decoration: none; line-height: 3px; margin-top:2px; margin-bottom:4px; } .content p.info a:hover { text-decoration: underline; } .scheme1 .content a:active, .scheme1 .content a:focus, .scheme1 .content a:link, .scheme1 .content a:visited{ color: #163ba6; text-decoration: none; } .scheme2 .content a:active, .scheme2 .content a:focus, .scheme2 .content a:link, .scheme2 .content a:visited{ color: #a61616; text-decoration: none; } .scheme3 .content a:active, .scheme3 .content a:focus, .scheme3 .content a:link, .scheme3 .content a:visited{ color: #2ea616; text-decoration: none; } .scheme1 .content a:hover, .scheme2 .content a:hover, .scheme3 .content a:hover{ color: #303030; text-decoration: underline; cursor: pointer; } p.line { background:url(../images/line.jpg); width:450px; height:1px; margin-top:0px; margin-bottom:8px; background-repeat:repeat-x; } .splash{ width: 450px; height: 120px; margin: 0px 10px 10px 0px; } .splash p{ line-height: 1.1em; text-align: left; margin: 10px 10px 10px 10px; padding: 0 10px 0 0; } .splash p img{ margin: 3px 3px 3px 3px; float: left; border: 1px solid #000000; } .splash h4{ margin: 0 0 5px 10px; padding: 0 0 0 0; line-height: 0.8em; } #globalcontentright p.line { background:url(../images/line_small.jpg); width:180px; height:1px; margin-top:0px; margin-bottom:8px; background-repeat:repeat-x; } #globalcontentright .splash{ width: 190px; height: auto; margin: 0 10px 10px 0; } #globalcontentright .splash p{ line-height: 1.1em; text-align: left; margin: 0 0 0 10px; padding: 0 0 0 0; } #globalcontentright .splash p img{ margin: 3px 3px 3px 3px; border: 1px solid #000000; } #globalcontentright .splash h4{ margin: 0 0 5px 10px; padding: 0 0 0 0; line-height: 0.8em; } /* */ #globalcontentright .maintable{ width:200px; float:none; } /* ----------------------------------------------------------------------- Tabel overgenomen uit vorige css nb Dit heb ik moeten doen omdat de opmaakwaardes reeds aanwezig zijn in de database Peter : aangepast maintable switch op cbar_big(gest) gaat nog wat vreemd met tables in tables ----------------------------------------------------------------------- */ .cbar_big.maintable{ width:450px; } .cbar_biggest.maintable {width:630px; } .maintable { background-color: white; padding : 0px 0px 0px 0px; margin : 0px 5px 10px 1px; border-left : 0px; border-top : 0px; border-right : 0px; border-bottom : 0px; } /*fix for personal page on IE5*/ .maintable table{ font-size: 1em; line-height: 1em; } .maintable th{ height: 12px; font-size: 12px; font-weight: bold; color: #3c4d61; line-height: 14px; } .maintable .podium{ background-image: url(/images/bgd.jpg); } .maintable th a, .maintable th a:hover{ color : #FFFFFF; font-weight : bold; font-variant : small-caps; } .maintable th img{ display: inline; } .maintable tr img{ display: inline; } .tdo td{ background-color: #EFEFEF; background-image: url(/img/tableodd.gif); } .tde td{ background-color: #DEDEDE; background-image: url(/img/tableeven.gif); } /* ----------------------------------------------------------------------- Afbeelding overgenomen uit vorige css. ----------------------------------------------------------------------- */ #imgs a{ float: left; width: 100px; height: 100px; display: inline; margin: 5px 5px 0px 0px; padding: 0px 0px 0px 0px; border: 1px solid #000000; overflow: hidden; background-color: #FFFFFF; } #imgs a:hover{ background-color: #DBE0EE; border: 1px solid #000000; } #imgs a img{ left:50%; top: 50%; margin: 0px auto; }