@charset "utf-8";
/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */
/*@font-face {
    font-family: PFCosmonut-Bold;
    src: url('../media/PFCosmonut-Bold.ttf'); 
    src: url('../media/PFCosmonut-Bold.otf'); 
    }*/
	@font-face {
    font-family: PFCosmonut-Bold;
  src: url('../media/PFCosmonut-Bold.eot'); /* IE9 Compat Modes */
  src: url('../media/PFCosmonut-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../media/PFCosmonut-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../media/PFCosmonut-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../media/PFCosmonut-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../media/PFCosmonut-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.row {
max-width:960px;
}
* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-boz-sizing:border-box;}

html, body, form {height: 100%;}

body { background-color:#2c1d48; background-image:url(../images/games/background.jpg); background-repeat:no-repeat; background-position: top center; background-attachment:fixed; font-family: 'Montserrat', sans-serif; color:#ffffff; }
a { color:inherit; }
img { max-width:100%; }

h1 { font-size:38px; margin:0.25em 0 0.5em; line-height:1.4em; color:#ffffff; }
h1.secondary {color:#f70e89; font-size:30px; font-weight:bold;}

/*----COOKIE BAR--------------------------------------*/
.cookieBar              { width: 100%; background:url(../images/games/bg_cookiebar.png); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999; box-sizing:border-box; -moz-box-sizing:border-box; }
.cookieBar p			{color:#ffffff; font-size:14px; font-family:Arial, Helvetica, sans-serif; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {border:0px; background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }

.centered { text-align:center; }
.hover-bg {transition:background-color .5s;}
.cover-link { display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5; overflow:hidden; text-indent:-9999999em; }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.body-padding { padding:0 20px 70px; }
.pipe { display:inline-block; padding:0 10px; }

#progress-bar {
    width: 0;
    background: #f78;
    text-align: center;
    overflow: hidden;   
}

.btn {background-color:#372a50; display:inline-block; text-decoration:none; font-size:16px; font-weight:bold; padding:27px 65px; border-radius:10em;}
.btn:hover { background-color:#3d3155;  }
.btn span { display: block; margin-top: 7px; font-weight: normal; font-style: italic; }

.action-btn { min-width:270px; height:70px; background-color:rgba(255,255,255,0.1); display:inline-block; border-radius:70px; line-height:70px; text-decoration:none; margin:0 10px; text-align:center; color:#ffffff;}
.action-btn:hover {background-color:rgba(255,255,255,0.2); color:#ffffff;}
.action-btn.secondary { background-color:#f70e88; }
.action-btn.secondary:hover {background-color:#C31570;}

.action-btn.stacked { margin-top:10px; }
.action-btn.back-btn { margin-bottom: 20px; font-size: 14px; min-width: 160px; height: 50px; line-height: 50px; margin-top:-15px; }

.small-link { text-align: center; display: block; color: #ffffff; font-size: 16px; font-weight: bold; margin-bottom:30px; }
.small-link.light { color:rgba(255,255,255,0.8); }

.inner { width:1000px; margin:0 auto; max-width:100%; }
.inner.centered { text-align:center; }
.inner.padded { padding:50px 0; }
.inner p a {color:#d41684;}
.inner.basic-page {text-align:left; font-size:14px; margin-bottom:30px;}
.inner.basic-page h3 { display:block; border-bottom:1px solid #ffffff; padding-bottom:5px; margin:1.5em 0 1em; }
.inner.basic-page ul { margin-left:1em; }
.inner.basic-page li { line-height:1.5em; margin-bottom:1em; }
.inner.basic-page td { border:1px solid #ffffff; padding:10px; }
.inner.basic-page table {margin:30px 0;}

.small-inner { width:500px; margin:0 auto; max-width:100%; }
.small-inner.padded { padding:40px 0; }

.panel { padding:35px 50px; background-color:#372a50; position:relative; border:none; margin-bottom:0px;}
.panel.panel-dark { background-color:#15122f; }
.panel-top { border-top-right-radius:20px; border-top-left-radius:20px; }
.panel-bottom { border-bottom-right-radius:20px; border-bottom-left-radius:20px; }
.panel-divider { position:absolute; bottom:0; left:50%; width:27px; height:26px; background-image:url(../images/games/icon-star.png); margin-bottom:-10px; z-index:5; margin-left:-14px; }
.panel-divider.block { position:relative; bottom:auto; left:auto; width:100%; height:26px; background-image:url(../images/games/icon-star.png); margin-bottom:11px; z-index:5; margin-left:0; background-position:center; background-repeat:no-repeat; }
.panel-margin-bottom { margin-bottom:10px; }
.panel-header { padding:25px 50px; }
.panel.panel-header h1 { margin:0; font-size:24px; }

.panel h1 { font-size:30px; font-weight:bold; margin-bottom:1em; color:#ffffff; }
.panel h2 { font-size:22px; font-weight:bold; margin-bottom:1em; margin-top:0.5em; line-height: 1.3em; color:#ffffff; }
.panel p { margin-bottom:0.8em; line-height:1.5em; color:#ffffff; }
.panel p.label { width: 370px; max-width: 100%; margin: 1em auto 1em; }
.panel p.no-margin { margin-bottom:0; }
.panel p.spacer { margin:1.5em 0 2em; }
.panel h1.single { margin-bottom:0.25em; }

#footer { width:100%; min-height:100px; background:#15122f; text-align:center; padding:50px 10px; font-size:14px; position:relative; margin-top:40px; }
#footer p { margin:2em 0; }
#footer p:last-child { margin-bottom:0; }
#footer .action-btn { position: absolute; top: -36px; left: 50%; width: 300px; margin-left: -150px; }

.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -160px; }
#footer, .push { height: 180px; }

/*** REGISTRATION ***/
@media only screen and (min-width: 40.0625em) {
.reveal-modal.small {
    width: 450px;
    /* display: block; */
}
}
.form-row { position:relative; margin-bottom:10px; }
.form-row.bottom-margin { margin-bottom:30px; }
.form-row input { width:100%; height:50px; border-radius:50px; padding:0 30px; line-height:50px; font-size:15px; color:#828282; font-family: Arial, sans-serif; }
.form-row input::-webkit-input-placeholder { color: #828282; }
.form-row input:-moz-placeholder { color: #828282; }
.form-row input::-moz-placeholder { color: #828282; }
.form-row input:-ms-input-placeholder { color: #828282; }
.form-row textarea { width:100%; height:150px; border-radius:20px; padding:20px 30px; line-height:1.2em; font-size:15px; color:#828282; resize:none; font-family: Arial, sans-serif; }
.form-row textarea::-webkit-input-placeholder { color: #828282; }
.form-row textarea:-moz-placeholder { color: #828282; }
.form-row textarea::-moz-placeholder { color: #828282; }
.form-row textarea:-ms-input-placeholder { color: #828282; }
.form-row select { width:100%; height: 50px; padding: 0px 30px; color: #828282; font-size: 15px; font-family: Arial, sans-serif; background: url("../images/games/icon-dropdown-arrow.png") no-repeat right center #FFF; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0px; border-radius: 50px; outline: none; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.form-row select > option { font-size:13px; padding: 6px 10px; cursor:pointer; background-color:#FFF; }
.form-row select.dropdown-left { width:48%; float:left; }
.form-row select.dropdown-right { width:48%; float:right; }
.form-row input.error, .form-row select.error, .form-row textarea.error { background-color: #FFC0C0; border: 2px solid #FF6D6D; }
.error-text {color:#FFC0C0 !important;}
.success-text {color:#C0FFC2 !important;}

.colour-chooser { text-align:center; margin-bottom:30px; }
.colour-chooser .colour { width:60px; height:60px; margin-right:40px; display:inline-block; margin-bottom:20px; border-radius:60px; position:relative; }
.colour-chooser .colour:hover:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.2); border-radius:60px;}
.colour-chooser .colour.active { border:5px solid #ffffff; }
.colour-chooser .colour:nth-child(4n) { margin-right:0; }

.character-chooser { font-size:0; margin-bottom:30px; }
.character { width:180px; display:inline-block; margin:10px; border-radius:10px; padding: 10px 10px 15px; cursor:pointer; }
.character:hover { background-color:rgba(255,255,255,0.1); }
.character.active { background-color:rgba(255,255,255,0.3); }

.row-checkbox { display:table; margin-bottom:50px; }
.row-checkbox .checkbox { display:table-cell; vertical-align:top; }
.row-checkbox .checkbox-placeholder { display:block; width:30px; height:30px; background:red; background-color:#ffffff; border-radius:7px; }
.row-checkbox .checkbox-label { display:table-cell; vertical-align:top; padding-left:20px; text-align:left; line-height:1.7em; }
.row-checkbox .checkbox input { width:30px; height:30px; visibility:hidden; }
.row-checkbox.checked .checkbox-placeholder { background-image:url(../images/games/icon-checkbox.png); background-position:center; background-repeat:no-repeat; }
.row-checkbox.tight { margin-bottom:0; }

/*** COLOUR VARIATIONS ***/
.bg-green { background-color: #aecb43 !important; }
.bg-purple { background-color: #b74995 !important; }
.bg-orange { background-color: #df8d01 !important; }
.bg-red { background-color: #ea3c54 !important; }
.bg-yellow { background-color: #f7af3d !important; }
.bg-blue { background-color: #28a3dc !important; }

/*** HOME ***/

.logo { display:inline-block; margin:30px auto 30px; }

.login-btn { position:absolute !important; top:30px; right:20px; }

.intro-panel .welcome-message { font-size:30px; margin-bottom:1em; line-height:1.2em; }
.intro-panel .welcome-message a { color:#d41684; }
.intro-panel p { font-size:22px; line-height:1.5em; }
.intro-panel { margin-bottom:50px; }

.dropdown-holder { display:inline-block; position:relative; }
.dropdown { position:absolute; left:50%; top:100%; margin-top:30px; margin-left:-120px; width:240px; z-index:99; display:none;  }
.dropdown:before { content:""; display:block; width:0; height:0; border:17px solid transparent; position:absolute; bottom:100%; left:50%; border-bottom-color:#2c1d47; margin-left: -17px; }
.dropdown.upwards:before {border-bottom-color:transparent; border-top-color:#2c1d47; bottom:auto; top:100%;}
.dropdown.upwards {top:auto; bottom:100%; margin-top:0; margin-bottom:5px;}
.dropdown ul { list-style:none; background:#2c1d47; display:block; border-radius:15px; overflow:hidden;}
.dropdown ul li a {font-weight:bold; font-size:16px; text-decoration:none; display:block; padding:30px; color:#ffffff !important;}
.dropdown ul li a:hover { background-color:#372a50; }
.dropdown-bg { background-color:rgba(0,0,0,0.8); position:fixed; top:0; left:0; right:0; bottom:0; z-index:98; display:none; }
.dropdown ul li.fb { background-color:#3d5a98; }
.dropdown ul li.fb a, .dropdown ul li.tw a {background-color:transparent;}
.dropdown ul li.fb a:hover, .dropdown ul li.tw a:hover {background-color:rgba(255,255,255,0.05);}
.dropdown ul li.tw { background-color:#59adeb; }

.dropdown.social-dropdown li a { padding:19px 30px; }
.dropdown.social-dropdown li img { float:right; }
.dropdown.social-dropdown li span {display:inline-block; padding-top:11px;}

.your-games { width:1290px; max-width:100%; margin:0 auto; }
.your-games.your-rewards {margin-bottom:100px;}
.your-games .game-holder { width:33.3%; float:left; min-height: 250px; }
.your-games .game-holder.middle { width:33.4%;}
.your-games .game-holder .game { text-align:center; position:relative; height:100%; }
.your-games .game-holder .game .play-game { position:absolute; bottom:0; right:0; padding:30px 40px; background-color:rgba(255,255,255,0.1); font-size:18px; }
.your-games .game-holder .game .play-game img { vertical-align: middle; margin-left: 5px; margin-top: -2px; }
.your-games .game-holder .game .box-image { padding: 50px 0; }

.your-games .game-holder .locked-usergame { bottom:0; right:0; background-color:rgba(255,255,255,0.3); background-image:url(../images/games/locker_smaller.png); background-repeat:no-repeat; }
.your-games .game-holder .locked-usergame .box-image { opacity:0.3;}

.main-tabs { text-align:center; font-size:0; }
.main-tabs li { display:inline-block; vertical-align:bottom;  }
.main-tabs li a { display:inline-block; background-color:#372a50; color:#ffffff; text-decoration:none; font-size:18px; font-weight:bold; padding:25px 0; text-align:center; width:210px; }
.main-tabs li a.active { background-color:#15122f; font-size:26px; padding: 30px 0px; }

.tab-holder {background-color:#15122f; padding-bottom:10px;}
.tab-holder h1 {  margin-bottom:1.2em; padding: 0 20px;}

.inner.padded.unlocks { padding:50px 20px;  }

.unlock-container { background-color:rgba(255,255,255,0.05); padding:10px; width:800px; padding:50px 30px; margin:70px auto 85px; border-radius:40px; position:relative; margin-top:110px; margin-bottom: 170px; max-width:100%; }
.unlock-btn { width:220px; height:70px; background-color:#f70e88; display:block; border-radius:70px; line-height:70px; font-weight:bold; text-decoration:none; position: absolute; left: 50%; top: 100%; margin-left: -110px; margin-top: -35px;  }
.unlock-btn:hover {background-color:#C71171;}

.locked-games { margin-top:-100px;  }
.locked-game { width:33%; float:left; margin-bottom:20px; }

.reward-box { width:50%; padding:50px 30px 30px; float:left; text-align:center; }
.reward-box .reward-title { font-size:26px; font-weight:bold; }
.reward-box .reward-subtitle { opacity:0.65; margin:1em 0 2em;; }
.reward-box .unlock-btn {position:relative; left:auto; top:auto; margin:0; display:inline-block; background-color:rgba(255,255,255,0.1);}
.reward-box .unlock-btn:hover {background-color:rgba(255,255,255,0.2);}

.listing-games { width:650px; margin:60px auto; max-width:100%;}
.listing-games .game { width:33%; float:left; }


/*** REWARDS ***/

.star-list li { font-size:18px; margin-bottom:1em; list-style:none; background-image:url(../images/games/icon-bullet.png); background-position: left top; background-repeat:no-repeat; text-align:left; padding-left:30px; }
div.spacer { height:25px; }
div.spacer-large { height:45px; }

.terms, .terms p { font-size:12px; line-height:1.5em; }

/*** LEADERBOARD ***/
.leaderboard-row .avatar { width:180px; margin-bottom:20px; }
.leaderboard-row td { vertical-align:middle; text-align:left; }
.leaderboard-row td.details { padding-left:40px; }
.leaderboard-row td p.position { font-size:24px; font-weight:bold; margin-bottom:0; margin-top:1.2em; }
.leaderboard-row td p.name { font-size:24px; margin-top:0; }

/*** MY FAMILY GAMES ***/
.game-chooser { margin-top:30px; }
.game-chooser .game {position:relative; cursor:pointer;}
.game-chooser .game.active .select {display:block;}
.game-chooser .game .select { position:absolute; top:50%; left:50%; margin-top:-31px; margin-left:-31px; display:none; }

.slick-prev { display: inline; position: absolute; top: 50%; left: -30px; margin-top: -46px; cursor:pointer; }
.slick-next { display: inline; position: absolute; top: 50%; right: -30px; margin-top: -46px; cursor:pointer; }

/*** GAME ***/

#game-holder { width:500px; min-height:200px; margin:0px auto; padding-top:41px; padding-bottom:80px; }
#game-holder .feature-image {width: 200px; margin:0 auto; text-align:center; position:relative; z-index:5; }
#game-holder .feature-image img { max-width:100%; }
#game-holder a:hover { color:#ffffff;}

#game-holder .holder { background-color: #28a3dc; width: 100%; margin-top: -75px; border-radius: 20px; padding-top: 40px; overflow:hidden; margin-bottom:40px; position:relative; }
#game-holder .holder.no-picture { margin-top:0; padding-top:20px; }
#game-holder .holder.avatar { margin-top:-45px; }
#game-holder .holder .header { display:block; text-align:center; font-size:30px; font-weight:bold; margin:1em 0; }
#game-holder .holder .holder-inner { background:rgba(255,255,255,0.1); padding:20px 0; }

#game-holder.green .holder, #game-holder.green .timer .timer-bar{ background-color: #aecb43; }
#game-holder.purple .holder, #game-holder.purple .timer .timer-bar{ background-color: #b74995; }
#game-holder.orange .holder, #game-holder.orange .timer .timer-bar{ background-color: #dc7f30; }
#game-holder.red .holder, #game-holder.red .timer .timer-bar{ background-color: #ea3c54; }
#game-holder.yellow .holder, #game-holder.yellow .timer .timer-bar{ background-color: #f7af3d; }

#game-holder .option { display:block; text-decoration:none; text-align:center; background-color:rgba(255,255,255,0.1); border-top:1px solid rgba(255,255,255,0.2); font-size:18px; padding:25px;}

#game-holder .option:hover{background-color: rgba(0,0,0,0.05);}

#game-holder .player-holder { padding:0 30px; }
#game-holder .player-holder .player { width:220px; float:left; padding:10px 20px; border-radius:20px; transition-duration: .25s; position:relative; min-height:250px; }
#game-holder .player-holder .player:hover { background-color: rgba(0,0,0,0.1); }
#game-holder .player-holder .player p { font-size:20px; text-align:center; margin:1em 0 0; word-break: break-all; }

#game-holder .centered-link { text-align:center; display:block; color:rgba(255,255,255,0.5); font-size:16px; font-weight:bold; margin:30px 0; }

#game-holder .game-preview { width: 340px; max-width: 100%; margin: 0 auto; margin-bottom: 0px; padding: 20px; }
#game-holder .btn-start { font-size:26px; font-weight:bold; padding:36px 25px; border-top:0; }
#game-holder .btn-next { border-top:1px solid rgba(255,255,255,0.2); }
#game-holder .holder-inner .btn-next {background-color:#53b5e3;}
#game-holder .btn-large-action { margin-bottom: 20px;  position:relative; }
#game-holder .btn-large-action .btn-start { border-radius: 20px; overflow: hidden; }
#game-holder .btn-large-action .btn-large-primary {background-color: #372a50; }
#game-holder .btn-large-action .btn-large-primary:hover {background-color: #3d3155; }

#game-holder .star-list { padding:0 45px; }

.avatar { position:relative; }
.avatar .gamerscore { position: absolute; bottom: 10%; right:0%; width: 100%; text-align: center; color: #000;  }

.loader { text-align:center; }
.loader img {display:inline-block; margin:10px auto;}
.loader p { margin-bottom:2em; }

.timer {height:10px; width:100%; margin-bottom:30px;}
.timer .timer-rail {background-color:#372a50; height:100%; width:100%; border-radius:10px; overflow:hidden;}
.timer .timer-bar {background-color:#28a3dc; height:100%; width:100%; transition:width 1s linear;}
.timer.hard .timer-bar { transition-duration:5s; }
.timer.medium .timer-bar { transition-duration:10s; }
.timer.easy .timer-bar { transition-duration:15s; }
.timer.countdown .timer-bar {width:0;}

.display-card { border-radius:20px; font-size:0; overflow:hidden; margin-bottom:40px; position:relative; /*left:-100%; */}
.display-card img { width:100%; }
p.question-times-up { margin:1em 0; font-size:30px; font-weight:bold; display:block; text-align:center; }
.question span { display:block; text-align:center; color:rgba(255,255,255,0.5); margin-bottom:1em; margin-top:25px;  }
.question p {font-size:24px; font-weight:bold; text-align:center; width:70%; display:block; margin:0 auto 1.5em; line-height:1.3em;}
.correct-answer p {font-size:24px; font-weight:bold; text-align:center; width:70%; display:block; margin:0 auto 2em; line-height:1.3em; margin-top:20px;}

#game-question-review .display-card { left:0; }

.player-details-table {display:table; table-layout:fixed; margin-bottom:20px; width:100%;}
.player-details-table .avatar-holder { display:table-cell; width:50%; padding-left:60px; padding-right:30px; }
.player-details-table .player-details { display:table-cell; width:50%; vertical-align:middle;}
.player-details-avatar { width:250px; float:left; padding-left:60px; padding-right:30px; padding-bottom:20px; vertical-align:middle; }
.player-details-table .player-details .player-name { font-size:22px; font-weight:bold; color:#ffffff; }
.player-details-table .player-details p { font-size:18px; color:rgba(255,255,255,0.5); margin-bottom:1em; line-height:1.2em; }
.player-details-table .player-details a { font-size:16px; color:rgba(255,255,255,0.5); margin-bottom:1em; font-weight:bold; }

/**** LIGHTBOX ****/

.lightbox-holder {position:relative; z-index:999; position:absolute; top:0; left:0; width:100%; display:none;}
.lightbox-bg { background-color:rgba(0,0,0,0.8); position:fixed; top:0; left:0; right:0; bottom:0; }
.lightbox-content { width:500px; margin:40px auto; height:500px; position:relative; z-index:1000; max-width:100%; }
#game-holder .lightbox-content .header { font-size:24px;}
.lightbox-close { position:absolute; top:10px; right:10px; background-color:rgba(255,255,255,0.2); padding:9px; font-size:0; border-radius:50px; }
.lightbox-text {width:85%; margin:25px auto;}
.lightbox-text p { margin-bottom:1em; font-size:18px; }
.lightbox-text .bullet { float:left; padding-bottom:15px; margin-right:10px; vertical-align:middle; }

@media (max-width: 1000px) {
    .your-games .game-holder .game .play-game { padding:20px 40px; }

}

@media (max-width: 900px) {
    a.login-btn { width:100%; border-radius:0; top:auto; right:auto; margin:0; height:50px; line-height:54px; position:relative !important; }
    div.login-btn { width:100%;  top:auto; right:auto; margin:0; position:relative !important; }
    div.login-btn > a { height:50px; line-height:54px; width:100%; border-radius:0; display:block; margin:0; }
}

@media (max-width: 768px) {
    .your-games .game-holder { width:50%; }
}

@media (max-width: 700px) {
    .locked-game { width:50%; }
    .intro-panel { padding:0 20px; }
    .intro-panel p br { display:none; }
}

@media (max-width: 600px) {
    .your-games .game-holder { width:50%; }
    .tab-holder h1 { font-size:25px; }
    .tab-holder h1 br { display:none; }

    .reward-box { width:100%; }
}

@media (max-width: 540px) {
    .lightbox-content { position: absolute; left: 20px; right: 20px; width: auto; top: 0; }
}
@media (max-width: 520px) 
{
    #game-holder { width:100%; margin:20px auto }
    #game-holder .holder .header { font-size:22px; margin:1.5em 0; }
    #game-holder .option { font-size:16px; }
    #game-holder .player-holder .player { float:none; margin:0 auto; }
    #game-holder .btn-start { padding:25px; }
    #game-holder .centered-link { font-size:14px; }
    .question p { width:80%; font-size:22px; }
    .correct-answer p { width:80%; font-size:22px; }
    .player-details-table .avatar-holder { padding-left:20px; padding-right:10px; }
    .player-details-table .player-details .player-name { font-size:20px; margin-bottom:0.8em; }
    .player-details-table .player-details p {font-size:16px;}
    .player-details-table .player-details a {font-size:14px;}

    .panel { padding: 35px 20px; }
    .panel p br { display:none; }
    .character { margin:10px 0px; width:50%; }

    .locked-game { width:100%; }

    .welcome-message .dropdown-holder { display:block; }
    .intro-panel .welcome-message { font-size:22px; }
    .intro-panel p { font-size:16px; }

    .listing-games .game { width:50%; }

    
}

@media (max-width: 460px) 
{
    .colour-chooser .colour { margin-right:18px; }
    .main-tabs li a { font-size:16px; padding: 20px 0px; width:180px; }
    .main-tabs li a.active { font-size: 22px; padding: 25px 50px; }

    h1 { font-size:25px; }

    .your-games .game-holder { width:100%; }

}

@media (max-width: 400px) 
{
    .colour-chooser .colour { margin-right:5px; }

    .main-tabs { display:block; width:100% }
    .main-tabs li { display:inline-block; width:50%; }
    .main-tabs li a { display:block; width:100%; padding: 20px 0px; }
    .main-tabs li a.active {font-size:18px; padding: 28px 0px; }

    .your-games .game-holder .game .play-game { position: relative; bottom: auto; right: auto; padding: 20px 20px; }

}
/*
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
*/
body {line-height:1;}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {vertical-align:middle;}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}