/* WRAPPER */

#wrapper {width: 1017px; height: 43px; background: transparent url(../images/beta/wrapper.png); position: absolute; left: -36px; top: 43px;}
.signup-button {display:block; width: 95px; height: 24px; background: url(../images/beta/signup-button.png) 0 0 no-repeat; float:right; position: relative; top: 9px; right: 20px;}
.signup-button:hover {background-position: 0 -24px;}
.signup-button:active {background-position: 0 -48px;}

.beta-info {display: block; width: 70px; height: 24px; background: url(../images/beta/beta-info.png) 0 0 no-repeat; float: right; position: relative; top: 9px; right: 15px;}

#mag-wrapper {width: 777px; height: 227px; background: transparent url(../images/beta/magazine-wrapper.png); position: absolute; left: -40px; top: 225px; text-align: left; padding: 30px 120px;}
#mag-wrapper h2 {margin-bottom: 20px; text-align: center;}
#mag-wrapper p {color:#282B29; font-size: .9em;}
.beta-default {display:block; width: 430px; height: 43px; float:left; margin-left: 30px;}

/* ========== */
/* ! GUARDIAN PAGE   */
/* ========== */
body#guardian {background: #000 url(../images/beta/bkg-guardian.png) 0 0 repeat-x; padding-top: 60px;}
body#guardian #canvas {width: 1000px; background: transparent; margin: 0 auto; -webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
body#guardian #canvas .header {width: 1000px; margin-bottom: 30px;}
body#guardian #canvas .stage {width: 1000px; background: url(../images/beta/screenshots.png) 330px 0 no-repeat; min-height: 620px;}
body#guardian #canvas .stage .copyblock {width: 480px;}

