/* Load basic components */ @import url('basic.reset.css'); @import url('basic.helpers.css'); /* ============================================================================ == Typographic theme == =========================================================================== */ /* - general settings */ .typotheme { font-size: 14px; font-family: Calibri, Arial, sans-serif; line-height: 24px; } .typotheme p, .typotheme table, .typotheme blockquote, .typotheme ul, .typotheme ol { margin: 0 0 14px 0; } .typotheme em, .typotheme i { background: #D2E8EF; padding: 3px; } .typotheme strong, .typotheme b { font-weight: bold; } .typotheme blockquote { margin: auto 20px; padding: 0 10px; border: 5px solid #E2E2E2; border-top: none; border-bottom: none; } .typotheme acronym { border-bottom: 1px dotted #CCCCCC; cursor: help } .typotheme abbr { border-bottom: 1px dashed #CCCCCC; cursor: help } /* - headings */ .typotheme h1, .typotheme h2, .typotheme h3, .typotheme h4, .typotheme h5 { line-height: 1.3em; margin: 0 0 0.35em 0; } .typotheme h1 { font-size: 180%; letter-spacing: -0.04em; } .typotheme h2 { font-size: 150%; font-weight: bold; letter-spacing: -0.04em; color: #2E2E2E; } .typotheme h3 { font-size: 130%; font-weight: bold; letter-spacing: -0.03em; color: #495055; background: #f1f1f1; padding: 5px 7px 2px; } .typotheme h4 { font-size: 110%; font-weight: bold; letter-spacing: -0.0em; color: #495055; } .typotheme h5 { font-size: 110%; font-weight: bold; letter-spacing: -0.0em; color: #495055; } /* - lists */ .typotheme ul, .typotheme ol { margin-left: 24px; } .typotheme ul ul, .typotheme ol ol { margin-left: 22px; margin-bottom: 0; } .typotheme ul { list-style: disc; } .typotheme ul ul { list-style: circle; } .typotheme ol { list-style: decimal; } .typotheme ol ol { list-style: lower-alpha; } .typotheme dl { margin-left: 0.5em; } .typotheme dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* clearfix */ * html .typotheme dl { height: 1%; } /* clearfix */ .typotheme dt { width: 100px; float: left; clear: left; padding: 0 7px 0 0; text-align: left; } .typotheme dd { float: left; width: auto; } .typotheme dt+dd+dt, .typotheme dd+dt+dd { border-top: 2px solid #e2e2e2; } /* - tables */ .typotheme table { } .typotheme table caption { font-size: 110%; font-weight: bold; letter-spacing: -0.0em; margin: 0 0 0.15em 0; } .typotheme table th, .typotheme table td { color: #333333; padding: 0.5em 0.7em; } .typotheme table thead th { background-color: #D2EAF1; border-top: 1px solid #4BACC6; border-bottom: 1px solid #4BACC6; font-weight: bold; } .typotheme table td { border-bottom: 1px solid #4BACC6; } .typotheme table tr.odd td { background-color: #E9F0F2; } .typotheme table.form-table td { border-bottom: none; } /* - images */ .typotheme img { margin: 10px; } .typotheme img.right, .typotheme img.alignright { float: right; margin: auto 0px auto 10px; } .typotheme img.left, .typotheme img.alignleft { float: left; margin: auto 10px auto 0px; } .typotheme .wp-caption { border: 1px solid #d3d3d3; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .typotheme .wp-caption.alignright { float: right; margin: auto 0px auto 10px; } .typotheme .wp-caption.alignleft { float: left; margin: auto 10px auto 0px; } .typotheme .wp-caption a { display: block; } .typotheme .wp-caption a img { display: block; margin: 5px; } .typotheme .wp-caption .wp-caption-text { margin: 0 5px; text-align: center; } /* - forms */ .typotheme form { } .typotheme fieldset { } .typotheme legend { font-size: 22px; font-weight: bold; color: #333333; } .typotheme label { width: 100px; margin-top: 3px; margin-right: 10px; font-weight: bold; color: #333; font-size: 1em; } .typotheme input { width: 300px; padding: 5px; font-size: 20px; } .typotheme select { width: auto; padding: 5px; margin-top: 7px;} .typotheme textarea { width: 300px; height: 100px; font-family: sans-serif; padding: 5px; margin-top: 5px;} .typotheme input[type=file] { font-size: 1em; } .typotheme input[type=submit], .typotheme input.submit, .typotheme input[type=reset], .typotheme input.reset { width: auto; padding: 4px 10px; font-size: 20px; } /* Links */ .typotheme a.external { background: url('../img/icons/link-external.png') no-repeat center right; padding-right: 15px; } .typotheme a[href^=mailto], .typotheme a.mailto { background: url('../img/icons/email.png') no-repeat center right; padding-right: 23px; } /* Error and notice message boxes */ .typotheme .error, .typotheme .notice { width: auto; padding: 10px; margin: 3px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .typotheme .error { background-color: #FCDFDC; border: 1px solid #E0AEA9; } .typotheme .notice { background-color: #E4FCDC; border: 1px solid #B1E0A9; } /* ============================================================================ == Layout == =========================================================================== */ /* Global */ a { color: #0066CC; /*0056B7*/ } a:hover { text-decoration: none; } .clear { clear: both; } /* Top wrappers */ #page { font-family: Arial, sans-serif; } body { background: fixed url('../img/page.bg3.jpg') repeat top center; } /* Header */ #head { width: 100%; margin: 20px 0; } #head .inner { width: 960px; height: 422px; margin: 0 auto; position: relative; } #head .logo { position: absolute; top: 7px; left: 30px; width: 139px; height: 59px; z-index: 15; } #head .logo a { display: block; width: 100%; height: 100%; text-indent: 2000px; overflow: hidden; background: url('../img/head.logo.png') no-repeat top left; } #head .navigation { width: 100%; } #head .navigation.top { height: 71px; position: absolute; top: 0; left: 0; background: transparent url('../img/head.navigationTop.bg.png') no-repeat top left; z-index: 10; } #head .navigation.top ul { position: absolute; left: 200px; top: 12px; height: 44px; } #head .navigation.top ul li { float: left; height: 100%; } #head .navigation.top ul li a { width: 80px; display: block; height: 100%; overflow: hidden; text-indent: -2000px; background-repeat: no-repeat; background-position: top left; } #head .navigation.top ul li a:hover { background-position: bottom left; } #head .navigation.top ul li.work a { width: 86px; background-image: url('../img/head.navigationTop.work.png'); } #head .navigation.top ul li.about a { width: 66px; background-image: url('../img/head.navigationTop.about.png'); } #head .navigation.top ul li.blog a { width: 66px; background-image: url('../img/head.navigationTop.blog.png'); } #head .navigation.top ul li.contact a { width: 75px; background-image: url('../img/head.navigationTop.contact.png'); } #head .navigation.top ul li.partners a { width: 77px; background-image: url('../img/head.navigationTop.partners.png'); } #head .navigation.bottom { height: 70px; position: absolute; bottom: 0; background: transparent url('../img/head.navigationBottom.bg.png') no-repeat top left; z-index: 10; } #head .navigation.bottom ul { position: absolute; left: 10px; top: 12px; height: 42px; } #head .navigation.bottom ul li { float: left; height: 100%; } #head .navigation.bottom ul li a { width: 80px; height: 22px; display: block; overflow: hidden; text-indent: -2000px; background-repeat: no-repeat; background-position: top center; padding: 0 19px; margin-top: 10px; } #head .navigation.bottom ul li a:hover { background-position: bottom center; } #head .navigation.bottom ul li.separator { width: 3px; height: 42px; background-image: url('../img/head.navigationBottom.separator.png'); } #head .navigation.bottom ul li.architecture a { width: 94px; background-image: url('../img/head.navigationBottom.architecture.png'); } #head .navigation.bottom ul li.ads a { width: 63px; background-image: url('../img/head.navigationBottom.ads.png'); } #head .navigation.bottom ul li.design a { width: 53px; background-image: url('../img/head.navigationBottom.design.png'); } #head .navigation.bottom ul li.interview a { width: 85px; background-image: url('../img/head.navigationBottom.interview.png'); } #head .navigation.bottom ul li.movies a { width: 53px; background-image: url('../img/head.navigationBottom.movies.png'); } #head .navigation.bottom ul li.music a { width: 53px; background-image: url('../img/head.navigationBottom.music.png'); } #head .navigation.bottom ul li.photos a { width: 48px; background-image: url('../img/head.navigationBottom.photos.png'); } #head .navigation.bottom ul li.technology a { width: 76px; background-image: url('../img/head.navigationBottom.technology.png'); } #head .navigation.bottom ul li.fashion a { width: 53px; background-image: url('../img/head.navigationBottom.fashion.png'); } #head .navigation.bottom ul li.art a { width: 52px; background-image: url('../img/head.navigationBottom.art.png'); } #head .socioware { height: 21px; position: absolute; top: 25px; right: 15px; z-index: 15; } #head .socioware ul { } #head .socioware ul li { float: left; height: 100%; margin: 0 3px; } #head .socioware ul li a { width: 20px; display: block; height: 100%; overflow: hidden; text-indent: -2000px; background-repeat: no-repeat; background-position: center center; } #head .socioware ul li.facebook a { background-image: url('../img/head.socioware.facebook.png'); } #head .socioware ul li.twitter a { background-image: url('../img/head.socioware.twitter.png'); } #head #headDecoration { width: 960px; height: 422px; position: absolute; z-index: 0; background: transparent url('../img/head.bg.design.png') no-repeat top left; } #head #headDecoration .board { width: 100%; height: 100%; display: block; position: absolute; top: 0px; left: 0; z-index: 3; overflow: hidden; } #head #headDecoration .board.top { z-index: 4; } /* #head #headBgDecoration .board { width: 960px; height: 414px; display: block; position: absolute; top: 4px; left: 0; z-index: 3; overflow: hidden; } */ /* Body */ #body { width: 960px; position: relative; clear: both; margin: 0 auto; } #body .mainColumn { width: 628px; float: left; padding-bottom: 10px; background-color: white; border: 1px solid silver; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #body .mainColumn .articles { margin: 0; clear: both; } #body .mainColumn .articles .article { position: relative; border-bottom: 1px solid #E3E3E3; padding: 14px 14px 14px 14px; margin-top: 2px } #body .mainColumn .articles .article .mainImage { width: 630px; height: 414px; margin-top: -16px; margin-left: -14px; /* background: white url('../img/body.article.bg.png') no-repeat top left; */ } #body .mainColumn .articles .article .mainImage .overlay { position: absolute; top: 14px; left: 13px; z-index: 6; background: transparent url('../img/body.article.mainImage.overlay.png') no-repeat top left; display: block; width: 602px; height: 400px; } #body .mainColumn .articles .article .mainImage img { position: absolute; top: 14px; left: 14px; z-index: 5; width: 602px; height: 400px; } #body .mainColumn .articles .article .header { position: relative; margin: 0 0 0 8px; } #body .mainColumn .articles .article .header h2.title { font-size: 32px; letter-spacing: 1px; padding: 10px 0 0 0; font-family: Calibri, Arial, sans-serif; } #body .mainColumn .articles .article .header h3.title { font-size: 25px; font-weight: bold; letter-spacing: -2px; color: #495055; background: #f1f1f1; padding: 3px 7px; } #body .mainColumn .articles .article .header .title a { color: black; text-decoration: none; } #body .mainColumn .articles .article .header .title a:hover { text-decoration: underline; } #body .mainColumn .articles .article .header .title .edit { font-size: 16px; letter-spacing: 0; position: relative; top: -3px; } #body .mainColumn .articles .article .header .share { width: 91px; position: absolute; top: 8px; left: -114px; } #body .mainColumn .articles .article .header .share li { float: left; margin: 0 0 3px 0; } #body .mainColumn .articles .article .header .share a { display: block; background-position: 65px 0; background-repeat: no-repeat; width: 91px; height: 19px; overflow: hidden; text-indent: -2000px; } #body .mainColumn .articles .article .header .share a:hover { background-position: right top; } #body .mainColumn .articles .article .header .share .facebook a { background-image: url("../img/body.shareLink.facebook.png"); } #body .mainColumn .articles .article .header .share .twitter a { background-image: url("../img/body.shareLink.twitter.png"); } #body .mainColumn .articles .article .header .categories { } #body .mainColumn .articles .article .header .categories a { background-color: black; color: white; font-size: 11px; float: left; text-decoration: none; padding: 3px 4px; margin-right: 0px; } #body .mainColumn .articles .article .header .categories a:hover { background-color: #333; } #body .mainColumn .articles .article .content { margin: 10px 8px 0; } #body .mainColumn .articles .article .metainfo { margin: 0 0 0 8px; font-size: 13px; display: block; } #body .mainColumn .comments { margin: 0px 20px 0; } #body .mainColumn .articles .navigation { width: 100%; background: #f1f1f1; line-height: 40px } #body .mainColumn .articles .navigation .alignleft { float: left; margin-left: 10px; } #body .mainColumn .articles .navigation .alignright { float: right; margin-right: 10px; } #body .mainColumn .articles .ngg-galleryoverview { margin-bottom: 15px; } #body .sidebarColumn { width: 300px; float: right; } #body .sidebarColumn .box { background-color: white; margin-bottom: 20px; padding-top: 1px; border: 1px solid silver; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #body .sidebarColumn .box h4 { background-color: black; color: white; padding: 0 15px; margin: 14px 14px 0; height: 50px; line-height: 50px; font-size: 24px; font-weight: bold; letter-spacing: -1px; font-family: Calibri, Arial, sans-serif; } #body .sidebarColumn .box h4 a { color: white; text-decoration: none; } #body .sidebarColumn .box .content { padding: 8px 20px 10px; } #body .sidebarColumn .box.paragraphSeparator .content p { padding-bottom: 5px; margin-bottom: 5px; background: url("../img/sidebar.paragraphSeparator.png") no-repeat bottom left; } #body .sidebarColumn .box .content a.more { float: right; } #body .sidebarColumn .box.contact a.external { background: none; } #body .sidebarColumn .box.subcategories ul { margin: 0; list-style: none; } #body .sidebarColumn .box.twitter a { background: none; padding-right: 0; } #body .sidebarColumn .box.twitter ul { list-style: none; margin-left: 0; } #body .sidebarColumn .box.twitter li { padding-bottom: 5px; margin-bottom: 5px; background: url("../img/sidebar.paragraphSeparator.png") no-repeat bottom left; } #body .sidebarColumn .box.twitter input { width: 250px; } #body .sidebarColumn .box.twitter input.button-primary { width: auto; } #body .homepageLinks { } #body .homepageGrid.first { width: 990px; } #body .homepageLinks li { position: relative; float: left; width: 270px; height: 130px; border: 1px solid silver; padding: 225px 13px 8px 13px; margin: 0 32px 32px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: white; /* background: white url("../img/highlightBox.bg.png") no-repeat top left;*/ } #body .homepageLinks li .overlay { position: absolute; top: 8px; left: 8px; z-index: 6; width: 282px; height: 207px; background: transparent url("../img/highlightBox.image.overlay.png") no-repeat top left; } #body .homepageLinks li img { position: absolute; top: 8px; left: 8px; z-index: 5; width: 282px; height: 207px; } #body .homepageLinks li a { color: black; text-decoration: none; } #body .homepageLinks li a:hover { text-decoration: underline; } #body .homepageLinks li h3 { color: black; margin: 0px 0 2px; font-size: 19px; clear: left; } #body .homepageLinks li h5 { background: black; color: white; padding: 3px 5px; margin: 3px 0 6px; float: left; } #body .homepageLinks li .content { clear: left; font-size: 14px; line-height: 22px; color: #333; } #body #searchForm { margin-bottom: 10px; } #body #searchForm input { width: 300px; float: left; padding: 5px; margin-right: 5px; font-size: 20px; } #body #searchForm input.submit { width: auto; padding: 4px 10px; font-size: 20px; } #body .homepageGrid {} /* Footer */ #foot { width: 100%; height: 150px; margin-top: 30px; background: transparent url("../img/foot.bg.png") repeat-x top left; } #foot .inner { width: 960px; height: 100%; margin: 0 auto; position: relative; } #foot .inner .wrapper { position: relative; } #foot .inner .wrapper a { color: black; } #foot .inner .logo { display: block; width: 203px; height: 73px; background: url("../img/foot.logo.png") no-repeat top left; position: absolute; top: 30px; left: 15px; text-indent: -2000px; } #foot .inner .socioware { width: 250px; position: absolute; top: 30px; right: 15px; } #foot .inner .socioware a { margin-left: 3px; float: left; display: block; width: 34px; height: 34px; background-repeat: no-repeat; background-position: top left; text-indent: -2000px; } #foot .inner .socioware .facebook a { background-image: url("../img/foot.socioware.facebook.png"); } #foot .inner .socioware .bandzone a { background-image: url("../img/foot.socioware.bandzone.png"); } #foot .inner .socioware .twitter a { background-image: url("../img/foot.socioware.twitter.png"); } #foot .inner .socioware .myspace a { background-image: url("../img/foot.socioware.myspace.png"); } #foot .inner .socioware .flickr a { background-image: url("../img/foot.socioware.flickr.png"); } #foot .inner .socioware .youtube a { background-image: url("../img/foot.socioware.youtube.png"); } #foot .inner .credits { position: absolute; top: 75px; right: 15px; width: 270px; text-align: center; font-size: 12px; } #foot .inner .credits { } /* ============================================================================ == Other == =========================================================================== */ /* hide addthis stat thingy */ #atffc { display: none; } .audio { padding-left: 20px; background: url('../img/icons/control_play_blue.png') no-repeat center left; } .audio.playing { background-image: url('../img/icons/control_stop_blue.png'); }