/* * netzsprecher.de Stylesheet * author: Jonas Girnatis * date: April 2009 * * Farben: * * Dunkelblau #364E6D * Senfgelb #D7A900 * Signalblau #3399FF * Hellblau (Fläche klein) #D4DAE1 * Hellblau (Fläche groß) #E5E9ED * Fläche Beige hell #F7F4ED * Fläche Beige dunkel (Rollover) #ECE6BF * Linie Beige #E5E0CC */ * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; margin: 0; padding: 0; font-family: Verdana, Sans-Serif; color: #364E6D; } h2 { font-family: Georgia, Serif; font-size: 125%; font-style: italic; font-weight: normal; margin: 5px 0 16px 0; padding: 0 0 13px 0; border-bottom: 1px solid #364E6D; } h3 { font-family: Georgia, Serif; font-size: 112.5%; font-weight: normal; margin: 5px 0 16px 0; } h4 { } h5 { } h6 { } a { color: #364e6d; } a:hover { color: #151f2b; } a:focus { } a.nounderline:hover { text-decoration: none; } address { font-style: normal; } abbr, acronym, dfn { cursor: help; } ul { list-style: none; } p { line-height: 1.5em; font-size: 68.75%; margin: 0 0 1em 0;} img { border: 0; } fieldset { border: 0; } label { } input { font-family: Verdana, Sans-serif; color: #364e6d; } input.text, input.editor_field { padding: 4px 0 2px 6px; border-color: #6d6f70 #c9cbcc #d3d5d6 #c9cbcc; border-width: 1px; border-style: solid; } input.text:focus, input.editor_field:focus { } input.submit { cursor: pointer } button { border: 0; padding: 0 0 0 5px; background: url('../images/bg_button_left.gif') no-repeat 0 50%; cursor: pointer; } button span { padding: 0 5px 0 0; line-height: 22px; display: block; background: url('../images/bg_button_right.gif') no-repeat 100% 50%; white-space: nowrap; } button::-moz-focus-inner { padding: 0; border: none; } input.file { margin-bottom: 1em; } select { padding: 4px 0 2px 6px; border-color: #6d6f70 #c9cbcc #d3d5d6 #c9cbcc; border-width: 1px; border-style: solid; color: #364E6D; } textarea { padding: 4px 0 2px 6px; overflow: auto; } textarea:focus { } dl { font-size: 81.25%; overflow: hidden; margin-bottom: 1em; } dt { color: #53492C; } dd { margin-bottom: 1em; } table { width: 100%; border-spacing: 0; border-collapse: collapse; } form.std { padding: 30px 16px; min-height: 460px; background: #F7F4ED; } form.std fieldset { margin: 0 0 20px 0; } form.std fieldset fieldset { margin: 0 0 8px 0; clear: both; } form.std fieldset fieldset.checkbox label { width: 440px; float: right; } form.std fieldset fieldset.checkbox input { margin: 0 0 0 158px; float: left; } form.std fieldset fieldset.checkbox .error { margin: 4px 0 0 180px; float: none; } form.std fieldset.submit { margin: 12px 0 20px 0; } form.std label { width: 150px; margin: 0 8px 0 0; float: left; font-size: 68.75%; } form.std input.text { width: 196px; float: left; } form.std textarea { width: 196px; float: left; } form.std select { min-width: 204px; float: left; } form.std .error { margin: 4px 0 0 0; width: 252px; float: right; color: #3399FF; } form.std .hint { margin: 2px 0 0 158px; } form.std .icon_lock { background: url('../images/icon_lock.gif') no-repeat; padding-left: 20px; line-height: 18px; } form.sub_sets { padding: 0; background: #fff; } form.sub_sets fieldset { margin: 0; padding: 20px 16px 20px 75px; background: #F7F4ED; } form.sub_sets fieldset fieldset { margin: 0 0 8px 0; padding: 0; } form.sub_sets fieldset fieldset.submit { margin: 1em 0 0 158px; } form.sub_sets fieldset span.readonly { font-size: 68.75%; float: left; } form.sub_sets h3 { margin: 0; padding: 15px 0 0 40px; line-height: 35px; font-style: italic; background: #fff; } form.sub_sets h3.phone { background: #fff url('../images/icons/headline_phone.jpg') no-repeat 0 15px; } form.sub_sets h3.iphone { background: #fff url('../images/icons/headline_iphone.jpg') no-repeat 0 15px; } form.welcome p { margin: 0 0 3em 0; } form.welcome fieldset { padding: 0 0 0 30px; } form.welcome fieldset.submit { margin: 1em 0 0 158px; } form.welcome input.file { margin: 0; float: left; } table.list thead tr { } table.list thead th { padding: 5px; font-size: 68.75%; color: #D7A900; text-align: left; line-height: 18px; border-top: 1px solid #364E6D; border-bottom: 1px solid #364E6D; } table.list tbody tr { } table.list tbody td { padding: 5px; background: #F7F4ED; font-size: 75%; border-bottom: 4px solid #fff; } table.list tbody td a { line-height: 35px; } table.list tbody td a img { margin: 0 10px 0 0; width: 35px; height: 35px; float: left; } table.list .center { text-align: center; } ul.std { font-size: 68.75%; } /* Unique Elements */ #stage { margin: 0 0 0 35px; width: 930px; } /* Header */ #header { position: relative; height: 108px; } #header h1 { position: absolute; top: 45px; } #header h1 a { display: block; width: 227px; height: 38px; background: url('../images/logo.png') no-repeat; } #header h1 span { display: none } #header ul.nav { position: absolute; top: 35px; right: 0; font-size: 75%; border-bottom: 1px solid #364e6d; min-height: 22px; overflow: hidden; } #header ul.nav li { float: right; margin: 0 0 0 30px; } #header ul.nav li.last-child { margin: 0; } #header ul.nav li.only-child { margin: 0; } #header ul.nav li.first-child { margin: 0; width: 270px; text-align: right; } #header ul.nav li a, #header ul.nav li span { text-decoration: none; padding: 0 0 3px 0; } #header ul.nav li.current a, #header ul.nav li.current span { border-bottom: 3px solid #364e6d; } /* Sidebar */ #menu { margin: 0 0 14px 0; width: 220px; min-height: 375px; float: right; } #menu #search { margin: 4px 0 16px 0; padding: 0 0 15px 0; border-bottom: 1px solid #364E6D; } #menu #search input { width: 182px; float: left; } #menu #search .submit { width: 23px; height: 22px; border: 0; float: right; background: url('../images/button_search_submit.gif') no-repeat; } #menu #search .submit span { display: none; } /* Löschen wenn Search wieder eingeblendet wird*/ #menu #search { display: none; } #menu { margin-top: 42px; padding-top: 16px; border-top: 1px solid #364E6D; } #menu h4.noshow { display: none; } #menu h4 { padding: 8px 10px 10px 8px; font-size: 62.5%; font-style: italic; background: #F7F4ED; border-bottom: 2px solid #fff; overflow: hidden; } #menu h4 span { float: left; } #menu h4 a { font-style: normal; float: right; } #menu #block_login label { display: none; } #menu #block_login #frm_username_block { width: 212px; margin-bottom: 13px; } #menu #block_login #frm_password_block { float: left; width: 122px; } #menu #block_login .submit { float: right; } #menu #block_login .submit span { width: 72px; } #menu #block_login ul { font-size: 68.75%; } #menu #block_login li { margin: 0.5em 0; } #menu #block_login a { text-decoration: underline; } #menu #block_login h3 { padding: 10px 0 20px 0; background: #fff url('../images/icon_comma.gif') no-repeat bottom left; } #menu #block_login h3 a { padding: 6px 8px; line-height: 1em; display: block; font-family: Georgia, Serif; font-size: 88.9%; text-decoration: none; background: #D7A900 url('../images/icon_arrow_white_on_yellow.gif') no-repeat 95% 50%; color: #fff; } #menu .box { } #menu .user_data { padding: 8px 10px 10px 8px; background: #F7F4ED; overflow: hidden; } #menu .user_data .profile_link { float: left; font-size: 75%; width: 135px; } #menu .user_data .profile_link a { font-weight: bold; } #menu .user_data .profile_link span { font-size: 91.6%; } #menu .user_data img { margin: 0 10px 10px 0; float: left; width: 54px; height: 54px; } #menu .user_data p { padding: 0 0 0 2px; margin: 0; font-size: 68.75%; clear: both; } #menu .user_data p a { color: #3399FF; text-decoration: none; } #menu .user_data p a:hover { text-decoration: underline; } #menu .user_links { margin: 0 0 10px 0; padding: 10px; font-size: 68.75%; border-top: 2px solid #fff; background: #F7F4ED; } #menu .user_links em { padding: 0 2px; font-size: 90%; font-style: normal; color: #fff; background: red; } #menu .partner { margin: 0 0 10px 0; border: 1px solid #ECE6BF; padding: 8px; overflow: hidden; } #menu .partner li { float: left; width: 100px; } #menu .partner img { width: 90px; } #menu #block_feedback { padding: 6px; background: #F7F4ED; } #menu #block_feedback label { display: none; } #menu #block_feedback textarea { width: 200px; margin-bottom: 0.25em; } #menu .block_number { margin: 0 0 15px 0; padding: 8px; background: #F7F4ED; } #menu .block_number p { margin: 0; font-size: 62.5%; } #menu .block_number p.teaser_number { font-size: 100%; font-weight: bold; line-height: 1em; } #menu #block_opinions { padding: 0; background: #F7F4ED; overflow: hidden; font-size: 68.75%; margin: 0 0 15px 0; line-height: 1em; } #menu #block_opinions li { padding: 8px 0 8px 8px; width: 98px; float: left; } #menu #block_opinions li .button_play { margin: 4px 0 0 0; padding: 0; height: 20px; width: 20px; float: left; } #menu #block_opinions li img { margin: 0 7px 0 0; width: 45px; height: 45px; float: left; } #menu #block_opinions li.more { line-height: 1.5em; padding-top: 20px; } #menu .block_netzsprecher_ad { position: relative; margin: 0 0 14px 0; border: 1px solid #44494d; padding: 5px 5px 5px 8px; font-family: Georgia, Serif; font-size: 100%; font-style: italic; color: 1px solid #44494d; } #menu .block_netzsprecher_ad a { display: block; text-decoration: none; } #menu .block_netzsprecher_ad span { position: absolute; bottom: -4px; right: -2px; padding: 0 5px; font-size: 112.5%; line-height: 28px; background: #D7A900; color: #fff; } /* Footer */ #footer { clear: both; padding: 10px 0 40px 0; font-size: 68.75%; background: url('../images/bg_footer.gif') no-repeat;} #footer ul { clear: both; } #footer li { float: left; padding: 0 12px 0 0; } #footer a { text-decoration: none; } /* Content */ #content { margin: 0 0 14px 0; width: 660px; float: left; } #content ul.nav { position: relative; top: -13px; min-height: 35px; font-size: 68.75%; } #content ul.nav li { margin: 0 10px 0 0; padding: 0 14px 0 0; border-right: 1px solid #364E6D; float: left; } #content ul.nav li.last-child { border-right: 0; } #content ul.nav li.current span { border-top: 3px solid #364E6D; } #content ul.nav a { text-decoration: none; } #content .home h2 { color: #fff; } #content #home_info { width: 418px; float: right; } #content #home_info ul { margin: 0 0 0 0; width: 418px; height: 265px; background: url('../images/illu_home.jpg') no-repeat 9px 70px; position: relative; } #content #home_info ul li { position: absolute; padding: 12px 0 12px 40px; font-family: Georgia, Serif; font-size: 100%; font-style: italic; } #content #home_info ul #home_info_send_messages { left: 128px; top: 14px; background: url('../images/icons/frontpage_talking.jpg') no-repeat 0 50%; } #content #home_info ul #home_info_talk_to_others { left: 197px; top: 60px; background: url('../images/icons/frontpage_phone.jpg') no-repeat 0 50%; } #content #home_info ul #home_info_audio_blogging { left: 234px; top: 129px; background: url('../images/icons/frontpage_audioblogging.jpg') no-repeat 0 50%; } #content #home_info ul #home_info_podcast_via_phone { left: 248px; top: 185px; background: url('../images/icons/frontpage_podcasting.jpg') no-repeat 0 50%; } #content #home_info ul a { padding: 0; height: 19px; width: 19px; display: block;} #content #home_info .read_more { margin: 0 0 40px 0; text-align: right; } #content #home_info .read_more a { font-family: Verdana, sans-serif; font-size: 68.75%; } #content #home_info .home_teaser { position: relative; margin: 0 0 1px 0; padding: 0px 25px 0 8px; min-height: 119px; background: #E5E9ED url('../images/illu_home_steps.gif') no-repeat; } #content #home_info .home_teaser h3 { margin: 0; padding-top: 10px; overflow: hidden; } #content #home_info .home_teaser h3 span.left { float: left; } #content #home_info .home_teaser h3 span.right { float: right; } #content #home_info .home_teaser #home_test_link { position: absolute; top: 0; left: 0; width: 265px; height: 119px; } #content #home_info .home_teaser #home_test_link span { display: none; } #content #home_info .home_teaser #home_audio_guide { position: absolute; top: 65px; right: 40px; height: 10px; } #content #home_info .test_link { padding: 0 20px 0 0; line-height: 25px; background: #D7A900; text-align: right; display: none; } #content #home_info .test_link a { padding: 0 10px 0 0; font-family: Georgia, Serif; font-size: 100%; text-decoration: none; background: #D7A900 url('../images/icon_arrow_white_on_yellow.gif') no-repeat 99% 50%; color: #fff; } #content #home_widget { padding: 8px 12px 12px 8px; width: 213px; min-height: 425px; float: left; background: #F7F4ED; } #content #home_widget h3 { margin: 0 0 35px 0; } #content #home_widget iframe { margin: 0 0 0 2px; width: 212px; height: 326px; border-right: 1px solid #7f91a5; border-bottom: 1px solid #7f91a5; } #content #netzsprecher_widget_container h3 { margin: 0; } #content #netzsprecher_widget_content { box-shadow: rgba(0,0,0,0.3) 4px 4px 3px; -moz-box-shadow: rgba(0,0,0,0.3) 4px 4px 3px; -webkit-box-shadow: rgba(0,0,0,0.3) 4px 4px 3px; } #content #plugin_config { position: relative; } #content #plugin_config legend { margin-bottom: 1em; } #content #plugin_preview { position: absolute; right: 16px; top: 0; } #content #plugin_preview h4 { font-size: 100%; font-weight: normal; margin: 30px 0 16px 0; } #content #plugin_preview h4.embed_headline { margin-top: 22px; } #content #plugin_preview #netzsprecher_widget_container { width: 200px; } #content .infos_fon img { float: left; margin: 0 0 14px 0; } #content .infos_fon h3 { margin: 0 0 0.5em 0; width: 508px; float: right; line-height: 1em; font-family: Verdana, Sans-serif; font-size: 68.75%; font-weight: bold; clear: both; } #content .infos_fon p { margin: 0 0 24px 0; width: 508px; float: right; } #content #faq h3 { margin-top: 16px; color: #D7A900; } #content #faq select { float: none; } #content h3.topiclist { margin: 0 0 6px 0; padding: 10px 20px; border-top: 1px solid #364E6D; background: #F7F4ED; overflow: hidden; } #content h3.topiclist .topic_id { width: 100px; padding: 0 16px 0 0; font-family: Verdana, Sans-Serif; font-size: 68.75%; float: left; } #content h3.topiclist .topic_title { width: 300px; padding: 0 14px 0 0; float: left; text-decoration: none; } #content h3.topiclist .topic_published { width: 120px; padding: 0 18px 0 0; font-family: Verdana, Sans-Serif; font-size: 68.75%; float: left; } #content h3.topiclist .button_rss { margin-left: 10px; } #content ul.topic_container { margin: 0 0 16px 0; } #content ul.topic_container li { margin: 0 0 3px 0; padding: 5px; background: #F7F4ED; font-size: 68.75%; line-height: 35px; overflow: hidden; } #content ul.topic_container img { vertical-align: middle; float: left; margin: 0 10px 0 0; } #content ul.topic_container .button_play { margin-left: 15px; } #content ul.topic_container .topic_postpublisher { width: 128px; margin: 0 5px 0 0; float: left; white-space: nowrap; overflow: hidden; } #content ul.topic_container .topic_postplayer { width: 115px; margin: 0 5px 0 0; float: left; } #content ul.topic_container .topic_postpublished { width: 189px; margin: 0 5px 0 0; float: left; } #content ul.topic_container .topic_posthits { width: 132px; margin: 0 5px 0 0; float: left; } #content ul.topic_container .topic_postflag { width: 61px; margin: 0 5px 0 0; float: left; } #content .instructions { padding: 15px; background: #E5E9ED; } #content .instructions h3 { margin: 0 0 50px 0; font-size: 75%; font-weight: bold; font-family: Verdana, Sans-Serif; } #content .instructions ol { list-style: none; } #content .instructions ol li { margin: 0 0 30px 50px; padding: 0 0 0 68px; min-height: 80px; position: relative; } #content .instructions ol li.one { background: url('../images/illu_one.gif') no-repeat; } #content .instructions ol li.two { background: url('../images/illu_two.gif') no-repeat; } #content .instructions ol li.three { background: url('../images/illu_three.gif') no-repeat; } #content .instructions ol li p { width: 315px; position: absolute; right: 0; top: 12px; } #content .instructions ol li .testspeaker_phonenumber { padding: 12px 0 0 0; line-height: 0.8em; font-weight: bold; } #content .instructions ol li .testspeaker_phonenumber span { font-size: 62.5%; font-weight: normal; } #content .instructions ol li .testspeaker_buddy { margin: 0 0 0 37px; } #content .instructions ol li #testspeaker_messages { padding: 14px 0 0 37px; } #content .instructions ol li #testspeaker_messages li { margin: 0; padding: 0 0 10px 0; min-height: 0; font-size: 75%; } #content .instructions ol li #testspeaker_messages li .button_play { margin: 0 10px 0 0; } #content #phonebook img { width: 35px; height: 35px; } #content #phonebook .post_count { padding: 0 20px 0 0; text-align: right; } #content #profile { float: left; } #content .profil_picture { margin: 0 20px 15px 0; width: 100px; height: 100px; float: left; } #content .speaker_info { margin-top: -20px; padding: 0 0 15px 0; overflow: hidden; text-align: right; } #content .speaker_info .number { padding: 0 0 0 35px; float: right; background: url('../images/icons/headline_phone_big.jpg') no-repeat 0 5px; } #content .speaker_info .number div { font-size: 68.75%; } #content #my_speaker { overflow: hidden; } #content #my_speaker .speaker { border-top: 1px solid #364E6D; padding: 10px 0 0 0; width: 315px; float: left; } #content #my_speaker .speaker .button_play, #content #my_speaker .speaker .button_stop { margin: 0 10px 0 0; } #content #my_speaker .speaker table { clear: both; } #content #my_speaker .export { border-top: 1px solid #364E6D; padding: 15px 0 0 0; width: 290px; float: right; } #content #my_speaker .export h3 { margin: 0 0 5px 0; padding: 0 0 0 35px; font-size: 100%; font-style: italic; line-height: 35px; } #content #my_speaker .export h3.embed { background: url('../images/icons/headline_embed.jpg') no-repeat; } #content #my_speaker .export h3.podcast { background: url('../images/icons/headline_podcast.jpg') no-repeat; } #content #my_speaker .export input { margin: 0 0 25px 35px; width: 200px; } /* Sprecher Seite */ #content .user_podcasts_feed { float: right; font-size: 75%; padding-left: 0px; padding-right: 25px; background-position: 100% 50%; } #content #speaker .button_play, #content #speaker .button_stop { padding-left: 25px; } /* Pager */ #content .pager { margin-top: 2em; font-size: 81.25%; } #content .pager .current { padding: 0px 10px 0px 10px; color: #f99000; font-weight: bold; } #content .pager .first { padding: 0px 15px 0px 5px; } #content .pager a { padding: 0px 15px 0px 15px; } /* Generische Klassen */ .status_new { font-weight: bold; } .button_play, .netzsprecher_button_play { padding: 5px 0px 5px 20px; background: url('../images/button_play.gif') no-repeat 0px 50%; } .button_play span, .netzsprecher_button_play span { display: none; } .button_stop, .netzsprecher_button_stop { padding: 5px 0px 5px 20px; background: url('../images/button_stop.gif') no-repeat 0px 50%; } .button_stop span, .netzsprecher_button_stop span { display: none; } .button_delete { padding: 5px 0px 5px 20px; background: url('../images/button_delete.gif') no-repeat 0px 50%; } .button_delete span { display: none; } .button_comment { padding: 5px 0px 5px 20px; background: url('../images/button_comment.gif') no-repeat 0px 50%; } .button_comment span { display: none; } .button_rss { padding: 5px 0px 5px 20px; background: url('../images/button_rss.gif') no-repeat 0px 50%; } .button_rss span { display: none; } /* Dirty Helper */ .center { text-align: center; } .hide { display: none; }