/**
 * Known simple stylesheet
 */

html{
    height:100%;
    min-height:100%;
}
body{
    min-height:100%;
}

body.page-begin {
    background: none;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    overflow: auto;
}

/** Testing whitespace problem in iOS **/
/*body.page-begin-connect,
body.page-begin-profile,
body.page-begin-register {
    background: url(../gfx/onboarding/sky.jpg) no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    overflow: auto;
}*/

@media only screen and (max-width: 500px) {
    #bg {
        position: fixed;
        top: -25%;
        left: -25%;
        width: 150%;
        height: 150%;
    }
        #bg img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        min-width: 100%;
        min-height: 100%;
    }
}

@media only screen and (min-width: 501px) {
    #bg {
        display: none;
    }
}

#feedback-page {
    text-align: center;
}

#form-main {
    width: 100%;
    float: left;
    padding-top: 20px;
}

#form-div {
    background-color: rgba(255,255,255,0.8);
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 20px;
    width: 550px;
    float: left;
    left: 50%;
    position: absolute;
    margin-top: 20px;
    margin-left: -310px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#form-reg {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5px;
    padding-bottom: 20px;
    width: 550px;
    float: left;
    left: 50%;
    position: absolute;
    margin-top: 20px;
    margin-left: -310px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.feedback-input {
    color:#777777;
    font-family: 'Pontano Sans',Verdana,Helvetica,sans-serif;
    font-weight:500;
    font-size: 16px;
    border-radius: 5px;
    line-height: 18px;
    background-color: #fbfbfb;
    padding: 10px 10px 10px 54px;
    margin-bottom: 5px;
    margin-top: 2px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid rgba(115, 178, 227, 0.4);
}

.feedback-input:focus {
    background: #fff;
    box-shadow: 0;
    border: 3px solid #4c93cb;
    color: #4c93cb;
    outline: none;
    padding: 10px 10px 10px 54px;
}

.website-input {
    color: #333333;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
    line-height: 18px;
    background-color: #fbfbfb;
    padding: 10px 10px 10px 10px;
    margin-bottom: 5px;
    margin-top: 2px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid rgba(0, 0, 0, 0);
}

.website-input:focus {
    background: #fff;
    box-shadow: 0;
    border: 3px solid #4c93cb;
    color: #4c93cb;
    outline: none;
    padding: 10px 10px 10px 10px;
}

.profile-input {
    color: #777777;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
    line-height: 24px;
    background-color: #ffffff;
    padding: 10px 10px 10px 10px;
    margin-bottom: 5px;
    margin-top: 2px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid rgba(115, 178, 227, 0.4);
}

.profile-input:focus {
    background: #fff;
    box-shadow: 0;
    border: 3px solid #4c93cb;
    color: #4c93cb;
    outline: none;
    padding: 10px 10px 10px 10px;
}

.h-register {
    text-align: center;
}

h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.0em;
    font-weight: 700;
    color: #333333;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-top: 25px;
    margin-bottom: 5px;
}

.p-register {
    margin-bottom: 20px;
    margin-top: 10px;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1.5em;
}

p {
    padding-bottom: 1px;
    padding-top: 1px;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 10px;
}

.website {
    margin-top: 0px;
    margin-bottom: 30px;
}

.focused {
    color: #30aed6;
    border: #30aed6 solid 3px;
}

.submit {
    text-align: center;
    width: 100%;
    padding-top: 15px;
}

.btn-reg {
    background-color: #73b2e3;
    background-image: none;
    border: 2px solid #73b2e3;
    color: #FFFFFF;
    margin-bottom: 10px;
    margin-top: 10px;
    text-shadow: none;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    box-shadow: 0 5px #357ebd;
    -webkit-box-shadow: 0 5px #357ebd;
    width: 100%;
    -webkit-appearance: none;
}

.btn-reg:hover, .btn-reg:focus {
    background-color: #4c93cb;
    border: 2px solid #4c93cb;
    color: #FFFFFF;
}

.btn-login {
    background-color: #dddddd;
    background-image: none;
    border: 2px solid #dddddd;
    color: #333333;
    margin-bottom: 10px;
    margin-top: 10px;
    text-shadow: none;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    box-shadow: 0 5px #535353;
    -webkit-box-shadow: 0 5px #535353;
    width: 100%;
    -webkit-appearance: none;
}

.btn-login:hover, .btn-login:focus {
    background-color: #c5c5c5;
    border: 2px solid #c5c5c5;
    color: #535353;
}

/*.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-repeat: repeat-x;
    border-image: none;
    border-radius: 7px;
    cursor: pointer;
    display: inline-block;
    line-height: 24px;
    padding: 15px 65px;
    text-align: center;
    -webkit-appearance: none;
}*/

@media only screen and (max-width: 580px) {
    #form-div {
        left: 3%;
        margin-right: 3%;
        width: 88%;
        margin-left: 0;
        padding-left: 3%;
        padding-right: 3%;
    }

    #form-reg {
        left: 3%;
        margin-right: 3%;
        width: 88%;
        margin-left: 0;
        padding-left: 3%;
        padding-right: 3%;
    }
}

