﻿

/***
Page sidebar
***/


ul.page-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 0;
  padding: 0; 
}

ul.page-sidebar-menu > li {
  display: block;
  margin: 0;
  padding: 0; 
  border: 0px;
}

ul.page-sidebar-menu > li.start > a {
   border-top-color: transparent !important;
}

ul.page-sidebar-menu > li:last-child > a,
ul.page-sidebar-menu > li.last > a {
   border-bottom-color: transparent !important;
}

ul.page-sidebar-menu > li > a {
  display: block;
  position: relative;
  margin: 0;
  border: 0px;
  padding: 20px 25px;
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
}

ul.page-sidebar-menu > li > a i {
  font-size: 16px;
  margin-right: 5px;
  text-shadow:none; 
}

.icon-home
{
  background-image: url("/static/kidsrun/images/icons/8.GIF");
  background-repeat:no-repeat;
  background-position:0px 0px;
}

.icon-info
{
  background-image: url("/static/kidsrun/images/icons/8.GIF");
  background-repeat:no-repeat;
  background-position:-24px 0px;
}

.icon-user
{
  background-image: url("/static/kidsrun/images/icons/8.GIF");
  background-repeat:no-repeat;
  background-position:-48px 0px;
}

.icon-user-md
{
  background-image: url("/static/kidsrun/images/icons/8.GIF");
  background-repeat:no-repeat;
  background-position:-72px 0px;
}

.icon-cogs
{
  background-image: url("/static/kidsrun/images/icons/8.GIF");
  background-repeat:no-repeat;
  background-position:-96px 0px;
}
.icon-puzzle-piece
{
  background-image: url("/static/kidsrun/images/icons/8.GIF");
  background-repeat:no-repeat;
  background-position:-120px 0px;
}

ul.page-sidebar-menu > li.break {
  margin-bottom: 20px;
}

ul.page-sidebar-menu > li.active > a {
  border: none; 
  text-shadow:none;
}  

ul.page-sidebar-menu > li.active > a .selected {
  display: block;
  width: 8px;
  height: 25px;
  background-image: url("/static/kidsrun/images/icons/sidebar-menu-arrow.png");
  float: right;
  position: absolute;
  right:0px;
  top:20px;
}

.page-sidebar ul > li > a > .arrow:before {  
   float: right;
   margin-top: 1px;
   margin-right: 5px;
   display: inline;
   font-size: 16px;
   font-family: FontAwesome;
   height: auto;
   content: url("/static/kidsrun/images/icons/j_2.gif");
   font-weight: 300;
   text-shadow:none;
}

ul.page-sidebar-menu > li > a > .arrow.open:before {   
   float: right;
   margin-top: 1px;
   margin-right: 3px;
   display: inline;
   content: url("/static/kidsrun/images/icons/j_3.gif");
   width:24px;
   height:24px;
   font-weight: 300;
   text-shadow:none;
}

ul.page-sidebar-menu > li > ul.sub-menu {
  display: none;
  list-style: none;
  clear: both;
  margin: 0;
  background: #cf3d3e;
  padding: 0;
}

ul.page-sidebar-menu > li.active > ul.sub-menu {
  display: block;
}

ul.page-sidebar-menu > li > ul.sub-menu > li {
  background: none;
  margin: 0px;
  padding: 0px;
}

ul.page-sidebar-menu > li > ul.sub-menu > li > a {
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 10px 0px;
  padding-left: 44px !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  background: none;
}

/* 3rd level sub menu */
ul.page-sidebar-menu > li > ul.sub-menu  > li ul.sub-menu {
  display: none;
  list-style: none;
  clear: both;
  margin: 0px 0px 0px 0px;
}

ul.page-sidebar-menu > li > ul.sub-menu  li > a > .arrow:before   {  
   float: right;
   margin-top: 1px;
   margin-right: 20px;
   display: inline;
   font-size: 16px;
   font-family: FontAwesome;
   height: auto;
   content: url("/static/kidsrun/images/icons/j_1.gif");
   font-weight: 300;
   text-shadow:none;
}

ul.page-sidebar-menu > li > ul.sub-menu  li > a > .arrow.open:before {   
   float: right;
   margin-top: 1px;
   margin-right: 18px;
   display: inline;
   font-family: FontAwesome;
   height: auto;
   font-size: 16px;
   content: url("/static/kidsrun/images/icons/j_3.gif");
   font-weight: 300;
   text-shadow:none;
}

ul.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu {
  display: block;
}

ul.page-sidebar-menu > li > ul.sub-menu > li  ul.sub-menu li {
  background: none;
  margin: 0px;
  padding: 0px;
  margin-top: 1px !important;
}

ul.page-sidebar-menu > li > ul.sub-menu  li > ul.sub-menu > li > a {
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 50px 0px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  background: none;
}

ul.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {  
  padding-left: 60px;
}

ul.page-sidebar-menu > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {  
  padding-left: 80px;
}

ul.page-sidebar-menu > li.active > ul.sub-menu > li.active ul.sub-menu > li.active ul.sub-menu {
  display: block;
}


