/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

/*.container {
	position: relative;
	width: 1003px;
	width: 95%;
	margin: 0 auto;
}*/



@media only screen and (min-width: 768px) and (max-width: 1824px) {
    /* TABLET WRAPPER ----------------------------------------------------*/ .wrapper {
        width: 100%;
    }
    /* TABLET HEADER ----------------------------------------------------*/ header #logo img {
        margin: 0 0 0 40px;
    }

    .container_inner {
        width: 96%;
        margin: 0 auto;
    }

    #top_bar {
        min-width: 100%;
        float: left;
    }

        #top_bar .top_container {
            width: 100%!important;
        }

    #footer {
        min-width: 100%;
        float: left;
    }

    .one_half {
        width: 48.5%;
    }

    .one_third {
        width: 46%;
    }

    .one_fourth {
        width: 29%;
    }

    .one_fifth {
        width: 22%;
    }

    .welcome_block h1 {
        line-height: 30px;
        margin: 5px 0px 5px 0px;
    }

    .welcome_block p {
        line-height: 21px;
    }

    .container {
        width: 96%!important;
    }

    #footer .footer_container {
        width: 100%!important;
    }

    .box_images {
        width: 90%;
    }

    .cart_one_half {
        width: 51%;
    }

    .cart_one_third {
        width: 47%;
    }

    .cart_main_table {
        width: 100%;
    }

    #cssmenu { /*width:650px!important;*/
    }

        #cssmenu > ul > li > a {
            padding: 10px 20px!important;
            font-size: 11px!important;
        }
        /*#cssmenu ul li ul li {right:45px!important;}*/
        #cssmenu > ul > li.has-sub > a:after {
            right: 5px!important;
            top: 13px!important;
        }

        #cssmenu ul li ul li { /*right:42px!important*/
        }


    .purchase_top_table td {
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .diamond_search_left {
        width: 56%;
        float: left;
    }

    .diamond_search_right {
        width: 44%;
        float: right;
    }

    .size_carats_table input {
        width: 100px;
    }

        .size_carats_table input[type=checkbox] {
            width: auto;
        }

    .discout_pirce_total {
        float: left;
        width: 28%;
    }

    .no_bgm {
        float: left;
        width: 15%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1152px) {

    .lab_image {
        width: 50px;
    }

    .lab_small_image {
        width: 50px;
    }

    .shape_image {
        width: 50px;
        font-size: 11px;
    }

    #search_nav span {
        padding: 10px 18.5px!important;
    }

    .color_list span {
        padding: 0px 10px;
        margin: 0px 6px;
    }

    .clarity_list span {
        padding: 0px 8px;
        margin: 0px;
    }

    .stoneid input {
        width: 500px!important;
    }

    .fluorescence_list span {
        margin: 0px 11px 0px 0px;
    }

    .grading_table td {
        white-space: nowrap;
        font-size: 13px;
        padding: 9.2px 0px!important;
    }

    .measurement_table td {
        white-space: nowrap;
        font-size: 13px;
        padding: 5.1px;
    }

    .fancy {
        background: #ffffff;
        padding-left: 55px!important;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1280px) {

    .lab_image {
        width: 55px;
    }

    .lab_small_image {
        width: 55px;
    }

    .shape_image {
        width: 55px;
        font-size: 11px;
    }

    #search_nav span {
        padding: 10px 27px;
    }

    .color_list span {
        padding: 0px 12px;
        margin: 0px 8px;
    }

    .clarity_list span {
        padding: 0px 10px;
        margin: 0px 2px 0px 0px;
    }

    .stoneid input {
        width: 500px!important;
    }

    .fluorescence_list span {
        margin: 0px 11px 0px 0px;
    }

    .grading_table td {
        white-space: nowrap;
        font-size: 13px;
        padding: 9.8px 3px;
    }

    .measurement_table td {
        white-space: nowrap;
        font-size: 13px;
        padding: 4.5px 0px 4.5px 23px;
    }

    .fancy {
        background: #ffffff;
        padding-left: 105px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /*.grading_table td{padding:10.5px 3px;}
.measurement_table td{padding:3px 0px 3px 23px;}*/
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {


    #cssmenu { /*width:425px!important; right:-85px!important; top:49px!important;*/
    }

        #cssmenu > ul > li > a {
            padding: 10px 8px!important;
            font-size: 7.5px!important;
        }
        /*#cssmenu ul li ul li {right:45px!important;}*/
        #cssmenu > ul > li.has-sub > a:after {
            right: 3px!important;
            top: 13px!important;
        }

        #cssmenu ul li ul li {
            right: 69px!important;
        }

            #cssmenu ul li ul li a {
                font-size: 10px!important;
                padding: 5px!important;
            }

        #cssmenu > ul > li.has-sub > a:after {
            right: 1px!important;
            top: 11px!important;
            border-left: 3px solid transparent!important;
            border-right: 3px solid transparent!important;
            border-top: 3px solid #003e7e!important;
        }

    .search_nav_container { /*width:1003px;*/
    }

    #search_nav span {
        padding: 5px 10px!important;
    }

    .lab_image {
        width: 45px;
        font-size: 10px;
    }

    .lab_small_image {
        width: 45px;
    }

    .shape_image {
        width: 44px;
        font-size: 10px;
    }

    .color_list span {
        padding: 0px 10px;
        margin: 0px 6px;
    }

    .clarity_list span {
        padding: 0px 8px;
        margin: 0px;
    }

    .stoneid input {
        width: 500px!important;
    }

    .fluorescence_list span {
        margin: 0px 2px 0px 0px;
    }

    .discount_table input {
        width: 75px;
    }

    .grading_table td {
        white-space: nowrap;
        font-size: 10px;
        padding: 11px 0px!important;
    }

    .measurement_table td {
        white-space: nowrap;
        font-size: 10px;
        padding: 2.9px 0px 2.9px 11px;
    }

    .pl125 {
        padding-left: 32px;
    }

    .grading_table tr:first-child td {
        padding: 4px!important;
    }

    .fancy {
        background: #ffffff;
        padding-left: 25px!important;
    }
}