body#guardian #canvas p, body#guardian #canvas ul {color:#a9a9a9; line-height: 1.3em; font-size: 15px; }
body#guardian #canvas ul {margin-left: 0px; }
body#guardian #canvas ul li {margin-bottom: 12px;}
.beta-signin {color:#1A92C1; font-size: 1em;}
.beta-signin:hover {color:#1A92C1}
/* strong {color: #ffffff; font-weight: normal;} */
body#guardian #canvas ul.game {list-style: none; margin: 0 0 30px 20px;}
body#guardian #canvas ul.game li {padding-left: 35px;}
body#guardian #canvas ul.game li.betaratings {background: url(../images/beta/star.png) 0 center no-repeat;}
body#guardian #canvas ul.game li.betaprojects {background: url(../images/beta/projects.png) 0 center no-repeat;}
body#guardian #canvas ul.game li.betarecommendations {background: url(../images/beta/recommendations.png) 0 center no-repeat;}
body#guardian #canvas ul.game li.betaarticles {background: url(../images/beta/articles.png) 2px center no-repeat;}
body#guardian #canvas h1 {display: block; text-indent: -9999em; background: url(../images/beta/logo-maf.png); width:522px; height:89px;}
body#guardian #canvas h2 {color: #fff; margin: 20px 0 5px 0;}
input.invite-code {height: 30px; background-color: #c0c0c0;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 192, 192)),to(rgb(255, 255, 255)));
background-image: -webkit-linear-gradient(top, rgb(192, 192, 192), rgb(255, 255, 255));
background-image: -moz-linear-gradient(top, rgb(192, 192, 192), rgb(255, 255, 255));
background-image: -o-linear-gradient(top, rgb(192, 192, 192), rgb(255, 255, 255));
background-image: -ms-linear-gradient(top, rgb(192, 192, 192), rgb(255, 255, 255));
background-image: linear-gradient(top, rgb(192, 192, 192), rgb(255, 255, 255));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#c0c0c0', EndColorStr='#ffffff');
 -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; border: solid 1px #fff;
 padding: 5px;
 font-size: 22px;
 width:240px; float: left; margin: 0 10px 0 0; text-align: center; font-family: 'Droid Serif', Times, serif; font-weight: 100; color:#484744;}

input.invite-code.error {-webkit-box-shadow: 0px 0px 5px 3px #ca2828;
-moz-box-shadow: 0px 0px 5px 3px #ca2828;
box-shadow: 0px 0px 5px 3px #ca2828;}
.beta-error {background: #ca2828; color:#fff; padding: 5px; font-size: .865em; margin-bottom: 10px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; text-shadow: 0px 1px 0px #380000; width: 333px; text-align: center;}
.beta-message {background: #1A92C1; color:#fff; padding: 5px; font-size: .865em; margin-bottom: 10px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; text-shadow: 0px 1px 0px #003c65; width: 333px; text-align: center;}
.beta-message a {color:#034057;}
.beta-message a:hover {color:#EE4F0F;}

/* ========== */
/* ! SIGN UP   */
/* ========== */
.step_info.beta {padding: 0; margin:0; width: 920px;}
.step_info.beta h2 {width: 700px; float:left;}

td.metroname.beta {width: 680px;}
td.standard.beta {width: 78px;}

 /* ========== */
/* ! CONTROL CENTER   */
/* ========== */

.cc-beta-message {width: 700px; margin-bottom: 20px; float:left; margin: 30px 0 0 30px;}
.cc-beta-message .congrats, .cc-beta-message .domore {font-family: 'Droid Serif', Times, serif; font-weight: 100;}
.cc-beta-message .congrats {color:#272a2b; font-size: 24px;}
.cc-beta-message .domore {color: #f56620; font-size: 32px;}

.cc-beta-steps {list-style: none; width: 654px; height: 45px; margin-left: 20px;}
.cc-beta-steps li a {display:block; height:45px; float: left;}
.cc-beta-steps li.logo a {background: url(../images/beta/beta-step-logo.png) 0 0 no-repeat; width: 227px; }
.cc-beta-steps li.logo a:hover {background-position: 0 -45px;}
.cc-beta-steps li.logo a.complete {background-position: 0 -90px;}
.cc-beta-steps li.portfolio {background-image:none;}
.cc-beta-steps li.portfolio a {background: url(../images/beta/beta-step-portfolio.png) 0 0 no-repeat; width: 236px; margin-left: -19px;}
.cc-beta-steps li.portfolio a:hover {background-position: 0 -45px;}
.cc-beta-steps li.portfolio a.complete {background-position: 0 -90px;}
.cc-beta-steps li.ratings a {background: url(../images/beta/beta-step-ratings.png) 0 0 no-repeat; width: 229px; margin-left: -19px;}
.cc-beta-steps li.ratings a:hover {background-position: 0 -45px;}
.cc-beta-steps li.ratings a.complete {background-position: 0 -90px;}

/* ========== */
/* ! MODALS   */
/* ========== */

/* PRIVATE BETA INFO */
body#beta-modal {background: #fff; padding: 0 20px;}
body#beta-modal h1 {font-family: 'Droid Serif', Times, serif; font-weight: 100; letter-spacing: -.05em; color:#282B29; font-size: 2em; margin-bottom: 20px;}
body#beta-modal p {font-size: 16px; color: #474747;}

body#beta-modal .solidrule {border-bottom: 1px solid #e2e2e2;display: block;height: 1px; margin: 20px 0;}

/* CC RATINGS MODAL */
body#beta-modal.ratings {background: #fff url(../images/beta/bkg-modal-ratings.png) right 130px no-repeat; padding: 0 20px;}
body#beta-modal.ratings .copy {width: 445px;}

/* CC PORTFOLIO MODAL */
body#beta-modal.portfolio {background: #fff url(../images/beta/bkg-modal-portfolio.png) right 50px no-repeat; padding: 0 20px;}
body#beta-modal.portfolio .copy {width: 380px;}

/* ========== */
/* ! BUTTONS   */
/* ========== */

/* BLUE BUTTON */
a.button.blue {
    background: transparent url('../images/beta/button-blue-right.png') no-repeat scroll top right;
    color: #fff;
    display: block;
    float: left;
    font-family:Helvetica, Arial, sans-serif;
    font-size: .865em
    height: 44px;
    margin-right: 6px;
    padding-right: 20px; /* sliding doors padding */
    text-decoration: none;
}

a.button.blue span {
    background: transparent url('../images/beta/button-blue-left.png') no-repeat;
    display: block;
    line-height: 30px;
    font-weight: 700;
    text-shadow: 0px 1px 1px #002733;
    padding: 7px 0 7px 20px; /* (vertical padding + line height = total height) */
}
a.button.blue:hover {color:#fff; background-position: right -44px;}
a.button.blue:hover span {color:#fff; background-position: 0 -44px;}
a.button.blue:active {
    background-position: right -88px;;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

a.button.blue:active span {
    background-position: 0 -88px;
    padding: 8px 0 7px 20px; /* push text down 1px */
    margin-bottom: -1px; /* offset the push */
}

/* ORANGE BUTTON */
a.button.orange {
    background: transparent url('../images/beta/button-orange-right.png') no-repeat scroll top right;
    color: #fff;
    display: block;
    float: left;
    font-family:Helvetica, Arial, sans-serif;
    font-size: .865em
    height: 44px;
    margin-right: 6px;
    padding-right: 20px; /* sliding doors padding */
    text-decoration: none;
}

a.button.orange span {
    background: transparent url('../images/beta/button-orange-left.png') no-repeat;
    display: block;
    line-height: 30px;
    font-weight: 700;
    text-shadow: 0px 1px 1px #3b1500;
    padding: 7px 0 7px 20px; /* (vertical padding + line height = total height) */
    text-align: center;
}
a.button.orange:hover {color:#fff; background-position: right -44px;}
a.button.orange:hover span {color:#fff; background-position: 0 -44px;}
a.button.orange:active {
    background-position: right -88px;;
    color: #fff;
    outline: none; /* hide dotted outline in Firefox */
}

a.button.orange:active span {
    background-position: 0 -88px;
    padding: 8px 0 7px 20px; /* push text down 1px */
    margin-bottom: -1px; /* offset the push */
}