/*
Camp Lohikan SIDE Navigation CSS
Author: Mat Kraner | Creative DBS
Version: 1.0



COLORS:
*******
yellow: 			    #fee03f
yellow /w opacity:  	rgba(254, 224, 63, 1.0)
light blue:			    #194c91
dark blue: 			    #061A38
lighest blue:       	#337ab7

*/

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,800,800italic,900,900italic); /* font-family: 'Alegreya Sans', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Aldrich); /* font-family: 'Aldrich', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Viga); /* font-family: 'Viga', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Rambla:400,400italic,700,700italic); /* font-family: 'Rambla', sans-serif; */
@import url(https://fonts.googleapis.com/css?family=Strait); /* font-family: 'Strait', sans-serif; */


@font-face {
    font-family: 'pussycat_snickers';
    src: url('../fonts/pusss-webfont.eot');
    src: url('../fonts/pusss-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pusss-webfont.woff2') format('woff2'),
         url('../fonts/pusss-webfont.woff') format('woff'),
         url('../fonts/pusss-webfont.ttf') format('truetype'),
         url('../fonts/pusss-webfont.svg#pussycat_snickers') format('svg');
    font-weight: normal;
    font-style: normal;}

.numberCircle {border-radius: 50%; width: 26px; height: 26px; padding: 0px 0px 0px 1px; background: none; border: 1px solid #337ab7; color: #337ab7; text-align: center; font: 23px Arial, sans-serif; position: absolute; right: 10px; top: 9px; opacity: 1;}
.numberCircle:active, .numberCircle:hover { color:#333; border-color:#333;}

ul.lohikan-side-styling { border-radius:5px; border:1px solid #BBB;
background: -moz-linear-gradient(left,  rgba(204,204,204,0.5) 0%, rgba(204,204,204,0.1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(204,204,204,0.5) 0%,rgba(204,204,204,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(204,204,204,0.5) 0%,rgba(204,204,204,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.nav li.lohikan-side-styling {border-bottom: 1px solid #bbb;}
.nav-stacked>li+li.lohikan-side-styling {margin-top:0px;}
a.first-level-option {padding: 10px 15px !important;}
.nav-pills>li>a.first-level-option {border-radius:5px; font-weight:bold;}
a.second-level-option {padding: 5px 35px !important; font-size:16px !important; color:#444;}
a.nolink {color:#666; cursor: default;}
a.red-color {color:#7b112f;}

.nav-stacked>li+li {margin-top:0px;}
.nav-pills>li>a {border-radius:5px; font-weight:bold; padding: 10px 15px !important;}

.nav > li > a.first-level-option:focus, .nav > li > a.first-level-option:hover { color:#333;}


/* Search Styling */
#custom-search-input{
    padding: 0px;
    border: solid 1px #E4E4E4;
    border-radius: 5px;
    background-color: #fff;
	margin-top:20px;
}

#custom-search-input input{
    border: 0;
    box-shadow: none;
}

#custom-search-input button{
    margin: 2px 0 0 0;
    background: none;
    box-shadow: none;
    border: 0;
    color: #666666;
    padding: 0 8px 0 10px;
    border-left: solid 1px #ccc;
}

#custom-search-input button:hover{
    border: 0;
    box-shadow: none;
    border-left: solid 1px #ccc;
}

#custom-search-input .glyphicon-search{
    font-size: 23px; color:#337ab7;
}




/* ONLY BIG SCREENS */
/* Small Devices, Tablets */
@media only screen and (min-width : 767px) {

}



/* ONLY SMALL SCREENS */
/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {

}



/* IN-BETWEENERS JUST FOR THE TOP NAVIGATION */
/* Small Devices, Tablets */
@media only screen and (max-width : 1200px) and (min-width : 1100px) {

}



/* Small Devices, Tablets */
@media only screen and (max-width : 1099px) and (min-width : 1000px) {

}



@media only screen and (max-width : 999px) and (min-width : 768px) {

}













/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}












/*******
********
********
********
********
********
*******/

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}