ul.page-sidebar-menu > li > ul.sub-menu  li > ul.sub-menu > li > a > i {
  font-size: 13px;
}

/***
Page sidebar
***/
.page-sidebar 
{
	float:left;
    width:225px;
}
.page-sidebar {
  background-color: #ffffff;
}
ul.page-sidebar-menu > li > a {
  border-top: 1px solid #5c5c5c !important;
  color: #ffffff !important;
}
ul.page-sidebar-menu > li:last-child > a {
  border-bottom: 1px solid transparent !important;
}

ul.page-sidebar-menu > li.open > a,
ul.page-sidebar-menu > li > a:hover,
ul.page-sidebar-menu > li:hover > a {
	abackground: #303030;
}

#menu_li1 > a,
#menu_li1.active > a {
  background: #fed130;
}

#menu_li2 > a,
#menu_li2.active > a {
  background: #e45252 ;
}
#menu_li3 > a,
#menu_li3.active > a {
  background: #4fcaec;
}
#menu_li4 > a,
#menu_li4.active > a {
  background: #02b36f;
}
#menu_li5 > a,
#menu_li5.active > a {
  background: #9a70d2;
}
#menu_li6 > a,
#menu_li6.active > a {
  background: #0156ca;
}
#menu_li7 > a,
#menu_li7.active > a {
  background: #fe8c2c;
}
#menu_li8 > a,
#menu_li8.active > a {
  background: #eb4b93;
}
#menu_li9 > a,
#menu_li9.active > a {
  background: #a3c82d;
}
#menu_li10 > a,
#menu_li10.active > a {
  background: #00b1bc;
}

#menu_li1 > a:hover
{
	background: #f2c41e;
}
#menu_li2 > a:hover 
{
	background: #d74a4a;
}
#menu_li3 > a:hover 
{
	background: #36bbdf;
}
#menu_li4 > a:hover 
{
	background: #00a666;
}
#menu_li5 > a:hover
{
	background: #8c63c3;
}
#menu_li6 > a:hover
{
	background: #014db6;
}
#menu_li7 > a:hover 
{
	background: #fa7c15;
}
#menu_li8 > a:hover 
{
	background: #dd3782;
} 
#menu_li9 > a:hover {
  background: #94b722;
}
#menu_li10 > a:hover {
  background: #009ea8;
}

ul.page-sidebar-menu > li.active > a {
  border-top-color: transparent !important;
  color: #ffffff;
}
ul.page-sidebar-menu > li.active > a i {
  color: #ffffff;
}
ul.page-sidebar-menu > li > ul.sub-menu > li:first-child > a {
  border-top: 0px !important;
}
ul.page-sidebar-menu > li > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
  color: #ffffff !important;
  background: #bb2f2e;
}
ul.page-sidebar-menu > li > ul.sub-menu > li > a:hover {
  background: #c53233 ;
}
/* 3rd level sub menu */
ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li.active > a,
ul.page-sidebar-menu > li > ul.sub-menu li > ul.sub-menu > li > a:hover,
ul.page-sidebar-menu > li > ul.sub-menu li.open > a {
  color: #ffffff !important;
  background: #575757 !important;
}
/* font color for all sub menu links*/
ul.page-sidebar-menu li > ul.sub-menu > li > a {
  color: #ffffff;
}
/* menu arrows */
ul.page-sidebar-menu > li > a .arrow:before,
ul.page-sidebar-menu > li > a .arrow.open:before {
  color: #7d7d7d !important;
}
ul.page-sidebar-menu > li > ul.sub-menu a .arrow:before,
ul.page-sidebar-menu > li > ul.sub-menu a .arrow.open:before {
  color: #707070 !important;
}
ul.page-sidebar-menu > li > a > .arrow.open:before {
  color: #8a8a8a !important;
}
ul.page-sidebar-menu > li.active > a .arrow:before,
ul.page-sidebar-menu > li.active > a .arrow.open:before {
  color: #ffffff !important;
}
.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
  background-color: #3d3d3d;
}
/* search box bg color on expanded */

/* sub menu bg color on hover menu item */
.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
  background-color: #3d3d3d;
}

.page-sidebar-closed .page-sidebar .sidebar-search.open {
  background-color: #3d3d3d !important;
}

/***
Sidebar toggler
***/
.sidebar-toggler {
  background-image: url(../images/sidebar-toggler.jpg);
  background-color: #242424;
}
/* search box bg color on expanded */
.page-sidebar-closed .page-sidebar .sidebar-search.open {
  background-color: #3d3d3d !important;
}
.page-sidebar-closed .page-sidebar .sidebar-search.open .remove {
  background-image: url("../images/sidebar-search-close.png");
}
/* sub menu bg color on hover menu item */
.page-sidebar-closed ul.page-sidebar-menu > li:hover .sub-menu {
  background-color: #3d3d3d;
}


/***
Page sidebar
***/

/* ie8 fixes */
.ie8 .page-sidebar {
  position: absolute;
  width: 225px;
}

/***
Make font awesome icons fixed width(latest version issue)
***/
li [class^="icon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 24px;
  text-align: center;
}
li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large {
  /* increased font size for icon-large */
  width: 1.5625em;
}




