Subversion Repositories cheapmusic

/* reset */

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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
}

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

ol,ul {
        list-style: none;
        margin: 0;
        padding: 0;
}

blockquote,q {
        quotes: none;
}

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

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

a {
        text-decoration: none;
}

img {
        max-width: 100%;
}

/* end reset*/

/* start editing from here */
body {
        background-position: center;
        background-size: cover;
        text-align: center;
}

.header h1 {
        font-size: 40px;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: 400;
        margin: 40px 0px 20px 0;
}

.wrapper-frm {
        width: 30%;
        margin: 0 auto;
        padding: 42px 0 0 0;
}

.wrapper-frm h2 {
        font-size: 22px;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding-bottom: 15px;
}

.wrapper-frm .top {
        padding: 0 25px;
}

.top h4 {
        margin: 15px 5px;
}

.frm-input {
        position: relative;
}

.frm-input input[type="email"], .frm-input .email-in {
        background: url(../images/mail.png) no-repeat scroll 7px 50%;
}

.frm-input input[type="password"], .frm-input .pass-in {
        background: url(../images/lock.png) no-repeat scroll 7px 50%;
}

.frm-input .user-in {
        background: url(../images/user.png) no-repeat scroll 7px 50%;
}

.frm-input .file-in {
        background: url(../images/uimg.png) no-repeat scroll 7px 50%;
}

.frm-input .phone-in {
        background: url(../images/phone.png) no-repeat scroll 7px 50%;
}

.frm-input .addr-in {
        background: url(../images/addr.png) no-repeat scroll 7px 50%;
}

.frm-input input[type="text"], .frm-input input[type="email"], .frm-input input[type="password"], .frm-input input[type="file"] {
        width: 87%;
        padding: 15px 0 15px 30px;
        border: 1px solid #000;
        outline: none;
        font-size: 15px;
        margin: 14px 0px;
        background-color: #fff;
}

.frm-info {
        padding: 20px 0 30px;
}

.frm-info .check {
        float: left;
}

.check input[type="checkbox"] {
        display: none;
}

.check input[type="checkbox"]+label {
        position: relative;
        padding-left: 25px;
        display: inline-block;
        font-size: .9em;
        cursor: pointer;
}

.check input[type="checkbox"]+label span:first-child {
        width: 13px;
        height: 13px;
        display: inline-block;
        border: 1px solid;
        position: absolute;
        top: 1px;
        left: 2px;
}

.check input[type="checkbox"]:checked+label span:first-child:before {
        content: "";
        background: url(../images/tick-b.png)no-repeat;
        position: absolute;
        left: 2px;
        top: 1px;
        font-size: 10px;
        width: 10px;
        height: 10px;
}

.frm-info a {
        float: right;
        font-size: .9em;
}

.frm-info a:hover {
        text-decoration: underline;
}

.frm-btn button[type="submit"] {
        font-size: 20px;
        height: 36px;
        line-height: 36px;
        padding: 0 16px;
        letter-spacing: .5px;
        border-radius: 2px;
        width: 50%;
        cursor: pointer;
        outline: none;
        border: none;
        text-transform: uppercase;
        margin-bottom: 10px;
}

.frm-input p {
        font-size: 14px;
        margin-top: -10px;
        margin-bottom: 5px;
}

.frm-input.error input {
        border-color: #CE281C;
}

.status-msg {
        font-size: 16px;
        font-weight: 500;
        border: 1px dashed;
        padding: 8px 10px;
        margin-bottom: 5px;
}

.status-msg.success {
        color: #3BA956;
}

.status-msg.error, .frm-input.error p {
        color: #CE281C;
}

.social-icons h3 {
        text-align: center;
        font-size: 20px;
        letter-spacing: 2px;
        margin: 15px 10px;
        margin-bottom: 0;
}

ul.bottom-sc-icons {
        list-style: none;
        margin: 0;
        padding-bottom: 22px;
        padding-top: 11px;
        text-align: center;
}

ul.bottom-sc-icons li {
        display: inline-block;
        margin: 0 5px;
}

ul.bottom-sc-icons li a {
        padding: 6px 8px;
        border: 1px solid #333;
        border-radius: 2px;
}

a.facebook {
        border-color: #455797 !important;
        color: #455797;
}

a.google {
        border-color: #CE281C !important;
        color: #CE281C;
}

a.twitter {
        border-color: #1D71A5 !important;
        color: #1D71A5;
}

a.facebook:hover, a.facebook:active {
        background-color: #455797;
        color: #fff;
}

a.google:hover, a.google:active {
        background-color: #CE281C;
        color: #fff;
}

a.twitter:hover, a.twitter:active {
        background-color: #1D71A5;
        color: #fff;
}

ul.bottom-sc-icons li span {
        letter-spacing: 1px;
        vertical-align: middle;
}

ul.bottom-sc-icons li a i {
        display: inline-block;
        margin-right: 5px;
        width: 24px;
        height: 24px;
        position: relative;
        top: 6px;
}

a.facebook i {
        background: url(../images/facebook.png) no-repeat;
}

a.google i {
        background: url(../images/google.png) no-repeat;
}

a.twitter i {
        background: url(../images/twitter.png) no-repeat;
}

a.facebook:hover i {
        background: url(../images/facebook-w.png) no-repeat;
}

a.google:hover i {
        background: url(../images/google-w.png) no-repeat;
}

a.twitter:hover i {
        background: url(../images/twitter-w.png) no-repeat;
}

.bottom p {
        font-size: 15px;
        padding: 25px 0;
        letter-spacing: 1px;
}

.bottom p a {
        text-transform: uppercase;
        font-size: 14px;
        text-decoration: underline;
        letter-spacing: 1px;
        padding: 10px;
}

.group {
        display: table;
        width: 100%;
        font-size: 1em;
        padding-top: 15px;
        padding-bottom: 10px;
}

.item {
        display: table-cell;
}

.text {
        white-space: nowrap;
        width: 1%;
        padding: 0 10px;
}

.line {
        border-bottom: 1px solid #000;
        position: relative;
        top: -.5em;
}

/*--responsive starts here--*/
@media (max-width:1440px) {
        .wrapper-frm {
                width: 32%;
        }
}

@media (max-width:1366px) {
        .wrapper-frm {
                width: 33%;
        }
}

@media (max-width:1280px) {
        .wrapper-frm {
                width: 36%;
        }
}

@media (max-width:1080px) {
        .wrapper-frm {
                width: 43%;
        }

        .container {
                padding: 40px 0 32px 0;
        }

        .footer p {
                margin: 3em 0em 5em 0;
        }

        .header h1 {
                font-size: 36px;
        }
}

@media (max-width:1024px) {
        .wrapper-frm {
                width: 45%;
        }
}

@media (max-width:991px) {
        .wrapper-frm {
                width: 51%;
        }
}

@media (max-width:800px) {
        .wrapper-frm {
                width: 56%;
        }

        .header h1 {
                font-size: 36px;
                letter-spacing: 7px;
        }
}

@media (max-width:768px) {
        .wrapper-frm {
                width: 61%;
        }

        .container {
                padding: 24px 0 0 0;
        }

        .footer p {
                margin: 3em 0em 17em 0;
        }

        .header h1 {
                letter-spacing: 6px;
                margin: 80px 0px 20px 0;
        }
}

@media (max-width:736px) {
        .wrapper-frm {
                width: 63%;
        }

        .container {
                padding: 20px 0 0 0;
        }

        .header h1 {
                letter-spacing: 5px;
        }
}

@media (max-width:667px) {
        .wrapper-frm {
                width: 70%;
        }

        .footer p {
                margin: 3em 0em 6em 0;
        }

        .header h1 {
                letter-spacing: 2px;
        }
}

@media (max-width:600px) {
        .wrapper-frm {
                width: 78%;
        }

        .container {
                padding: 5px 0 0 0;
        }

        .footer p {
                letter-spacing: 1px;
        }
}

@media (max-width:568px) {
        .wrapper-frm {
                width: 82%;
        }

        .container {
                padding: 0;
        }

        .header h1 {
                font-size: 33px;
                margin: 60px 0px 35px 0;
        }
}

@media (max-width:480px) {
        .wrapper-frm {
                width: 93%;
        }

        .footer p {
                line-height: 1.8em;
        }

        .footer p {
                margin: 3em 0em 3em 0;
        }

        .header h1 {
                font-size: 30px;
                letter-spacing: 1px;
        }
}

@media (max-width:440px) {
        .header h1 {
                font-size: 26px;
                letter-spacing: 1px;
        }
}

@media (max-width:414px) {
        .wrapper-frm {
                width: 95%;
        }

        .footer p {
                margin: 2.5em 0em;
        }

        .header h1 {
                line-height: 40px;
                margin: 44px 0px 28px 0;
                font-size: 25px;
        }
}

@media (max-width:384px) {
        .footer p {
                margin: 2em 0em;
        }
}

@media (max-width:375px) {
        .wrapper-frm {
                width: 98%;
        }

        .header h1 {
                margin: 35px 0px 20px 0;
                font-size: 23px;
        }
}

@media (max-width:320px) {
        .footer p {
                margin: 1em 0em;
        }

        .header h1 {
                margin: 30px 0px 15px 0;
                font-size: 22px;
        }
}
/*--//responsive end here--*/
/*--//Google reCaptcha start--*/
.g-recaptcha > div {
        margin: 0 auto;
}
/*--//Google reCaptcha end--*/