/***      Main CSS start here      ****\

Here is defined main menu CSS.
@autor - CroDigital
@date - 11.8.2011.

\****       Elegant CSS3 navigation elements - main menu      ****/
div#nav {
	width: 935px;
	padding: 0px 20px;
	background-color: transparent;
}
/** Main navigation **/
div#nav ul.mainav {
	width: inherit;
	height: 50px;
	background: #408AB7;
	-webkit-border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	-o-border-radius: 4px 4px 0px 0px;
	-ms-border-radius: 4px 4px 0px 0px;
	-khtml-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
	border: 1px solid #002F44;
	clear: both;
	position: relative;
}

div#nav ul.mainav {
	margin: 0 0 0 6px;
}

div#nav ul.mainav li{
	padding:0px;
	background:none;
}

div#sidenav ul.mainav{
	margin: 0 0 0 0px;
}

div#sidenav ul.mainav li{
	padding:0px;
	background:none;
}

/* Top 1px border above LI elements */
div#nav ul.mainav:after {
	content: '\00a0';
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	-webkit-border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	-o-border-radius: 4px 4px 0px 0px;
	-ms-border-radius: 4px 4px 0px 0px;
	-khtml-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
	border-top: 1px solid #6DC2FB;
	background: transparent;
}
/* Using box shadow to simulate gradient and hide part of LI borders */
div#nav ul.mainav:before {
	content: '\00a0';
	position: absolute;
	display: block;
	width: 100%;
	height: 50px;
	top: 0;
	left: 0;
	z-index: 40;
	-webkit-border-radius: 4px 4px 0px 0px;
	-moz-border-radius: 4px 4px 0px 0px;
	-o-border-radius: 4px 4px 0px 0px;
	-ms-border-radius: 4px 4px 0px 0px;
	-khtml-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
	-webkit-box-shadow: inset 0 -20px 15px #296285;
	-moz-box-shadow: inset 0 -20px 15px #296285;
	box-shadow: inset 0 -20px 15px #296285;
}
/* Main LI element style */
div#nav ul.mainav li {
	margin-top: 1px;
	float: left;
	border-right: 1px solid #022738;
	border-left: 1px solid #6DC2FB;
	position: relative;
}
div#nav ul.mainav li:first-child {
	border-left: none;
}
div#nav ul.mainav li:last-child {
	border-right: none;
}
/* Small corner part that is used to display to user that menu is dropdown menu */
div#nav ul.mainav li span.spdrop {
	position: absolute;
	top: -5px;
	right: -5px;
	border-color: transparent transparent #6DC2FB transparent;
	border-style: solid;
	border-width: 5px;
	-webkit-transform: rotate(45deg);
	width: 0;
	height: 0;
}
/* Main link styling */
div#nav ul.mainav li a {
	display: block;
	position: relative;
	z-index: 999;
	padding: 5px 20px 0px 20px;
	color: #edebeb;
	font: normal 14px/39px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #022738;
	text-decoration: none;
	list-style: none;
	margin: 0;
}
div#nav ul.mainav li:hover a {
	color: #FFF;
	text-shadow: 0 1px 0 #222;
}
/** Sub navigation - level 1 **/
div#nav ul.mainav li ul.subnav {
	display: none;
	background: #D8D8D8;
	width: 140px;
	border: 1px solid #B0B0B0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}