#name {
    background-image: none;
    background-color: #ffffff;
}

#username {
    background-image: url(../gfx/onboarding/user.png);
    background-size: 24px;
    background-position: 11px 7px;
    background-repeat: no-repeat;
}

#username:focus {
    background-image: url(../gfx/onboarding/user-g.png);
    background-size: 24px;
    background-position: 11px 7px;
    background-repeat: no-repeat;
}

#website {
    background-image: none;
    background-size: 24px;
    background-position: 11px 7px;
    background-repeat: no-repeat;
}

#website:focus, #website:hover {
    background-image: none;
    background-size: 24px;
    background-position: 11px 7px;
    background-repeat: no-repeat;
    background-color: #f8f8f8;
}

#password {
    background-image: url(../gfx/onboarding/lock.png);
    background-size: 20px;
    background-position: 11px 6px;
    background-repeat: no-repeat;
}

#password:focus {
    background-image: url(../gfx/onboarding/lock-g.png);
    background-size: 20px;
    background-position: 11px 6px;
    background-repeat: no-repeat;
}

#website {
    background-image: none;
}

#website:focus {
    background-image: none;
}

#email {
    background-image: url(../gfx/onboarding/mail.png);
    background-size: 24px;
    background-position: 11px 11px;
    background-repeat: no-repeat;
}

#email:focus {
    background-image: url(../gfx/onboarding/mail-g.png);
    background-size: 24px;
    background-position: 11px 11px;
    background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 100px;
    line-height: 150%;
    resize: vertical;
}

input:hover,
input:focus {
    background-color: white;
}

textarea:hover,
textarea:focus {
    background-color: #f8f8f8;
    color: #c5c5c5;
}

#button-profile {
    background-color: #73b2e3;
    border: 4px solid #fbfbfb;
    color: white;
    cursor: pointer;
    float: left;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 800;
    margin-top: -4px;
    padding-bottom: 18px;
    padding-top: 18px;
    transition: all 0.3s ease 0s;
    width: 100%;
}

#button-profile:hover {
    background-color: rgba(0, 0, 0, 0);
    color: #4c93cb;
}

.submit:hover {
    color: #3498db;
}

.ease {
    width: 0px;
    height: 78px;
    background-color: #fbfbfb;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -o-transition: .3s ease;
    -ms-transition: .3s ease;
    transition: .3s ease;
}

.submit:hover .ease {
    width: 100%;
    background-color: white;
}

.control-label {
    color: #FFFFFF;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #333333;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
}

h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-top: 25px;
    margin-bottom: 5px;
}

.profile-pic {
    text-align: center;
}

.icon-container {
    border-radius: 10%;
}

.upload {
    text-align: center;
    padding-top: 10px;
}

.camera {
    background-image: url(../gfx/onboarding/camera.png);
    background-repeat: no-repeat;
    background-size: 24px auto;
    padding: 15px 15px 10px 50px;
    background-color: #dddddd;
    border-bottom-color: #dddddd;
    border-radius: 4px;
    border-style: none;
    border-width: 1px;
    box-shadow: none;
    background-position: 15px 10px;
    color: #535353;
    font-family: Helvetica, sans-serif;
    font-size: 14px;
}

a {
    text-decoration: none;
    color: #73b2e3;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background-position: 5px 3px;
}

a:hover, a:focus {
    color: #4c93cb;
    text-decoration: underline;
}

.social {
    text-align: left;
}

.connect {
    border-radius: 6px;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    background-position: 15px 9px;
    color: #FFFFFF;
    font-family: Helvetica, sans-serif;
    font-size: 24px;
    text-align: left;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 15px;
    background-repeat: no-repeat;
    background-size: 34px auto;
    padding: 15px 15px 10px 75px;
}

.connect:hover {
    text-decoration: none !important;
}

