/*
   lib/products/common/styles.css - CSS generic to all products
   MKM UI Framework
   
   Created by Dave Waller on 2013-02-20.
   Copyright 2013 MyKnowledgeMap Ltd. All rights reserved.
   
	1.  Branded header bar
	2.  Main body wrapper
	3.  Product header bar
	4.  Main application content wrapper
	5.  Sidebar and menu
		5.1.  Sidebar main menu
	6.  Main page content area
		6.1 Breadcrumbs
	7.  Reports wrapper for external SSRS reports
	8.  Login page
		8.1  Terms and conditions
	9.  Product footer
	10. Framework color overrides
	
*/
	
/* 1. Main branded header bar */
#top_branding{
	position:absolute;
	width:100%;
	height:148px;
	background-color:#FB721A;
	background-image:url('images/top-banner-divider.gif');
	background-position:bottom;
	background-repeat:repeat-x;
}
#top_branding img{
	width:100% !important;
	height:148px;
}

/* 2. Main body wrapper - offset to reset the header bar height */
div.wrapper{
	position:relative;
	height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
}

/* 3. Header bar */
#header{
	background-image:url('images/header-texture.png');
	background-position:center;
	background-repeat:no-repeat;
	height:140px;
	margin-bottom:8px;
}
#logo{				/* Main product logo - switchable by customer */
	margin-top:5px;
}
#username{			/* Username display */
	clear:both;
	font-size:24px;
	font-weight:bold;
	padding-top:20px;
	padding-left:220px;
	color:#FFF;
	text-shadow:0px 1px 1px #000;
	width:720px;
	float:left;
}
#username p{
	margin-bottom:0px;
	max-height:36px;
	overflow:hidden;
	position:relative;
}
#username a{
	top:-3px;
}
#header menu{		/* Sub menu */
	text-align:right;
	color:#333;
	margin-top:5px;
}
#header menu a{
	color:#FFF;
	text-decoration:none;
}
#header menu a:hover{
	text-decoration:underline;
}
#dual_brand{		/* Second logo space - shown if dual branding is active */
	margin-top:15px;
	text-align:right;
}
	/* 3.1. Main menu icons */
	#mainNav li a{
		width:75px;
		padding-top:49px;
		background-image:url(images/large_sprites-dark.png) !important;
	}
	#mainNav.light li a{
		background-image:url(images/large_sprites-white.png) !important;
	}
	#mainNav a.admin-button{				background-position:-0px 0px; }
	#mainNav a.mobile-button{				background-position:-75px 0px; }
	#mainNav a.authoring-button{			background-position:-150px 0px; }
	#mainNav a.itembank-button{				background-position:-225px 0px; }
	#mainNav a.api-button{					background-position:-300px 0px; }
	#mainNav a.org-button{					background-position:-375px 0px; }
	#mainNav a.users-button{				background-position:-450px 0px; }
	#mainNav a.cohorts-button{				background-position:-525px 0px; }
	#mainNav a.terms-button{				background-position:-600px 0px; }
	#mainNav a.branding-button{				background-position:-675px 0px; }
	#mainNav a.jobroles-button{				background-position:-750px 0px; }
	#mainNav a.skillsmap-admin-button{		background-position:-825px 0px; }
	#mainNav a.archive-button{				background-position:-900px 0px; }
	#mainNav a.home-button{					background-position:-975px 0px; }
	#mainNav a.assessments-button{			background-position:-1050px 0px; }
	#mainNav a.responses-button{			background-position:-1125px 0px; }
	#mainNav a.feedback-button{				background-position:-1200px 0px; }
	#mainNav a.blog-button{					background-position:-1275px 0px; }
	#mainNav a.gallery-button{				background-position:-1350px 0px; }
	#mainNav a.resources-button{			background-position:-1425px 0px; }
	#mainNav a.attempt-button{				background-position:-1500px 0px; }
	#mainNav a.skillsmap-button{			background-position:-1575px 0px; }
	#mainNav a.review-button{				background-position:-1650px 0px; }
	#mainNav a.results-button{				background-position:-1725px 0px; }
	#mainNav a.threesixty-button{			background-position:-1800px 0px; }
	#mainNav a.learningplan-button{			background-position:-1875px 0px; }
	#mainNav a.deploy-button{				background-position:-1950px 0px; }
	#mainNav a.reports-button{				background-position:-2025px 0px; }
	#mainNav a.frameworks-button{			background-position:-2100px 0px; }
	#mainNav a.welcome-button,
	#mainNav a.messaging-button{			background-position:-2175px 0px; }
	#mainNav a.training-button{				background-position:-2250px 0px; }
	#mainNav a.enterprise-button{			background-position:-2325px 0px; }
	#mainNav a.compliance-button{			background-position:-2400px 0px; }
	#mainNav a.completion-button{			background-position:-2475px 0px; }
	#mainNav a.localisation-button{			background-position:-2550px 0px; }
	#mainNav a.saas-button{					background-position:-2625px 0px; }
	#mainNav a.edit-button{					background-position:-2700px 0px; }
	#mainNav a.questions-button{			background-position:-2775px 0px; }
	#mainNav a.search-button{				background-position:-2850px 0px; }
	#mainNav a.dashboard-button{			background-position:-2925px 0px; }
	#mainNav a.completed-button{			background-position:-3000px 0px; }

