|
Clone Information
|
@charset "utf-8"; / CSS master / @import url("containers.css"); @import url("typography.css"); http://www.guinness.de/css/scratchandwin/containers.css @charset "utf-8"; / containers.css Kilkenny
CONTENT: General MIR Imagereplacement Clearfix Main Containers Logo Usabilitybuttons Forms Paginator Footer / / General / / ========================================== / { ul { list-style:none; display:block; } li { display:block;} / MIR Imagereplacement / / ========================================== / .mir { letter-spacing : 10em; text-indent: -1000em; } / Be nice to Opera, but hide from MacIE. Thanks to Robert Jan Verkade (http://www.eend.nl) for the MacIE fix. / /\/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;} / Clearfix / / ========================================== / .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix { display: inline-block;} htmlxmlns .clearfix { display: block;} html .clearfix { height: 1%;} / Main Containers with an example for Mediaqueries inside the CSS-file / / ========================================== / / for Phone / @media only screen and (min-width: 1px) and (max-width: 480px) {
width: 100%; }
padding-top:20px; } / Background / / ========================================== / .bg_00, .bg_01, .bg_02 { background:none; } .bg_mobile { display:block; float:left; width:100%; } / Content / / ========================================== / .bg_01 #preise, .bg_02 #preise{display:none;} .aktion {display:block; float:left; color:#fff; font-weight:bold; width:100%; padding:10px 0; background:#e20000; margin-bottom:20px; text-align:center;}
margin:20px; } .contentbg_top, .contentbg_bottom {display:none;} .contentbg_middle {padding:20px; -moz-border-radius:8em; -webkit-border-radius:8px; border-radius:8px; margin-bottom:20px;} / Forms / / ========================================== / span.code {margin:12px auto; width:18%;} input.code01 {/width:80px;/ width:30%; float:left;} input.code02 {/width:115px;/ width:50%; float:right;} input {height:30px;} input.submit, a.submit {display:block; float:left; width:100%; border-radius:5px; margin-top:20px; background-color:#fff;} input.ort {width:65%; text-align:left; float:left;} / Links / / ========================================== / span.text {min-width:158px; max-width:348px;} .navi_link li a {margin:0 0 10px 0;} .bg_02 .navi_link {margin:20px 0 0 20px; width:auto;} / Scrollbar / / ========================================== / .scrollbox {display:block; float:left; width:100%;} / Footer / / ========================================== / .sponsor {margin-left:20px;} .footer {display:block; float:left; margin:20px;} .footer ul {float:left; width:100%; margin-bottom:10px;} .footer ul li {width:100%; margin-bottom:10px;} .footer p {display:block; width:100%; float:left;} } / for Desktop / @media only screen and (min-width: 481px) {
width: 920px; }
min-height:600px; padding-top:40px; } / Background / / ========================================== / .bg_00 { background:url(../../img/scratchandwin/bg_00.jpg) no-repeat 0 0; } .bg_01 { background:url(../../img/scratchandwin/bg_01.jpg) no-repeat 0 0; } .bg_02 { background:url(../../img/scratchandwin/bg_02.jpg) no-repeat 0 0; } .bg_mobile { display:none; } / Content / / ========================================== / .bg_00 #content { margin-right:87px;}
height:25px; } .aktion {display:none;}
width:340px; } .contentbg_middle {width:300px; padding:0 20px;} .contentbg_top {display: block; float:left; background:url(../../img/scratchandwin/contentbg_top.png) no-repeat 0 0; height:20px; width:100%;} .contentbg_bottom {display: block; float:left; background:url(../../img/scratchandwin/contentbg_bottom.png) no-repeat 0 0; height:20px; width:100%; margin-bottom:20px;} / Forms / / ========================================== / span.code {margin:17px 12px;} input.code01 {width:95px;} input.code02 {width:155px;} input.submit, a.submit {display:block; float:left; width:100%; background:url(../../img/scratchandwin/btn_link.gif) no-repeat 0 0; height:28px; border:0; cursor:pointer; margin-top:20px;} a.submit { height:auto; padding:7px 0;} input.submit:hover. a.submit:hover {background-position:0 -30px;} input.submit:active, a.submit:active {background-position:0 -60px;} input.ort {width:216px; text-align:left; } / Links / / ========================================== / span.text {width:278px;} .navi_link li a {margin:0 0 10px 20px;} .bg_02 .navi_link {margin: 380px 0 0 530px; width:auto;} span.text {display:block; float:left;} / Scrollbar / / ========================================== / .scrollbox {display:block; width:300px; overflow:auto; height:450px; scrollbar-base-color:#691001; scrollbar-3dlight-color:#691001; scrollbar-arrow-color:#691001; scrollbar-darkshadow-color:#691001; scrollbar-face-color:#fff0c2; scrollbar-highlight-color:#691001; scrollbar-shadow-color:#691001; scrollbar-track-color:#691001;} / Footer / / ========================================== / .footer {display:block; float:right; width:747px;} .footer ul {float:right;} .footer ul li {float:left; margin-left:10px;} .footer p {display:block; float:right; text-align:right;} } / for non-mediaquery browsers / #container { display:block; margin:0 auto; } #headercontainer { display:block; float:left; width:100%;} #contentcontainer { display:block; float:left; width:100%;} #footercontainer { display:block; float:left; width:100%; margin-bottom:20px;} / Logo / / ========================================== / a.logo { display:block; margin:20px auto 0; background:url(../../img/scratchandwin/logo.gif) no-repeat 0 0; width:185px; height:92px;} / Content / / ========================================== / #preise { display:block; float:left; width:100%;} #content { display: block; float:right; } .contentbg_middle { display: block; float:left; background-color:#691001;} / Forms / / ========================================== / .row { display:block; float:left; width:100%; margin-top:10px;} .row.error label { color:#F00;} .row.error input { color:#F00; border:1px solid #F00;} label { display:block; float:left; width:100%;} input { display:block; float:left; width:100%; padding:1px 0; border:1px solid #fff;} span.code { display:block; float:left;} input.code01, input.code02 { height:50px;} input.day, input.month, input.year, input.plz, input.ort { margin-bottom:5px;} input.day, input.month {width:49px; margin-right:10px; text-align:center;} input.year {width:78px; text-align:center;} input.plz {width:70px; margin-right:10px; text-align:left; } input.checkbox { width:auto; margin-right:10px; border:0;} / Links / / ========================================== / .navi_link { width:100%; float:left;} .navi_link li { float:left; width:100%;} .navi_link li a{ display:block; float:left;} span.text { margin:9px 0 0 10px;} / Footer / / ========================================== / .sponsor { display:block; float:left;} http://www.guinness.de/css/scratchandwin/typography.css @charset "utf-8"; / typography.css Kilkenny
CONTENT: General Headlines Links Menu Footer / / General / / ========================================== / body { font-size: 62.5%; font-family: Arial, Geneva, Verdana, helvetica, sans-serif; color:#fff;} / Main Containers with an example for Mediaqueries inside the CSS-file / / ========================================== / / for Phone / @media only screen and (min-width: 1px) and (max-width: 480px) {
/ Headline / / ========================================== / h1.headline_kilkenny {background:url(../../img/scratchandwin/headline_kilkenny.gif) no-repeat center center; -moz-background-size:contain; -webkit-background-size:contain; background-size:contain;} h2.headline_home, h2.headline_form, h2.headline_danke, h2.headline_pub, h2.headline_spiel, h2.headline_terms {background-size:contain;} / Links / / ========================================== / .btn_home {display:none;} / Formular / / ========================================== / input {}font-size:1.4em;} input.code01, input.code02, span.code {text-align:center; font-size: 2.6em;} / for Desktop / @media only screen and (min-width: 481px) {
/ Headline / / ========================================== / h1.headline_kilkenny {background:url(../../img/scratchandwin/headline_kilkenny.gif) no-repeat 415px 0;} / Links / / ========================================== / .btn_home {display:block; float:left; background:url(../../img/scratchandwin/btn_home.gif) no-repeat 0 0; height:30px; width:69px; position:relative; margin-top:-30px;} / Formular / / ========================================== / input.code01, input.code02, span.code {}text-align:center; font-size: 3.6em;} / Headline / / ========================================== / h1, h2, h3 { display:block;} h1.headline_kilkenny { float:left; width:100%; height:101px; margin:0px 0 22px;} h2.headline_home, h2.headline_form, h2.headline_danke, h2.headline_pub, h2.headline_spiel { float:left; width:100%; margin-bottom:10px;} h2.headline_home { background:url(../../img/scratchandwin/headline_home.gif) no-repeat 0 0; height:28px;} h2.headline_spiel { background:url(../../img/scratchandwin/headline_spiel.gif) no-repeat 0 0; height:52px;} h2.headline_form { background:url(../../img/scratchandwin/headline_form.gif) no-repeat 0 0; height:19px;} h2.headline_danke { background:url(../../img/scratchandwin/headline_danke.gif) no-repeat 0 0; height:53px;} h2.headline_pub { background:url(../../img/scratchandwin/headline_pub.gif) no-repeat 0 0; height:23px;} h2.headline_terms { background:url(../../img/scratchandwin/headline_terms.gif) no-repeat 0 0; height:18px;} .pub_zip { display:block; float:left; width:100%; color:#fff0c2; font-size:2em; margin-top:2px;} hr { display:block; float:left; width:100%; border:0; border-bottom:2px solid #fff0c2; margin:10px 0;} / Links / / ========================================== / a { color:#fff; text-decoration:none; } a:hover { text-decoration:underline; } .btn_preis, .btn_pub, .btn_code { display:block; float:left; width:32px; height:32px; text-decoration:none; margin-bottom:10px;} .btn_preis { background:url(../../img/scratchandwin/btn_preis.gif) no-repeat 0px 1px;} .btn_pub { background:url(../../img/scratchandwin/btn_pub.gif) no-repeat 0px 1px;} .btn_code { background:url(../../img/scratchandwin/btn_code.gif) no-repeat 0px 1px;} a:hover .btn_preis,a:hover .btn_pub, a:hover .btn_code { background-position:0px -31px;} a:hover span.text {text-decoration:underline;} a.submit { color:#000; text-align:center; font-weight:bold;} a.submit:hover { text-decoration:none; } a.email { font-size:1.4em; font-weight:bold;} .row.error label a, .row.error { color:#F00;} / Formular / / ========================================== / input.submit { font-weight:bold;} .fehler { color:#F00; } / Footer / / ========================================== / #footercontainer, #footercontainer a { color:#999696; } http://www.guinness.de/css/scratchandwin/jquery.jscrollpane.css / .jspContainer { overflow: hidden; position: relative;} .jspPane { position: absolute;} .jspVerticalBar { position: absolute; top: 0; right: 0; width: 12px; height: 100%; } /.jspHorizontalBar { .jspVerticalBar , .jspHorizontalBar { margin: 0; padding: 0;} .jspCap { display: none;} /.jspHorizontalBar .jspCap { .jspTrack { background: #691001; position: relative;} .jspDrag { background: #fff0c2; position: relative; top: 0; left: 0; cursor: pointer;} /.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { .jspArrow { background: #fff0c2; text-indent: -20000px; display: block; cursor: pointer;} .jspArrow.jspDisabled { cursor: default; background: #80808d;} .jspVerticalBar .jspArrow { height: 10px;} .jspArrowUp, .jspArrowDown { width:12px; height:9px; display: block; cursor: pointer;} .jspArrowUp, .jspArrowUp.jspDisabled {background:url(../../img/scratchandwin/scroll_arrow_up.gif) no-repeat 0 0 #691001;} .jspArrowDown, .jspArrowDown.jspDisabled {background:url(../../img/scratchandwin/scroll_arrow_down.gif) no-repeat 0 0 #691001;} .jspArrowUp.jspDisabled, .jspArrowDown.jspDisabled { width:12px; height:10px; display: block; cursor: pointer;} /.jspHorizontalBar .jspArrow { .jspVerticalBar .jspArrow:focus { outline: none;} .jspCorner { background: #eeeef4; float: left; height: 100%;} / Yuk! CSS Hack for IE6 3 pixel bug :( / html .jspCorner { |