/** * * RockinRoller www.rockinroller.de * Copyright 2010 RockinRoller * * Homepage erstellt: Simon Jokuschies www.leafpictures.de * Alle HTML, CSS, PHP, Bilder, Flashdateien, Videos, Musik sind urheberrechtlich geschuetzt * */ /* Browsereigene Darstellungen resetten */ html, body, * { margin: 0; padding: 0; border: 0; font: 11pt "Helvetica", Arial, sans-serif; line-height:100%; line-height: 16pt; color: #666; font-weight: lighter; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } ol, ul, dl { list-style: none; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } table { border-collapse: collapse; border-spacing: 0; } caption, th { text-align: left; } q:before, q:after { content: '"'; } hr { display: none; } a { outline: none; } /* custom */ .blind { display: none; } a { color: #3366cc; text-decoration: none; cursor: pointer; } a:visited { color: #3366cc; text-decoration: none; } a:hover { color: #6699cc; } a:active { color:#3366cc; } *:focus { outline: 0; } strong { font-weight: bold; } .right { float: right; } .left { float: left; } .blue { color: #3366cc; } .red { color: #f00; } .clear { clear: both; } .noJavascript { padding: 10px; border: 1px solid #3366cc; } /* .boxLink { width: 160px; height: 40px; background-color: #333; display: inline-block; overflow: hidden; text-align: center; } .boxLink a { width: 160px; height: 40px; display: inline-block; text-align:center; padding-top: 10px; overflow: hidden; text-decoration: none; color: #999999; font-size: 10pt; } */ /* esquivel 03/2011 */ .boxLink { width: 120px; height: 32px; background-color: #333; display: inline-block; overflow: hidden; text-align: center; } .boxLink a { width: 120px; height: 32px; display: inline-block; text-align:center; padding-top: 4px; overflow: hidden; text-decoration: none; color: #999999; font-size: 10pt; } .boxLink a:hover { color: #ffffff; } .boxLink:hover { background-color: #3366cc; } .big { height: 40px; padding: 10px 0; font-size: 20px; } .bigBlue { height: 40px; color: #3366cc; padding: 10px 0; font-size: 20px; } .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .small { font-size: 8pt; font-style: italic; } .center { text-align: center; } /* index */ html { background-color: #000000; } #top { width: auto; height: 8px; overflow: hidden; background-image:url(../images/top.jpg); background-repeat: repeat-x; } #logo { width: 418px; height: 86px; overflow: hidden; position: relative; left: 430px; top: 25px; } #logo span { display:none; } #logo a { height: 418px; background-repeat:no-repeat; display: inline-block; overflow: hidden; } #logo a#rockinroller { width: 418px; height: 86px; background-image:url(../images/logo.png); overflow: hidden; } #wrapper { width: 1012px; height: auto; min-height: 730px; margin: 0px auto; margin-top: -8px; background-image:url(../images/background.jpg); background-repeat: no-repeat; } #networks { width: 110px; height: 52px; position: relative; left: 240px; bottom: 60px; display: inline; margin: 0; padding: 0; overflow: hidden; } #myspace:hover { width: 48px; height: 48px; background-image:url(../images/btnMyspace_h); } #networks span { display:none; } #networks a{ background-repeat:no-repeat; display:inline-block; overflow:hidden; } #networks a#myspace { width: 25px; height: 25px; background-image:url(../images/btnMyspace.jpg); } #networks a#myspace:hover { background-image:url(../images/btnMyspace_h.jpg); cursor: pointer; } #networks a#facebook { width: 25px; height: 25px; background-image:url(../images/btnFacebook.jpg); } #networks a#facebook:hover { background-image:url(../images/btnFacebook_h.jpg); cursor: pointer; } #navi { width: 700px; height: 35px; margin: 0px auto; margin-top: 37px; margin-right: 50px; } #navi ul li { display: inline; margin:0; padding:0; overflow:hidden; } #navi ul li span { display:none; } #navi ul li a{ background-repeat:no-repeat; display:inline-block; overflow:hidden; } #navi ul li a#index { width: 73px; height: 24px; background-image:url(../images/btnAbout.png); } #navi ul li a#index:hover { background-image:url(../images/btnabout_h.png); } #navi ul li #index_active { width: 73px; height: 24px; background-image:url(../images/btnAbout_h.png); cursor: default; } #navi ul li a#lessons { width: 85px; height: 24px; background-image:url(../images/btnLessons.png); } #navi ul li a#lessons:hover { background-image:url(../images/btnLessons_h.png); } #navi ul li #lessons_active { width: 85px; height: 24px; background-image:url(../images/btnLessons_h.png); cursor: default; } #navi ul li a#media { width: 79px; height: 24px; background-image:url(../images/btnMedia.png); } #navi ul li a#media:hover { background-image:url(../images/btnMedia_h.png); } #navi ul li #media_active { width: 79px; height: 24px; background-image:url(../images/btnMedia_h.png); cursor: default; } #navi ul li a#links { width: 58px; height: 24px; background-image:url(../images/btnLinks.png); } #navi ul li a#links:hover { background-image:url(../images/btnLinks_h.png); } #navi ul li #links_active { width: 58px; height: 24px; background-image:url(../images/btnLinks_h.png); cursor: default; } #navi ul li a#contact { width: 90px; height: 24px; background-image:url(../images/btnContact.png); } #navi ul li a#contact:hover { background-image:url(../images/btnContact_h.png); } #navi ul li #contact_active { width: 90px; height: 24px; background-image:url(../images/btnContact_h.png); cursor: default; } #navi ul li a#login { width: 80px; height: 28px; background-image:url(../images/btnLogin.png); } #navi ul li a#login:hover { background-image:url(../images/btnLogin_h.png); } #navi ul li #login_active { width: 80px; height: 28px; background-image:url(../images/btnLogin_h.png); cursor: default; } #content { width: 678px; height: auto; position: relative; top: 47px; left: 235px; padding: 30px 35px 60px 60px; background-image:url(../images/contentBackground.jpg); background-repeat: repeat; } #content #contLeft { width: 270px; height: auto; min-height: 270px; float: left; } #content #contRight { width: 270px; height: auto; min-height: 270px; margin-left: 35px; float: left; } #footer { width: 735px; height: auto; margin: 100px 0; position: relative; left: 255px; border-top: 1px solid #333333; } #footer span { color: #333333; font-size: 9pt; } #footer a { color: #333333; font-size: 9pt; } #footer a:hover { color: #999999; } #footer ul{ float: right; margin-top: 3px;} #footer ul li { display: inline; } /* two column layout for start page (esquivel 03/2011) */ #contentMain { width: 741px; height: auto; position: relative; top: 47px; left: 235px; padding: 16px; background-image:url(../images/contentBackground.jpg); background-repeat: repeat; } #contentMain #contLeft { float:left; width:328px; min-height: 270px; margin-right: 16px; } #contentMain #contRight { float:left; width:396px; min-height: 270px; } #contentMain .clearbottom { clear:both; } /* lessons */ .lessonsSub { width: 310px; height: 20px; margin-left: 68px; padding: 0 10px 10px 10px; background-image:url(../images/subNaviBackground.jpg); background-repeat: repeat; } #navi ul li a#gitarrenunterricht { width: 106px; height: 24px; background-image:url(../images/btnGitarrenunterricht.png); } #navi ul li a#gitarrenunterricht:hover { background-image:url(../images/btnGitarrenunterricht_h.png); } #navi ul li #gitarrenunterricht.current { width: 106px; height: 24px; background-image:url(../images/btnGitarrenunterricht_h.png); cursor: default; } #navi ul li a#bandtraining { width: 79px; height: 24px; background-image:url(../images/btnBandtraining.png); } #navi ul li a#bandtraining:hover { background-image:url(../images/btnBandtraining_h.png); } #navi ul li #bandtraining.current { width: 79px; height: 24px; background-image:url(../images/btnBandtraining_h.png); cursor: default; } #navi ul li a#preise { width: 54px; height: 24px; background-image:url(../images/btnPreise.png); } #navi ul li a#preise:hover { background-image:url(../images/btnPreise_h.png); } #navi ul li #preise.current { width: 54px; height: 24px; background-image:url(../images/btnPreise_h.png); cursor: default; } /*ul.lessonsSub a.current, ul.lessonsSub li.current { background-color: #333; }*/ .subContent { width: 580px; height: auto; } .captionTable { border-bottom: 2px solid #333333; } .caption1 { width: 150px; } .caption2 { width: 50px; } /* media */ .mediaSub { width: 155px; height: 20px; margin-left: 158px; padding: 0 10px 10px 10px; background-image:url(../images/subNaviBackground.jpg); background-repeat: repeat; } #navi ul li a#fotos { width: 44px; height: 21px; background-image:url(../images/btnFotos.png); } #navi ul li a#fotos:hover { background-image:url(../images/btnFotos_h.png); } #navi ul li a#fotos_active { width: 44px; height: 21px; background-image:url(../images/btnFotos_h.png); cursor: default; } #navi ul li a#audio { width: 48px; height: 21px; background-image:url(../images/btnAudio.png); } #navi ul li a#audio:hover { background-image:url(../images/btnAudio_h.png); } #navi ul li a#audio_active { width: 48px; height: 21px; background-image:url(../images/btnAudio_h.png); } #navi ul li a#noten { width: 54px; height: 21px; background-image:url(../images/btnNoten.png); } #navi ul li a#noten:hover { background-image:url(../images/btnNoten_h.png); } #navi ul li a#noten_active { width: 54px; height: 21px; background-image:url(../images/btnNoten_h.png); } #fotoContent { width: 800px; margin: 0px auto; } .item { width: 200px; height: 150px; margin: 5px; float: left; } /* contact */ #form input { width: 240px; height: 16px; padding: 4px; background-color: #000; border: 1px solid #999999; margin-bottom: 10px; font-size: 10pt; } #form textarea { width: 240px; height: 110px; padding: 4px; margin-bottom: 10px; background-color: #000000; border: 1px solid #999999; font-size: 10pt; } #form .submit { width: 250px; height: 35px; background-color: #333333; border: none; outline: none; } #form .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } /* login */ #files tr td { padding: 10px; border: 1px dotted #333; } .date { width: 75px; max-width: 100px; } .link { width: 660px; max-width: 660px; } .schuelerNachname { width: 250px; max-width: 250px; } .schuelerVorname { width: 250px; max-width: 450px; } .schuelerOrt { width: 250px; max-width: 250px; } #logForm .submit { width: 100px; height: 35px; background-color: #333333; border: none; outline: none; } #logForm .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } /* upload form */ /* #up { padding: 15px; border: 1px dotted #333; } */ #upForm input { width: 100%px; height: 16px; padding: 4px; background-color: #000; border: 1px solid #999999; margin-bottom: 10px; font-size: 10pt; } #upForm .fileinput {height: 24px; margin-top: 8px; } #radio .radioRow { width: 50px; height: 20px; padding: 4px; margin: 0 16px 10px 0; font-size: 11pt; vertical-align: middle; } #radio .radio { width: 32px; height: 20px; padding: 4px; margin: 0; vertical-align: middle; } #upForm .submit { width: 100px; height: 35px; background-color: #333333; border: none; outline: none; } #upForm .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } #view { background-color: #333333; display: none; padding: 10px; margin-top: 10px; } #view img { float: right; } /* .topicHead { padding: 10px; margin: 0 0 5px 0; background-color: #222; clear: both; } .msg { width: 650px; float: right; margin-bottom: 4px; padding: 8px; background-color: #111; } #msgForm input { width: 240px; height: 16px; padding: 4px; background-color: #000; border: 1px solid #999999; margin-bottom: 10px; font-size: 10pt; } #msgForm textarea { width: 650px; height: 110px; padding: 5px; float: right; margin-bottom: 10px; background-color: #000000; border: 1px solid #999999; font-size: 10pt; } */ /* esquivel 03/2011 */ .topicHead { padding: 4px; margin: 8px 0 0 0; background-color: #222; clear: both; } .msg { width: 95%; float: right; margin-bottom: 8px; padding: 8px; background-color: #111; border: 1px #222 solid; } .msgRow { border-top: 1px dotted #333333; margin-top: 8px; padding-top: 8px; clear: both; } #msgForm input { width: 240px; height: 16px; padding: 4px; background-color: #000; border: 1px solid #999999; margin-bottom: 8px; font-size: 10pt; } #msgForm textarea { width: 95%; height: 110px; padding: 4px; float: right; margin-bottom: 8px; background-color: #000000; border: 1px solid #999999; font-size: 10pt; } #msgForm { height: 80px; padding: 10px; } #msgForm .submit { width: 150px; height: 32px; float: right; background-color: #333333; border: none; outline: none; } #msgForm .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } #msgForm .submitRed { width: 150px; height: 32px; margin-left: 25px; background-color: #300; border: none; outline: none; } #msgForm .submitRed:hover { background-color: #F00; color: #fff; cursor: pointer; outline: none; } #form .submitRed { width: 70px; height: 35px; background-color: #300; border: none; outline: none; } #form .submitRed:hover { background-color: #F00; color: #fff; cursor: pointer; outline: none; } .delete { max-width: 70px; } #partner { width: 300px; height: 24px; line-height: 20px; padding: 2px 4px 2px 4px; background-color: #333; float: right; } #partner option { width: 274px; height: 20px; padding-left: 4px; } .spacer { width: 30px; height: 30px; margin: 15px 0 0 26px; } #freigeben { width: 280px; height: 25px; line-height: 20px; padding: 5px; float: right; } #freigeben select { width: 236px; height: 24px; padding: 2px 4px 2px 4px; background-color: #333; float: left; } #freigeben option { width: 210px; height: 20px; padding-left: 4px; } #freigeben .submit { width: 32px; height: 24px; background-color: #333333; border: none; outline: none; float: right; } #freigeben .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } .radio { width: 20px; } .mediaDatei { width: 500px; } /* Button zum Entfernen der Freigabe (esquivel 03/2011) */ #sperren { width: 14px; height: 14px; margin: 0; padding: 0; display: inline-block; } #sperren .submit { width: 14px; height: 14px; margin-top: -1px; border: none; outline: none; color: #ff0000;background-color: #111; background-image:url(../images/delete.png); background-repeat: no-repeat; } #sperren .submit:hover { color: #fff; cursor: pointer; outline: none; background-color: #111;background-image:url(../images/delete_h.png); background-repeat: no-repeat; } /* rockinPlayer */ #audioplayer { width: auto; height: 999999px; padding: 5px; background-image:url(../images/contentBackground.jpg); background-repeat: repeat; } .player { width: 230px; margin: -20px auto; margin-left: 100px; } .audioTitle { width: 400px; height: 30px; text-align: center; } /* lightbox */ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; } #lightbox img{ width: auto; height: auto; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #333333; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding-top: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background:url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background:url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #333333; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #111111; } /* font buttons */ #btnFont span { display:none; } #btnFont a { width: 20px; height: 20px; background-repeat:no-repeat; display:inline-block; overflow:hidden; } #btnFont a#btnFontBold { background-image:url(../images/btnFontBold.png); } #btnFont a#btnFontBold:hover { background-image:url(../images/btnFontBold_h.png); cursor: pointer; } #btnFont a#btnFontItalic { background-image:url(../images/btnFontItalic.png); } #btnFont a#btnFontItalic:hover { background-image:url(../images/btnFontItalic_h.png); cursor: pointer; } #btnFont a#btnFontUnderline { background-image:url(../images/btnFontUnderline.png); } #btnFont a#btnFontUnderline:hover { background-image:url(../images/btnFontUnderline_h.png); cursor: pointer; } /* RTF editor (esquivel 03/2011) */ iframe#rtfeditor { width: 95%; height: 110px; padding: 5px; float: right; margin-bottom: 10px; background-color: #000000; border: 1px solid #999999; font-size: 10pt; } /* log overview panel (esquivel 03/2011) */ #logForm .submit { width: 150px; height: 35px; float: right; background-color: #333333; border: none; outline: none; } #logForm .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } .logRow { padding: 4px; margin: 0 0 4px 0; border-bottom: 1px dotted #333333; clear: both; } /* student overview panel (esquivel 03/2011) */ #studentForm .submit { width: 80px; height: 24px; background-color: #333333; border: none; outline: none; } #studentForm .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } #studentForm .submitRed { width: 80px; height: 24px; background-color: #300; border: none; outline: none; } #studentForm .submitRed:hover { background-color: #F00; color: #fff; cursor: pointer; outline: none; } .studentRow { padding: 8px; margin: 0 0 4px 0; border-bottom: 1px dotted #333333; clear: both; } /* file overview panel (esquivel 03/2011) */ .fileRow { padding: 0 8px 0 8px; margin: 0 0 4px 0; border-bottom: 1px dotted #333333; clear: both; vertical-align: middle; min-height: 30px;} .fileRow img { margin: 0px 16px 4px 0; height: 24px; width: 24px; } .fileRow * { vertical-align: middle; } .fileRow .fileUsers { width: 320px; display: inline-block; margin-top: 4px; } .fileRow .fileUser { border: 1px dotted #333333; padding-left: 2px; margin-right: 4px; display: inline-block; font-size: 8pt; font-style: italic; } .fileRow #form .submit { width: 48px; height: 24px; margin-bottom: 0; margin-right: -8px; } .fileRow #form .submitRed { width: 64px; height: 24px; margin-bottom: 0; margin-right: 4px; } /* edit user form (esquivel 03/2011) */ .editlabel{ display: block; } /* video frame embedded in message (esquivel 03/2011) */ #video { margin-top: 8px; margin-bottom: 8px; border: 1px solid #000000; } /* tabs for message boxes */ #msgTabs { display: inline-block; margin: 0; padding: 0; } #msgTab { display: inline-block; border: 1px #222 solid; border-bottom: none; margin: 8px 0 -2px 16px; z-index: 100; } #msgTab .submit { width: 120px; height: 24px; background-color: #111; border: none; outline: none; } #msgTab .submit:hover { background-color: #3366cc; color: #fff; cursor: pointer; outline: none; } #msgTab .submitSelected { width: 120px; height: 24px; border: none; background-color: #3366cc; color: #fff; outline: none; }