/* 4. Main wrapper for all page based content - mainly used for applying a bg image */
#content{
	background-image:url("images/page-texture.gif");
	position:relative;
}

/* 5. Sidebar and menu */
#sidebar{			/* Main sidebar holder */
	padding-bottom:86px;
}
#avatar{			/* User avatar */
	background-image:url("images/avatar-bg.png");
	width:196px;
	height:196px;
	margin-top:-65px;
}
#avatar img{
	margin:10px 0px 0px 14px;
	max-width:168px;
	max-height:168px;
}
	/* 5.1. Sidebar main menu */
	#sidebar nav{}
	#sidebar nav ul{
		margin:0px; padding:2px 0px 0px 0px;
		background-image:url("images/menu-divider.gif");
		background-position:top;
		background-repeat:no-repeat;
	}
	#sidebar nav li{
		height:35px;
		line-height:35px;
		padding:0px 0px 2px 0px;
		margin:0px;
		background-image:url("images/menu-divider.gif");
		background-position:bottom;
		background-repeat:no-repeat;
		font-size:13px;
		font-weight:bold;
		vertical-align:top;
		text-shadow:0px 1px 0px #FFF;
	}
	#sidebar nav li.active{			/* Little tab for active menu item */
		background-image:url("images/menu-active.gif");
	}
	#sidebar nav li a{				/* Standard styling for each menu item */
		display:block;
		height:35px;
		padding-left:40px;
		margin-right:1px;
		color:#333;
		text-decoration:none;
	    background-position:0 0;
	    background-repeat:no-repeat;
	    background-image:url(images/sidebar_sprites.gif);
	}
	#sidebar nav li a:hover{
		color:#6699FF; /* #767676 */
	}
	#sidebar nav li.active a{		/* Highlight color for active menu item */
		color:#6699FF;
	}
	/* 5.2. Sidebar menu icons */
	#sidebar nav li a.admin-button{					background-position:0px -0px; }
	#sidebar nav li a.mobile-button{				background-position:0px -33px; }
	#sidebar nav li a.authoring-button{				background-position:0px -66px; }
	#sidebar nav li a.itembank-button{				background-position:0px -99px; }
	#sidebar nav li a.api-button{					background-position:0px -132px; }
	#sidebar nav li a.org-button{					background-position:0px -165px; }
	#sidebar nav li a.users-button{					background-position:0px -198px; }
	#sidebar nav li a.cohorts-button{				background-position:0px -231px; }
	#sidebar nav li a.terms-button{					background-position:0px -264px; }
	#sidebar nav li a.branding-button{				background-position:0px -297px; }
	#sidebar nav li a.jobroles-button{				background-position:0px -330px; }
	#sidebar nav li a.skillsmap-admin-button{		background-position:0px -363px; }
	#sidebar nav li a.archive-button{				background-position:0px -396px; }
	#sidebar nav li a.home-button{					background-position:0px -429px; }
	#sidebar nav li a.assessments-button{			background-position:0px -462px; }
	#sidebar nav li a.responses-button{				background-position:0px -495px; }
	#sidebar nav li a.feedback-button{				background-position:0px -528px; }
	#sidebar nav li a.blog-button{					background-position:0px -561px; }
	#sidebar nav li a.gallery-button{				background-position:0px -594px; }
	#sidebar nav li a.resources-button{				background-position:0px -627px; }
	#sidebar nav li a.attempt-button{				background-position:0px -660px; }
	#sidebar nav li a.skillsmap-button{				background-position:0px -693px; }
	#sidebar nav li a.review-button{				background-position:0px -726px; }
	#sidebar nav li a.results-button{				background-position:0px -759px; }
	#sidebar nav li a.threesixty-button{			background-position:0px -792px; }
	#sidebar nav li a.learningplan-button{			background-position:0px -825px; }
	#sidebar nav li a.deploy-button{				background-position:0px -858px; }
	#sidebar nav li a.reports-button{				background-position:0px -891px; }
	#sidebar nav li a.frameworks-button{			background-position:0px -924px; }
	#sidebar nav li a.welcome-button,
	#sidebar nav li a.messaging-button{				background-position:0px -957px; }
	#sidebar nav li a.training-button{				background-position:0px -990px; }
	#sidebar nav li a.enterprise-button{			background-position:0px -1023px; }
	#sidebar nav li a.compliance-button{			background-position:0px -1056px; }
	#sidebar nav li a.completion-button{			background-position:0px -1089px; }
	#sidebar nav li a.localisation-button{			background-position:0px -1122px; }
	#sidebar nav li a.saas-button{					background-position:0px -1155px; }
	#sidebar nav li a.edit-button{					background-position:0px -1188px; }
	#sidebar nav li a.questions-button{				background-position:0px -1221px; }
	#sidebar nav li a.search-button{				background-position:0px -1254px; }
	#sidebar nav li a.dashboard-button{				background-position:0px -1287px; }
	#sidebar nav li a.completed-button{				background-position:0px -1320px; }

