nav {
background: rgb(32,49,71);
background: -moz-linear-gradient(top, rgba(32,49,71,1) 0%, rgba(61,97,114,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(32,49,71,1)), color-stop(100%,rgba(61,97,114,1)));
background: -webkit-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
background: -o-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
background: -ms-linear-gradient(top, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
background: linear-gradient(to bottom, rgba(32,49,71,1) 0%,rgba(61,97,114,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203147', endColorstr='#3d6172',GradientType=0 );
border-radius: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.25);
}
nav > ul > li > a {
border-right: 1px solid #273444;
box-shadow: 3px 0 8px rgba(0,0,0,0.25);
color: #f8f8f8;
padding: 1.5em 25px;
text-decoration: none;
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
nav ul li:last-child a {
border: none;
box-shadow: none;
}
nav > ul > li > a:hover, nav > ul > li > a:focus {
background: #465A68;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
color: #f8f8f8;
}
nav ul ul {
background: rgb(70,90,104);
background: -moz-linear-gradient(top, rgba(70,90,104,1) 0%, rgba(147,163,175,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,90,104,1)), color-stop(100%,rgba(147,163,175,1)));
background: -webkit-linear-gradient(top, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
background: -o-linear-gradient(top, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
background: -ms-linear-gradient(top, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
background: linear-gradient(to bottom, rgba(70,90,104,1) 0%,rgba(147,163,175,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#465a68', endColorstr='#93a3af',GradientType=0 );
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
nav ul ul ul {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 0;
}
nav li li a {
border-bottom: 1px solid #34454C;
border-top: 1px solid #7A8B8E;
color: #fff;
padding: 0.8em 25px;
text-decoration: none;
}
nav li li a:hover, nav li li a:focus {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.35)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
nav li li:first-child a {
border-top: none;
}
nav li li:last-child a {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
nav li li li:first-child a {
border-top-right-radius: 5px;
}
nav li li li:last-child a {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 0;
}
/* ===================
Vertical styles
====================*/
.side {
background: #F99522;
background: #47006B;
background: -moz-linear-gradient(top, #47006B 0%, #6B006B 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,149,34,1)), color-stop(100%,#111;
background: -webkit-linear-gradient(top, #47006B 0%,#6B006B 100%);
background: -o-linear-gradient(top, rgba(249,149,34,1) 0%,#6B006B 100%);
background: -ms-linear-gradient(top, rgba(249,149,34,1) 0%,#6B006B 100%);
background: linear-gradient(to bottom, rgba(249,149,34,1) 0%,#6B006B 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6B006B', endColorstr='#ef811a',GradientType=0 );
}
.side ul > li > a {
border: none;
box-shadow: none;
}
.side > ul > li > a:hover, .side > ul > li > a:focus {
background: #465A68;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.10)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.10) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
color: #f8f8f8;
text-decoration: underline;
}
.side ul ul {
background: #F9C94D;
background: rgb(249,201,77);
background: -moz-linear-gradient(top, rgba(249,201,77,1) 0%, rgba(252,223,95,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,201,77,1)), color-stop(100%,rgba(252,223,95,1)));
background: -webkit-linear-gradient(top, rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
background: -o-linear-gradient(top, rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
background: -ms-linear-gradient(top, rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
background: linear-gradient(to bottom, rgba(249,201,77,1) 0%,rgba(252,223,95,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c94d', endColorstr='#fcdf5f',GradientType=0 );
border-bottom-left-radius: 0;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
.side > ul > li a {
border-bottom: 1px solid #EA7507;
border-top: 1px solid #F2A760;
}
.side > ul > li li a {
border-bottom: 1px solid #F4CB24;
border-top: 1px solid #F7DD74;
color: #0C3354;
}
.side > ul > li li a:hover, .side > ul > li li a:focus {
background: #F9D440;
background: rgb(249,212,64);
background: -moz-linear-gradient(top, rgba(249,212,64,1) 0%, rgba(244,188,46,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,212,64,1)), color-stop(100%,rgba(244,188,46,1)));
background: -webkit-linear-gradient(top, rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
background: -o-linear-gradient(top, rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
background: -ms-linear-gradient(top, rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
background: linear-gradient(to bottom, rgba(249,212,64,1) 0%,rgba(244,188,46,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d440', endColorstr='#f4bc2e',GradientType=0 );
}
.side > ul li:first-child a {
border-top: none;
}
.side > ul > li:last-child a {
border-top: 1px solid #F2A760;
}
.side li li:first-child a {
border-top-right-radius: 5px;
}
.side li li:last-child a {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 0;
}
.side li li li:first-child a {
border-top-right-radius: 5px;
}
</style>