@media screen {


/*------------- Globals -------------*/
    * {
        -moz-box-sizing: 			border-box;
        -webkit-box-sizing: 		border-box;
        box-sizing: 				border-box;
    }

    body { /*WF125969*/
        background-color: #3fc2cc;
        padding: 0 1.5em 1.5em 1.5em;
        /*WF137997 background: url('../img/jpnConventionBackground.png') top center no-repeat;*/	/* WF: 99820, comment 91 */
        background-size: 1200px;	/* WF: 99820, comment 117 */
        background-attachment:fixed;
    }

    div#container {
        width: 100%;
        margin-top: 0;
    }

    div#logout-container {
        width: 100%;
        max-width: 600px;
        text-align: right;
        height: 40px;
        padding: 0.75em 0;
        margin: 0 auto;
    }

    div#main-container {
        width: 100% !important;
        max-width: 600px;
        min-height:84vh;
        padding: 1em;
        margin: .1em auto 0 auto;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
        border: 0px solid #000000;
        background-color: rgba(255, 255, 255, 0.9);	/* WF: 99820, comment 91 */
        text-align: center;
    }

    div#main-container img {
        /*width: 100%;*/ /* Was making all images (including dts plus icons) fit to container, which is WAY too big...John B, WF129220*/
        max-width: 600px;
        margin: 1em 0;
    }

    div#order-summary-container {
        min-height: 10.75em;
        margin: 4em 0 1em 0;
        padding: 0.5em;
        background-color: #ededed;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
        border: 0px solid #000000;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        background-color: #ededed;
    }

    div#order-container {
        width: 100%;

    }

    .quantity {
        padding-top: 0.5em;
    }

    .quantity p {
        margin-top: -.5em;
        margin-bottom: .5em;
    }

    h1, h2, h3, h4, h5, h6, p, ol, ul, li, button, a, div {
        font-family: 'Open Sans', sans-serif;
    }


    h1 {
        font-size: 1.5em;
        color: #000000;
    }

    h3 {
        color: #000000;
        font-weight: bold;
        font-size: 1em;
        margin: 0.4em 0;
    }

    h3.kit-name {
        margin-bottom: 1em;
    }

    div.order-subtotal p {
        margin-top: 2em;
        font-size: 1.25em;
        color: #000000;
    }

    p.bold {
        font-weight: bold;
        color: #8d459b;
        font-size: 1em;
        padding: 1em 0 0.5em 0;
    }

    p.p-green {
        color: #000000;
        padding: 0.5em 0;
    }

    p.even {
        text-align: justify;
    }

    p.left {
        text-align: left;
    }
    
    p.right {
    	text-align: right;
    }

    .black {
        color: #000000;
    }

    div#order-summary-container p {
        padding: 0.5em;
    }

    .li-green {
        color: #000000;
        padding: 0.5em;
        text-align: left;

    }

    .center {
        text-align: center !important;
    }






    /*------------- LOGIN page logo -------------*/

    div#logo-container {
        width: 100%;
        margin: 2em 0 4em 0;
    }

    div#logo-container img {
        display: block;
        margin: 0 auto;
        width: 75%;
        max-width: 600px;
    }






    /*------------- BUTTONS -------------*/

    .big-button {
        display: block;
        margin: 1.25em auto;
        background-color: #8d459b;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
        border: 0px solid #000000;
        width: 90%;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1.15em;
        padding: 0.75em;
        -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.66);
        -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.66);
        box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.66);
    }

    .small-button {
        display: block;
        margin-top: 0.5em;
        text-align: center;
        background-color: #8d459b;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
        border: 0px solid #000000;
        width: 120px;
        color: #FFFFFF;
        text-decoration: none;
        font-size: 0.85em;
        padding: 1em;
        -webkit-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.66);
        -moz-box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.66);
        box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.66);
    }

    /*.bottom {*/
       /*margin-top: 8em;*/
    /*}*/






    /*------------- LOGIN form -------------*/

    div#login-form {
        width: 100%;
    }

    div#login-form div.input-div {
        width: 100% !important;
        max-width: 600px;
        margin: 0 auto;
        display: block;
    }

    div.input-deco-div {
        width: 20%;
        display: block;
        background-color: #ededed;
        float: left;
        height: 45px;
        border-top: 1px solid #909087;
        border-left: 1px solid #909087;
    }

    div.input-deco-div.pwd {
        border-bottom: 1px solid #909087;
    }

    div#login-form input[type="text"],
    div#login-form input[type="password"] {
        display: block;
        font-size: .8em;
        margin: 0 auto;
        border: 1px solid #909087;
        height: 45px;
        padding-left: 1em;
        background-color: #FFFFFF;
        width: 80%;
        float: right;
        border-radius: 0px;

    }

    div#login-form input[type="text"] {
        border-bottom: none;
    }

    div#login-form div.submit-div {
        width: 75% !important;
        max-width: 600px;
        margin: 0 auto;
        padding-top: 8em;
        display: block;
    }

    div#login-form input[type="submit"] {
        display: block;
        width: 100%;
        margin: 1em auto 0 auto;
        border: none;
        height: 45px;
        font-size: 1em;
        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
        border: 0px solid #000000;
        -webkit-box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.35);
        -moz-box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.35);
        box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.35);
        background-color: #ededed;
    }






    /*------------- PAYMENT INFO form -------------*/
    div#payment-info {
        margin-top: 1em;
        width: 100%;
    }

    div#payment-info input[type="text"] {
        display: block;
        font-size: 1em;
        margin: 0 auto 0.5em auto;
        border: none;
        height: 43px;
        padding-left: 1em;
        background-color: #FFFFFF;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        width: 100%;
        border-radius: 4px;
    }
    
    div#payment-info input[type="tel"] {
        display: block;
        font-size: 1em;
        margin: 0 auto 0.5em auto;
        border: none;
        height: 43px;
        padding-left: 1em;
        background-color: #FFFFFF;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        width: 100%;
        border-radius: 4px;
    }

    div#payment-info input.left-col.input {
        width: 40%;
        float: left;
    }

    div#payment-info input.right-col.input {
        width: 57%;
        float: right;
    }

    div#payment-info select {
        border: none;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
       height: 43px;
    }

    div#payment-info #selects {
        width: 100%;
    }

    div#payment-info select {
        width: 100%;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -webkit-border-radius: 0px;
        padding-left: 1em;
        font-size: 1em;
        color:#bab7bc;
        border-radius: 4px;
        background: #fff;
    }

    div#payment-info #left-select {
        width: 48% !important;
        float: left;
        background: #fff;

    }

    div#payment-info #right-select {
        width: 49% !important;
        float: right;
        padding: 0;
        background: #fff;
    }






    /*------------- KIT columns -------------*/

    div.kit-container {
        width: 100%;
        min-height: 120px;
        margin-top: 2em;
        clear:both;
    }

    div.left-col {
         width: 60%;
         float: left;
         text-align: left;
   		 margin-bottom: 10px;
    }

    div.left-col p,
    div.right-col p {
        color: #000000;
        padding-bottom: 0.5em;
    }

    div.right-col {
        width: 40%;
        float: left;
        text-align: right;
    }

    .kit-count {
        width: 60px;
        height: 40px;
        text-align: right;
        padding-right: 0.5em;
        color: #000000;
        font-size: 1.15em;
        border: none;
        background-color: #FFFFFF;
        border-radius: 4px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 4px;
        -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);
        -moz-box-shadow:1px 1px 1px 0px rgba(0,0,0,0.35);
        box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.35);

    }





    /*------------- ORDER STATUS -------------*/

    div.all-orders {
        margin-top: 1.5em;
    }

    div.all-orders div.order-container {
        height: 60px;
        display: block;
        padding: 0 !important;
    }

    div.all-orders div.left-col {
        width: 57%;
    }

    div.all-orders div.left-col div.small-button {
        margin: 0 auto;
    }

    div.all-orders div.right-col {
        width: 43%;
        text-align: center;
    }

    .order-container .right-col.order-status img {
        width: 30px !important;
        margin-top: 0.55em !important;
    }

    div.all-orders div.small-button.width-100 {
        width: 100%;
    }

    @media screen and (min-width:460px) {
        div.all-orders div.small-button.width-100 {
            width: 140px;
        }
    }

    p.order_num {
        color: #FFFFFF !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* LOGOUT div */

    div#logout-container img {
        float: right;
        width: 40px;
    }

    div#logout-container p {
        float: right;
        color: #FFFFFF;
        margin: 0.75em 0.5em;
    }





    /*------------- BARCODE image -------------*/

    div.bar-code {
        width: 100%;
    }

    div.bar-code img {
        width: 75%;
        display: block;
        margin: 1em auto;

    }





    /*------------- PLACEHOLDER styling -------------*/
    ::-webkit-input-placeholder {
        color:#bab7bc;
    }
    /* firefox 19+ */
    ::-moz-placeholder {
        color:#bab7bc;
    }
    /* ie */
    :-ms-input-placeholder {
        color:#bab7bc;
    }
    input:-moz-placeholder {
        color:#bab7bc;
    }





    /*------------- SHIPPING ADDRESS styling -------------*/
    #paymentoptionfrm {
    	text-align:left;
    }
    
    #paymentoptionfrm #checkoutButton {
    	text-align:center;
    }
    
    #NewShipAddress input {
    	border-radius:5px;
    	font-size:14px;
    	margin-bottom:10px;
    }

}