/* 6. Main page content area */
#page_content{
	margin-top:10px;
	padding-bottom:46px;
}
	/* 6.1. Breadcrumbs */
	#breadcrumbs{
		font-size:16px;
		font-weight:bold;
		margin:0px 0px 10px 0px;
		text-shadow:0px 1px 0px #FFF;
		padding-bottom:6px;
		z-index:1000;
		position:relative;
	}
	#breadcrumbs.bc-list{
		width:38%;
		background:none;
	}
	hr.bc-list{
		margin:-15px 0px 10px 0px;
		padding:0px;
		height:1px;
		border:none;
		background-color:#FFF;
		border-top:1px solid #CCC;
	}
	#breadcrumbs span{	color:#999; }
	#breadcrumbs a{
		color:#333;
	}
	#breadcrumbs a:hover{	color:#6699FF; }
	#breadcrumbs a.small-button{
		color:#FFF;
		background-color:#56F;
		padding:5px 6px 5px 5px;
		text-shadow:none;
		font-size:11px;
		letter-spacing:0.3px;
		margin-left:6px;
	}
	#breadcrumbs a.small-button:hover{
		background-color:#333;
		color: white;
		box-shadow:0px 1px 0px #FFF;	
	}
	#breadcrumbs span:first-child span:first-child,#breadcrumbs span:first-child span:first-child +span{
		display:none;
	}
	#breadcrumbs.hidecrumbs{
		display:none;
	}