div#nav ul.mainav li:hover ul.subnav {
	display: block;
	position: absolute;
	top: 49px;
	left: 0;
}
/* Transparent div that is used to connect main and sub UL list so when mouse go over empty space sub menu doesn't close */
div#nav ul.mainav li ul.subnav:after {
	content: '\00a0';
	position: absolute;
	z-index: 50;
	top: -11px;
	left: 0;
	width: 100%;
	background: transparent;
	display: block;
}
/* Using box-shaow to hide edges of LI borders in sub menu making soft edges */
div#nav ul.mainav li ul.subnav:before, div#nav ul.mainav li ul.subnav li ul.subnav2nd:before {
	content: '\00a0';
	position: absolute;
	z-index: 60;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: transparent;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 30px 10px 30px #D8D8D8, inset -30px 10px 30px #D8D8D8;
	-moz-box-shadow: inset 30px 10px 30px #D8D8D8, inset -30px 10px 30px #D8D8D8;
	box-shadow: inset 30px 10px 30px #D8D8D8, inset -30px 10px 30px #D8D8D8;
	display: block;
}
/* Sub menu LI style */
div#nav ul.mainav li ul.subnav li {
	width: 138px;
	position: relative;
	margin: 0;
	border-width: 1px;
	border-style: solid;
	border-color: #FBFBFB transparent #B0B0B0 transparent;
}
div#nav ul.mainav li ul.subnav li:hover {
	-webkit-box-shadow: inset 0 -5px 5px #E5E5E5;
	-moz-box-shadow: inset 0 -5px 5px #E5E5E5;
	box-shadow: inset 0 -5px 5px #E5E5E5;
}
div#nav ul.mainav li ul.subnav li:first-child {
	border-top: 0;
}
div#nav ul.mainav li ul.subnav li:last-child {
	border-bottom: 0;
}
/* Sub menu link style */
div#nav ul.mainav li ul.subnav li a {
	display: block;
	position: relative;
	z-index: 80;
	color: #949494;
	font: normal 14px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
}
div#nav ul.mainav li ul.subnav li:hover a {
	color: #575555;
}
/* Circle span element that shows that sub LI element has another drop down option */
div#nav ul.mainav li ul.subnav li span.spmore {
	content: '';
	position: absolute;
	z-index: 78;
	top: 10px;
	right: 15px;
	height: 8px;
	width: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #F0F0F0;
	background: #D8D8D8;
	-webkit-box-shadow: inset 1px 1px 2px #575555;
	-moz-box-shadow: inset 1px 1px 2px #575555;
	box-shadow: inset 1px 1px 2px #575555;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
}
/** Sub navigation - level 2 **/
div#nav ul.mainav li ul.subnav li ul.subnav2nd {
	display: none;
	background: #D8D8D8;
	width: 140px;
	border: 1px solid #B0B0B0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}
div#nav ul.mainav li ul.subnav li:hover ul.subnav2nd {
	display: block;
	position: absolute;
	top: 0px;
	left: 149px;
}
/* Transparent div that is used to connect sub and sub 2nd UL list so when mouse go over empty space sub menu doesn't close */
div#nav ul.mainav li ul.subnav li ul.subnav2nd:after {
	content: '\00a0';
	position: absolute;
	z-index: 100;
	top: 0;
	left: -12px;
	width: 12px;
	height: 100%;
	background: transparent;
	display: block;
}
/* Sub 2nd menu link style */
div#nav ul.mainav li ul.subnav li ul.subnav2nd li a {
	display: block;
	position: relative;
	z-index: 80;
	color: #949494;
	font: normal 14px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
}
div#nav ul.mainav li ul.subnav ul.subnav2nd li:hover a {
	color: #575555;
}
/** Sub navigation - inside **/
div#nav ul.mainav li ul.subnav li ul.subnavin {
	position: relative;
	-webkit-box-shadow: 0 0 0 #000;
	-moz-box-shadow: 0 0 0 #000;
	box-shadow: 0 0 0 #000;
}
div#nav ul.mainav li ul.subnav li ul.subnavin li {
	border-top: 0;
	border-bottom: 0;
}
div#nav ul.mainav li ul.subnav li ul.subnavin li:hover {
	-webkit-box-shadow: 0 0 0 #000;
	-moz-box-shadow: 0 0 0 #000;
	box-shadow: 0 0 0 #000;
}
/* Span element used to display start of category inside sub list */
div#nav ul.mainav li ul.subnav li span.subtitle {
	color: #949494;
	font: normal 14px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
	position: relative;
	z-index: 200;
}
/* Category elements styling */
div#nav ul.mainav li ul.subnav li ul.subnavin li a {
	padding: 0 20px 0 30px;
	color: #949494;
	font: normal 12px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
	position: relative;
	z-index: 200;
}
div#nav ul.mainav li ul.subnav li ul.subnavin li:hover a {
	color: #575555;
}

div#nav .mainav li, dd, blockquote {
	background:none;
	margin: 0px;
	line-height:0px;
	padding:0px;
}

