/* Main Styles */

/* Reset */
* { margin: 0; padding: 0; font-size: 100%; }

/* General settings */
:focus { outline: none; }
::selection { background: #fff; color: #ed008c; /* Safari and Opera */ }
::-moz-selection { background: rgba(255,255,255,.75); color: #ed008c; /* Firefox */ }
body { font: 14px/20px Arial, Helvetica, sans-serif; color: #333; text-shadow: 1px 1px 1px #ccc; }
a { text-decoration: none; }
a img { border: none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { margin: 0 0 20px; font-size: 24px; line-height: 25px; color: #ed008c; }
p { margin: 20px 0; }
ul, li { list-style: none; }

/* Layout */
html { height: 100%; }
body { height: 100%; overflow: hidden; }
#wrapper { position: relative; margin: 0 auto; width: 1000px; height: 100%; }
#wrapper.flash { width: 1050px; }
#inner-wrapper { position: absolute; width: 910px; overflow: hidden; z-index: 2; }
.js #inner-wrapper { margin: 98px 0 0; }

/* Sidebar */
#sidebar
{
	float: left;
	width: 230px;
	height: 391px;
	margin: 98px 20px 0 0;
	background: url('../img/nav-bg.gif') top left repeat-y;
}
.js #sidebar { margin-top: 0; }
.logo { display: block; height: 89px; }
#nav { padding: 25px 15px 0 25px; }
#nav li { position: relative; display: block; }
#nav li a
{
	display: block;
	padding-right: 20px;
	line-height: 25px;
	color: #777;
	font-weight: bold;
	text-transform: uppercase;
	text-align: right;
	text-shadow: 1px 1px 5px #fff;
}
#nav li:hover > a, #nav li.active > a { color: #ed008c; background: #fff; text-shadow: 1px 1px 5px #ccc; }
#nav li a span
{
	display: block;
	width: 190px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	background-position: top right;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 1;
}
#nav li:hover > a span { background-position: bottom right; }
#nav li.active > a span { background-position: bottom right; z-index: 0; }
#nav li ul { display: none; margin-top: -1px; border-top: 1px solid #ED008C; border-right: 1px solid #ED008C; }
.js #nav li ul { position: absolute; width: 100%; z-index: 0; }
#nav li li a { margin-left: 65px; line-height: 22px; color: #bbb; background: #fff; text-shadow: 1px 1px 5px #ccc; }
#nav li li span { height: 22px; left: 15px; }

/* Show / hide sub nav */
#nav li:hover ul, #nav li.hover ul, #nav li.active ul { display: block; }
.js #nav li:hover ul, .js #nav li.hover ul, .js #nav li.active ul { display: none; }

/* Main nav */
#nav-home span { background-image: url('../img/nav/home.gif'); }
#nav-about span { background-image: url('../img/nav/about.gif'); }
#nav-portfolio span { background-image: url('../img/nav/portfolio.gif'); }
#nav-clients span { background-image: url('../img/nav/clients.gif'); }

/* Sub nav */
#nav-about-who span { background-image: url('../img/nav/about-who.gif'); }
#nav-about-what span { background-image: url('../img/nav/about-what.gif'); }
#nav-about-contact span { background-image: url('../img/nav/about-contact.gif'); }
#nav-portfolio-campaigns span { background-image: url('../img/nav/portfolio-campaigns.gif'); }
#nav-portfolio-microsites span { background-image: url('../img/nav/portfolio-microsites.gif'); }
#nav-portfolio-games span { background-image: url('../img/nav/portfolio-games.gif'); }
#nav-portfolio-richmedia span { background-image: url('../img/nav/portfolio-richmedia.gif'); }

/* Content blocks */
#viewport { position: relative; float: left; width: 660px; height: 489px; overflow: hidden; }
.js #viewport { height: 391px; }
#inner-viewport { position: relative; }
#viewport .content { width: 660px; height: 277px; padding-top: 212px; overflow: hidden; }
.js #viewport .content { padding-top: 114px; }
#viewport .content a { color: #ed008c; }
#viewport .content a:visited { color: #bc0071; }
#viewport .content a:hover { color: #ed008c; }
#viewport .content a:active { color: #ff75c7; }

/* Info panels (shared) */
#viewport .content .panels { height: 286px; overflow: auto; }
.js #viewport .content ul.panels { overflow: hidden; }
#viewport .content .panels li { float: left; width: 198px; margin: 0 15px 15px 0; }
#viewport .content .panels a.more
{
	float: right;
	width: 126px;
	height: 17px;
	background: url('../img/portfolio/more-details.gif') top no-repeat;
	text-indent: -999em;
}
#viewport .content .panels a.more:hover { background-position: bottom; }
#viewport .content .panels h2
{
	margin: 10px 0;
	height: 30px;
	line-height: 15px;
	font-weight: bold;
}
#viewport .content .panels p
{
	height: 128px;
	margin: 10px 0;
	font-size: 11px;
	line-height: 16px;
	overflow: hidden;
}

/* Panels pagination (shared) */
#viewport .content .pagination { text-align: center; font-size: 11px; }
#viewport .content .pagination li { display: inline-block; padding: 0 2px; color: #ed008c; cursor: pointer; }
#viewport .content .pagination li.desc  { color: #000; cursor: default; }
#viewport .content .pagination li.current  { font-weight: bold; color: #000; cursor: default; }
#viewport .content .pagination li.current:before  { content: "["; font-weight: normal; }
#viewport .content .pagination li.current:after  { content: "]"; font-weight: normal; }

/* Individual sections */
#viewport #home { width: 505px; }

#viewport #about { width: 520px; }

#viewport #about-what { width: 520px; }

#viewport #about-contact { width: 520px; }

#viewport #portfolio { width: 380px; }
#viewport #portfolio p { padding-right: 70px; }

#viewport #portfolio-campaigns { height: 391px; padding-top: 98px; }
.js #viewport #portfolio-campaigns { padding-top: 0; }
#viewport #portfolio-campaigns h1 { line-height: 69px; }

#viewport #portfolio-microsites { height: 391px; padding-top: 98px; }
.js #viewport #portfolio-microsites { padding-top: 0; }
#viewport #portfolio-microsites h1 { line-height: 69px; }

#viewport #portfolio-games { height: 391px; padding-top: 98px; }
.js #viewport #portfolio-games { padding-top: 0; }
#viewport #portfolio-games h1 { line-height: 69px; }

#viewport #portfolio-richmedia { height: 391px; padding-top: 98px; }
.js #viewport #portfolio-richmedia { padding-top: 0; }
#viewport #portfolio-richmedia h1 { line-height: 69px; }

#viewport #clients { width: 545px; height: 302px; padding-top: 187px; }
.js #viewport #clients { padding-top: 89px; }
#viewport #clients ul { text-align: center; overflow: hidden; }
#viewport #clients li { float: left; margin: 0 0 18px; width: 25%; height: 58px; }

/* Footer */
#footer { clear: both; height: 172px; background: url('../img/infinity-symbol.gif') no-repeat; }

/* Flash transition */
#transition-container { position: absolute; top: 0; left: 250px; }

/* Flash roller */
#roller-container { position: absolute; top: 132px; left: 225px; z-index: 1; display: none; }

/* Thickbox */
#TB_window { padding: 0 18px .5em 6px; border: 2px solid #ed008c; }
#TB_window
{
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
#TB_window #TB_title { background: transparent; }
/*#TB_window #TB_title
{
	border-radius: 1em;
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em;
}*/
#TB_window #TB_closeWindowButton { font-weight: bold; color: #ed008c; }
#TB_window #TB_ajaxWindowTitle { color: #ed008c; }
#TB_window #TB_iframeContent { border: 2px solid #ed008c; margin: 1px -2px -2px; padding: 3px 6px; }
#TB_window #TB_iframeContent
{
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}

/* Carousel */
#home-carousel { overflow: auto; padding: 5px 0; }
#home-carousel li { float: left; margin: 0 5px; }
#home-carousel li a { display: inline; }
#home-carousel li a img { display: block; }

/* Popup */
.popup { width: 108px; overflow: hidden; }
.popup .caption { padding: 5px 10px; font-size: 12px; line-height: 1.2; background: #ff0; }
.popup .tip { width: 0; margin: auto; border-top: 10px solid #ff0; border-left: 7px solid transparent; border-right: 7px solid transparent; }

/**************************************************************************************************/