﻿.clearfix, ul, li, a  {margin: 0; padding: 0;}

/*.container {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}*/
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 4%;
    color: #fff;
}

	/*nav a.toggleMenu {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a.toggleMenu:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 25px;
		top: 10px;
	}*/


.clearfix {
    list-style: none;
     *zoom: 1;
     background:#fff;
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;*/

}
.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix ul {
    list-style: none;
    width: 9em;
}
.clearfix a {
    padding: 5px 15px;
    color:#828182;
}

/*.clearfix a:focus
{
    color:black;
}
*/
.clearfix a:hover {
    color: #F89728;
    text-decoration: none;
}

/*.clearfix a:active
{
    color:#000000;
}
*/
.clearfix li {
    position: relative;
}
.clearfix > li {
    float: left;
    border-top: 0px solid #104336;
}
.clearfix > li > .parent {
    background-image: url("../images/siteLayout/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.clearfix > li > a {
    display: block;
}

.clearfix li ul {
    position: relative;
    left: 10%;
    /*    left: -9999px;
*/
}

.clearfix > li.hover > ul {
    left: 10%;
}
.clearfix li li.hover ul {
    left: 100%;
    top: 0;
}
.clearfix li li a {
    display: block;
/*    background: #b6ff00;
*/    position: relative;
    z-index:100;
/*    border-top: 1px solid #fff;
*/}
.clearfix li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

/*Smartphone*/
/*@media screen and (max-width: 339px) {
*/
/*@media screen and (max-width: 339px) {
    .clearfix {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-box-shadow: 0 0 0px #999;
        -moz-box-shadow: 0 0 0px #999;
        box-shadow: 0 0 0px #999;
    }

        .clearfix li li a {
            background: #b6ff00;
            border-top: 1px solid #fff;
        }
}
*/
/*@media screen and (max-width: 600px) {
*/    
@media (max-width: 580px) {
    .active {
        display: block;
    }

    .clearfix > li {
        float: none;
        background-color: #283744;
    }

    .clearfix > li > .parent {
        background-position: 92% 50%;
    }

    .clearfix li li .parent {
        background-image: url("../images/siteLayout/downArrow.png");
        background-repeat: no-repeat;
        background-position: 92% 50%;
    }

    .clearfix ul {
        display: block;
        width: 100%;
    }

/*    .clearfix > li.hover > ul {
        left: 10%;
    }
*/
    .clearfix > li.hover > ul, .clearfix li li.hover ul {
        position: static;
    }

    .clearfix li ul {
        position: relative;
        left: 10%;
        width: 90%;
/*        left: -9999px;
*/
    }

    .clearfix li li a {
        background: #3b5164;
/*        border: 1px solid #4f6c84;
*/    }
    
    nav {
        border-bottom: 0;
    }

    nav a.toggleMenu {
        display: block;
        background-color: #283744;
        width: 92%;
        position: relative;
    }

    nav a.toggleMenu:after {
        content: "";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 25px;
        top: 10px;
    }
}

/*Styles for screen 515px and lower*/
/*@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}

	nav a.toggleMenu {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a.toggleMenu:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 25px;
		top: 10px;
	}
}*/