/****       Elegant CSS3 navigation elements - side menu      ****/


div#sidenav {
	width: 190px;
}
/** Main navigation **/
div#sidenav ul.mainav {
	width: inherit;
	background: #408AB7;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #002F44;
	clear: both;
	position: relative;
}
/* Top 1px border above LI elements */
div#sidenav ul.mainav:after {
	content: '\00a0';
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #6DC2FB;
	background: transparent;
}
/* Using box shadow to simulate gradient and hide part of LI borders */
div#sidenav ul.mainav:before {
	content: '\00a0';
	position: absolute;
	display: block;
	width: 190px;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 40;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	-o-border-radius: 0 0 4px 4px;
	-ms-border-radius: 0 0 4px 4px;
	-khtml-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	-webkit-box-shadow: inset -60px 0 60px #296285;
	-moz-box-shadow: inset -60px 0 60px #296285;
	box-shadow: inset -60px 0 60px #296285;
}
/* Main LI element style */
div#sidenav ul.mainav li {
	border-bottom: 1px solid #022738;
	border-top: 1px solid #6DC2FB;
	position: relative;
}
div#sidenav ul.mainav li:first-child {
	border-top: none;
}
div#sidenav ul.mainav li:last-child {
	border-bottom: none;
}
/* Small corner part that is used to display to user that menu is dropdown menu */
div#sidenav ul.mainav li span.spdrop {
	position: absolute;
	top: -5px;
	left: -5px;
	border-color: transparent transparent #6DC2FB transparent;
	border-style: solid;
	border-width: 5px;
	-webkit-transform: rotate(-45deg);
	width: 0;
	height: 0;
}
/* Main link styling */
div#sidenav ul.mainav li a {
	display: block;
	position: relative;
	z-index: 999;
	padding: 0 0px;
	color: #F4F4F4;
	font: normal 13px/35px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #022738;
	text-decoration: none;
}
div#sidenav ul.mainav li:hover a {
	color: #FFF;
	text-shadow: 0 1px 0 #222;
}
/** Sub navigation - level 1 **/
div#sidenav ul.mainav li ul.subnav {
	display: none;
	background: #D8D8D8;
	width: 140px;
	border: 1px solid #B0B0B0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}
