/* __vphd__ use this file instead of sm-clean.css, contains changes an lots of simplifications */

/* Menu box
===================*/

	.sm-clean {
        margin-top: 10px;
		padding:0 10px;
		background:#eee;
		background:none;
	}
	.sm-clean-vertical {
		padding:10px 0;
	}
	.sm-clean ul {
		padding:5px 0;
		background: #87b99c;
/*        background-image: url(/wp-content/themes/bones-vphd/vphd/images/common-s/mob-nav-back.jpg);*/

		-moz-box-shadow:0 5px 9px rgba(0,0,0,0.2);
		-webkit-box-shadow:0 5px 9px rgba(0,0,0,0.2);
		box-shadow:0 5px 9px rgba(0,0,0,0.2);
	}





	/* first sub level carets */

	.sm-clean > li > ul:before {
		content:'';
		position:absolute;
		top:-18px;
		left:30px;
		width:0;
		height:0;
		overflow:hidden;
	}
	.sm-clean > li > ul:after {
		content:'';
		position:absolute;
		top:-16px;
		left:31px;
		width:0;
		height:0;
		overflow:hidden;
	}
	/* no carets for vertical main */
	.sm-clean-vertical > li > ul:before, .sm-clean-vertical > li > ul:after {
		display:none;
	}


/* Menu items
===================*/

	.sm-clean a {
		padding:12px;
		color:#555;
		color:black;
		font-size:18px;
		line-height:17px;
		text-decoration:none;
	}
	.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active,
	.sm-clean a.highlighted {

	}
	.sm-clean-vertical a:hover, .sm-clean-vertical a:focus, .sm-clean-vertical a:active,
	.sm-clean-vertical a.highlighted {

	}
	.sm-clean a.has-submenu {
		padding-right:25px;
	}
	.sm-clean-vertical a,
 	.sm-clean ul a {
		padding:10px 20px;
	}
	.sm-clean-vertical a.has-submenu,
 	.sm-clean ul a.has-submenu {
		padding-right:40px;
	}
	.sm-clean ul a {
		font-size:16px;
	}
	.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active,
	.sm-clean ul a.highlighted {
		color:#D23600;
		color:gray;
		/* background:#eee; */
	}
	/* current items - add the class manually to some item or check the "markCurrentItem" script option */
	.sm-clean a.current, .sm-clean a.current:hover, .sm-clean a.current:focus, .sm-clean a.current:active {
		color:#D23600;
		color:gray;

	}


/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-3px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px;
		border-style:solid dashed dashed dashed;
		border-color:white transparent transparent transparent;
	}
	.sm-clean-vertical a span.sub-arrow,
 	.sm-clean ul a span.sub-arrow {
		right:15px;
		top:50%;
		margin-top:-5px;
	}



/* Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." -> "more..." in the default download package
===================*/

	.sm-clean span.scroll-up, .sm-clean span.scroll-down {
		position:absolute;
		display:none;
		visibility:hidden;
		overflow:hidden;
		background:#fff;
		height:20px;
		/* width and position will be automatically set by the script */
	}
	.sm-clean span.scroll-up:hover, .sm-clean span.scroll-down:hover {
		background:#eee;
	}
	.sm-clean span.scroll-up-arrow, .sm-clean span.scroll-down-arrow {
		position:absolute;
		top:0;
		left:50%;
		margin-left:-6px;

		width:0;
		height:0;
		overflow:hidden;

		border-width:6px; 
		border-style:dashed dashed solid dashed;
		border-color:transparent transparent gray transparent;

	}
	.sm-clean span.scroll-up:hover span.scroll-up-arrow {
/*		border-color:transparent transparent #D23600 transparent; */
	}
	.sm-clean span.scroll-down-arrow {
		top:8px;
		border-style:solid dashed dashed dashed;
		border-color:gray transparent transparent transparent;

	}
	.sm-clean span.scroll-down:hover span.scroll-down-arrow {

/*		border-color:#D23600 transparent transparent transparent; */


	}




/*
---------------------------------------------------------------
  Responsiveness
  These will make the sub menus collapsible when the screen width is too small.
---------------------------------------------------------------*/


/* decrease horizontal main menu items left/right padding to avoid wrapping */
/*
@media screen and (max-width: 850px) {
	.sm-clean:not(.sm-clean-vertical) > li > a {
		padding-left:8px;
		padding-right:8px;
	}
	.sm-clean:not(.sm-clean-vertical) > li > a.has-submenu {
		padding-right:25px;
	}
}
@media screen and (max-width: 750px) {
	.sm-clean:not(.sm-clean-vertical) > li > a {
		padding-left:3px;
		padding-right:3px;
	}
	.sm-clean:not(.sm-clean-vertical) > li > a.has-submenu {
		padding-right:25px;
	}
}
*/

