/* Global Styles */

* { margin:0px; padding:0px; outline:0; }
html, body { height: 100%; }
body { font-size:0.7em; font-family: Arial, Helvetica, sans-serif; color:#fff; background:#374851;}
h1 { font-weight:bold; font-size:2em;}
h2 { font-size:2.4em; color:#F15C22; font-weight:bold; }
h3 { font-size:1.4em; color:#758C9A; font-weight:bold; }
h6 { font-size:.85em; color:#333; }
a { color:#F15C22; text-decoration:none; font-weight:bold; }
a:hover { color:#99ff00; text-decoration:none; font-weight:bold; }
hr { float:left; background:#F35901; height:1px; width:100%; border:0; }
img { border:none; }
i { display:none; }
li { list-style:square; margin-left:20px; }
input, button { overflow: visible; }

/* Containers */

#outer-container { width:960px; margin:0 auto; }
#container { position:relative; top:25px; margin-bottom:100px; left:0; height:650px; background:url(../../images/web_presenters/bg_web_presenters.png) no-repeat #374851; }

/* Header */

#header { position:relative; float:left; left:0; top:0; width:960px; height:140px; }
.logo { position:relative; float:left; left:19px; top:17px; }
.contact-number { position:relative; float:right; right:62px; top:42px; width:264px; }
.contact-number p { margin-top:10px; text-align:justify }
#programme-info-container { position:relative; float:left; width:920px; left:19px; }
.presenters-title { position:relative; float:left; width:480px; left:0; top:0; }
.presenters-title p { margin-top:6px; }
.now-playing { position:relative; float:left; width:440px; top:0; bottom:0; }
/*a.button-now-playing { position:absolute; right:0px; top:343px; display:block; width:107px; padding:7px 5px 0 5px; height:42px; background:url(../../images/web_presenters/buttons/btn_now_playing.gif) no-repeat; color:#000; font-size:.7em; line-height:1.2em; text-align:center; }
a.button-now-playing:hover { background-position:bottom; color:#333;}*/
a.button-now-playing { position:absolute; right:0px; top:343px; display:block; width:432px; padding:20px 4px 0 4px; height:33px; background:url(../../images/web_presenters/buttons/btn_now_playing.gif) no-repeat; color:#000; font-size:.9em; line-height:1.2em; text-align:center; left: 0; overflow:hidden; }
a.button-now-playing:hover { background-position:left bottom; color:#333;}

hr { position:absolute; left:19px; width:920px; height:5px; background:#fff; }
.header-line { top:130px; background:#fff; border-bottom:1px solid #fff; }
.footer-line { bottom:34px; border-top:1px solid #fff; }

.loading { position:absolute; left:0; top:0; width:424px; height:400px; background:#748C9A; z-index:2; }

/* Main Container */

#main-container { position:relative; float:left; left:19px; top:0px; margin-top:10px; width:944px; }
#presenters-container, #interface-container, #scroller-bars-container { position:relative; float:left; }
#presenters-container { height:400px; left: 0; top:0; }
.presenters-row { position:relative; float:left; clear:both; margin-bottom:4px; }
.presenters-frame { position:relative; float:left; width:87px; padding:10px 0 10px 10px; margin-right:12px; background:url(../../images/web_presenters/actors/frame.gif) no-repeat; }

#scroller-bars-container { width:54px; height:398px; left: 0; top:0; }

a.button-scroll-up { position:absolute; left:8px; top:11px; display:block; width:39px; height:57px; background:url(../../images/web_presenters/buttons/btn_scroll_up.gif) no-repeat; }
a.button-scroll-up:hover { background-position:0 -58px; }

a.button-scroll-down { position:absolute; left:8px; bottom:0; display:block; width:39px; height:57px; background:url(../../images/web_presenters/buttons/btn_scroll_down.gif) no-repeat; }
a.button-scroll-down:hover { background-position:0 -61px; }

#interface-container { float:right; top:0; right:24px; width:440px; height:390px; background:url(../../images/web_presenters/bg_interface.gif) no-repeat; }
#interface { position:relative; left:10px; top:11px; width: 420px; height: 315px; }

/* Footer */

#footer { position:absolute; float:left; left:19px; bottom:10px; width:922px; }
.copyright-details { position:relative; float:left; }
.email-details { position:relative; float:right; }

/* Forms */

form#website_preview { position:absolute; top:73px; right:348px; width: 262px; }
input#website_address { margin-top:3px; clear:both; padding:3px; border:none !important}
input#go { background:#fff; padding:2px; border:none !important; text-transform:uppercase; }

/* Forms and Misc */

.orange-text { color:#F15C22; }
.image-opacity { cursor:pointer }
.floatLeft { float:left }
.floatRight { float:right }
.noMargin { margin:0; }
.selectButton { width:auto; background:transparent; color:#F35901; font-weight:normal; font-size:2em; padding-top:2px; border:none !important; }
.selectButton:hover { color:#F7CF3A }
.selectButton::-moz-focus-inner { padding:0; border: 0; }
.radio { width:11px; border:0; background:#E5E5FF; }
.subHead { font-size:1em; color:#888; }
.errorText { font-size:1em; color:#f00; font-weight:bold; }
.clearBoth { clear:both; }
.warning { font-weight:bold; color:#f00; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }