﻿/****  navigation  ****/

.mobile-nav-btn {
    position:absolute;
    top:40%;
    right:0;
    font-family: "tablet-gothic-wide",sans-serif;
    font-size:0.75em;
    font-weight:700;
    color: #023b6e;
    text-transform: uppercase;
    line-height: 100%;
    text-decoration: none;
    padding:10px;
    border:1px solid #023b6e;
}

.mobile-nav-btn:hover {
    cursor:pointer;
    background-color:#023b6e;
    color:#ffffff;
}

.logo .mobile-nav-btn img {
    width:26px;
    height:20px;
}


    ul.mobile-nav 
    {
        margin:0;
        padding:0 0 20px 0;
	    list-style:none;
	    width:100%;
    }

    ul.mobile-nav li 
    {
        display:block;
        margin:0;
        padding:6px 0;
    }


    /* dropdown */
    /*#nav-wrap ul.mobile-nav li
    {
	    width:auto;
        position:static;
    }*/

    
        ul.mobile-nav li a {
            display:block;
            font-family: "tablet-gothic-wide",sans-serif;
            font-size:1.125em;
            font-weight: 400;
            color: #0b426f;
            background-color:#e9e9e9;
            padding:15px;
            margin:0;
            text-transform:none;
            text-decoration: none;
            line-height:100%;
            -webkit-transition: color 0.4s ease-out;
            -moz-transition: color 0.4s ease-out;
            -o-transition: color 0.4s ease-out;
            transition: color 0.4s ease-out;
        }

        ul.mobile-nav li a:hover,  ul.mobile-nav li a.selected
        {
            color:#2c99d5;
            /*border-bottom:4px solid #c0d838;*/
        }

            ul.mobile-nav li .mobile-sub-nav .drop-wrap
            {
                padding:15px;
                background-color:#f0f0f0;
                margin:0 0 10px 0;
            }


            ul.mobile-nav li .mobile-sub-nav .drop-wrap .drop-header a
            {
                font-family: "tablet-gothic-wide",sans-serif;
                font-size:1.125em;
                font-weight: 400;
                color: #95a53b;
                text-transform:none;
                margin:0 0 6px 0;
                line-height:100%;
                padding-bottom:8px;
                border-bottom:1px solid #e0e0e0;
                display:block;
            }

            ul.mobile-nav li .mobile-sub-nav .drop-wrap ul {
                padding:0;
            }

            ul.mobile-nav li .mobile-sub-nav .drop-wrap ul li
            {
                display:block;
                margin:0;
                padding:0;
                border-bottom:none;
            }

                ul.mobile-nav li .mobile-sub-nav .drop-wrap ul li a {
                    font-family: "tablet-gothic-wide",sans-serif;
                    font-size:0.875em;
                    font-weight:400;
                    color: #666666;
                    background-color:#f0f0f0;
                    display: block;
                    line-height: 100%;
                    margin: 0;
	                padding:7px 0;
                    text-decoration: none;
                    text-transform:capitalize;
                    transition: color 0.4s ease-out 0s;
                    background-image:none;
                }

                ul.mobile-nav li .mobile-sub-nav .drop-wrap ul li a:hover {
                    color: #212121;
                }






    ul.main-nav 
    {
        margin:0;
        padding:0;
	    list-style:none;
    }

    ul.main-nav li 
    {
        display:inline;
        margin:0;
        padding:0;
	    position:relative;
    }

        ul.main-nav li a {
            font-family: "tablet-gothic-wide",sans-serif;
            font-size: 0.875em;
            font-weight: 400;
            color: #777777;
            padding: 0 0 15px 0;
            margin: 0;
            text-transform: none;
            text-decoration: none;
            line-height:50px;
            -webkit-transition: color 0.4s ease-out;
            -moz-transition: color 0.4s ease-out;
            -o-transition: color 0.4s ease-out;
            transition: color 0.4s ease-out;
        }

        ul.main-nav li a:hover,  ul.main-nav li a.selected
        {
            color:#2c99d5;
        }

        ul.main-nav li a.home-tab 
        {
            padding:0;
            border:none;
            background:none;
            display:block;
            position:relative;
            width:50px;
            height:50px;
            float:left;
        }

        ul.main-nav li a.home-tab img
        {
            padding:0;
            margin:0;
            border:none;
            position:absolute;
            top:0;
            left:0;
            width:100%;
        }

        ul.main-nav li a.home-tab:hover, ul.main-nav li a.home-tab.selected
        {
        }

        ul.main-nav li a.product-tab:hover, ul.main-nav li a.product-tab.selected
        {
            color:#2c99d5;
        }

        ul.main-nav li a.last 
        {
            margin-right:0;
            padding-right:0;
        }

        ul.main-nav li a.first 
        {
            margin-left:0;
            padding-left:0;
        }

        ul.main-nav li a:hover {
        }

        ul.main-nav li a.active 
        {
            background-color:#f89827;
        }
                
            ul#main-nav li .drop-nav .drop-padding 
            {
                padding:30px;
            }

            ul#main-nav li .drop-nav .no-margin
            {
                margin-right:0;
                margin-left:0;
                padding-right:0;
                border-right:none;
            }

            ul#main-nav li .drop-nav .drop-wrap ul 
            {
                padding:0;
            }

            ul#main-nav li .drop-nav .drop-wrap ul li a:hover
            {
                color:#b6e7fd;
                border:none;
            }







    /* basket */
    .mobile-basket-btn {
        float:left;
        position:relative;
        margin-right:10px;
    }

        .mobile-basket-btn a {
            padding:0;
            margin: 0;
            text-transform:uppercase;
            text-decoration: none;
        }

            .mobile-basket-btn a img {
                margin-top:0px;
            }


        .basket-items-mob {
            position:absolute;
            top:6px;
            left:10px;
            font-family: "tablet-gothic-wide",sans-serif;
            font-size:0.75em;
            font-weight:400;
            color: #f5f5f5;
            margin: 0;
            text-transform:uppercase;
            cursor:pointer;
        }


    .basket {
        float:none;
        margin-bottom:10px;
    }

            
            #basketWrap .mobile-basket {
                background-color:transparent;
                padding-top:0px;
                position:relative;
            }

            #basketWrap .mobile-basket .drop-wrap {
                background-color:#023b6e;
            }

            #EmptyBasket {
                position:absolute;
                right:20px;
                bottom:20px;
                padding:6px 6px;
                font-family: "tablet-gothic-wide",sans-serif;
                font-size:0.688em;
                font-weight:300;
                color:#ffffff;
                text-transform:uppercase;
                background-color:#034a8a;
            }

            #EmptyBasket:hover {
                cursor: pointer;
                background-color:#003366;
            }
                
            #basketWrap .mobile-basket .basket-list {
                padding:20px 20px 70px 20px;
                overflow:hidden;
                font-family: "tablet-gothic-wide",sans-serif;
                font-weight:300;
            }
                
            #basketWrap .mobile-basket .basket-list h3 {
                font-size:1em;
                font-weight:300;
                color:#ffffff;
                margin:0 0 10px 0;
            }
                
            #basketWrap .mobile-basket .basket-list span.empty-basket {
                color:#ffffff;
                font-size:0.75em;
            }

            #basketWrap .mobile-basket .basket-list .basket-process {
                position:absolute;
                left:20px;
                bottom:20px;
                padding:6px 6px;
                font-family: "tablet-gothic-wide",sans-serif;
                font-size:0.688em;
                font-weight:300;
                color:#ffffff;
                text-transform:uppercase;
                text-decoration:none;
                background-color:#034a8a;
            }

            #basketWrap .mobile-basket .basket-list .basket-process:hover {
                cursor: pointer;
                background-color:#003366;
            }
            
                #basketWrap .mobile-basket .basket-list hr {
	                border:0;                   /* for FF; border reset */
	                background:transparent;     /* for Opera and Safari; remove default hr color */
	                font-size:0px;              /* for FF to mimic the fix "margins" on hr in IE */
	                border-top:1px solid #034a8a;
	                height:1px;
	                margin-top:10px;
	                margin-bottom:10px;
                }

                table.basket-detail {
                    font-family: "tablet-gothic-wide",sans-serif;
                    font-weight:300;
                    color:#ffffff;
                    width:100%;
                    border-spacing:0;
                    border-collapse:separate;
                }
                
                    table.basket-detail tr th {
                        font-size:0.688em;
                        font-weight:300;
                        text-transform:uppercase;
                        padding:5px;
                        background-color:#034a8a;
                    }
                
                    table.basket-detail tr td {
                        font-size:0.75em;
                        padding:5px;
                        border-bottom:1px solid #034a8a;
                    }
                
                        table.basket-detail tr td a {
                            padding:0;
                            text-transform:none;
                            color:#ffffff;
                            text-decoration:none;
                        }
                
                        table.basket-detail tr td a:hover {
                            text-decoration:underline;
                        }


                        


            













/*** styles for 480px ***/
@media screen and (min-width: 480px) {
}









/*** styles for 768px ***/
@media screen and (min-width: 768px) {

    
    ul.main-nav 
    {
        width:728px;
        height:46px;
    }
    
    ul.main-nav li a {
        font-family: "tablet-gothic-wide",sans-serif;
        font-size:0.688em;
        font-weight:600;
        color: #0b426f;
        padding: 15px 5px 15px 4px;
        margin: 0;
        background:url(../images/nav-spacer.gif) no-repeat right 0px #f5f5f5;
        text-transform:uppercase;
        text-decoration: none;
        line-height:46px;
    }

        ul.main-nav li a.product-tab 
        {
            color:#f5f5f5;
            background-image:none;
            background-color:#023b6e;
        }

        ul.main-nav li a.last-tab
        {
            background-image:none;
        }



}









/*** styles for 1024px ***/
@media screen and (min-width: 1024px) {
    
    /* basket */
    .mobile-basket-btn {
        float:none;
        position:relative;
        margin-right:0;
    }

            .mobile-basket-btn a img {
                margin-top:6px;
            }


        .basket-items-mob {
            position:absolute;
            top:12px;
            left:10px;
            font-family: "tablet-gothic-wide",sans-serif;
            font-size:0.75em;
            font-weight:400;
            color: #f5f5f5;
            margin: 0;
            text-transform:uppercase;
            cursor:pointer;
        }

    
    ul.main-nav 
    {
        width:980px;
        height:48px;
    }
    
    ul.main-nav li a {
        font-family: "tablet-gothic-wide",sans-serif;
        font-size:0.75em;
        font-weight:600;
        color: #0b426f;
        padding: 15px 15px 15px 14px;
        margin: 0;
        background:url(../images/nav-spacer.gif) no-repeat right 0px #f5f5f5;
        text-transform:uppercase;
        text-decoration: none;
        line-height:48px;
    }
        
        ul.main-nav li a.product-tab::after {
          content:url(../images/product-tab-arrow.png);
        }

        ul.main-nav li a.home-tab 
        {
            padding:0;
            border:none;
            background:none;
            display:block;
            position:relative;
            width:48px;
            height:48px;
            float:left;
        }



        


            /* dropdown */
            ul#main-nav li .drop-nav
            {
		        -webkit-box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.7);
		        -moz-box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.7);
		        box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.7);
                position:absolute;
                z-index:60000;
                overflow:hidden;
            }
            
            ul#main-nav li .default-drop
            {
	            width:240px;
	            top:32px;
	            left:0px;
                background-color:#f5f5f5;
            }

                ul#main-nav li .default-drop ul li a
                {
                    color: #023b6e;
                    background-color:#f5f5f5;
                }
            
            ul#main-nav li .product-drop
            {
	            width:250px;
	            top:32px;
	            left:0px;
                background-color:#023b6e;
            }

                ul#main-nav li .product-drop ul li a
                {
                    color: #ffffff;
                    background-color:#023b6e;
                }
                
            ul#main-nav li .drop-nav .drop-padding 
            {
                padding:30px;
                overflow:hidden;
            }
                
            ul#main-nav li .drop-nav .drop-padding ul
            {
                padding:0;
            }

            ul#main-nav li .drop-nav ul li a
            {
                font-family: "tablet-gothic-wide",sans-serif;
                font-size:0.688em;
                font-weight:600;
                display: block;
                text-align:left;
                line-height: 100%;
                margin: 0;
	            padding:6px 0;
                text-decoration: none;
                text-transform: uppercase;
                transition: color 0.4s ease-out 0s;
                background-image:none;
            }




            /* dropdown */            
            /*ul#main-nav li .default-drop
            {
	            width:240px;
	            top:32px;
	            left:0px;
                background-color:#f5f5f5;
            }

                ul#main-nav li .default-drop ul li a
                {
                    color: #023b6e;
                    background-color:#f5f5f5;
                }
            
            ul#main-nav li .product-drop
            {
	            width:250px;
	            top:32px;
	            left:0px;
                background-color:#023b6e;
            }

            ul#main-nav li .drop-nav ul li a
            {
                font-size:0.688em;
                
            }*/







    /* basket */
    .basket {
        float:right;
        position:relative;
    }

        .basket a {
            padding: 0 20px 0 0;
            margin: 0;
            text-transform:uppercase;
            text-decoration: none;
        }

            .basket a img {
                margin-top:6px;
            }


        .basket-items {
            position:absolute;
            top:13px;
            left:10px;
            font-family: "tablet-gothic-wide",sans-serif;
            font-size:0.75em;
            font-weight:400;
            color: #f5f5f5;
            margin: 0;
            text-transform:uppercase;
            cursor:pointer;
        }

            
            #basketWrap .basket-drop {
	            width:340px;
	            top:30px;
	            right:0px;
                background-color:transparent;
                padding-top:25px;
                position:absolute;
                z-index:60000;
            }

            #basketWrap .basket-drop .drop-wrap {
                background-color:#023b6e;
				-webkit-box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.7);
				-moz-box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.7);
				box-shadow:4px 4px 4px 0px rgba(0, 0, 0, 0.7);
            }

            #EmptyBasket {
                position:absolute;
                right:20px;
                bottom:20px;
                padding:6px 6px;
                font-family: "tablet-gothic-wide",sans-serif;
                font-size:0.688em;
                font-weight:300;
                color:#ffffff;
                text-transform:uppercase;
                background-color:#034a8a;
            }

            #EmptyBasket:hover {
                cursor: pointer;
                background-color:#003366;
            }
                
            #basketWrap .basket-drop .basket-list {
                padding:20px 20px 70px 20px;
                overflow:hidden;
                font-family: "tablet-gothic-wide",sans-serif;
                font-weight:300;
            }
                
            #basketWrap .basket-drop .basket-list h3 {
                font-size:1em;
                font-weight:300;
                color:#ffffff;
                margin:0 0 10px 0;
            }
                
            #basketWrap .basket-drop .basket-list span.empty-basket {
                color:#ffffff;
                font-size:0.75em;
            }

            #basketWrap .basket-drop .basket-list .basket-process {
                position:absolute;
                left:20px;
                bottom:20px;
                padding:6px 6px;
                font-family: "tablet-gothic-wide",sans-serif;
                font-size:0.688em;
                font-weight:300;
                color:#ffffff;
                text-transform:uppercase;
                background-color:#034a8a;
            }

            #basketWrap .basket-drop .basket-list .basket-process:hover {
                cursor: pointer;
                background-color:#003366;
            }
            
                #basketWrap .basket-drop .basket-list hr {
	                border:0;                   /* for FF; border reset */
	                background:transparent;     /* for Opera and Safari; remove default hr color */
	                font-size:0px;              /* for FF to mimic the fix "margins" on hr in IE */
	                border-top:1px solid #034a8a;
	                height:1px;
	                margin-top:10px;
	                margin-bottom:10px;
                }

                table.basket-detail {
                    font-family: "tablet-gothic-wide",sans-serif;
                    font-weight:300;
                    color:#ffffff;
                    width:100%;
                    border-spacing:0;
                    border-collapse:separate;
                }
                
                    table.basket-detail tr th {
                        font-size:0.688em;
                        font-weight:300;
                        text-transform:uppercase;
                        padding:5px;
                        background-color:#034a8a;
                    }
                
                    table.basket-detail tr td {
                        font-size:0.75em;
                        padding:5px;
                        border-bottom:1px solid #034a8a;
                    }
                
                        table.basket-detail tr td a {
                            padding:0;
                            text-transform:none;
                            color:#ffffff;
                            text-decoration:none;
                        }
                
                        table.basket-detail tr td a:hover {
                            text-decoration:underline;
                        }



}



/*** styles for 1280px ***/
@media screen and (min-width: 1280px) {
    
    ul.main-nav 
    {
        width:1240px;
        height:50px;
    }
    
    ul.main-nav li a {
        font-family: "tablet-gothic-wide",sans-serif;
        font-size:0.875em;
        font-weight:600;
        color: #0b426f;
        padding: 15px 22px 15px 21px;
        margin: 0;
        background:url(../images/nav-spacer.gif) no-repeat right 2px #f5f5f5;
        text-transform:uppercase;
        text-decoration: none;
        line-height:50px;
    }

        ul.main-nav li a.home-tab 
        {
            padding:0;
            border:none;
            background:none;
            display:block;
            position:relative;
            width:50px;
            height:50px;
            float:left;
        }




            /* dropdown */            
            ul#main-nav li .default-drop
            {
	            width:300px;
	            top:32px;
	            left:0px;
                background-color:#f5f5f5;
            }

                ul#main-nav li .default-drop ul li a
                {
                    color: #023b6e;
                    background-color:#f5f5f5;
                }
            
            ul#main-nav li .product-drop
            {
	            width:300px;
	            top:32px;
	            left:0px;
                background-color:#023b6e;
            }

            ul#main-nav li .drop-nav ul li a
            {
                font-size:0.750em;
            }



}