@media screen and (max-width: 768px) {
	/* The following will make the sub menus collapsible for small screen devices (it's not recommended editing these) */
/*	ul.sm-clean{width:auto !important;}
	ul.sm-clean ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
	ul.sm-clean>li{float:none;}
	ul.sm-clean>li>a,ul.sm-clean ul.sm-nowrap>li>a{white-space:normal;}
	ul.sm-clean iframe{display:none;}
*/
	/* Uncomment this rule to disable completely the sub menus for small screen devices */
	/*.sm-clean ul, .sm-clean span.sub-arrow, .sm-clean iframe {
		display:none !important; 
	}*/
    background-position: 100% -3px;

/* Menu box
===================*/

	.sm-clean {
		padding:0;
	}
	.sm-clean ul {
		border:0;
		padding:0;
		/* darken the background of the sub menus */
		background:rgba(130,130,130,0.1);
		background: #87b99c;
		-moz-border-radius:0;
		-webkit-border-radius:0;
		border-radius:0;
		-moz-box-shadow:none;
		-webkit-box-shadow:none;
		box-shadow:none;
	}
	/* no carets */
	.sm-clean > li > ul:before, .sm-clean > li > ul:after {
		display:none;
	}


/* Menu items
===================*/

	.sm-clean a {
		padding:13px 5px 13px 28px !important;
		color:#555 !important;
		background:transparent !important;
	}
	.sm-clean a.current {
		color:#D23600 !important;
		color:gray !important;

	}
	/* add some text indentation for the 2+ level sub menu items */
/*
	.sm-clean ul a {
		border-left:8px solid transparent;
	}
	.sm-clean ul ul a {
		border-left:16px solid transparent;
	}
	.sm-clean ul ul ul a {
		border-left:24px solid transparent;
	}
	.sm-clean ul ul ul ul a {
		border-left:32px solid transparent;
	}
	.sm-clean ul ul ul ul ul a {
		border-left:40px solid transparent;
	}
*/

/* Sub menu indicators
===================*/

	.sm-clean a span.sub-arrow,
	.sm-clean ul a span.sub-arrow {
display: none;
		top:50%;
		margin-top:-9px;
		right:auto;
		left:6px;
		margin-left:0;
		width:17px;
		height:17px;
		/* font:normal 16px/16px monospace !important; */
		text-align:center;
		border:0;
		text-shadow:none;
		background:rgba(255,255,255,0.6);
	}
	/* Hide sub indicator when item is expanded - we enable the item link when it's expanded */
	.sm-clean a.highlighted span.sub-arrow {
		display:none !important;
	}


/* Items separators
===================*/

	.sm-clean li {
	}
	.sm-clean > li:first-child {
	}
}

/* override link colors */


	.sm-clean a:focus,
	.sm-clean a:link,
	.sm-clean a:active,
	.sm-clean a:visited,
	.sm-clean a:hover,
	.sm-clean a {
        text-decoration: none;
        color: white !important;
        margin-right: 15px;
        padding-top: 7px;
        padding-bottom: 7px;
        margin-top: 2px;
        margin-bottom: 2px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
    }
    .sm-clean a:focus,
    .sm-clean a:hover {
        text-decoration: underline;
    }
    .sm-clean > li > a {
        background-color: #0C5586 !important;
    }
    .sm-clean > li > a:focus,
    .sm-clean > li > a:hover {
        background-color: #095E97 !important;
        text-decoration: underline;
    }

	.sm-clean ul:first-child {
        padding-top: 30px !important;
    }


#main-menu-mobile.sm-clean ul {
    width: 230px !important;
    margin-right: 20px !important;
}

#main-menu-mobile.sm-clean a.mobile-bars-career-finder {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/compass.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;

}
#main-menu-mobile.sm-clean a.mobile-bars-forum {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/conversation.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;
    background-size: 35px 35px !important;
    padding-right: 40px;

}
#main-menu-mobile.sm-clean a.mobile-bars-jobs {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/briefcase.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-members {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/members.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-meetups {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/cup.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}

#main-menu-mobile.sm-clean a.mobile-bars-blog {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/lightbulb.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-news {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/star.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-messages {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/email.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-help {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/help.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-about {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/info.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-logout {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/logout.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars-login {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/logout.png) !important;
    background-repeat: no-repeat !important;
    background-position: 98% -3px !important;
    background-size: 35px 35px !important;
}


#main-menu-mobile.sm-clean a.mobile-bars-settings {
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/general-icons/settings.png) !important;
    background-repeat: no-repeat !important;
    background-position: 99% -3px !important;

    background-size: 35px 35px !important;
}
#main-menu-mobile.sm-clean a.mobile-bars {
    margin-top: 15px;
    width: 25px;
    height: 30px;
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/mobile-menu/menu.png) !important;
    background-repeat: no-repeat !important;
    background-position: 10px 9px !important;
    cursor: pointer !important;
}


#main-menu-mobile > li > a {
}

#main-menu-mobile.sm-clean > li > a {
    text-decoration: none;
    }


@media screen and (max-width: 768px) {
	.sm-clean ul {
        width: 200px !important;
    }
	.sm-clean ul li {
        margin-left: 0px  !important;
        padding-left: 0px  !important;

    }
	.sm-clean ul li:hover {
        margin-left: 0px  !important;
        padding-left: 0px  !important;

    }


	.sm-clean ul li > a:focus,
	.sm-clean ul li > a:link,
	.sm-clean ul li > a:active,
	.sm-clean ul li > a:visited,
	.sm-clean ul li > a:hover,
	.sm-clean ul li > a {
        color: white !important;
        margin-right: 5px !important; 
        margin-left: 5px !important; 
        margin-top: 2px !important; 
        margin-bottom: 2px !important; 
        padding-top: 5px !important;
        padding-bottom: 5px  !important;
        padding-left: 5px  !important;
        padding-right: 40px  !important;
        -moz-border-radius: 0px  !important;
        -webkit-border-radius: 0px  !important;
        -khtml-border-radius: 0px  !important;
        border-radius: 0px  !important;
        font-weight: 500  !important;
        font-size: 18px  !important;
     }



	.sm-clean ul li > a:focus,
	.sm-clean ul li > a:hover {
        text-decoration: underline;
    }
    .sm-clean ul li:first-child {
        padding-top: 15px !important;
    }
    .sm-clean ul li:last-child {
        padding-bottom: 15px !important;
    }


    .sm-clean ul li  {
        position: relative;
        float: left;
        text-align: right;
    }

    .sm-clean ul li a  {
        padding-right: 40px;
    }


}