@charset "utf-8";
/* CSS Document */
html {height:100%;}
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, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption {margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%;	vertical-align: baseline; }
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
body {line-height: 1;	height:100%;}
ol, ul {list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;	border-spacing: 0;}
.fl {float:left;}
.fr {float:right;}
.clear {clear:both;height:0;line-height:0;font-size:0;}
.absolute {position:absolute;}
.fixed {position:fixed;}
.relative {position:relative;}
.btn {cursor:pointer; border:none;}
.notext {text-indent:-99999px; font-size:0;line-height:0;}
.none {display:none; !important}
.block {display:block;}
.inline {display:inline;}
.iblock {display:inline-block;}
.valt {vertical-align:top;}
.valm {vertical-align:middle;}
.valb {vertical-align:bottom;}
.tar {text-align:right;}
.tal {text-align:left;}
.tac {text-align:center;}

@font-face {
    font-family: 'GothamHTFMediumRegular';
    src: url('../font/gothamhtf-medium_0-webfont.eot');
    src: url('../font/gothamhtf-medium_0-webfont.eot#iefix') format('embedded-opentype'),
         url('../font/gothamhtf-medium_0-webfont.woff') format('woff'),
         url('../font/gothamhtf-medium_0-webfont.ttf') format('truetype'),
         url('../font/gothamhtf-medium_0-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamHTFBold';
    src: url('../font/gothamhtf-bold_1-webfont.eot');
    src: url('../font/gothamhtf-bold_1-webfont.eot#iefix') format('embedded-opentype'),
         url('../font/gothamhtf-bold_1-webfont.woff') format('woff'),
         url('../font/gothamhtf-bold_1-webfont.ttf') format('truetype'),
         url('../font/gothamhtf-bold_1-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AntiqueOliveCompactRegular';
    src: url('../font/olvr93w-webfont.eot');
    src: url('../font/olvr93w-webfont.eot#iefix') format('embedded-opentype'),
         url('../font/olvr93w-webfont.woff') format('woff'),
         url('../font/olvr93w-webfont.ttf') format('truetype'),
         url('../font/olvr93w-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {font-family:GothamHTFBookRegular; font-size:14px; color:#474440; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
.container {width:996px; min-width: 996px; margin:0 auto;}
a {text-decoration:none;}
.green {background:#94CE18; color:#FFFFFF;}
.blue {background:#08B5DE; color:#FFFFFF;}
.orange {background:#F77321; color:#FFFFFF;}
.white {background:#FFFFFF; color:#535d5f;}

.button {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; background:#FFFFFF; border:1px solid #D6D6D6; display:inline-block; height:28px; line-height:28px; padding:0 15px; text-align:center; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 1px rgba(40, 40, 40, 0.5); -moz-box-shadow: 0px 1px 1px rgba(40, 40, 40, 0.5); box-shadow: 0px 1px 1px rgba(40, 40, 40, 0.5);}
.button:hover {background:#DEEFF7; text-shadow:1px 1px #ffffff; color:#535d5f;}

#wrapper {position:relative; min-height:100%; height:auto !important; height:100%; width:100%;}
#holder {padding:0 0 230px 0; position:relative; width:100%;}
#footer {position: absolute; bottom: 0; height:170px; width:100%; background:#0097BA;}
#footer .left {float:left; width:470px;}
#footer .right {float:right; width:526px;}
#footer h2 {font-family:GothamHTFMediumRegular; font-size:16px; color:#FFFFFF; margin:25px 0 0;}
#footer .first-name {width:150px; float:left;}
#footer .email {width:150px; float:left; margin:0 0 0 5px;}
#footer label {font-family:GothamHTFMediumRegular; font-size:12px; color:#a4eeff; display:block; margin:10px 0 5px;}
#footer input[type="text"] {width:135px;}
#footer .submit {margin:25px 0 0 5px; width:100px; height:25px; background:url(../images/sign-up.png) no-repeat;}
#footer .submit:hover {background-position:0 -25px;}
#footer .ubooly-social-media {margin:30px 0 0;}
#footer .fb {float:left; width:83px; display:block;}
#footer .ubooly-social-media img {float:left; margin:0 0 0 6px;}
#footer .ubooly-phone {font-family:AntiqueOliveCompactRegular; font-size:24px; color:#ffffff; text-align:right; margin:20px 0 0;}
#footer .ubooly-nav {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; text-align:right; margin:25px 0 0;}
#footer .ubooly-nav a {color:#FFFFFF;}
#footer .ubooly-copyright {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#a4eeff; text-align:right; margin:5px 0 0;}
#footer .ubooly-main-nav {margin:30px 0 0; text-align:right;}
#footer .ubooly-main-nav a {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:12px; color:#FFFFFF; display:inline-block; margin:0 0 0 9px;}

#header {height: 76px;}
#header .logo {display:block; float:left;}
#header .nav {float:right; font-size:14px; color:#9CA5A5; height:32px; line-height: 32px; margin:20px 0 0;}
#header .nav a {font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#00b5e3; display:inline-block; margin:0 6px; line-height:32px; height:32px; vertical-align:middle;}
#header .nav a.active {background:#0CB1DA; color:#FFFFFF;}
#header .nav a:hover {color:#bceeff;}
#header .nav .button {color:#535d5f; height:28px; line-height:28px;}
#header .nav .button:hover {color:#535d5f;}
#header .nav .credits {font-family:Arial, Helvetica, sans-serif; font-weight:bold; display:inline-block; margin:0 6px; line-height:32px; height:32px; vertical-align:middle}
#header .nav .buy-credits-btn {width: 117px; height: 31px; background: url(../images/buy-credits.png);}
#header .nav a.premium {color: #21EF10;}


#left-nav {width:176px; float:left; margin:40px 0 0 15px;}
#left-nav h2 {font-family:GothamHTFMediumRegular; font-size:14px; color:#535d5f;}
#left-nav ul {margin:15px 0 0;}
#left-nav li {height:29px; line-height:29px; margin:1px 0 0; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
#left-nav li a {font-family:GothamHTFMediumRegular; font-size:16px; color:#0cb1da; margin:0 0 0 10px; display:block;}
#left-nav li.active {background:#08B5DE;}
#left-nav li:hover {background:#F77321;}
#left-nav li.active a, #left-nav li:hover a {color:#ffffff;}

#packs .box {border:1px solid #D6D6D6; margin:15px 0 0 13px; position:relative; overflow:hidden; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer;}
#packs .box a {z-index:1000; position:relative;}
#packs .box .view-details {width:115px; height:32px; background:url(../images/view-dateils.png); display:inline-block;}
#packs .box .all-lessons {width:110px; height:32px; background:url(../images/all-lessons.png); display:inline-block;}
#packs .box img {display:block;}
#packs .box.small .badge {position:absolute; top:-126px; left:0; z-index:99; display: none;}
#packs .box.big .badge {position:absolute; top:-304px; left:0; z-index:99; display: none;}
#packs .box .caption-holder {position:absolute; bottom:0; width:100%;}
#packs .box .caption {height:34px; line-height:34px; padding:0 0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; font-weight:bold; background:#FFFFFF; z-index: 99; text-transform:capitalize;}
#packs .box .caption span {color:#0cb1da;}
#packs .box .hover .l1 {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; padding:10px 0 0;}
#packs .box .hover .l2 {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; margin:10px 0 0;}
#packs .box .hover .view-details {margin:10px 0 0 2px;}
#packs .box .hover .all-lessons {margin:10px 0 0 2px;}
#packs .box .hover .percent {font-family:GothamHTFBold; font-size:22px; color:#0cb1da; margin:5px 0 0;}
#packs .box .hover .square {width:16px; height:16px; display:block; float:left; margin:10px 7px 0 0;}
#packs .box .button {font-family:GothamHTFMediumRegular; margin:9px 0 0 2px; padding:0 15px; text-align:center; }
#packs .box .button:hover {background:#DEEFF7; text-shadow:1px 1px #ffffff;}

#packs .lessons-box {padding:7px 0 0 7px; background:#DEF7F7; text-align:center; height:297px;}
#packs .lessons-box .leason {width:85px; height:85px; float:left; margin:4px;}
#packs .lessons-box .leason h3 {font-family:GothamHTFMediumRegular; font-size:36px; margin:10px 0 0;}
#packs .lessons-box .leason h4 {font-family:GothamHTFMediumRegular; font-size:12px; margin:5px 0 0; text-transform:uppercase;}
#packs .lessons-box .completed {text-align:left;}
#packs .lessons-box .completed h3 {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:14px; color:#535d5f; margin:15px 0 5px;}
#packs .lessons-box .square {width:16px; height:16px; margin:3px 4px 3px 3px; float:left;}
#packs .lesson-queue {width:145px; height:32px; background:url(../images/lesson-queue.png); margin:1px 1px 0 0; display:block; float:right;}
#packs .lessons-box-data {padding:7px 0 0 7px; background:#DEF7F7; text-align:center; height:291px;}
#packs .lessons-box-data .l1 {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; font-weight:bold; margin:15px 0 0;}
#packs .lessons-box-data .l2 {font-family:GothamHTFMediumRegular; font-size:30px; color:#0cb1da; margin:5px 0 0;}
#packs .lessons-box-data .l3 {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; line-height:18px; margin:15px 0 0;}
#packs .lessons-box-data .l3 a {color:#0cb1da; font-weight:bold; margin:5px 0 0; display:block;}
#packs .lessons-box-data .l4 {font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#535d5f; margin:20px 0 0;}
#packs .lessons-box-data .stars {margin:15px 0 0;}

#content h1 {font-family:GothamHTFMediumRegular; font-size:30px; color:#00b5e3;}


#top {height:238px; background:#08B5DE; border-top:1px solid #D6D6D6; border-bottom:1px solid #D6D6D6;}
#top .playmate {width:181px; float:left; margin:27px 0 0 15px; position:relative;}
#top .playmate .l1 {font-family:GothamHTFMediumRegular; font-size:14px; color:#ffffff;}
#top .playmate .l2 {font-family:GothamHTFMediumRegular; font-size:14px; color:#ffffff; margin:23px 0 0;}
#top .playmate .l3 {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#def1f5; line-height:16px; margin:5px 0 0;}
#top .playmate .select-holder {height:32px;}
#top .playmate select {width:100%; margin:8px 0 0;}
#top .playmate .edit-likes {width:136px; height:32px; background:url(../images/edit-likes.png); position:absolute; top:140px;}

#top .ubooly {width:185px; float:left; margin:27px 0 0 17px; position:relative;}
#top .ubooly .l1 {font-family:GothamHTFMediumRegular; font-size:15px; color:#def1f5; text-align:center;}
#top .ubooly img {margin:7px 0 0;}
#top .ubooly .control {width:118px; height:32px; background:url(../images/control.png); display:block; position:absolute; top:140px; left:50%; margin-left:-59px;}
#top .results {width:141px; float:left; margin:27px 0 0 30px; position:relative;}
#top .results .no-data {font-family:GothamHTFMediumRegular; font-size:14px; color:#def1f5; text-align:center; margin:60px 0 0;}
#top .results .l1 {font-family:GothamHTFMediumRegular; font-size:15px; color:#def1f5; text-align:center;}
#top .results .l2 {font-family:GothamHTFMediumRegular; font-size:14px; color:#ffffff; margin:10px 0 0;}
#top .results .l3 {font-family:GothamHTFMediumRegular; font-size:14px; color:#ffffff; margin:20px 0 0;}
#top .results .score {height:26px; background:#94CE18; margin:5px 0 0; width:0;}
#top .results .complete-holder {margin:20px 0 0; background:#42C6E7;}
#top .results .complete {height:55px; background:#94CE18; width:0;}
#top .results .percent {line-height:26px; margin:-40px 0 0 10px; font-family:GothamHTFMediumRegular; font-size:14px; color:#ffffff;}
#top .results .all-results {width:141px; height:32px; background:url(../images/all-results.png); display:block; position:absolute; top:140px;}

#top .content {width:160px; float:left; margin:27px 0 0 60px; position:relative;}
#top .content .l1 {font-family:GothamHTFMediumRegular; font-size:15px; color:#def1f5; text-align:center;}
#top .content .pie {margin:15px 0 0; text-align:center;}
#top .content .knob {font-size:14px; color:#FFFFFF;}
#top .content .more-details {width:141px; height:32px; background:url(../images/more-details.png); display:block; position:absolute; top:140px; left:50%; margin-left:-70px;}

#top .coins {width:141px; float:left; margin:27px 0 0 50px; position:relative; text-align:center;}
#top .coins .l1 {font-family:GothamHTFMediumRegular; font-size:15px; color:#def1f5; text-align:center;}
#top .coins img {margin:10px 0 0;}
#top .coins .coin {font-family:GothamHTFMediumRegular; font-size:20px; color:#0cb1da; margin:-65px 0 0;}
#top .coins .coin.infinity {font-size: 50px; margin-top: -80px;}
#top .coins .reward-coins {width:141px; height:32px; background:url(../images/reward-coins.png); display:block; position:absolute; top:140px;}

#dashboard h1 {margin-left: 13px;}
#dashboard #packs {margin: 20px 0 0 4px; float: left; width: 800px;}
#dashboard #packs .first4 {width: 400px; float: left;}
#dashboard #packs .box.big {width:387px; height:335px;}
#dashboard #packs .box.small {width:187px; height:160px;}
#dashboard #packs .box .caption-holder .hover {height:126px; background:#DEF7F7; display:none; padding:0 10px;}


#playmate #container {border:1px solid #D6D6D6; background:#FFFFFF; margin-top:-210px;}
#playmate #pm-content {margin:40px 50px;}
#playmate .top h1 {font-family:GothamHTFMediumRegular; font-size:30px; color:#00b5e3;}
#playmate .top h1 span {color:#535d5f;}
#playmate .top p {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; padding:20px 0; border-bottom:1px solid #DEF7F7;}
#playmate .top table {margin:20px 0 0;}
#playmate .top td {font-family:GothamHTFMediumRegular; font-size:12px; color:#535d5f; text-transform:uppercase;}
#playmate .top td input[type=text] {width:177px;}

#playmate #left-nav {margin: 40px 0 0;}
#playmate #packs {width: 700px; float: left; margin: 30px 0 0 13px;}

#playmate #packs h2 {font-family:GothamHTFMediumRegular; font-size:12px; text-transform:uppercase; margin:10px 0 0 12px;}
#playmate #packs .box.small {width:162px; height:162px;}
#playmate #packs .box.active .badge {display:block;}
#playmate #packs .box .caption-holder {position:absolute; bottom:0; width:100%; text-align:center; display:none;}
#playmate #packs .box .caption-holder .hover {height:160px; background:#000000; padding:0 10px; opacity:0.6;}
#playmate #packs .box .caption-holder .hover-container { position:absolute; width:100%; z-index:99;}
#playmate #packs .box .caption-holder a {margin:40px 0 0;}
#playmate #packs .box .caption {position: absolute; bottom: 0; width: 100%; z-index: 999;}
#playmate #packs .box .caption2 {height:34px; line-height:34px; padding:0 0 0 10px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; font-weight:bold; background:#FFFFFF; text-align:left; text-transform:capitalize}
#playmate #packs .box .caption2 span {color:#0cb1da;}


#playmate #confirm {width:549px; height:268px; background:url(../images/confirm_v-1.png); position:absolute; top:100px; left:50%; margin-left:-274px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; display:none;}
#playmate #confirm h1 {margin:40px 0 0 30px; font-weight:bold;}
#playmate #confirm h2 {margin:50px 0 0 50px; font-weight:bold;}
#playmate #confirm p {margin:10px 50px 0 50px; line-height:18px;}
#playmate #confirm .confirm {width:126px; height:32px; background:url(../images/got-it.png); display:inline-block; position:absolute; right:40px; bottom:30px;}


#popup {border:1px solid #D6D6D6; background: #FFFFFF; padding:40px 40px; position:relative; overflow: hidden;}
#popup .close {width:14px; height:14px; background:url(../images/close.png); position:absolute; top:15px; right:15px; cursor:pointer;}
#popup .box {width:85px; height:85px; line-height:85px; float:left; font-family:GothamHTFMediumRegular; font-size:40px; text-align:center;}
#popup .buy-popup {width:127px; height:32px; background:url(../images/buy_v-3.png); display:inline-block; line-height:30px; text-align:left; color:#ffffff; text-align: center; font-size:14px;}

#popup .content {padding:0 0 40px; font-family:GothamHTFMediumRegular;}
#popup .content h1 {font-size:30px; color:#00b5e3; text-transform:capitalize}
#popup .content h1 span {color:#535d5f;}
#popup .content .top p {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535d5f; padding:20px 0; line-height:18px; border-bottom:1px solid #DEF7F7;}
#popup .content .subscription-complete .top {border: none;}
#popup .content h2 {font-size:12px; margin:20px 0 0; text-transform:uppercase;}
#popup .content h3 {color:#0cb1da; margin:15px 0 0;}
#popup .content table {width:100%; margin:10px 0 0; font-size:14px;}
#popup .content table tbody {border:1px solid #D6D6D6;}
#popup .content table tbody tr {border:1px solid #D6D6D6;}
#popup .content table td {height:39px; vertical-align:middle; padding:0 7px;}
#popup .content .details {background:#DEEFF7; font-family:Arial, Helvetica, sans-serif; font-weight:normal; display:none;}
#popup .content .details ul {margin:20px 0;}
#popup .content .details li {margin:10px 0; text-shadow:1px 1px #ffffff;}
#popup .content .details span {margin:0; padding:0; background:none; color:#00b5e3; font-weight:bold;}
#popup .content table td.title {color:#0cb1da; width:180px;}
#popup .content .plan-btn {width:160px;}
#popup .content .show-hide {width:150px; height:32px; background:url(../images/show-hide.png); display:inline-block;}

#popup .content table .preview {width:105px; height:32px; background:url(../images/preview.png); display:inline-block;}
#popup .content table .retake {width:139px; height:32px; line-height:32px; background:url(../images/retake.png); display:inline-block; vertical-align:middle;}
#popup .content table span {display:inline-block; background:#94CE18; padding:7px 10px; color:#FFFFFF; margin:0 0 0 10px;}
#popup .content .left-img {margin:30px 0 0; float:left;}
#popup .content .right-content {width:490px; float:right; font-weight:normal; margin:30px 0 0; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
#popup .content .right-content .divider {border-bottom:1px solid #DEF7F7; padding:0 0 20px; line-height:18px;}
#popup .content .right-content table tbody tr {border:1px solid white;}
#popup .content .features {margin:20px 0; line-height:18px;}

#popup #confirm {font-family:Arial, Helvetica, sans-serif; width:549px; height:355px; background:url(../images/Confirm-Purchase.png); position:absolute; z-index:99999; top:0px; left:50%; margin-left:-274px; display:none;}
#popup #confirm h1 {font-size:14px; color:#535d5f; font-weight:bold; margin:40px 0 0 30px; }
#popup #confirm .content {margin:50px 60px 0 60px; padding:0;}
#popup #confirm .content h2 {text-transform:none; font-weight:bold;}
#popup #confirm .content p {font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin:10px 0 0;line-height:18px;}
#popup #confirm .content p span {font-weight:bold; color:#00b5e3;}
#popup #confirm .conf-box {width:68px; height:68px; margin:15px 0 0; text-align:center; float:left; margin-left:8px;}
#popup #confirm .conf-box h1 {font-family:GothamHTFMediumRegular; font-size:30px; margin:0; padding:7px 0 0; color:#FFFFFF;}
#popup #confirm .conf-box h2 {margin:5px 0 0;}
#popup #confirm .conf-box.blue {margin-left:60px;}
#popup #confirm .btns {position: absolute; bottom: 30px; right: 40px;}
#popup #confirm .button {font-family:GothamHTFMediumRegular; font-size:14px; color:#535d5f; border:1px solid #D6D6D6; border-bottom:2px solid #D6D6D6;  background:#FFFFFF; display:inline-block; line-height:28px; margin:9px 0 0 2px; padding:0 15px; text-align:center; -moz-border-radius: 5px; border-radius: 5px;}
#popup #confirm .button:hover {background:#DEEFF7; text-shadow:1px 1px #ffffff;}


.fancybox-wrap {top: 100px !important;}

#credits {margin:0 30px;}
#credits .top {border-bottom: 1px solid #DEF7F7; padding: 0 0 20px;}
#credits .top h1 {font-family: GothamHTFMediumRegular; font-size: 30px; color: #535d5f;}
#credits .top h1 span {color: #00b5e3;}
#credits .top p {margin: 20px 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #535d5f;}

#credits .credit-box {width: 187px; height: 165px; float: left; background: #DEF7F7; border: 1px solid #D6D6D6; margin:25px 10px; text-align: center;}
#credits .credit-box.first {margin-left: 100px;}
#credits .credit-box h2 {font-family:GothamHTFMediumRegular; font-size: 30px; color: #00b5e3; margin: 25px 0 0;}
#credits .credit-box p {font-size: 14px; color: #535d5f;}
#credits .credit-box p.l1 {font-family:GothamHTFMediumRegular; margin: 10px 0 0;}
#credits .credit-box p.l2 {font-family: Arial, Helvetica, sans-serif; margin: 5px 0 0;}
#credits .credit-box .buy-now {width: 106px; height: 31px; margin: 15px 0 0; display: inline-block; background: url(../images/buy-now-btn.png);}
#credits .credit-box .edit-order {width: 106px; height: 31px; margin: 15px 0 0; display: inline-block; background: url(../images/edit-order.png);}

#credits.billing {padding-bottom: 30px;}
#credits.billing h2 {font-family:GothamHTFMediumRegular; margin: 20px 0; font-size: 12px;}
#credits.billing form {float: left;}
#credits.billing .credit-box {float: right;}
#credits.billing form img {vertical-align: middle;}
#credits.billing form a {color: #00b5e3; font-weight: bold;}
#credits.billing form p {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #535d5f;}
#credits.billing form p.l1 {font-family: GothamHTFMediumRegular; font-size: 12px; margin: 20px 0 0;}
#credits.billing form p.l2 {font-weight: bold; margin: 20px 0 0;}
#credits.billing form p.l3 {margin: 10px 0 0;}
#credits.billing form p.l4 {margin: 30px 0 0;}
#credits.billing form p.l5 {margin: 20px 0 0;}
#credits.billing form p.l6 {margin: 20px 0 0; font-weight: bold;}
#credits.billing .complete-order, #credits.billing .complete-order-update {width: 159px; height: 31px; background: url('../images/complete-order.png'); display: inline-block; vertical-align: middle;}
#credits.billing input[type="text"] {border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding: 5px; border: 1px solid #D6D6D6; margin: 5px 0 0; width: 220px;}
#credits.billing input[type="text"].cvv {width: 70px;}
#credits.billing label {font-family: GothamHTFMediumRegular; font-size: 14px; color: #535d5f; margin: 10px 0 0; display: block;}
#credits.billing select {margin:10px 0 0;}
#credits.billing .summary {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #535d5f;}
#credits.billing .summary p {margin: 10px 0 0;}
#credits.billing .summary p.method {margin: 20px 0 30px;}




.headline {height:70px; background:url(../images/ubooly-bedroom.jpg) no-repeat top center; background-size: 100% auto; position:relative;}
.headline h1 {font-family:GothamHTFMediumRegular; font-size:24px; color:#FFFFFF; line-height:70px; text-shadow:#666666 2px 2px 4px; padding:0 0 0 300px; position:relative; z-index:100;}
.headline .bg {width:100%; height:100%; position:absolute; top:0; left:0; background:#000000; opacity:0.4; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter:alpha(opacity=40); z-index:1;}

#login {width: 720px; min-height: 350px; background:url(../images/ubooly-lab-login.png) bottom left no-repeat #DEEFF7; border: 1px solid #D6D6D6; margin: -10px auto 0; z-index: 99999; position: relative;}
#login .content {margin:50px 0 0 390px; width:270px;}
#login .content h1 {font-family:GothamHTFMediumRegular; font-size:30px; color:#00b5e3; margin:0 0 10px;}
#login .content label {font-family:GothamHTFMediumRegular; font-size:12px; color:#535d5f; display:block; text-transform:uppercase; margin:15px 0 5px;}
#login .content .input {width:100%; padding:5px; border:1px solid #D6D6D6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
#login .content a.link {color:#00b5e3; font-family:Arial, Helvetica, sans-serif;}
#login .content .forgot {display:inline-block; margin:5px 0 0;}
#login .content .button {display:inline-block; margin:15px 0 0; font-weight: bold; padding: 0 20px;}
#login .content .register {display:inline-block; margin:15px 0 0; font-weight:bold;}
#login p.download {font-family:GothamHTFMediumRegular; font-size:12px; color:#00b5e3; margin: 25px 40px 0 0; text-align: right;}

#confirm-box {font-family:Arial, Helvetica, sans-serif; width:549px; border: 1px solid #737373;position:absolute; z-index:99999; top:20px; left:50%; margin-left:-274px; background-color: #DEF7F7; display: none;
-webkit-box-shadow: 0px 0px 20px #666666;
-moz-box-shadow:    0px 0px 20px #666666;
box-shadow:         0px 0px 20px #666666;
}
#confirm-box .header h1 {font-size:14px; color:#535d5f; font-weight:bold; height: 35px; line-height: 35px; background-color: #ffffff; padding: 0 20px; border-bottom: 1px solid #D6D6D6; margin: 0}
#confirm-box .content {margin:20px 30px 0 30px; padding:20px; background-color: #ffffff; border: 1px solid #D6D6D6;}
#confirm-box .content h2 {text-transform:none; font-weight:bold; margin: 0;}
#confirm-box .content p {font-family:Arial, Helvetica, sans-serif; font-weight:normal; margin:10px 0 0;line-height:18px;}
#confirm-box .content p span {font-weight:bold; color:#00b5e3;}
#confirm-box .conf-box {width:68px; height:68px; margin:15px 0 0; text-align:center; float:left; margin-right:8px;}
#confirm-box .conf-box h1 {font-family:GothamHTFMediumRegular; font-size:30px; margin:0; padding:7px 0 0; color:#FFFFFF;}
#confirm-box .conf-box h2 {margin:5px 0 0;}
#confirm-box .btns {margin: 15px 30px 15px 0; text-align: right;}
#confirm-box .button {font-family:GothamHTFMediumRegular; font-size:14px; color:#535d5f; border:1px solid #D6D6D6; border-bottom:2px solid #D6D6D6;  background:#FFFFFF; display:inline-block; line-height:28px; margin:0 0 0 2px; padding:0 15px; text-align:center; -moz-border-radius: 5px; border-radius: 5px;}
#confirm-box .button:hover {background:#DEEFF7; text-shadow:1px 1px #ffffff;}
#playmate #confirm-box {top: 130px;}




#account .left-block {margin: 30px 0 0 15px; width: 400px; float: left;}
#account .block {border-bottom: 1px solid #C6D6D6; padding: 0 0 20px;}
#account .left-block h2 {font-family:GothamHTFMediumRegular; font-size:12px; margin: 20px 0;}
#account .left-block label {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size: 14px; margin: 10px 0 0; display: block;}
#account .left-block p {font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size: 14px; margin: 3px 0 0; }
#account .edit-details {width: 123px; height: 31px; background:url(../images/edit-details.png); display: block; margin: 10px 0 0}
#account .edit-payment {width: 128px; height: 31px; background:url(../images/edit-payment.png); display: block; margin: 15px 0 0}
#account .edit-address {width: 189px; height: 31px; background:url(../images/edit-billing.png); display: block; margin: 15px 0 0}
#account .playmates {width: 308px; background: #DEF7F7; border: 1px solid #D6D6D6; float: right; margin: 50px 20px 0 0;}
#account .playmates h2 {font-family:GothamHTFMediumRegular; font-size:12px; margin: 20px 0 10px; padding-left: 15px;}
#account .playmates .item {margin: 10px 0 15px 15px;}
#account .playmates img {float: left;}
#account .playmates .info {width: 190px; float: right;}
#account .playmates .info p {margin: 15px 0 10px;}
#account .playmates .edit {width: 55px; height: 32px; background: url(../images/playmate-edit.png); display: inline-block;}
#account .playmates .remove {width: 83px; height: 32px; background: url(../images/playmate-remove.png); display:inline-block;}
#account .playmates span {color: #00b5e3;}
#account .btns {margin: 10px 0 0 2px;}
#account .btns .button {height: 24px; line-height: 24px;}
#account #form input[type="text"], #account #form input[type="password"] {border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding: 5px; border: 1px solid #D6D6D6; margin: 5px 0 0; width: 220px;}
#account .subscribeEmail {padding: 0 0;}
#account .privacy {text-align: right; margin: 30px 30px 0 0;}
#account .privacy a {color: #00b5e3;}

#unsubscribeEmail {font-family:GothamHTFMediumRegular; font-size:12px; width: 500px; text-align: center; border: 1px solid #C6D6D6; margin: 100px auto; padding: 100px;}

#loader {text-align: center; margin: 100px 0 0;}

#error {width:700px; position:fixed; top:-2000px; left:50%; margin-left:-350px; z-index:98; background:#FFBABA; box-shadow: 0px 9px 15px rgba(50, 50, 50, 0.49); border-radius:0 0 20px 20px; -moz-border-radius:0 0 20px 20px; z-index:9999999;}
#error .content {padding:30px 50px;}
#error .title {font-family:GothamHTFBold; font-size:18px; color:#D6010E;}
#error #display-error {margin:20px 0 0; font-family:GothamHTFBookRegular; font-size:14px; color:#D6010E;}
#error #display-error p {font-family:GothamHTFBookRegular; font-size:14px; color:#D6010E; margin:5px 0;}

#success {width:700px; position:fixed; top:-2000px; left:50%; margin-left:-350px; z-index:98; background:#DFF2BF; box-shadow: 0px 9px 15px rgba(50, 50, 50, 0.49); border-radius:0 0 20px 20px; -moz-border-radius:0 0 20px 20px; z-index:9999999;}
#success .content {padding:30px 50px;}
#success .title {font-family:GothamHTFBold; font-size:18px; color:#D40000;}
#success #display-success {margin:20px 0 0; font-family:GothamHTFBold; font-size:18px; color:#4F8A10;}


#loading-order, #loading-subscription {width:159px; height:31px; background:url(../images/ajax-loader.gif) no-repeat center; display:none;}

.subscription-complete h1 span {color: #00b5e3;}
.subscription-complete p {padding: 50px 0 0;}