/* 7. Reports wrapper for external SSRS reports */
	body.report #top_branding{
		top:-60px;
	}
	body.report #header{
		height:80px;
	}
	body.report #content{
		background-image:none;
	}
	body.report iframe{
		width:100%;
	}

/* 8. Login page */
body.login{
	background-image:url("images/login-bg.gif");
}
body.login #logo{
	margin-top:30px;
	text-align:center;
}
#login_form{
	background-color:#FFF;
	border:6px solid #333;
	border-radius:12px;
	box-shadow:0px 1px 3px rgba(0,0,0,0.5);
	padding:30px 60px;
	margin-top:-20px;
}
p.login-intro{
	text-align:center;
	font-size:14px;
}
p.login-row label{
	display:block;
	font-weight:bold;
}
p.login-row input[type='text'],
p.login-row input[type='password']{
	background-color:#FAFAFA;
	border:1px solid #999;
	margin:4px 0px 0px 0px;
	padding:8px;
	font-size:18px;
	width:310px;
}
p.login-row-cb label{
	display:inline;
}
p.login-row-cb a{
	float:right;
}
p.login-row-cb a:hover{
	color:#000;
}
p.login-row-small{
	font-size:11px;
	text-align:center;
	margin-top:25px;
}
p.login-row-small a{
	text-decoration:none;
}
p.login-row-small a:hover{
	color:#000;
	text-decoration:underline;
}
p.login-row input[type='submit']{
	border:none;
	font-size:20px;
	color:#FFF;
	height:54px;
	text-shadow:0px -1px 0px rgba(0,0,0,0.8);
	background-image:url("images/login-button.png");
	background-position:center;
	border-radius:12px;
	cursor:pointer;
	margin-left:8px;
}
p.login-row input[type='submit']:active{
	position:relative;
	top:2px;
}
p.login-row-error{
	border:1px solid #874747;
	text-shadow:0px -1px 0px #874747;
	background-color:#C26666;
	padding:4px;
	color:#FFF;
	text-align:center;
	font-weight:bold;
}
	/* 8.1.  Terms & conditions */
	body.terms p{
		text-align:right;
		padding:10px;
	}
	body.terms p span{
		float:left;
	}
	body.terms h1{
		padding:10px;
	}
	body.terms div#tsandcs{
		border:1px solid #575757;
		margin:10px;
		padding:10px;
		overflow:auto;
		height:490px;
	}
	div#tsandcs h2{
		margin:5px 0px;
		padding:0px;
		color:#46F;
	}
	div#tsandcs p{
		margin:4px 0px 8px 0px;
		padding:0px;
		text-align:left;
	}
	div#tsandcs ol{
		margin:15px 0px 30px 0px;
	}
	div#tsandcs ol li{
		list-style-type:upper-roman;
		margin:5px 100px 8px 60px !important;
	}
	
/* 9. Footer */
footer{
	border-top:1px solid #999;
	background-color:#FFF;
	margin-top:0px; padding-bottom:0px;
	color:#666;
	font-size:10px;
	line-height:12px;
	padding:10px 0px;
	position: absolute;
    bottom: 0;
    width: 100%;
}
#copyright{
	text-align:right;
}
#copyright div{
	display:inline;
	float:right;
}
#html5{
	border-left:1px solid #CCC;
	margin-left:10px;
	color:#E44C26;
	padding-right:30px;
	padding-left:15px;
	background-image:url("images/html5-small.gif");
	background-position:right;
	background-repeat:no-repeat;
}

/* 10. Framework colours */
.pagination{	font-size:14px; } .pagination a:hover{ color:#000; }
a{		color:rgb(68,102,255); -webkit-transition: all .3s linear; -moz-transition: all .3s linear; -o-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear; }
abbr{							 }
blockquote{						border-color:#CCC; }
p.meta{							color:#666; }
ul.navigation li a.current{		background-color:#fff; }
select.list-select{ max-width:180px; }