/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* TABLET WRAPPER ----------------------------------------------------*/ .wrapper {
        width: 1003px!important;
    }
    /* TABLET HEADER ----------------------------------------------------*/ header #logo img {
        margin: 0 0 0 40px;
    }

    .container {
        /*width: 768px;*/
        width: 1003px!important;
    }
    /*#cssmenu > ul > li > a {padding:11px!important; font-size:11px!important;}*/
    #cssmenu > ul > li.has-sub > a:after {
        right: 1px!important;
        top: 13px!important;
    }

    #cssmenu { /*left:75px!important; width:412px!important;*/
    }

        #cssmenu > ul > li > a {
            padding: 8px 12px 8px 12px!important;
            font-size: 7px!important;
        }

        #cssmenu ul li ul li {
            right: 78px!important;
        }

            #cssmenu ul li ul li a {
                font-size: 10px!important;
                padding: 5px!important;
            }

        #cssmenu > ul > li.has-sub > a:after {
            right: 3px!important;
            top: 9px!important;
            border-left: 3px solid transparent!important;
            border-right: 3px solid transparent!important;
            border-top: 3px solid #003e7e!important;
        }

    .purchase_top_table td {
        font-size: 10px;
    }

    .search_nav_container {
        width: 1003px;
    }

    #search_nav span {
        padding: 5px 9px;
    }

    .diamond_search_left {
        width: 60%;
        float: left;
    }

    .diamond_search_right {
        width: 38%;
        float: rght;
    }

    #search_nav {
        margin-left: -23px;
    }

    .space {
        padding: 0px 20px;
    }

    .color_list span {
        padding: 0px 10px;
        margin: 0px 6px;
    }

    .clarity_list span {
        padding: 0px 8px;
        margin: 0px;
    }

    .stoneid input {
        width: 500px!important;
    }

    .fluorescence_list span {
        margin: 0px 0px 0px 0px;
        font-size: 12px!important;
    }

    .discount_table input {
        width: 75px;
    }

    .grading_table td {
        white-space: nowrap;
        font-size: 10px;
        padding: 11px 3px!important;
    }

    .measurement_table td {
        white-space: nowrap;
        font-size: 10px;
        padding: 3px;
    }

    .pl125 {
        padding-left: 55px;
    }
}


/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */

@media only screen and (max-width: 767px) {
    .container {
        /*width: 300px;*/
        width: 1003px!important;
    }

    .wrapper {
        width: 1003px!important;
    }

    header {
        width: 1003px!important;
    }

    #cssmenu > ul > li > a {
        padding: 10px!important;
        font-size: 9px!important;
    }

    #cssmenu > ul > li.has-sub > a:after {
        right: 1px!important;
        top: 13px!important;
    }

    #cssmenu { /*left:106px!important;*/
    }

        #cssmenu ul li ul li {
            right: 68px!important;
        }

    .search_nav_container {
        width: 1003px;
    }

    #search_nav span {
        padding: 5px 9px;
    }

    .diamond_search_left {
        width: 40%;
        float: left;
    }

    .diamond_search_right {
        width: 20%;
        float: left;
    }

    .lab_image {
        width: 27px;
        font-size: 10px;
    }

    .lab_small_image {
        width: 27px;
    }

    .size_carats_table input {
        width: 50px;
    }

    .space {
        padding: 0px 10px;
    }

    .shape_image {
        width: 27px;
        font-size: 10px;
    }

    .fluorescence_list span {
        margin: 0px 0px 0px 0px;
        border: 1px solid red;
        font-size: 13px!important;
    }
}


/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        /*width: 420px;*/
        width: 1003px!important;
    }
    /*.footer_text{font-size:8px!important; width:33%!important;}*/


    /* WIDE MOBLE GENERAL ----------------------------------------------------*/ .wrapper {
        width: 1003px!important;
    }
    /* WIDE MOBILE HEADER ----------------------------------------------------*/
    /*header #logo {
    float: none;
    width: 252px;
  }*/

    header {
        width: 1003px!important;
    }

    #cssmenu > ul > li > a {
        padding: 10px!important;
        font-size: 9px!important;
    }

    #cssmenu > ul > li.has-sub > a:after {
        right: 1px!important;
        top: 13px!important;
    }

    #cssmenu { /*left:106px!important;*/
    }

        #cssmenu ul li ul li {
            right: 68px!important;
        }
}
/* #Clearing
================================================== */

/* You can also use a <br class="clear" /> to clear columns */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.dvShape .quick_lab {
    min-width: 45px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles */
    .dvShape .quick_lab {
        margin: 0px 6px !important;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    /* Styles */
    .dvShape .quick_lab {
        margin: 0px 3px !important;
    }
}

/* laptops ----------- */
@media only screen and (min-width : 1025px) {
    /* Styles */
    .dvShape .quick_lab {
        margin: 0px !important;
        min-width: 43px !important;
    }

    .dvLab .quick_lab {
        margin: 0 18px !important;
    }
}

/* Desktops ----------- */
@media only screen and (min-width : 1524px) {
    /* Styles */
    .dvShape .quick_lab {
        margin: 0px 6px !important;
    }
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    /* Styles */
    .dvShape .quick_lab {
        margin: 0px 10px !important;
    }
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
}

html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /*margin: 0 auto -25px;*/
    margin: 0 auto -45px;
}

#footer, .push {
    height: 25px;
}