div#sidenav ul.mainav li:hover ul.subnav {
	display: block;
	position: absolute;
	top: 0;
	left: 169px;
}
/* Transparent div that is used to connect main and sub UL list so when mouse go over empty space sub menu doesn't close */
div#sidenav ul.mainav li ul.subnav:after {
	content: '\00a0';
	position: absolute;
	z-index: 50;
	top: 0;
	left: -12px;
	width: 12px;
	height: 100%;
	background: transparent;
	display: block;
}
/* Using box-shaow to hide edges of LI borders in sub menu making soft edges */
div#sidenav ul.mainav li ul.subnav:before, div#sidenav ul.mainav li ul.subnav li ul.subnav2nd:before {
	content: '\00a0';
	position: absolute;
	z-index: 60;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: transparent;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 30px 10px 30px #D8D8D8, inset -30px 10px 30px #D8D8D8;
	-moz-box-shadow: inset 30px 10px 30px #D8D8D8, inset -30px 10px 30px #D8D8D8;
	box-shadow: inset 30px 10px 30px #D8D8D8, inset -30px 10px 30px #D8D8D8;
	display: block;
}
/* Sub menu LI style */
div#sidenav ul.mainav li ul.subnav li {
	width: 138px;
	position: relative;
	margin: 0;
	border-width: 1px;
	border-style: solid;
	border-color: #FBFBFB transparent #B0B0B0 transparent;
}
div#sidenav ul.mainav li ul.subnav li:hover {
	-webkit-box-shadow: inset 0 -5px 5px #E5E5E5;
	-moz-box-shadow: inset 0 -5px 5px #E5E5E5;
	box-shadow: inset 0 -5px 5px #E5E5E5;
}
div#sidenav ul.mainav li ul.subnav li:first-child {
	border-top: 0;
}
div#sidenav ul.mainav li ul.subnav li:last-child {
	border-bottom: 0;
}
/* Sub menu link style */
div#sidenav ul.mainav li ul.subnav li a {
	display: block;
	position: relative;
	z-index: 80;
	color: #949494;
	font: normal 14px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
}
div#sidenav ul.mainav li ul.subnav li:hover a {
	color: #575555;
}
/* Circle span element that shows that sub LI element has another drop down option */
div#sidenav ul.mainav li ul.subnav li span.spmore {
	content: '';
	position: absolute;
	z-index: 78;
	top: 10px;
	right: 15px;
	height: 8px;
	width: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
	border: 1px solid #F0F0F0;
	background: #D8D8D8;
	-webkit-box-shadow: inset 1px 1px 2px #575555;
	-moz-box-shadow: inset 1px 1px 2px #575555;
	box-shadow: inset 1px 1px 2px #575555;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding-box;
	background-clip: padding-box;
}
/** Sub navigation - level 2 **/
div#sidenav ul.mainav li ul.subnav li ul.subnav2nd {
	display: none;
	background: #D8D8D8;
	width: 140px;
	border: 1px solid #B0B0B0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
}
div#sidenav ul.mainav li ul.subnav li:hover ul.subnav2nd {
	display: block;
	position: absolute;
	top: 0px;
	left: 149px;
}
/* Transparent div that is used to connect sub and sub 2nd UL list so when mouse go over empty space sub menu doesn't close */
div#sidenav ul.mainav li ul.subnav li ul.subnav2nd:after {
	content: '\00a0';
	position: absolute;
	z-index: 100;
	top: 0;
	left: -12px;
	width: 12px;
	height: 100%;
	background: transparent;
	display: block;
}
/* Sub 2nd menu link style */
div#sidenav ul.mainav li ul.subnav li ul.subnav2nd li a {
	display: block;
	position: relative;
	z-index: 80;
	color: #949494;
	font: normal 14px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
}
div#sidenav ul.mainav li ul.subnav ul.subnav2nd li:hover a {
	color: #575555;
}
/** Sub navigation - inside **/
div#sidenav ul.mainav li ul.subnav li ul.subnavin {
	position: relative;
	-webkit-box-shadow: 0 0 0 #000;
	-moz-box-shadow: 0 0 0 #000;
	box-shadow: 0 0 0 #000;
}
div#sidenav ul.mainav li ul.subnav li ul.subnavin li {
	border-top: 0;
	border-bottom: 0;
}
div#sidenav ul.mainav li ul.subnav li ul.subnavin li:hover {
	-webkit-box-shadow: 0 0 0 #000;
	-moz-box-shadow: 0 0 0 #000;
	box-shadow: 0 0 0 #000;
}
/* Span element used to display start of category inside sub list */
div#sidenav ul.mainav li ul.subnav li span.subtitle {
	color: #949494;
	font: normal 14px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
	position: relative;
	z-index: 200;
}
/* Category elements styling */
div#sidenav ul.mainav li ul.subnav li ul.subnavin li a {
	padding: 0 20px 0 30px;
	color: #949494;
	font: normal 12px/28px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #FFFFFF;
	position: relative;
	z-index: 200;
}
div#sidenav ul.mainav li ul.subnav li ul.subnavin li:hover a {
	color: #575555;
}


/****       Elegant CSS3 navigation elements - button      ****/


a.btn {
	display: inline-block;
	background: #408AB7;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #002F44;
	padding: 7px 15px;
	position: relative;
	color: #F4F4F4;
	font: normal 12px 'Amaranth', sans-serif;
	text-shadow: 0 1px 0 #022738;
	text-decoration: none;
	-webkit-box-shadow: inset 0 -15px 15px #296285;
	-moz-box-shadow: inset 0 -15px 15px #296285;
	box-shadow: inset 0 -15px 15px #296285;
}
a.btn:after {
	content: '\00a0';
	position: absolute;
	display: block;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 20;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	border-top: 1px solid #6DC2FB;
}
a.btn:hover {
	color: #FFF;
	-webkit-box-shadow: inset 0 -15px 15px #2E6D94;
	-moz-box-shadow: inset 0 -15px 15px #2E6D94;
	box-shadow: inset 0 -15px 15px #2E6D94;
}