/*
Theme Name: Great Works
Theme URI: http://greatworks.com/
Description: New re-design of Great Works 2009 Site.
Version: 1.0
Author: Great Works
Author URI: http://greatworks.com/
Tags: sky blue, salmon, black, magazine style, mostly custom, two columns, pure AJAX web 2.0 shit.
*/
* {margin:0;padding:0;}
body {font: 12px/20px Georgia, "Times New Roman", Times, serif; color: #666666;}
img {border:none;}
/* general */
.clear {clear:both;}
.left {float:left;}
.right {float:right;}
/* p {margin-bottom: 16px;} */
address {color: #000; font-style: normal; font-size: 20px; line-height: 33px; font-size: 18px;}
address span {color: #00AADC;}
span.blue {font-weight: normal; font-size: 18px; color: #00AADC;}
span.meta {color: red;}
a:link, a:visited, a:active {color: #00AADC;}
a:hover {background-color: #00AADC; color: #FFF;}
/* DEBUGGER */
/*
.left, .right {border: 1px solid red;}
#wrapper {border: 1px solid red;}
#navigation {border: 1px solid black;}
#content {border: 1px solid red;}
.section {border: 1px solid green;}
.section .office {border: 1px solid blue;}
#footer {border: 1px solid #CCC;}
/* DEBUGGER */
#wrapper {min-width: 990px; max-width: 1188px; margin: 0 auto 0 auto;}
#wrapper-sub {min-width: 990px; max-width: 990px; margin: 0 auto 0 auto;}
#header {position: relative;}
/* navigation */
#nav {width: 596px; height: 42px; margin: 0 auto 0 auto; /*position:absolute;*/ top:0; left:296px;}
#nav ul {list-style: none; text-align: center;}
#nav ul li {display: inline; text-transform: uppercase; margin: 0 5px 0 5px;}
#nav li.current_page_item a {background-color: #00AADC; color: #FFF;}
#nav ul li a {color: #000; text-decoration: none; display: inline-block; height: 26px; padding: 10px 5px 0 5px; font-size: 13px;}
#nav ul li a:link,
#nav ul li a:active,
#nav ul li a:visited {text-decoration: none; display: inline-block; height: 26px; padding: 10px 5px 0 5px;}
#nav ul li a:hover {background-color: #00AADC; color: #FFF;}
#nav ul li a.current {background-color: #00AADC; color: #FFF;}
#content {width: 990px; margin: 0 auto 0 auto;}
#footer {margin: 20px 0 0 0; border: 1px solid #FFF;}
#footer .section .box ul {list-style: none; }
#footer .section .box .list {list-style: disc; list-style-position: inside; }
#footer .section {margin: 0 auto 30px auto; border-top: 1px solid #00addc; padding: 17px 0 0 0 ; }
#footer .box {float: left; margin-right: 27px; margin-top: 10px; width: 227px; font-size: 11px; line-height: 21px;}
#footer .box .menu,
#footer .box span {text-transform:uppercase;}
#footer .box a.link {color: #00AADC; text-decoration: underline;}
#footer .box a.link:hover {background-color: #00AADC; color: #FFF; text-decoration: underline;}
#footer a {text-decoration: none; color: #666;}
#footer a:hover {color: #FFF;}
#footer span {color: #00AADC;}
#footer .left {float: left;}
#footer .mid {float: left; margin: 6px auto 0 auto; text-align: center; width: 854px;}
#footer .mid a {margin: 0 6px 0 6px; color: #00AADC;}
#footer .mid a:hover {margin: 0 6px 0 6px; color: #FFF;}
#footer .right {float: left;}
#footer .right a {background-color: #FFF;}
/* START PAGE
-------------------------------------------------------------------------------------------------------------------------------------*/
.section {width: 990px; margin: 20px 0 0 0; padding: 10px 0 0 0; border-top: 1px solid #00AADC; overflow: hidden; position: relative;}
.section .intro span.light-blue {color: #00AADC;}
.section .intro {width: 530px; font-size: 17px; line-height: 25px; margin: 16px 0 40px 0; color: #999; word-spacing: 2px;}
.section .intro .capital {color: #00AADC; font-size: 80px; float: left; height: 70px; width: 67px; line-height: 75px;}
.section .options {position: absolute; top: 8px; right:0; font-size: 11px;}
.section .options a {color: #000; text-decoration: none; cursor: pointer;}
.section .options a:hover {color: #FFF; text-decoration: underline;}
.section .options a.active {color: #00AADC; text-decoration: underline;}
.section .options a.active:hover {color: #FFF; text-decoration: underline;}
/* round icons */
.row {margin-bottom: 20px;}
.section .item {width: 167px; float:left; margin: 0 105px 0 0; overflow: hidden; height: 260px; cursor: pointer; text-align: center; /*border: 1px solid blue;*/}
.section .item .image {width: 167px; height: 167px; margin-bottom: 5px;}
.section .item .image a {display:block; width:167px; height:167px;}
.section .item .image a:focus {color: #FFF;}
.section .item .image a img {float: left;} /* IE 6 */
.section .item .image a span {width: 167px; height: 167px; display: block; cursor: pointer;}
.section .item .desc {font-size: 20px; color: #00AADC;}
.section .item .desc a {text-decoration: none;}
.section .item .desc .meta {font-size: 10px; color: #666; line-height: 16px; margin-top: 2px;}
.section .item .desc .meta span {color: #ff9999;}
.section .item .desc small {font-size: 10px; color: #666;}
.section .item .desc small span {color: #ff9999;}
.section .item .image a span.smiley_1 {background: url(/images/site/icons_sprite.png) no-repeat 0px 0px;}
.section .item .image a span.smiley_1_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px 0px;}
.section .item .image a span.smiley_2 {background: url(/images/site/icons_sprite.png) no-repeat 0px -167px;}
.section .item .image a span.smiley_2_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -167px;}
.section .item .image a span.prize_1 {background: url(/images/site/icons_sprite.png) no-repeat 0px -334px;}
.section .item .image a span.prize_1_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -334px;}
.section .item .image a span.prize_2 {background: url(/images/site/icons_sprite.png) no-repeat 0px -501px;}
.section .item .image a span.prize_2_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -501px;}
.section .item .image a span.hamburger_1 {background: url(/images/site/icons_sprite.png) no-repeat 0px -668px;}
.section .item .image a span.hamburger_1_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -668px;}
.section .item .image a span.hamburger_2 {background: url(/images/site/icons_sprite.png) no-repeat 0px -835px;}
.section .item .image a span.hamburger_2_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -835px;}
.section .item .image a span.other_1 {background: url(/images/site/icons_sprite.png) no-repeat 0px -1002px;}
.section .item .image a span.other_1_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -1002px;}
.section .item .image a span.other_2 {background: url(/images/site/icons_sprite.png) no-repeat 0px -1169px;}
.section .item .image a span.other_2_hover {background: url(/images/site/icons_sprite.png) no-repeat -167px -1169px;}
/* clients & cases */
.section .item-cc {width:230px; float:left; margin: 0 23px 23px 0;}
.section .item-cc .image-cc {width: 230px; height: 230px;}
.section .item-cc .image-cc a {display:block; width:230px; height:230px;}
.section .item-cc .image-cc a img {float: left;} /* IE 6 */
.section .item-cc .image-cc a span {width: 230px; height: 230px; display: block; cursor: pointer;}
.section .item-cc .image-cc a span.overlay_big {background: url(/images/site/overlay_big.png) no-repeat 0px 0px;}
.section .item-cc .image-cc a span.overlay_big:hover {background: url(/images/site/overlay_big.png) no-repeat -230px 0px;}
.intro-cc {font-size: 24px; line-height: 35px;}
.intro-cc span.pink {font-size: 24px; line-height: 35px; color: #ff9999;}
.section .sub-heading {height: 20px; margin: -5px 0 0 0 ;}
.section .sub-heading h2 span {color: #00AADC; font-style: normal;}
.section .sub-heading h2 {color: #000; font-size: 26px; font-weight: normal; font-style: italic; text-transform: uppercase; letter-spacing: 1px; word-spacing: 0px; margin-bottom: 20px;}
.section .h2news {width: 500px; height: 30px;}
.section .office {float: left; margin-right: 27px; width: 227px;}
.section .office img.image {display: block; border: 1px solid #E5E5E5; padding: 6px;}
.section .office span.title {font-weight: normal; font-size: 18px; color: #00AADC;}
.section .office a.office-img {display: block; border: 1px solid #E5E5E5; padding: 6px;}
.section .office a.office-img:hover {background-color: #FFF; border: 1px solid #999; display: block; padding: 6px;}
.section .office a.link-title {font-weight: normal; font-size: 18px; color: #00AADC; text-decoration: none;}
.section .office a.link-title:hover {color: #FFF; text-decoration: none;}
.pagination {border-top: 1px solid #00addc;; overflow: hidden; padding-top: 5px; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
.pagination .center {margin: 0 auto 0 auto;}
.pagination .center a {color: #000; text-decoration: none; cursor: pointer;}
.pagination .center a:hover {color: #FFF; text-decoration: underline;}
.pagination .center a.current {color: #00AADC; text-decoration: underline;}
.pagination .center a.current:hover {color: #FFF;}
/* SUB PAGE
-------------------------------------------------------------------------------------------------------------------------------------*/
/* offices top 4 image */
.section img.frame {border: 1px solid #E5E5E5; padding: 6px; margin-right: 24px;}
.col-mid ul li, .col-right ul li {margin-left:20px;}
.main-col-left {width: 308px; float: left; margin: 0 30px 0 0; position: relative;}
.main-col-right {width: 308px; float: left;}
.body {width: 650px; font-size: 13px;}
.person-col-left {width: 650px; float: left; margin: 0 30px 0 0;}
.person-col-right {width: 308px; float: left;}
/* round image overlay */
.col-mid .image .overlay,
.col-right .image .overlay {background: url(/images/site/overlay.png) no-repeat; width: 167px; height: 167px; position:absolute;}
/* frame img */
.col-mid img.frame,
.col-right img.frame {border: 1px solid #E5E5E5; padding: 6px;}
.col-mid .wp-caption-text,
.col-right .wp-caption-text {font: 9px/12px Arial, Helvetica, sans-serif; color: #666;}
.size-full {border: 1px solid #E5E5E5; padding: 6px;}
.main-col-left blockquote,
.col-mid blockquote,
.col-right blockquote {color: #000; border-top: 1px solid #000; font-size: 40px; line-height: 38px; text-transform: uppercase; padding: 4px 0 4px 0;}
.main-col-left blockquote {font-size: 30px;}
.col-mid blockquote p,
.col-right blockquote p {margin:0;}
.col-left,
.col-mid,
.col-right {width: 308px; float: left; margin: 0 34px 0 0;}
.col-right {margin:0;}
.col-mid blockquote,
.col-right blockquote {margin: 10px 0 10px 0;}
.main-col-left span,
.col-mid span,
.col-right span {color: #00AADC;}
.col-mid h3,
.col-right h3 {color: #00AADC; text-align: left; text-transform: uppercase;}
.main-col-left .owner,
.col-mid .owner,
.col-right .owner {color: #666; text-transform: uppercase; font-size: 11px; margin-top: 4px; border-top: 1px solid #000; line-height: 16px; padding-top: 4px;}
.entry span {color: #00AADC;}
/*.entry {width: 390px; margin: -5px 0 20px 0; font-size: 16px;}*/
.entry {font-size: 24px; line-height: 35px; width: 650px; padding-bottom: 20px;}
/* lax box */
.lax-box {color: #806666; background-color: #FCD4D4; padding: 20px; margin-top: 30px;}
.lax-box ul {list-style:none; margin-bottom:8px;}
.lax-box ul li {color: #000; background-color: #FEF6F6; margin-bottom: 1px; padding: 5px 10px 5px 10px; font: 13px "Times New Roman", Times, serif;}
.lax-box ul li.odd {background-color: #FFF}
.lax-box ul li a {color: #00AADC;}
.lax-box ul li a:hover {color: #00AADC; background: none;}
.lax-box a {color: #806666;}
.lax-box a:hover {color: #806666; background-color: #FEF6F6;}
/* headline */
#header h1 {color: #000; font-size: 65px; text-transform:uppercase; font-weight: normal; letter-spacing: -1px; word-spacing: 2px; line-height: 54px; /*font-family: "Big Caslon", Georgia;*/}
#header h1 em {color: #FAAAAA;}
#header h2 {margin: 0 0 0 10px;}
#header h2 img {margin: 0 0 -2px 4px;}
#header h2 span {color: #898989; font: 16px Times New Roman, Times, serif; font-weight: bold; letter-spacing: 0px;}
#header h2 {color: #000; font-size: 17px; text-transform:uppercase; font-weight: normal; letter-spacing: -1px; word-spacing: 2px;}
#header h2 em {letter-spacing: 0;}
/*#header h2 a {text-decoration: none;}*/
#header h2 a {text-decoration:none; background: url(/images/site/play.png) no-repeat right; padding: 0 20px 0 0; display: inline-block;}
#header h2 a:hover {color: #FFF; background: #00AADC url(/images/site/play_hover.png) no-repeat right; padding: 0 20px 0 0; display: inline-block;}
#header h1.startpage {font-size:24px;}
#header h1.startpage object {margin: 0 0 -22px 0;}
#header h1.startpage span {color: #FAAAAA; font: 24px Times New Roman, Times, serif; letter-spacing:0px;}
#header h1.startpage a {text-decoration:none; background: url(/images/site/play.png) no-repeat right; padding: 0 20px 0 0;}
#header h1.startpage a:hover {color: #FFF; background: #00AADC url(/images/site/play_hover.png) no-repeat right; padding: 0 20px 0 0;}
#header h1.startpage .info i {color: #000; letter-spacing: 0px;}
#header h1.startpage .info {color: #000; font-size: 17px; text-transform: uppercase; font-weight: normal; letter-spacing: -1px; word-spacing: 2px; padding: 5px 0 0 0; line-height: normal;}
#header h1.startpage .info img {margin: 0 0 -2px 4px;}
#header h1.startpage blockquote {color: #000; border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: 40px; line-height: 38px; text-transform: uppercase; padding: 4px 0 4px 0; margin-top: -9px; width: 332px;}
#header h1.page {font-family: "Big Caslon", Georgia; font-size: 100px; padding: 20px 0 0 0; letter-spacing: -2px; line-height: 95px; width: 840px; height: 220px;}
#header h1.single {font-family: "Big Caslon", Georgia; font-size: 100px; padding: 20px 0 0 0; letter-spacing: -2px; line-height: 95px; width: 800px; height: auto;}
#header .intro {font-size: 24px; line-height: 35px; margin: 0px 0 40px 0; padding-right: 220px;}
#header #icon {position: absolute; bottom: -15px; right:38px;}
/* sifr */
.sIFR-active h1.page,
.sIFR-active h1.single,
.sIFR-active h1.startpage,
.sIFR-active .sub-heading h2 {visibility: hidden;}
/* gmap */
.gmap {height: 54px;}
.gmap a.link {float:left; margin: 17px 0 0 0;}
.gmap a img {float: right;}
.gmap .stockholm,
.gmap .new-york,
.gmap .tokyo,
.gmap .barcelona {display:none;}
/* news options */
.pagination .options a {color: #000; text-decoration: none;}
.pagination .options a:hover {color: #FFF; text-decoration: underline;}
.pagination .options a.active {color: #00AADC; text-decoration: underline;}
.pagination .options a.active:hover {color: #FFF; text-decoration: underline;}
/* employee left menu */
.employee a {color: #666;}
.employee a:hover {color: #FFF;}
.employee span {color: #00AADC;}
#flickr {padding: 10px 0 0 0; overflow: hidden;}
#flickr img {float:left;}
#flickr a.flickr {display: block; border: 1px solid #E5E5E5; padding: 6px; height:75px; width: 75px; float: left; margin: 3px;}
#flickr a.flickr:hover {background-color: #FFF; border: 1px solid #999; display: block; padding: 6px;}
#flickr a.link {float: right; margin: 0 25px 0 0;}
.social {padding: 10px 0 0 0; overflow: hidden;}
.social span {cursor: pointer;}
.social a.social {display: block; border: 1px solid #E5E5E5; padding: 6px; height:75px; width: 75px; float: left; margin: 3px;}
.social a.social:hover {background-color: #FFF; border: 1px solid #999; display: block; padding: 6px;}
.social a.link {float: right; margin: 0 25px 0 0;}
.employee .sn {margin: 10px 0 0 0; width: 205px;}
.employee .sn a {margin-right: 4px; background: url(/images/icons/social_networks.gif) no-repeat; width:47px; height: 47px; display:inline-block; /*border:1px solid red;*/}
.employee .sn a:hover {background-color: #FFF;}
.contact-info {font-size: 24px; line-height: 35px; width: 650px; padding-bottom: 20px;}
/* Social Networks */
.employee .sn a.twitter {background-position: -10px -86px;}
.employee .sn a.twitter:hover {background-position: -10px -9px;}
.employee .sn a.facebook {background-position: -69px -86px;}
.employee .sn a.facebook:hover {background-position: -69px -9px;}
.employee .sn a.delicious {background-position: -129px -86px;}
.employee .sn a.delicious:hover {background-position: -129px -9px;}
.employee .sn a.vimeo {background-position: -187px -86px;}
.employee .sn a.vimeo:hover {background-position: -187px -9px;}
.employee .sn a.youtube {background-position: -246px -86px;}
.employee .sn a.youtube:hover {background-position: -246px -9px;}
.employee .sn a.blog {background-position: -305px -86px;}
.employee .sn a.blog:hover {background-position: -305px -9px;}
.employee .sn a.flickr {background-position: -364px -86px;}
.employee .sn a.flickr:hover {background-position: -364px -9px;}
.employee .sn a.tumblr {background-position: -423px -86px;}
.employee .sn a.tumblr:hover {background-position: -423px -9px;}
#loader {vertical-align: middle; margin-right: 10px; display: none; background: url(/images/site/ajax-loader.gif) no-repeat; width: 16px; height: 16px; float:left; margin-top: 2px;}
/*
.loader {background: url(/images/site/loader.gif) no-repeat 500px 0px; width: 990px; height: 32px; display: block; position: absolute; border:1px solid red; background-color: #666;}
*/
#slider {width: 990px;}
#slider ul {width: 990px;}
#slider li {width: 990px; float: left; list-style:none; }
/* video */
#video {width:1188px; height: 512px; display: none; position:absolute;}
#close-btn {display:none; float: right; cursor: pointer; width: 19px; height: 19px; background: url(/images/site/x_blue.gif) no-repeat; margin: -4px -19px 0 0;}
/* news expander tooltip */
.tooltip {position: relative; display:none; float:left; width: 990px; height:331px; background: url(/images/site/tooltip_bg.gif) no-repeat 0px 0px; margin: -60px 0 30px 0;}
.tooltip .tooltip-body {float:left; width: 990px; height: 270px; margin-top: 54px;}
.tooltip .tooltip-content {display:none; float:left; width: 926px; padding: 20px 30px 20px 30px;}
.tooltip .tooltip-content .left {float:left; margin: 0 30px 0 0;}
.tooltip .tooltip-content .left a {border: 1px solid #E5E5E5; background-color: #FFF; display:block; padding: 6px;}
.tooltip .tooltip-content .left a:hover {border: 1px solid #999; display:block; padding: 6px;}
/*.tooltip .tooltip-content .left img {}*/
.tooltip .tooltip-content .right {float:left; width: 534px; margin: -8px 0 0 0;}
.tooltip .tooltip-content .right h2 {color:#00AADC; font-size: 44px; font-weight: normal; line-height: 48px; margin: 0 0 5px 0;}
.tooltip .tooltip-content .right .meta {margin-bottom: 10px;}
.tooltip .tooltip-content .right .catname {color: #ff9999;}
.tooltip .tooltip-category {position: absolute; top:30px; right:0; display:block;}
div.scrollable {position:relative; overflow:hidden; height: 250px;}
div.scrollable ul.items {width:20000em; position:absolute; clear:both;}
div.scrollable ul.items li {width: 990px; float:left; list-style:none;}
.disabled {visibility: hidden;}
/* SimpleModal */
#simplemodal-overlay {background-color:#666;}
#simplemodal-container {height:480px; width:640px; background-color:#FFF; border:3px solid #666;}
#simplemodal-container a.modalCloseImg {background:url(/images/site/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer;}
#simplemodal-container #basicModalContent {padding:8px;}
/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.
Copyright 2006 – 2008 Mark Wubben,
Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben
See also and .
This software is licensed and provided under the CC-GNU LGPL.
See
*****************************************************************************/
@media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
/* Example:
.sIFR-active h1 {
font-family: Verdana;
visibility: hidden;
}
*/
}