﻿/*#region Menu Top Option 1*/
.smsMenuStyle2 ul {
    *zoom:1;
    list-style:none;
    margin:0;
    padding:0;
}
.smsMenuStyle2 ul:before,.smsMenuStyle2 ul:after {
    content:"";
    display:table;
}
.smsMenuStyle2 ul:after {
    clear:both;
}
.smsMenuStyle2 ul > li {
    float:left;
    position:relative;
}
.smsMenuStyle2 a {
    display:block;
    padding:10px 10px;
    line-height:1.2em;
}
.smsMenuStyle2 a:hover {
    text-decoration:none;
}
.smsMenuStyle2 li ul li {
    width:200px;
}
.smsMenuStyle2 li ul li:hover, 
.smsMenuStyle2 li ul li a:hover {
    width:100%;
}
.smsMenuStyle2 li ul a {
    border:none;
}
.smsMenuStyle2 li ul a:hover {
    opacity: 20;
}
.smsMenuStyle2 li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
}
.smsMenuStyle2 ul > li:hover ul li {
    height: 36px;
}
.smsMenuStyle2 li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}
/*#endregion*/

/*#region Menu Top Option 2*/
.smsMenuStyle3 {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
.smsMenuStyle3 li {
    margin:2px;
    float:left;
    position:relative;
    list-style:none;
}

.smsMenuStyle3 li ul {
    min-width:120px;
    width:190px;
}

.smsMenuStyle3 a {
    font-weight:bold;
    text-decoration:none;
    display:block;
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:8px 10px;
}
.smsMenuStyle3 li ul li, 
.smsMenuStyle3 li ul li:hover, 
.smsMenuStyle3 li ul li a, 
.smsMenuStyle3 li ul li a:hover {
    width:170px;
}
.smsMenuStyle3 ul li:hover a, 
.smsMenuStyle3 li:hover li a {
    background:none;
    border:none;
}
.smsMenuStyle3 ul li a:hover {
    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
.smsMenuStyle3 ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
.smsMenuStyle3 ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
.smsMenuStyle3 li:hover > ul {
    opacity:1;
    visibility:visible;
}
.smsMenuStyle3 > li:hover > ul {
    top:36px;
}

.smsMenuStyle3 ul {
    opacity:0;
    visibility:hidden;

    width:190px;

    padding:0;
    position:absolute;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
.smsMenuStyle3 ul li {
    float:none;
    clear:both;
    margin:0;
}
.smsMenuStyle3 ul a {
    font-weight:normal;
}
.smsMenuStyle3 ul ul {
    left:100px;
    top:0px;
}
/*#endregion*/

/*#region Menu Top Option 3*/
	.smsMenuStyle4, .smsMenuStyle4 ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.smsMenuStyle4 {
		margin: 0;
        width: 100%;

		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
	}
	.smsMenuStyle4:before,
	.smsMenuStyle4:after {
		content: "";
		display: table;
	}
	.smsMenuStyle4:after {
		clear: both;
	}
	.smsMenuStyle4 {
		zoom:1;
	}

	.smsMenuStyle4 li { /* separate header elements.. colors related to above*/
		float: left;
		position: relative;
	}
    .smsMenuStyle4 li ul {
        width:190px;
    }

	.smsMenuStyle4 a { /*text of items in the menu*/
		float: left;
		padding: 12px 15px;

        text-shadow: 0 1px 0 #000;

		text-transform: uppercase;
		font: bold 12px Arial, Helvetica;
		text-decoration: none;
	}
	.smsMenuStyle4 ul {
		margin: 20px 0 0 0;
		opacity: 0;
        visibility: hidden;

        position: absolute;
		top: 39px;
		left: 0;
		z-index: 1;

		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;  
	}
	.smsMenuStyle4 li:hover > ul {
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	.smsMenuStyle4 ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
	}
	.smsMenuStyle4 ul li {
		float: none;
		display: block;
		border: 0;
	}
	.smsMenuStyle4 ul li:last-child {   
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;    
	}
	.smsMenuStyle4 ul a {    
		padding: 10px;
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
	}
	.smsMenuStyle4 ul li:first-child > a {
		-moz-border-radius: 3px 3px 0 0;
		-webkit-border-radius: 3px 3px 0 0;
		border-radius: 3px 3px 0 0;
	}
	.smsMenuStyle4 ul li:first-child > a:after {
		content: '';
		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
	}
	.smsMenuStyle4 ul ul li:first-child a:after {
		left: -6px;
		top: 50%;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
	}
	.smsMenuStyle4 ul li:last-child > a {
		-moz-border-radius: 0 0 3px 3px;
		-webkit-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
/*#endregion*/

/*#region Mobile Menu*/
	/* Mobile */
	#menu-trigger {
		display: none;
	}
	@media screen and (max-width: 600px) {
		/* nav-wrap */
		#menu-wrap {
			position: relative;
		}
		#menu-wrap * {
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		/* menu icon */
		#menu-trigger {
			display: block; /* show menu icon */
			height: 40px;
			line-height: 40px;
			cursor: pointer;		
			padding: 0 0 0 35px;
			font-weight: bold;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;

			border: 1px solid #222;
			-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
			-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
			box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		}
		/* main nav */
		#simMenu {
			margin: 0; padding: 10px;
			position: absolute;
			top: 40px;
			width: 100%;
			z-index: 1;			
			display: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;		
		}
		#simMenu:after {
			content: '';
			position: absolute;
			left: 25px;
			top: -8px;
			border-left: 8px solid transparent;
			border-right: 8px solid transparent;			
		}	
		#simMenu ul {
			position: static;
			visibility: visible;
			opacity: 1;
			margin: 0;
			background: none;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;				
		}
		#simMenu ul ul {
			margin: 0 0 0 20px !important;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;
		}
		#simMenu li {
			position: static;
			display: block;
			float: none;
			border: 0;
			margin: 5px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;			
		}
		#simMenu ul li{
			margin-left: 20px;
			-moz-box-shadow: none;
			-webkit-box-shadow: none;
			box-shadow: none;		
		}
		#simMenu a{
			display: block;
			float: none;
			padding: 0;
		}
		#simMenu ul a{
			padding: 0;
			width: auto;		
		}
		#simMenu ul a:hover{
			background: none;	
		}
		#simMenu ul li:first-child a:after,
		#simMenu ul ul li:first-child a:after {
			border: 0;
		}	
        .sim-topLayout {
            position:relative !important;
        }	
	}
	@media screen and (min-width: 600px) {
        #simMenu {
            display: inline-block !important;
        }
	}	
    /* iPad */
    .no-transition {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
        opacity: 1;
        visibility: visible;
        display: none;
    }
    #simMenu li:hover > .no-transition {
        display: block;
    }

/*#endregion*/

/*#region Menu Left Option 1*/
.simVerticalMenu1>ul {
    margin: 0;
    padding: 0;
    list-style:none;
    width: 235px;
}
.simVerticalMenu1>ul>li {
    display:block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style:none;
    width: auto;

    /* CSS3 Transition Effect */
    transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
}
.simVerticalMenu1>ul>li>a { /* the category when NOT hovering*/
    display:block;
    margin: 0;
    padding:10px;
    height:19px;

    font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    text-transform:uppercase;
}
.simVerticalMenu1>ul>li>ul>li {
    margin:0;
    overflow: auto;
    padding:5px;
    margin-left:-20px;
}
.simVerticalMenu1>ul>li>ul>li> a {
    text-decoration:none;
}
/*#endregion*/