/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #008bd2;
    text-shadow: none;
	color: #fff;
}

::selection {
    background: #008bd2;
    text-shadow: none;
	color: #fff;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author: Wachem Huyge for core-graphics.be
   ========================================================================== */

html{height:100%; overflow-y:scroll;}
body{background:#f1f1f1 url(../images/bg.jpg) no-repeat fixed top; margin:0; -webkit-background-size: 3000px 1520px; height:100%; color:#454545; font-family:"proxima-nova", sans-serif; font-weight:400; font-size:13px;}
a {text-decoration:none; outline:none !important; color:#454545;}
a:hover{color:#008bd2;}
object {outline:none;}

/*
   Main elements
*/

#site{min-height: 100%; height: auto !important; height:100%; margin: 0;}
.container {width:980px; margin:0 auto 0 auto; display:block; overflow:hidden;}
.block{display:block; overflow:hidden;}
.clear{clear:both}
#push{height:40px;}
#extrafootspace{height:0; display:block; overflow:hidden; clear:both;}
#bgaddon{background:url(../images/header-bg.png) repeat; position:fixed; display:block; overflow:hidden; width:100%; height:152px; top:0; left:0; z-index:4; border-top:solid 5px #008bd2;}
#bgaddonsub{background:#f1f1f1 url(../images/bg.jpg) no-repeat scroll top; position:fixed; display:block; overflow:hidden; width:100%; height:157px; top:0; left:0; z-index:3;}
#bgaddoncontent{background:#fff; position:fixed; display:block; overflow:hidden; width:980px; height:100%; margin:0 0 0 -490px; top:0; left:50%; z-index:-1;}
.extrafill{display:block; height:9px;}
figure{margin:0;}

/*
   Header
*/

header{height:157px; width:980px; margin:0 0 0 -490px; display:block; overflow:hidden; position:fixed; left:50%; background:none; z-index:5;}
#logo{margin:31px 0 0 20px; width:178px; height:99px; position:absolute;}

/*
   Main navigation
*/

nav {position:absolute; margin:71px 0 0 210px; padding:0; width:770px;}

nav ul{margin:0; display:inline-block; overflow:hidden; list-style:none; padding:0; float:right; clear:both; margin:0;}
nav ul li{color:#515151; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0; font-size:14px; line-height:38px; display:block; margin:0 0 0 0; height:38px; text-transform:lowercase; float:right;}
nav ul li a{color:#515151; display:block; padding:0 18px; height:38px; border-left:1px solid #e9e9e9;}
nav ul li a:hover{color:#fff; border-left:1px solid #333132;}
nav ul li:hover{background:#333132; color:#fff;}
nav ul li a.active{background:#008bd2; color:#fff; border-left:1px solid #008bd2;}

nav ul li.first a{border-left:1px solid transparent;}
nav ul li.first a:hover{border-left:1px solid transparent;}
nav ul li.first a.active{border-left:1px solid transparent;}

nav ul li.last a{border-right:1px solid transparent;}
nav ul li.last a:hover{border-right:1px solid transparent;}
nav ul li.last a.active{border-right:1px solid transparent;}

#headerbtns{display:block; overflow:hidden; width:105px; height:45px; background:url(../images/header-icons.png) no-repeat 0 0; margin:0 0 0 875px;}
#headerbtns #bulleta{display:block; overflow:hidden; width:25px; height:25px; background:url(../images/header-icons.png) no-repeat -11px -11px; margin:11px 0 0 11px; position:absolute;}
#headerbtns #bulleta:hover{background:url(../images/header-icons.png) no-repeat -11px -56px;}
#headerbtns #bulletb{display:block; overflow:hidden; width:25px; height:25px; background:url(../images/header-icons.png) no-repeat -40px -11px; margin:11px 0 0 40px; position:absolute;}
#headerbtns #bulletb:hover{background:url(../images/header-icons.png) no-repeat -40px -56px;}
#headerbtns #bulletc{display:block; overflow:hidden; width:25px; height:25px; background:url(../images/header-icons.png) no-repeat -69px -11px; margin:11px 0 0 69px; position:absolute;}
#headerbtns #bulletc:hover{background:url(../images/header-icons.png) no-repeat -69px -56px;}

#makeusbetter{display:block; overflow:hidden; margin:0 0 0 769px; position: absolute; }
#makeusbetter a{display:block; overflow:hidden; height:45px; width: 60px; background:#008bd2; padding: 0 20px; line-height: 46px; color: #fff; font-size: 14px; text-align: center;}
#makeusbetter a:hover{background:#e84921;}

/*
   Slider
*/

#sliderwrap{}
#slider{width:10000px; clear:both; display:block; overflow:hidden;}
#slider img{float:left; width:980px;}

/*
   Twitter
*/

#twitterwrap{display:block; overflow:hidden;}

#twitter{min-height:140px; display:block; overflow:hidden;}
#twitter .tweet ul{list-style:none; padding:0; margin:0;}

#twitter .tweet ul li{margin:0 0 8px 0; display:block; overflow:hidden; clear:both;}
#twitter .tweet ul li .twittericon{display:block; overflow:hidden; width:107px; height:62px; float:left; background:url(../images/twitter-icon.png) no-repeat top;}
#twitter .tweet ul li .twittericon.first{background:url(../images/twitter-icon-first.png) no-repeat top;}
#twitter .tweet ul li .twittermsg{background:#f3f3f3; font-size:13px; text-align:left; padding:20px 30px; display:block; overflow:hidden; width:217px; line-height:18px;}
#twitter .tweet ul li .twittermsg a:hover{color:#008bd2;}
#twitter .tweet ul li .twittermsg .twitterdate{color:#008bd2; margin:7px 0 0 0; font-weight:600; font-size:12px;}
#twitter .tweet ul li .twittermsg .twitterdate a{color:#008bd2;}
#twitter .tweet ul li .twittermsg .twitterdate a:hover{color:#333132;}

#twittermask{display:block; overflow:hidden; width:384px; height:60px; background:url(../images/twitter-mask.png) repeat-x; margin:-60px 0 0 0; position:absolute; z-index:1;}


/*
   Last played
*/

#lastplayedwrap{display:block; overflow:hidden; position:relative; height:421px; margin:9px 0 0 0;}
#lastplayed{margin:0;}
.playeditem{display:block; overflow:hidden; height:100px; margin:0 0 7px 0;}
.playeditem figure{display:block; overflow:hidden; width:100px; height:100px; float:left;}
.playeditem .playedinfo{display:block; overflow:hidden; width:277px; height:100px; float:left; margin:0 0 0 7px; background:#f1f1f1;}
.playeditem .playedinfo h3{position:absolute; color:#414852; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0; font-size:15px; line-height:28px; height:28px; overflow:hidden; display:block; margin:5px 0 0 11px;}
.playeditem .playedinfo h4{position:absolute; color:#414852; font-family:"proxima-nova",sans-serif; font-weight:600; padding:0; font-size:13px; line-height:28px; height:28px; overflow:hidden; display:block; margin:27px 0 0 11px;}
.playeditem .playedinfo .morewrap{position:absolute; margin:59px 0 0 11px; display:block; overflow:hidden; height:30px;}
.playeditem .playedinfo .morewrap .playedtime{display:block; overflow:hidden; background:#fff url(../images/played-time.png) 0 0 no-repeat; height:30px; line-height:30px; font-size:11px; padding:0 12px 0 28px; float:left;}
.playeditem .playedinfo .morewrap .playedicon{display:block; overflow:hidden; float:left; width:30px; height:60px; background:url(../images/played-info.png) no-repeat 0 0; margin:0 0 0 3px;}
.playeditem a{display:block; overflow:hidden; width:384px; height:100px; position:absolute; margin:0; background:url(../images/trans.png) repeat;}

.playeditem.full{float:left; margin:0 0 7px 7px; width:314px;}
.playeditem.full.first{clear:both; margin:0 0 7px 0;}
.playeditem.full .playedinfo{width:207px;}

.playlist{margin:9px 12px 0 12px; display:block; overflow:hidden; position:relative;}
.playlist.collapse{display:none;}

.playlist .playlistwide{background:#f1f1f1; color:#414852; font-size:13px; margin:0 0 7px 0; padding:10px 15px; line-height:22px;}

.playlistheader{color:#fff; background-color:#008bd2; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0 15px; font-size:14px; line-height:38px; height:38px; display:block; margin:2px 12px 0 12px; cursor:pointer;}
.playlistheader span{font-weight:bold; font-family:sans-serif,arial; font-size:12px; width:95px; display:inline-block;}
.playlistheader.collapse{background:#f1f1f1; color:#414852; font-size:14px; margin:2px 12px 0 12px;}
.playlistheader.collapse:hover{color:#fff; background-color:#333132;}
.playlistheader.expand{background:#008bd2; color:#fff; font-size:14px; margin:2px 12px 0 12px;}
.playlistheader.current{cursor:default;}

#playlistcontrols{color:#fff; background-color:#333132; font-family:"proxima-nova",sans-serif; font-weight:100; padding:0 14px 0 23px; font-size:24px; line-height:68px; height:68px; display:block; margin:12px 12px 9px 12px;}
#playlistcontrols a{display:inline-block; float:right; text-indent:-999999px; width:35px; height:35px; margin:17px 1px 0 0;}
#playlistcontrols a.nextplaylist{background:url(../images/playlist-next.png) no-repeat 0 0;}
#playlistcontrols a.nextplaylist:hover{background:url(../images/playlist-next.png) no-repeat 0 -35px;}
#playlistcontrols a.prevplaylist{background:url(../images/playlist-prev.png) no-repeat 0 0;}
#playlistcontrols a.prevplaylist:hover{background:url(../images/playlist-prev.png) no-repeat 0 -35px;}

.playlistunavailable{color:#fff; background-color:#008bd2; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0 15px; font-size:14px; line-height:38px; height:38px; display:block; margin:2px 12px 0 12px; cursor:pointer;}

/*
   Main & home content
*/

#content{margin:0 auto 0 auto; padding:0; width:980px; display:block; overflow:hidden;}
#contentwrap{margin:157px 0 0 0; display:block; overflow:hidden;}

#left{display:block; overflow:hidden; float:left; width:560px; margin:12px 0 0 12px;}
#right{display:block; overflow:hidden; float:left; width:384px; margin:12px 0 0 13px;}

.rightsplitter{height:6px; background:#008bd2; margin:17px 0;}

h1{color:#414852; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0; font-size:20px; line-height:28px; display:block; margin:0 0 12px 0;}
h2{color:#fff; background-color:#008bd2; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0 13px; font-size:16px; line-height:38px; height:38px; display:block; margin:0;}
h2.second{margin:0 0 9px 0;}
h2.alter{margin:9px 0 9px 0;}

.infotxt{font-size:13px; line-height:22px; text-align:justify; padding:12px 20px; background:#f1f1f1; margin:9px 0;}

/*
   Nieuws
*/

#news{margin:0; display:block; overflow:hidden;}
#news.ondertitel{margin:9px 0 0 0;}
.newsitem{width:180px; height:180px; display:block; overflow:hidden; float:left; margin:0 0 10px 10px; border-bottom:6px solid #008bd2;}
.newsitem.first{margin:0 0 10px 0; clear:both;}
.newsitem .wrap{display:block; overflow:hidden; width:180px; height:180px; position:absolute; margin:0; padding:0; z-index:1;}
.newsitem .wrap .btn a{display:block; overflow:hidden; width:180px; height:180px; position:absolute; margin:0; padding:0; z-index:2; background:url(../images/trans.png) repeat;}
.newsitem .wrap .info{display:block; overflow:hidden; width:180px; height:180px; position:absolute; background:url(../images/news-overlay.png) repeat; margin:0 0 0 0; }
.newsitem .wrap .info h1{position:absolute; display:block; overflow:hidden; height:48px; font-family:"proxima-nova",sans-serif; font-weight:300; font-size:13px; line-height:16px; margin:10px 12px; padding:0; color:#515151; text-transform:uppercase; max-height:128px;}
.newsitem .wrap .info h1 span{color:#008bd2; display:block; font-weight:600;}
.newsitem .wrap .date{background:#222; display:inline-block; color:#fff; font-weight:400; margin:10px 0 0 10px; position:absolute; padding:0 10px; line-height:26px; font-size:11px; height:26px; display:none;}
.newsitem figure.newsimg img{width:180px; height:180px;}

.newsitem.red{border-bottom:6px solid #c40e11;}
.newsitem.red .wrap .info h1 span{color:#c40e11;}

.newsitem.pink{border-bottom:6px solid #d01985;}
.newsitem.pink .wrap .info h1 span{color:#d01985;}

/*
   Nieuws detail
*/

.post{}
.post iframe{width:560px; height:315px; margin:9px 0 -5px 0;}
.post figure img{width:560px; height:315px; margin:9px 0 0 0;}
.post h1{color:#fff; background-color:#008bd2; font-family:"proxima-nova",sans-serif; font-weight:300; padding:0 13px; font-size:16px; line-height:38px; height:38px; display:block; margin:0;}
.post h1 span{color:#fff; font-weight:600;}
.post .txt{font-size:13px; line-height:22px; text-align:justify; padding:12px 20px; background:#f1f1f1; margin:0;}
.post .txt.enquete{margin:9px 0 9px 0;}
.post .txt .space{clear:both; margin:12px 0 0 0;}
.post .postdate{font-size:12px; line-height:18px; text-align:left; padding:12px 20px; background:#f1f1f1; margin:9px 0 7px 0; color:#008bd2; font-weight:600;}

.fotowrap{margin:7px 0 4px 0; display:block; overflow:hidden;}
.fotowrap a{margin:0 0 5px 5px; display:block; overflow:hidden; width:108px; height:108px; float:left;}
.fotowrap a.first{margin:0 0 5px 0; clear:both;}
.fotowrap a img{width:108px; height:108px;}

.fotofill{width:108px; height:108px; display:block; overflow:hidden; background:#f1f1f1; margin:0 0 5px 5px; float:left;}

/*
   Programma's
*/

.programmawrap{margin:9px 0;}
.programma{background-color:#f1f1f1; font-family:"proxima-nova",sans-serif; font-weight:400; padding:0 12px; font-size:13px; line-height:33px; height:32px; display:block; overflow:hidden; margin:2px 0 0 0; }
.programma:hover{background:#ededed;}
.programma .playlistvantot{float:left; font-weight:bold; font-family:sans-serif,arial; font-size:11px; width:95px;}
.programma .playlistprogramma{float:left;}
.programma .playlistprogrammadoor{float:right;}

/*
   Dj's
*/

#djs{margin:9px 0 0 0; display:block; overflow:hidden;}
.djitem{width:180px; height:180px; display:block; overflow:hidden; float:left; margin:0 0 10px 10px; border-bottom:6px solid #008bd2;}
.djitem.first{margin:0 0 10px 0; clear:both;}
.djitem .wrap{display:block; overflow:hidden; width:180px; height:180px; position:absolute; margin:0; padding:0; z-index:1;}
.djitem .wrap .btn a{display:block; overflow:hidden; width:180px; height:180px; position:absolute; margin:0; padding:0; z-index:2; background:url(../images/trans.png) repeat;}
.djitem .wrap .info{display:block; overflow:hidden; width:180px; height:180px; position:absolute; background:url(../images/news-overlay.png) repeat; margin:0 0 0 0; }
.djitem .wrap .info h1{position:absolute; display:block; overflow:hidden; height:48px; font-family:"proxima-nova",sans-serif; font-weight:400; font-size:13px; line-height:16px; margin:10px 12px; padding:0; color:#515151; text-transform:none; max-height:128px;}
.djitem .wrap .info h1 span{color:#008bd2; display:block; font-weight:600; font-size:11px;}
.djitem figure.djimg img{width:180px; height:180px;}

/*
   Luister nu
*/

.lijstwrap{margin:9px 0;}
.lijstwrap a{background-color:#f1f1f1; font-family:"proxima-nova",sans-serif; font-weight:400; padding:0 12px; font-size:13px; line-height:32px; height:32px; display:block; overflow:hidden; margin:2px 0 0 0;}
.lijstwrap a:hover{background:#333132; color:#fff;}

/*
   Frequenties
*/

.freqwrap{margin:9px 0;}
.freq{background-color:#f1f1f1; font-family:"proxima-nova",sans-serif; font-weight:400; padding:0 12px; font-size:13px; line-height:33px; height:32px; display:block; overflow:hidden; margin:2px 0 0 0; }
.freq:hover{background:#ededed;}
.freq .stad{float:left;}
.freq .fm{float:right;}

/*
   Contact
*/

.contactfield{}
.fieldform{margin:-5px 0 9px 0;}
.contactformrow{overflow:hidden;}

.inputformstyle{background:#f1f1f1; padding:10px; margin-top:5px; width:560px; font-size:12px; outline:none; border:none; font-family:"proxima-nova",sans-serif; font-weight:400;}
.inputformstylesmalla{background:#f1f1f1; padding:10px; margin-top:5px; margin-right:5px; width:257px; font-size:12px; outline:none; border:none; font-family:"proxima-nova",sans-serif; font-weight:400;}
.inputformstylesmallb{background:#f1f1f1; padding:10px; margin-top:5px; margin-right:0px; width:258px; font-size:12px; outline:none; border:none; font-family:"proxima-nova",sans-serif; font-weight:400;}
.inputtextstyle{background:#f1f1f1; overflow:auto; padding:10px; margin-top:5px; width:560px; font-size:12px; outline:none; border:none; font-family:"proxima-nova",sans-serif; font-weight:400; line-height:18px;}

.focusField{background:#f1f1f1; color:#333132; outline:none;}
.idleField{background:#f1f1f1; color:#666; outline:none;}
.errorField{background:#fee; color:#900; outline:none;}

.buttonstyle{background:#333132; padding:10px 15px; font-size:11px; color:#fff; outline:none; cursor:pointer; border:none; margin:0 5px 0 0;}
.buttonstyle:hover{background:#008bd2;}
.contactformrowbuttons{margin:9px 0 0 0;}

a.bigbtn{background:#333132; padding:10px 0; text-align:center; font-size:11px; color:#fff; outline:none; cursor:pointer; border:none; margin:9px 0 9px 0; width:100%; display:block;}
a.bigbtn:hover{background:#008bd2;}

a.bigbtn.enquete{text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: .8px; padding: 15px 20px; margin:30px auto 30px auto; width: 90%; max-width: 200px; background: #e84921;}
a.bigbtn.enquete:hover {background: #008bd2;}

/*
   Banners
*/

#banners{margin:5px 0 0 0;}
#banners a{display:block; overflow:hidden; width:275px; height:89px; float:left; margin:0 0 10px 10px;}
#banners a.first{margin:0 0 10px 0; clear:both;}
#banners a img{width:275px; height:89px;}

/*
   Footer
*/

footer{display:block; overflow:hidden; margin:0 auto; width:100%; height:170px; background:#f9f9f9; margin:2px 0 0 0;}
#footerwrap{display:block; overflow:hidden; margin:0 auto; width:980px;}

/*
#phone{font-family: "proxima-nova",sans-serif; font-weight:300; font-size:14px; line-height:50px; height:50px; background:url(../images/phone-icon.png) no-repeat left center; padding:0 0 0 35px; margin:20px 0 0 645px; position:absolute; width:310px;}
#phone span{font-weight:600; color:#008bd2; margin:0 5px 0 0;}
#email{font-family: "proxima-nova",sans-serif; font-weight:300; font-size:14px; line-height:50px; height:50px; background:url(../images/email-icon.png) no-repeat left center; padding:0 0 0 35px; margin:45px 0 0 645px; position:absolute; width:310px;}
#email span{font-weight:600; color:#008bd2; margin:0 5px 0 0;}
#social{font-family: "proxima-nova",sans-serif; font-weight:300; font-size:14px; line-height:50px; height:50px; background:url(../images/social-icon.png) no-repeat left center; padding:0 0 0 35px; margin:70px 0 0 645px; position:absolute; width:310px;}
#social span{font-weight:600; color:#008bd2; margin:0 5px 0 0;}
*/

#phone{font-family: "proxima-nova",sans-serif; font-weight:300; font-size:14px; line-height:50px; height:50px; background:url(../images/phone-icon.png) no-repeat left center; padding:0 0 0 35px; margin:20px 0 0 645px; position:absolute; width:310px;}
#phone span{font-weight:600; color:#008bd2; margin:0 5px 0 0;}
#email{font-family: "proxima-nova",sans-serif; font-weight:300; font-size:14px; line-height:50px; height:42px; background:url(../images/email-icon.png) no-repeat left 14px; padding:0 0 0 35px; margin:45px 0 0 645px; position:absolute; width:310px; z-index:2;}
#email span{font-weight:600; color:#008bd2; margin:0 5px 0 0;}
#social{font-family: "proxima-nova",sans-serif; font-weight:300; font-size:14px; line-height:50px; height:50px; background:url(../images/social-icon.png) no-repeat left center; padding:0 0 0 35px; margin:70px 0 0 645px; position:absolute; width:310px;}
#social span{font-weight:600; color:#008bd2; margin:0 5px 0 0;}

#about{margin:20px 0 0 0; position:absolute; width:585px; text-align:justify; font-family: "proxima-nova",sans-serif; font-weight:300; font-size:11px; line-height:18px; padding:15px 20px; background:#fff;}
#about span{font-weight:600;}
#about span.splitter{font-weight:100; color:#999;}

#credits{text-align:center; margin:133px 0 0 730px; font-size:10px; line-height:17px; height:17px; color:#999; display:inline-block; padding:10px 15px; background:#fff;}
#credits a{color:#666;}
#credits a:hover{color:#008bd2;}

#combell{text-align:center; margin:133px 0 0 0; font-size:10px; line-height:17px; height:17px; color:#999; display:inline-block; padding:10px 15px 10px 30px; background:#fff url(../images/combell.jpg) no-repeat 12px 0; position:absolute;}
#combell a{color:#666;}
#combell a:hover{color:#008bd2;}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* EXTRA FANCYBOX NAVIGATION */

#fancybox-buttons {
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 8050;
}

#fancybox-buttons.top {
	top: 10px;
}

#fancybox-buttons.bottom {
	bottom: 10px;
}

#fancybox-buttons ul {
	display: block;
	width: 166px;
	height: 30px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	border: 1px solid #111;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
	   -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
	        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
	background: rgb(50,50,50);
	background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
	background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
	background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
	background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
	background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
}

#fancybox-buttons ul li {
	float: left;
	margin: 0;
	padding: 0;
}

#fancybox-buttons a {
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background-color: transparent;
	background-image: url('../images/fancybox_buttons.png');
	background-repeat: no-repeat;
	outline: none;
	opacity: 0.8;
}

#fancybox-buttons a:hover {
	opacity: 1;
}

#fancybox-buttons a.btnPrev {
	background-position: 5px 0;
}

#fancybox-buttons a.btnNext {
	background-position: -33px 0;
	border-right: 1px solid #3e3e3e;
}

#fancybox-buttons a.btnPlay {
	background-position: 0 -30px;
}

#fancybox-buttons a.btnPlayOn {
	background-position: -30px -30px;
}

#fancybox-buttons a.btnToggle {
	background-position: 3px -60px;
	border-left: 1px solid #111;
	border-right: 1px solid #3e3e3e;
	width: 35px
}

#fancybox-buttons a.btnToggleOn {
	background-position: -27px -60px;
}

#fancybox-buttons a.btnClose {
	border-left: 1px solid #111;
	width: 35px;
	background-position: -56px 0px;
}

#fancybox-buttons a.btnDisabled {
	opacity : 0.4;
	cursor: default;
}