a.connect {
    display: inline-block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.fb {
    background-image: url(../gfx/onboarding/facebook.png);
    background-color: #3b5998;
    border-color: #3b5998;
}

.fb:hover, .fb:focus {
    background-color: #8B9DC3;
    color: #FFFFFF;
    border-color: #8B9DC3;
    background-image: url(../gfx/onboarding/facebook.png);
}

.tw {
    background-image: url(../gfx/onboarding/twitter.png);
    background-color: #55acee;
    border-color: #55acee;
}

.tw:hover, .tw:focus {
    background-color: #66757f;
    color: #FFFFFF;
    border-color: #66757f;
    background-image: url(../gfx/onboarding/twitter.png);
}

.fl {
    background-image: url(../gfx/onboarding/flickr.png);
    background-color: #0063dc;
    border-color: #0063dc;
}

.fl:hover, .fl:focus {
    background-color: #ff0084;
    color: #FFFFFF;
    border-color: #ff0084;
    background-image: url(../gfx/onboarding/flickr.png);
}

.fsqr {
    background-image: url(../gfx/onboarding/foursquare.png);
    background-color: #40B3DF;
    border-color: #40B3DF;
}

.fsqr:hover, .fsqr:focus {
    background-color: #17649A;
    color: #FFFFFF;
    border-color: #17649A;
    background-image: url(../gfx/onboarding/foursquare.png);
}

.scld {
    background-image: url(../gfx/onboarding/soundcloud.png);
    background-color: #f80;
    border-color: #f80;
}

.scld:hover, .scld:focus {
    background-color: #f30;
    color: #FFFFFF;
    border-color: #f30;
    background-image: url(../gfx/onboarding/soundcloud.png);
}

.connected {
    background-color: #bbb;
    border: #bbb solid 1px;
}

.connected:hover,
.connected:focus {
    background-color: #bbb;
}

.control-label {
    color: #666666;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
}

.next-bar {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0px;
}

.btn-continue {
    background-color: #FFFFFF;
    background-image: none;
    border: 3px solid #357ebd;
    color: #357ebd;
    margin-bottom: 10px;
    margin-top: 10px;
    text-shadow: none;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    width: 40%;
    margin-left: 5px;
    -webkit-appearance: none;
}

.btn-continue:hover, .btn-continue:focus {
    background-color: #4c93cb;
    border: 2px solid #4c93cb;
    color: #FFFFFF;
}

.btn-skip {
    background-color: #FFFFFF;
    background-image: none;
    border: 3px solid #535353;
    color: #535353;
    margin-bottom: 10px;
    margin-top: 10px;
    text-shadow: none;
    font-family: 'Pontano Sans', Verdana, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    width: 40%;
    margin-right: 5px;
    -webkit-appearance: none;
}

.btn-skip:hover, .btn-skip:focus {
    background-color: #c5c5c5;
    border: 2px solid #c5c5c5;
    color: #535353;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.img {
    display: block;
    height: auto;
    max-width: 100%;
}

.btn-file {
    position: relative;
    overflow: hidden;
    -webkit-appearance: none;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: pointer;
    display: block;
}

.btn-file:hover {
    background-color: #eaeaea;
    color: #c5c5c5;
    background-image: url(../gfx/onboarding/camera-g.png);
}

.alerts {
    background-color: #fff1ba;
    /**    background-color: rgba(0,0,0,0.3); **/
    padding: 10px;
    border-radius: 7px;
}

.alerts .alert p {
    font-size: 1.0em;
    color: #666666;
    margin-left: 20px;
    margin-right: 20px;
}

.control-label small {
	font-weight: 400;
}

.signin a {
	font-size: 14px;
	color: #4c93cb;
}

.signin a:hover {
	color: #357ebd;
	text-decoration: underline;
}

.social-connect {
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-weight: 300;
    color: #333333;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* New Stuff */

.btn-primary {
    background-color: #73b2e3;
    border-color: none;
    color: #fff;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
	background-color: #4c93cb;
	border-color: #4c93cb;
	color: #ffffff;
}

.btn-lg {
    border-radius: 6px;
    font-size: 18px;
    line-height: 1.33;
    padding: 10px 16px;
}

/* *, *:before, *:after {
    box-sizing: border-box;
}
*/
.btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    font-size: 24px;
    font-weight: normal;
    line-height: 2;
    margin-bottom: 0;
    padding: 6px 52px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.img-responsive {
	max-width: 100%;
	height: auto;
/*	display: block; */
}

p a {
	font-size: 18px;
}

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

.row:after {
    clear: both;
}

.row {
    margin-left: 0px;
    text-align: center;
    width: 100%;
}


/* Experiment */

.scoot {
    width: 100%;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}


/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}
.col-fixed {
    /* custom width */
    width:320px;
}
.col-min {
    /* custom min width */
    min-width:320px;
}
.col-max {
    /* custom max width */
    max-width:320px;
}

/* visual styles */
.container{
    max-width:99%
}

/* Installer */
a.btn:hover {
    text-decoration: none;
}

.components {
    margin-top: 3em;
}

.component {
    font-size: 0.9em;
    margin-bottom: 1em;
    border: 0;
    border-top: #eee dashed 1px;
    padding: 0.6em;
}

.component h3 {
    font-size: 1.2em;
    font-weight: lighter;
    margin: 0;
}

.component p {
    font-weight: lighter;
    font-size: 0.9em;
    margin: 0;
}

.success {
    background-color: #E0FFE0;
}

.failure {
    background-color: #FAC9B9;
}

.warning {
    background-color: #FAF4B9;
}

.explainer {
    margin-top: 2em;
}

.page-bottom {
    margin-bottom: 10em;
}

.settings-group {
    margin-top: 4em;
}

textarea.installation {
    height: 25em;
    color: #333;
    margin-top: 3em;
}
textarea.installation:hover,
textarea.installation:focus{
    background-color: #fff !important;
    color: #333;
}