/* TOC --------------------------------------------------------------------------------------------------------
1 - Global Reset
2 - Structural elements
3 - Heading, Typography, Links, Lists
4 - Navigation
5 - Forms & Tables
6 - Page components and widgets
7 - MPU & Advertising
8 - Buttons
9 - Global elements
10 - General Styles
---------------------------------------------------------------------------------------------------------------*/
/* 1 - Global Reset - Eric Meyer reset
---------------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline}
:focus {outline: 0}
body {color: #ccc; background: #000; text-align:center; font: 62.5% Georgia, "Times New Roman", Times, serif; background-repeat:no-repeat}
ol, ul {list-style: none}
table {border-collapse: separate; border-spacing: 0}
caption, th, td {text-align: left;font-weight: normal}
blockquote:before, blockquote:after, q:before, q:after {content: ""}
blockquote, q {quotes: "" ""}
/* 2 - Structural elements
---------------------------------------------------------------------------------------------------------------*/
/******************* Colunms ************************************/
.sixteencol {width:950px}
.fiveteencol {width:890px}
.fourteencol {width:830px}
.thirteencol {width:770px}
.twelvecol {width:710px}
.elevencol {width:650px}
.tencol {width:590px}
.ninecol {width:530px}
.eightcol {width:470px}
.sevencol {width:410px}
.sixcol {width:350px}
.fivecol {width:290px}
.fourcol {width:230px}
.threecol {width:170px}
.twocol {width:110px}
.onecol {width:50px}
/******************* Main structural wrappers *******************/
#site-wrapper {font-size:1.0em}
.jackosbourne #site-wrapper {background:url(../img/misc/bg.jpg) transparent 50% 0 no-repeat;}
.flexible-wrapper {width:100%; text-align:center}
.fixed-wrapper {width:950px; text-align:left; margin:0 auto 10px auto; padding:0 10px} /* ie.css */
#content {background:url(../img/misc/bg-pagesplit.gif) transparent 0 0 repeat-y; font-size:2.2em;}
#home #content {background-image:none}
/*.box {font-size:2.2em; position:relative} */
/* 3 - Heading, Typography, Links, Lists
---------------------------------------------------------------------------------------------------------------*/
#header {margin-bottom:35px}
#titleicon {float:left; padding-left:177px; min-height:153px; _height:153px; background:url(../img/icons/pagetitleicon-167x153.gif) transparent 0 0 no-repeat; margin-top:10px} /* hack */
#products #titleicon {background-image:url(../img/icons/workicon-167x153.png)}
#multimedia #titleicon {background-image:url(../img/icons/multimediaicon-167x153.png)}
#about #titleicon {background-image:url(../img/icons/abouticon-167x153.png)}
#talk #titleicon {background-image:url(../img/icons/contacticon-167x153.png)}
#buy #titleicon {background-image:url(../img/icons/salesicon-167x153.png)}
#blog #titleicon {background-image:url(../img/icons/blogicon-167x153.png)}
#pagetitle {font-size:74px; color:#00a9b2; float:left; font-weight:normal; width:773px; position:relative; z-index:1; margin-top:-5px}
#home #pagetitle {width:950px; padding-bottom:0; text-align:left}
/** Headings**/
.head {clear:both; margin:0; padding:0 0 15px 0; position:relative; font-size:1.1em; color:#fff}
/**.head a {color:#000 !important;font-weight:bold !important}
.box .head {font-size:1.16em} **/
/** Paragraphs **/
p, dl, ul {line-height:1.3em; margin-bottom:40px}
/** Links **/
a {color:#ff6600; text-decoration:none}
a:hover{color:#fff; text-decoration:underline}
/* 4 - Navigation
---------------------------------------------------------------------------------------------------------------*/
#nav-global {float:left; position:relative; clear:left; font-size:2.1em; padding-bottom:30px; margin-bottom:0 !important}
#nav-global li {float:left; margin-right:35px; background-image: url(../img/misc/cluster.png); height:45px; overflow:hidden}
#nav-global li a {background-image: url(../img/misc/cluster.png); height:45px; margin:0; overflow:hidden; padding:0; position:relative; float:left; color:#fff}
#nav-global li span {display: block; width: 0; height: 0; overflow: hidden;}
/* Our work */
#nav-global li.gn-products {width:119px; background-position: 0 -90px}
#nav-global li.gn-products a {width:119px; background-position:0 0}
#nav-global li.gn-products a:hover {background-position: 0 -45px}
#nav-global li.gn-products a.active {background-position: 0 -90px}
/* Multimedia */
#nav-global li.gn-multimedia {width:208px; background-position: -120px -90px}
#nav-global li.gn-multimedia a {width:208px; background-position: -120px 0}
#nav-global li.gn-multimedia a:hover {background-position: -120px -45px}
#nav-global li.gn-multimedia a.active {background-position: -120px -90px}
/* About */
#nav-global li.gn-about {width:112px; background-position: -329px -90px}
#nav-global li.gn-about a {width:112px; background-position: -329px 0}
#nav-global li.gn-about a:hover {background-position: -329px -45px}
#nav-global li.gn-about a.active {background-position: -329px -90px}
/* Talk to us */
#nav-global li.gn-talk {width:118px; background-position: -442px -90px}
#nav-global li.gn-talk a {width:118px; background-position: -442px 0}
#nav-global li.gn-talk a:hover {background-position: -442px -45px}
#nav-global li.gn-talk a.active {background-position: -442px -90px}
/* Buy our stuff */
#nav-global li.gn-buy {width:151px; background-position: -561px -90px}
#nav-global li.gn-buy a {width:151px; background-position: -561px 0px}
#nav-global li.gn-buy a:hover {width:151px; background-position: -561px -45px}
#nav-global li.gn-buy a.active {width:151px; background-position: -561px -90px}
/* Blog */
#nav-global li.gn-blog {width:65px; background-position: -713px -90px; margin-right:0}
#nav-global li.gn-blog a {width:65px; background-position: -713px 0}
#nav-global li.gn-blog a:hover {background-position: -713px -45px}
#nav-global li.gn-blog a.active {background-position: -713px -90px}
#nav-secondary {width:350px; font-size:1.1em}
#nav-secondary ul {} /* ie.css */
#nav-secondary li {background:url(../img/misc/border-dotted.gif) transparent bottom left repeat-x; margin-bottom:0; padding-bottom:25px}
#nav-secondary li a {padding:25px 0 0 10px; display:block; margin-bottom:0}
#nav-secondary #current-secondary {padding:25px 0 25px 10px; display:block}
#nav-secondary #extrainfo li div {padding:25px 0 25px 10px; display:block}
#nav-secondary #extrainfo li p {margin-bottom:0}
#nav-secondary #extrainfo a {padding:0}
/* 6 - Article display
---------------------------------------------------------------------------------------------------------------*/
#article-video {margin-bottom:30px}
#article-text {width:400px; float:left}
#home #article-text {width:950px}
.full-width {width:575px !important}
#article-extras {width:170px; float:right; margin-right:10px; display:inline}
#article-extras li {background:url(../img/misc/border-dotted.gif) transparent bottom left repeat-x; padding:15px 0; font-size:0.82em}
.js .more-area {display:none}
/* 6 - Page components and widgets
---------------------------------------------------------------------------------------------------------------*/
/* Icons */
.icon-l {} /* hack */
.icon-m {} /* hack */
/* Lineup */
.lineup ul li {margin-bottom:30px; display:block}
.lineup ul li a {float:left; width:390px}
.lineup ul li .lineup-thumb {width:100px; margin-right:20px; padding-top:0}
.tv-list {padding-left:60px; min-height:50px; _height:50px; background:url(../img/icons/tvicon-50x50.png) transparent 0 0 no-repeat} /* hack */
.online-list {padding-left:60px; min-height:50px; _height:50px; background:url(../img/icons/interneticon-50x50.png) transparent 0 0 no-repeat} /* hack */
.adverts-list {padding-left:60px; min-height:50px; _height:50px; background:url(../img/icons/adverticon-50x50.png) transparent 0 0 no-repeat} /* hack */
.blog-icon {padding-left:82px; display:block; min-height:65px; _height:65px; background:url(../img/icons/blogicon-72x65.png) transparent 0 0 no-repeat} /* hack */
/* Bios */
#bios {clear:both}
#bios li {clear:both}
.person-thumb {float:left; margin-right:10px; width:110px;}
#bios dl {float:left; width:455px; margin-bottom:30px}
.person-intro {padding-top:30px}
#bios .more-area {padding-left:120px}
/* Home page */
#home-image {width:950px; height:473px; text-align:left; margin-bottom:30px; position:relative}
#home-image p {position:absolute; top:10px; left:10px; background-color:#000; color:#00a9b2; width:410px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.5em; padding:10px}
/* Contact */
#contatlist h2 {padding-bottom:0}
/* Blog */
.bloglist h3.head {padding-left:5px; padding-bottom:0}
/*
.lineup ul li a {float:left; width:275px; padding-top:30px}
.lineup ul li .lineup-thumb {width:230px; margin-right:10px; padding-top:0}
*/
#blog-listing li {margin-bottom:30px; display:block;border-bottom:solid 1px #333}
#blog-listing .blog-date {float:left; width:50px; margin-right:10px; font-size:0.8em}
#blog-listing .blog-box {float:left; width: 500px; }
#blog-listing .blog-box h2 {margin-bottom:20px; font-size:1.3em}
/* 9 - Global elements
---------------------------------------------------------------------------------------------------------------*/
/** Global elements: logo, banner & nav **/
#global-header {text-align:left; z-index:1; position:relative; padding-top:10px; margin-bottom:0 !important}
#global-logo-wrapper {width:950px; height:110px; z-index:-2; font-size:1.8em}
#logo a {float:left; width:227px; height: 91px; background:url(../img/misc/logo-ginger.png) transparent 0 0 no-repeat;float:left; overflow:hidden; margin-bottom:10px}
#showreel {float:right; width:190px}
#showreel a {color:#fff; padding-left:82px; display:block; min-height:65px; _height:65px; background:url(../img/icons/showreelicon-72x65.png) transparent 0 0 no-repeat} /* hack */
#showreel a:hover {color:#ff6600}
/** STV Footer **/
#footer-wrapper {font-size:1.5em; margin-bottom:0; height:30px; border-top:solid 1px #333}
#footer-wrapper p {padding:10px 0}
/* 10 - General Styles
---------------------------------------------------------------------------------------------------------------*/
/* Clearing Styles */
.clearleft{clear:left}
.clearright{clear:right}
.clearboth{clear:both}
/* CSS clearing */
.clearing:after, .row:after, .lineup li:after {content: "."; display:block; height: 0; clear: both; visibility: hidden}
.clearing, .row, lineup li {display: inline-block}
/* Hides from IE-mac \*/
* html .clearing, * html .row, * html .lineup li {height: 1%}
.clearing, .row, .lineup li {display: block}
/* End hide from IE-mac */
/* Floats */
.fright {float:right}
.fleft {float:left}
.center {text-align:center}
/* Skip link */
.skiplink {position:absolute; left:-9999px; top:-9999px; height:1px; font-size:1px; line-height:0; overflow:hidden}
.hide {position:absolute; left:-9999px; top:-9999px; height:1px; font-size:1px; line-height:0; overflow:hidden}
/* Extend default margins */
.reduce-margin-m {margin-top:-20px !important; border-top:none !important}
.reduce-margin-s {margin-top:-11px !important; border-top:none !important}
.reduce-margin-ss {margin-top:-5px !important}
.extend-margin-none {margin-bottom:0px !important}
.extend-margin-ss {margin-bottom:5px !important}
.extend-margin-s {margin-bottom:10px !important}
.extend-margin-m {margin-bottom:15px !important}
.extend-margin-l {margin-bottom:20px !important}
.extend-margin-xl {margin-bottom:25px !important}
.extend-padding-m {padding-top:10px !important}
/* remove spacing from last column item */
.lastcol {margin-right:0 !important; padding-right:0 !important; border-right:none !important; background:none !important}
.lastitem {margin-bottom:0 !important; padding-bottom:0 !important; border-bottom:none !important; background:none !important}
.firstitem {margin-left:0 !important}
.firstcol {margin-top:0 !important; padding-top:0 !important}
/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho - http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
.js .lb-hide {position:absolute; left:-9999px; top:-9999px; height:1px; font-size:1px; line-height:0; overflow:hidden}
#gallery-logo a {padding-left:82px; display:block; min-height:65px; _height:65px; background:url(../img/unused/icon-72x65.png) transparent 0 0 no-repeat} /* hack */
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}
/*****************************************************************************
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;
}
*/
}