/* -------------------------------------------------------------- ----------------------------------------------------------------- Site: File: common.css CONTENTS: 1 Essentials 2 Basic layout 3 Typography Basics 4 Footer 5 Reoccurring Classes 6 jQuery Plugins 6.1 FancyBox 6.2 jCarousel 7 Form Elements 8 Calendar Elements 9 Social Bookmarks Elements ----------------------------------------------------------------- -------------------------------------------------------------- */ /* 1 Essentials */ body { background: #442C24 url(bg.jpg) repeat fixed center center; overflow-x: hidden; z-index: -2; } .container_16 {position:relative;} /* 2 Basic layout */ #header h1 { color:white; display:block; float:left; height:100px; margin:0 0 0 -10px; padding:0; width:760px; } #header h1 a:hover { background-position: 0 -99px; } #menus{ height:115px; width:760px; margin-left:-20px; padding-bottom:0px; } ul#main_nav { height: 55px; left: 331px; list-style-type: none; margin: 0; padding: 0; position: absolute; top: 60px; } ul#main_nav li { margin: 0; padding: 0; position: absolute; width: 105px; z-index: 5; } ul#main_nav li.whoweare a { background: transparent url(whoweare.png) no-repeat scroll 0 0; } ul#main_nav li.whoweare a:hover { background-position: 2px -57px; } ul#main_nav li.insider { left: 283px; } ul#main_nav li.insider a { background: transparent url(connected.png) no-repeat scroll 0 0; } ul#main_nav li.insider a:hover { background-position: -1px -57px; } ul#main_nav li.seehear { left: 197px; } ul#main_nav li.seehear a { background: transparent url(seehear.png) no-repeat scroll 0 0; } ul#main_nav li.seehear a:hover { background-position: -1px -65px; } ul#main_nav li.thisweek { left: 102px; } ul#main_nav li.thisweek a { background: transparent url(thisweek.png) no-repeat scroll 0 0; } ul#main_nav li.thisweek a:hover { background-position: 1px -60px; } ul#main_nav li a { display: block; height: 55px; text-indent: -9999px; width: 105px; } div#sermontag { background: transparent url(sermontag_small.png) no-repeat scroll 0 0; color: white; height: 145px; overflow: hidden; position: absolute; right: -54px; top: 0; width: 279px; z-index: 4; } div#sermontag h2 { display: none; } div#sermontag ul { list-style-type: none; margin: 0; padding: 0; } div#sermontag ul li { margin: 0; padding: 0; position: absolute; text-indent: -9999px; } div#sermontag ul li#listenlive { bottom: 22px; height: 16px; left: 49px; width: 71px; } div#sermontag ul li#archives { bottom: 16px; height: 15px; left: 117px; width: 61px; } div#sermontag ul li#listenlive a { background: transparent url(listen_small.png) no-repeat scroll 0 0; display: block; height: 12px; width: 50px; } div#sermontag ul li#listenlive a:hover { background-position: 0 -12px; } div#sermontag ul li#archives a { background: transparent url(archives_small.png) no-repeat scroll 0 0; display: block; height: 11px; width: 44px; } div#sermontag ul li#archives a:hover { background-position: 0 -11px; } /* 3 Typography Basics */ @font-face { font-family:"Arial Narrow"; src:url("/css/font/ARIALN.TTF") format("truetype"); } /* A font by Jos Buivenga (exljbris) -> http://www.exljbris.nl */ @font-face { font-family: 'MuseoSans'; src: url('/css/font/museosans_500_italic-webfont.eot'); src: local('â?º'), url('/css/font/museosans_500_italic-webfont.woff') format('woff'), url('/css/font/museosans_500_italic-webfont.ttf') format('truetype'), url('/css/font/museosans_500_italic-webfont.svg#webfont') format('svg'); font-style: italic; } @font-face { font-family: 'MuseoSans'; src: url('/css/font/museosans_500-webfont.eot'); src: local('â?º'), url('/css/font/museosans_500-webfont.woff') format('woff'), url('/css/font/museosans_500-webfont.ttf') format('truetype'), url('/css/font/museosans_500-webfont.svg#webfont') format('svg'); font-style: normal; } @font-face { font-family: 'MuseoWeb'; src: url('/css/font/museo700-regular-webfont.eot'); src: local('â?º'), url('/css/font/museo700-regular-webfont.woff') format('woff'), url('/css/font/museo700-regular-webfont.ttf') format('truetype'), url('/css/font/museo700-regular-webfont.svg#webfont') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'MuseoWeb'; src: url('/css/font/museo500-regular-webfont.eot'); src: local('â?º'), url('/css/font/museo500-regular-webfont.woff') format('woff'), url('/css/font/museo500-regular-webfont.ttf') format('truetype'), url('/css/font/museo500-regular-webfont.svg#webfont') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'MuseoWeb'; src: url('/css/font/museo300-regular-webfont.eot'); src: local('â?º'), url('/css/font/museo300-regular-webfont.woff') format('woff'), url('/css/font/museo300-regular-webfont.ttf') format('truetype'), url('/css/font/museo300-regular-webfont.svg#webfont') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'FertigoWeb'; src: url('/css/font/fertigo_pro-webfont.eot'); src: local('â?º'), url('/css/font/fertigo_pro-webfont.woff') format('woff'), url('/css/font/fertigo_pro-webfont.ttf') format('truetype'), url('/css/font/fertigo_pro-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } a, a:link, a:visited { color:#de5f2a; text-decoration:none; transition: color .2s linear; -moz-transition: color .2s linear; -webkit-transition: color .2s linear; } a:hover { color: #FFE09F; } h3 a:link, h3 a:visited { color: #85c14f; } h3 a:hover { color: #a6df62; } p, ol, ul, li, dt, dd, td, th { font-family: Helvetica,Arial,sans-serif; font-size: 10pt; color: white; } h1, h2, h3, h4 { text-transform: uppercase; font-family: MuseoSans,Helvetica,Arial,sans-serif; font-size: 11pt; letter-spacing: -1px; color: #85c14f; } h4 { font-size: 12pt; } /* 4 FOOTER */ #footer { background:transparent url(ft_bg.png) no-repeat scroll 0 28px; min-height:80px; left:-10px; margin-top:50px; position:relative; width:960px; } #footer span#mailsticker { display:block; float:left; height:150px; left:-32px; overflow:hidden; position:absolute; text-indent:-9999px; top:-70px; width:150px; z-index:2; } #footer span#mailsticker a { background:transparent url(mailsticker.png) no-repeat scroll 0 0; display:block; height:150px; width:150px; } #footer span#mailsticker a:hover { background-position: 0 -150px; } #footer span#feedback_patch { display: block; float: left; height: 75px; left: 96px; overflow: hidden; position: absolute; text-indent: -9999px; top: -2px; width: 142px; z-index: 1; } #footer span#feedback_patch a { background: transparent url(feedback_btn.png) no-repeat scroll 0 0; display: block; height: 153px; width: 272px; } #footer span#feedback_patch a:hover { background-position: 0 -74px; } #footer span#feedback_patch { left: -42px; z-index: 2; } #kenar { display: block; float: left; height: 74px; left: 120px; overflow: hidden; position: absolute; text-indent: -9999px; top: -428px; width: 137px; z-index: 1; } #kenar { background: transparent url(suslu.png) no-repeat scroll 0 0; display: block; height: 150px; width: 137px; } #kenar a:hover { background-position: 0 -74px; } #kenar { left: -62px; z-index: 2; } #alt_kenar { display: block; float: left; height: 74px; left: 400px; overflow: hidden; position: absolute; text-indent: -9999px; top: -408px; width: 137px; z-index: 1; } #alt_kenar { background: transparent url(sag_sus.png) no-repeat scroll 0 0; display: block; height: 150px; width: 137px; } #alt_kenar a:hover { background-position: 0 -74px; } #alt_kenar { left: 886px; z-index: 2; } #footer ul { float: right; list-style-type: none; text-align: right; margin-top: 32px; width: 760px; } #footer ul li { display: inline; font-family: "Arial Narrow",Arial,sans-serif; font-size: 10pt; font-weight: 300; left: -10px; margin-left: 7px; position: relative; top: 10px; } #footer ul li.break { } #footer ul li a { color: #fff; } #footer ul li a:hover { text-decoration: underline; } #footer .highlight { color: #de5f2a; font-family: MuseoWeb; font-weight:300; letter-spacing:-.05em; } #footer .map { color: white; } /* 5 Reoccurring Classes and IDs*/ .hide { display: none; } .rule, .rule12, .rule13 { background: transparent url(separator.png) no-repeat scroll 0 0; border: none; clear: both; height: 50px; margin: 0 0 10px -10px; outline: none; position: relative; top: -20px; width: 960px; } .rule hr, .rule13 hr { display: none; } .rule13 { background: url(separator_grid13.png) no-repeat 0 0; margin-right: -10px; width: 780px; } .rule12 { background: url(separator_grid12.png) no-repeat 0 0; margin-right: -10px; width: 720px; } .rule12 hr { display: none; } p.getmore { background-image: none; } p.getmore a { background: transparent url(getmore.png) no-repeat scroll 0 0; display: block; height: 43px; text-indent: -9999px; width: 139px; } p.back2top { font-size: 12pt; font-weight: ligter; text-align: right; text-transform: lowercase; } .ui-tabs-nav .ui-tabs-hide, .ui-tabs-hide { display: none; } textarea.med { height:60px; width:300px; } img.right { float: right; margin: 0 0 15px 15px; } img.left { float: left; margin: 0 15px 15px 0; } .img_vid_link { background: rgba(255,255,255,0.0) none no-repeat center; transition: background .2s ease-in; -moz-transition: background .2s ease-in; -webkit-transition: background .2s ease-in; } .img_vid_link:hover { background: rgba(255,255,255,0.1) url(play_btn.png) no-repeat center; border: none; } #tellfriend, #email_pastor { background: #442c24 url(bg.jpg) repeat fixed center center; border: 10px solid #fff; left: 50%; margin-left: -190px; margin-top: 30px; padding: 20px 40px; position: absolute; top: 50%; width: 380px; z-index: 1; box-shadow: 0 0 59px #000; -webkit-box-shadow: 0 0 59px #000; -moz-box-shadow: 0 0 59px #000; } #tellfriend a.close, #email_pastor a.close { background:url(fancy_closebox.png) no-repeat scroll 0 0 transparent; height:30px; overflow: hidden; position :absolute; right:-23px; text-indent:-1000px; top:-23px; width:30px; } #tellfriend h2, #email_pastor h2 { font-size: 12pt; text-align: left; } #tellfriend label, #email_pastor label { display: block; } .float-clear:after { content: "."; clear: both; display: block; height: 0; font-size: 0; visibility: hidden; } /* 6 jQuery Plugins */ /* 6.1 FancyBox */ html, body { height: 100%; } div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #666; display: none; z-index: 30; } * html div#fancy_overlay { position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } div#fancy_wrap { text-align: left; } div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; } div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 480px; background: transparent url('fancy_progress.png') no-repeat; } div#fancy_loading_overlay { position: absolute;background-color: #FFF; z-index: 30; } div#fancy_loading_icon { position: absolute; background: url('fancy_loading.gif') no-repeat; z-index: 35; width: 16px; height: 16px; } div#fancy_outer { position: absolute; top: 0; left: 0; z-index: 90; padding: 18px 18px 33px 18px; margin: 0; overflow: hidden; background: transparent; display: none; } div#fancy_inner { position: relative; width:100%; height:100%; border: 1px solid #BBB; background: #FFF; } div#fancy_content { margin: 0; z-index: 100; position: absolute; } div#fancy_div { background: #000; color: #FFF; height: 100%; width: 100%; z-index: 100; } img#fancy_img { position: absolute; top: 0; left: 0; border:0; padding: 0; margin: 0; z-index: 100; width: 100%; height: 100%; } div#fancy_close { position: absolute; top: -12px; right: -15px; height: 30px; width: 30px; background: url('fancy_closebox.png') top left no-repeat; cursor: pointer; z-index: 181; display: none; } #fancy_frame { position: relative; width: 100%; height: 100%; display: none; } #fancy_ajax { background: #442C24 url(bg.jpg) repeat fixed; height: 100%; overflow: auto; width: 100%; } #fancy_ajax #event { padding:10px 20px; } #fancy_ajax #event h1 { font-family: MuseoWeb; font-size:14pt; letter-spacing: 0; margin-bottom:10px; } #fancy_ajax #event h1 i { display: block; font-size: 10pt; font-weight: normal; text-transform: none; } a#fancy_left, a#fancy_right { position: absolute; bottom: 0px; height: 100%; width: 35%; cursor: pointer; z-index: 111; display: none; background-image: url(gif;base64,AAAA); outline: none; } a#fancy_left { left: 0px; } a#fancy_right { right: 0px; } span.fancy_ico { position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; z-index: 112; cursor: pointer; display: block; } span#fancy_left_ico { left: -9999px; background: transparent url('fancy_left.png') no-repeat; } span#fancy_right_ico { right: -9999px; background: transparent url('fancy_right.png') no-repeat; } a#fancy_left:hover { visibility: visible; } a#fancy_right:hover { visibility: visible; } a#fancy_left:hover span { left: 20px; } a#fancy_right:hover span { right: 20px; } .fancy_bigIframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } div#fancy_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 70; border: 0; padding: 0; margin: 0; } div.fancy_bg { position: absolute; display: block; z-index: 70; border: 0; padding: 0; margin: 0; } div.fancy_bg_n { top: -18px; width: 100%; height: 18px; background: transparent url('fancy_shadow_n.png') repeat-x; } div.fancy_bg_ne { top: -18px; right: -13px; width: 13px; height: 18px; background: transparent url('fancy_shadow_ne.png') no-repeat; } div.fancy_bg_e { right: -13px; height: 100%; width: 13px; background: transparent url('fancy_shadow_e.png') repeat-y; } div.fancy_bg_se { bottom: -18px; right: -13px; width: 13px; height: 18px; background: transparent url('fancy_shadow_se.png') no-repeat; } div.fancy_bg_s { bottom: -18px; width: 100%; height: 18px; background: transparent url('fancy_shadow_s.png') repeat-x; } div.fancy_bg_sw { bottom: -18px; left: -13px; width: 13px; height: 18px; background: transparent url('fancy_shadow_sw.png') no-repeat; } div.fancy_bg_w { left: -13px; height: 100%; width: 13px; background: transparent url('fancy_shadow_w.png') repeat-y; } div.fancy_bg_nw { top: -18px; left: -13px; width: 13px; height: 18px; background: transparent url('fancy_shadow_nw.png') no-repeat; } div#fancy_title { position: absolute; bottom: -33px; left: 0; width: 100%; z-index: 100; display: none; } div#fancy_title div { color: #FFF; font: bold 12px Arial; padding-bottom: 3px; } div#fancy_title table { display: none; } div#fancy_title table td { padding: 0; vertical-align: middle; } td#fancy_title_left { height: 32px; width: 15px; background: transparent url(fancy_title_left.png) repeat-x; } td#fancy_title_main { height: 32px; background: transparent url(fancy_title_main.png) repeat-x; } td#fancy_title_right { height: 32px; width: 15px; background: transparent url(fancy_title_right.png) repeat-x; } /* 6.2 jCarousel */ .jcarousel-container{position:relative;}.jcarousel-clip{z-index:2;padding:0;margin:0;overflow:hidden;position:relative;}.jcarousel-list{z-index:1;overflow:hidden;position:relative;top:0;left:0;margin:0;padding:0;}.jcarousel-list li,.jcarousel-item{float:left;list-style:none;width:286px;height:170px;}.jcarousel-next{background:transparent url(fu_carousel_btns.png) no-repeat scroll -50px -50px;bottom:10px;cursor:pointer;display:block;height:50px;position:absolute;right:20px;width:50px;z-index:3;}.jcarousel-next:hover{background-position:-50px -100px;}.jcarousel-next-disabled,.jcarousel-next-disabled:hover{background-position:-50px 0;cursor:default;}.jcarousel-prev{background:transparent url(fu_carousel_btns.png) no-repeat scroll 0 -50px;bottom:10px;cursor:pointer;display: block;height:50px;position:absolute;right:80px;width:50px;z-index:3;}.jcarousel-prev:hover{background-position:0 -100px;}.jcarousel-prev-disabled,.jcarousel-prev-disabled:hover{background-position:0 0;cursor:default;} /* 7 Form Elements */ input.text, input[type=text], textarea { background-color: #fff; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4); font-family:Helvetica,Verdana,Arial,sans-serif; font-size:11pt; padding:5px 20px 5px 5px; -moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4); } textarea { padding: 5px; } .valid { background: #fff url(accept.png) no-repeat center right; } .problem { background: #fff url(cross.png) no-repeat center right; } /* 8 Calendar Elements */ #weekly_calendar ul { list-style-type: none; margin: 0; padding: 0; } #weekly_calendar li { left: -5px; line-height: 1.2em; margin: 0 0 5px; padding: 5px 5px 3px; position: relative; } #weekly_calendar li span.date { background: transparent url(calendar.png) no-repeat scroll 2px 0; clear: both; color: black; display: block; float: left; font-size: 16pt; font-weight: bold; height: 32px; padding-top: 18px; text-align: center; width: 48px; } #weekly_calendar li span.title { float: right; padding-top: 10px; text-align: left; width: 150px;} #weekly_calendar li.Jan span.date { background-position: -49px 0; } #weekly_calendar li.Jan:hover span.date { background-position: 0 0; } #weekly_calendar li.Feb span.date { background-position: -49px -50px; } #weekly_calendar li.Feb:hover span.date { background-position: 0 -50px; } #weekly_calendar li.Mar span.date { background-position: -49px -100px; } #weekly_calendar li.Mar:hover span.date { background-position: 0 -100px; } #weekly_calendar li.Apr span.date { background-position: -49px -150px; } #weekly_calendar li.Apr:hover span.date { background-position: 0 -150px; } #weekly_calendar li.May span.date { background-position: -49px -200px; } #weekly_calendar li.May:hover span.date { background-position: 0 -200px; } #weekly_calendar li.Jun span.date { background-position: -49px -250px; } #weekly_calendar li.Jun:hover span.date { background-position: 0 -250px; } #weekly_calendar li.Jul span.date { background-position: -49px -300px; } #weekly_calendar li.Jul:hover span.date { background-position: 0 -300px; } #weekly_calendar li.Aug span.date { background-position: -49px -350px; } #weekly_calendar li.Aug:hover span.date { background-position: 0 -350px; } #weekly_calendar li.Sep span.date { background-position: -49px -400px; } #weekly_calendar li.Sep:hover span.date { background-position: 0 -400px; } #weekly_calendar li.Oct span.date { background-position: -49px -450px; } #weekly_calendar li.Oct:hover span.date { background-position: 0 -450px; } #weekly_calendar li.Nov span.date { background-position: -49px -500px; } #weekly_calendar li.Nov:hover span.date { background-position: 0 -500px; } #weekly_calendar li.Dec span.date { background-position: -49px -550px; } #weekly_calendar li.Dec:hover span.date { background-position: 0 -550px; } #weekly_calendar li:hover { background: rgba(255,255,255,.05); } #weekly_calendar li hr { border-color: transparent; margin: 0; padding; 0; } /* 9 Social Bookmarks Elements */ #social_bookmarks { background-color: #2e1912; background-color: rgba(40,18,10,.6); border: 1px solid #1e130f; border-radius: 8px; float: left; margin-bottom: 25px; padding: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; } #social_bookmarks p { margin-bottom: 5px; } #social_bookmarks ul { list-style-type: none; float: left; margin-bottom: 0; } #social_bookmarks ul li { float: left; margin: 5px 10px; } #social_bookmarks ul li span { display: none; } #social_bookmarks ul li img { border: none; margin: 0; padding: 0; }