/* fonts
------------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);


/* general
------------------------------------------------------------------------------*/

html, body {
	font-size: 100%; 
	font: 14px/1.2 "Helvetica Neue",Arial,sans-serif;
	background:#efefef;
}

/* = Layout
------------------------------------------------------------------------------*/
#outer-wrapper {
	margin:0px auto;
	width:100%;
	min-height:600px;
	box-sizing: border-box;
}
#content {
	min-height:630px;
	position:relative;
}

/* = Header.php
------------------------------------------------------------------------------*/
#header-wrapper {
	background:#fff;
}
#header-content {
	padding:15px 0px;
}
#logo-container {
	float:left;
	padding:0px 0px;
	min-width:30%;
}
#logo-container img {
	width:40px;
	height:40px;
	float:left;
	margin-right:10px;
	border-radius:100%;
}
#logo-container div {
	line-height:20px;
	font-weight:bold;
	padding:0px 0px 0px 10px;
	color:#fff
}

/* #Top-nav
------------------------------------------------------------------------------*/
#top-nav {
	float:right;
	padding:0px 0px;
	margin:5px 0px;
}
#top-nav li {
	position:relative;
	z-index:100;
	display:inline-block;
	min-width:150px;
}
#top-nav  ul > li > a {
	display:block;
	color:#ced5de;
	line-height:30px;
	font-size:11px;
	font-weight:600;
	text-align:center;
	padding:3px 10px 3px 3px;
	text-transform:uppercase;
}
#top-nav > ul > li > a {
	background:#4B8DF8;
	background:#444d58;
}
#top-nav  ul > li > a.amount {
	color:#A5CE3B;
	font-weight:bold;
}
#top-nav  ul > li > a span {
	padding:0px 0px 0px 10px;
}
#top-nav  ul > li > a i {
	padding:0px 5px 0px 0px;
}
#top-nav  ul > li > a img {
	height:30px;
	float:left;
	margin:0px;
	padding:0px;
}
#top-nav > ul > li.has-sub ul  {
	position:absolute;
	display:none;
	top:100%;
}
#top-nav > ul > li:hover > a {
	background:#55616f;
	color:#fff;
}
#top-nav > ul > li:hover ul {
	display:block;
	width:100%;
	right:0;
	padding-bottom:10px;
	background:#55616f;
}
#top-nav  ul > li:hover > ul a {
	display:block;
	color:#fff;
	font-size:11px;
	line-height:25px;
	padding:0px 10px;
	text-align:right;
}


/* #Main-nav nav
------------------------------------------------------------------------------*/
#main-nav-wrapper {
	background:#444d58
}
.toggleMenu {
    display:  none;
    background: #ced5de;
    padding: 10px 0px;
    color: #fff;
	width:100%;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	font-weight:600;
}
.toggleMenu i {
	padding:0px 4px 0px 10px;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#444d58;
	 font-size:15px;
}
.nav:before, .nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 12rem;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
	min-width:90px;
}
.nav > li > a > span {
	padding:0px 4px 0px 4px;
}
.nav > li > .parent {
    background-image: url("images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav a {
    padding: 20px 10px;
    color:#ced5de;;
	font-size:12px;
	font-weight:600;
	text-transform:uppercase;
	
}
.nav > li > a {
    display: block;
	text-align:center;
}
.nav > li.hover > a {
	background:#55616f;
	color:#fff;
}
.nav li  ul {
    position: absolute;
	display:none;
}
.nav > li.hover > ul {
    left: 0;
	display:block;
	background:#ced5de;
	z-index:10;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
	display:block;
}
.nav li#right-align-menu  ul {
    position: absolute;
	left:auto;
    right: -99999px;
}
.nav > li#right-align-menu.hover > ul {
    right: 0;
	left:auto;
}
.nav li#right-align-menu li.hover ul {
    right: 100%;
	left:auto;
    top: 0;
}
.nav li li a {
    display: block;
    background: #55616f;
	color:#ced5de;;
    position: relative;
    z-index:100;
	padding:0px 10px;
	line-height:40px;
	border-top:1px solid #55616f;
}
.nav li li.hover a {
	 background:#5d6b7a;
}
.nav li li li a {
    background:#55616f;
	color:#333;
    z-index:200;
	padding:0px 10px;
	border-top:1px solid #55616f;
	border-bottom:none;
}

@media screen and (max-width: 380px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static !important;
    }

}

/* = footer.php
------------------------------------------------------------------------------*/
#footer-wrapper {
	background:#3D3D3D;
	border-top:4px solid #329999;
	margin-top:20px;
}
#footer-content .powered-by {
	text-align:right;
	color:#e4e4e4;
	font-size:13px;
	text-transform:lowercase;
	padding:10px 0px;
}
#footer-content .powered-by a {
	color:#f9f9f9;
	padding:0px 10px 0px 0px;
}

/* = index.php
------------------------------------------------------------------------------*/
.index-page {
	margin:20px 0px;
}
.index-page p {
	text-align:center;
	line-height:400px;
	font-family: 'Open Sans', sans-serif;
	font-size:20px;
}

.settings-page .profile-pic .input-text {
	height:auto;
	padding:0px;
}
.settings-page .profile-pic .input-text img {
	float:left;
	height:70px;
	margin:0px 20px 0px 0px;
}
.settings-page .profile-pic .input-text p {
	line-height:70px;
}



/* = permission.php
------------------------------------------------------------------------------*/
.permission-page {
	margin: 30px 0px;
}
.permission-page .brand-img {
	width: 150px;
}
.permission-text {
	margin: 10px auto;
	padding: 10px;
	background: #B94A48;
	color: #fff;
	max-width: 500px;
	font-weight: bold;
	border-radius: 3px;
}