@import 'vars.scss';
@import 'mixins/grids.scss';
@import 'mixins/collection.scss';
@import "compass/css3/box-shadow";
@import 'normalise.scss';

@import 'icons/*.png';
@import 'sections/*.png';

html {
	background:#d5d9e2;/*inline-image('/structure/navBg.png') top left repeat;*/
}

/*body {
	background:url('#{$structure}woodFade.png') top left no-repeat;
}*/

#cmsTop {
	z-index:11;
	position:fixed;
	width:99%;
	padding-left:.5%;
	padding-right:.5%;
	height:28px;
	
	.userDetails {
		float:right;
		color:#fff;
		line-height:28px;
		margin:0 10px 0 0;

		img {
			float:left;
			margin:2px 7px 0 0;
			display:block;
		}
	}
}

#telanorthLogo {
	position:absolute;
	top:10px;
}

#main {
	overflow:hidden;
	padding-top:46px;
}


/* =============================================================================
   App Window
   ========================================================================== */
#window {
	width:auto;
	position:relative;
	background:#fff;
	overflow:hidden;
	z-index:9;
	border-left:1px solid #5e7b89;

	.no-js & {
		border-bottom:1px solid #5e7b89;
		@include box-shadow(0 0 0 1px rgba(255,255,255,0.8));
		@include border-bottom-left-radius(5px);
		margin-bottom:10px;
	}

}

/* =============================================================================
   sectionNavigation
   ========================================================================== */
#sidebar {
	width:222px;
	position:relative;
	float:left;
	overflow:hidden;

	.no-js & {
		overflow:auto;
	}

	-webkit-transition: margin 1s ease-in-out;
	-moz-transition: margin 1s ease-in-out;
	-o-transition: margin 1s ease-in-out;
	transition: margin 1s ease-in-out;
	

	nav {

		h2 {
			font-size:1em;
			text-transform:uppercase;
			margin:0;

			&.active {
				a {
					
				}
			}


			a {
				padding:5px 10px;
				color:#627080;

				&:hover {
					background:none;
					/*border-bottom-color:transparent;
					border-top-color:transparent;*/
					color:#627080;
					text-shadow:0 1px 0 rgba(255,255,255,0.6);
				}
			}
		}
		ul {
			margin-bottom:5px;
		}
		li {
			padding:0;
			position:relative;
			z-index:10;

			.ie7 & {
				overflow:hidden;
			}

			
			a {
				padding:5px 0 5px 45px;
				
				.ie7 & {
					position:relative;
					zoom:1;
				}

				span {
					position:absolute;
					top:auto;	
					left:20px;
				}
			}
		}

		a {
			color:#363535;
			text-shadow:0 1px 0 rgba(255,255,255,0.6);
			position:relative;
			display:block;
			text-decoration:none;
			/*border-bottom:1px solid transparent;
			border-top:1px solid transparent;*/

			/*-webkit-transition:background 0.25s ease-in, color 0.1s ease-in;  
			-moz-transition:background 0.25s ease-in, color 0.1s ease-in;  
			-o-transition:background 0.25s ease-in, color 0.1s ease-in;  
			transition:background 0.25s ease-in, color 0.1s ease-in;*/
		}

		a:hover,
		.active a {
			background:#5F97EB;
			color:#fff;
			text-shadow:0 1px 1px rgba(0,0,0,0.3);
			/*border-bottom-color:#1e6cbb;
			border-top-color:#5594d2;		*/
		}

		
	}

	.thickBorder {
		margin:10px;
	}
}


/* =============================================================================
   List Bar
   ========================================================================== */

.listBar {
	width:293px;
	float:left;
	position:relative;
	background:inline-image('/structure/listing/bg.png') top left;
	overflow:hidden;

	-webkit-transition: margin 1s ease-in-out;
	-moz-transition: margin 1s ease-in-out;
	-o-transition: margin 1s ease-in-out;
	transition: margin 1s ease-in-out;

	margin-left:-293px;

	.filterInput {
		width:94%;
	}

	.clearFilter {
		margin:8px 0 0 0;
		float:right;
	}

	/* root ul */
	div > ul {
		@include box-shadow(0 4px 15px 0 rgba(0,0,0,0.5));

		overflow:hidden;

		.no-js & {
			overflow:auto;
		}
	}

	/* default ul styles */
	ul {
		list-style:none;
		margin:0;
		padding:0;
		position:relative;
		z-index:1;

	}

	/* default li styles */
	li {
		@include vertical-gradient(#f4f4f4,#e9e9e9,40px,'f4f4f4','e9e9e9');
		border-bottom:1px solid #c8c8c8;
		@include box-shadow(0 1px 0 0 #fff inset);

		span.icons {
			position:absolute;
			top:8px;
			left:8px;
		}

		img {
			float:left;
			display:block;
			margin:0 7px 0 0;
		}

		/* default link styles */
		a {
			display:block;
			padding:10px;
			color:#777;
			@extend .clearfix;
			position:relative;

			&:hover {
				background:#fff;
				text-decoration:none;
			}
		}

		&.active {
			border-bottom-color:#5F97EB;
			> a {
				background:#5F97EB;
				color:#fff;
				font-weight:bold;

				&:hover {
					background:#5F97EB;
				}
			}

			> ul {
				border-top-color:#447FD8;
			}
		}
	}
}

#listbarFilter {
	padding:10px;
	@include vertical-gradient(#f4f4f4,#e1e1e1,40px,'f4f4f4','e1e1e1');
	position:relative;
	z-index:2;
	border:1px solid #dadada;
	border-left:none;
	height:81px;
}




/* =============================================================================
   Content
   ========================================================================== */



#content {
	width:auto;
	position:relative;
	overflow:auto;
	height:100%;
	padding:20px 30px;
}

#pageHeader {
	background:#efefef;
	margin:-20px -30px 30px;
	padding:20px 30px;
	border-bottom:1px solid #DADEE1;
	position:relative;
	
	h1, p {
		margin:0;
	}

	.buttonSet {
		position:absolute;
		top:30px;
		right:30px;
	}
}

@import 'tree.scss';
@import 'library.scss';
@import 'users.scss';
@import 'dashboard.scss';
@import 'countries.scss';

#contentEditorBody {
	height:500px;
}

#sectionActions {
	clear:both;
}

.noRelatedFiles {
	float: right;
    margin: 32px 0;
    width: 49%;
}

.reportActions {
	width:89px;
}

.no-js {
	th.reportId,
	td.reportId {
		width:50px;
		display:table-cell;
	}
}

.js {
	.reportId {
		display:none;
	}
}

/* =============================================================================
   Paging
   ========================================================================== */
.paging {
	width:auto;
	display:block;
	margin:0 0 20px;
	overflow:hidden;
	text-align:center;
	position:relative;
	padding:0 198px 0 167px;
	height:26px;

	.pagingInfo {
		display:block;
		margin:8px auto 0;
		
		p {
			margin:0;
		}
	}

	.pagingControls {
		position:absolute;
		right:0;
		top:0;
	}

	ul {
		position:absolute;
		display:block;
		list-style:none;
		padding:0;
		margin:0;
		left:0;
		top:0;

		li {
			float:left;
			

			&.active a {
				background:#5f97eb;
				border-color:#5f97eb;
				color:#fff;
				@include box-shadow(none);
			}
		}
	}

	span,
	a {
		@extend .lightButton;
		float:left;
		margin:0 3px;

		&:hover {
			text-decoration:none;
		}
	}
}

/* =============================================================================
   Modules
   ========================================================================== */

.module {
	@extend .clearfix;
	position:relative;

	&.box {

		background:#f6f6f6;
		@include border-radius(3px);
		padding:10px;	
	}

	.moduleActions {
		display:none;
		position:absolute;
		top:10px;
		right:10px;
	}

	/*&:hover .moduleActions {
		display:block;
	}*/
}

.moduleGroup {
	@extend .grid;
}

/* =============================================================================
   Tabs
   ========================================================================== */

.tabs fieldset {
	margin:0;

	ul {
		border-top:none;
		margin:0;
		padding:0;

		li:first-child {
			padding-top:0;
		}
	}
}


.tabs {

	margin:0 0 20px;
	@extend .clearfix;

	.ui-tabs-nav {
		list-style:none;
		padding:0 5px;
		margin:0;
		position:relative;
		top:1px;
		border:none;
		border-bottom:1px solid #D6D6D6;
		@extend .clearfix;

		li {
			float:left;
			top:1px;
			position:relative;
			border-bottom:none;
			background:#fff;
			border:1px solid #d6d6d6;
			border-bottom-color:#f9f9f9;		
			margin-right:3px;
			@include border-top-radius(3px);

			&.ui-state-active,
			&.active {
				border-bottom-color:#fff;
				
				a {
					color:#606B73;
					background:#fff;
				}
			}

			&.ui-state-hover {
				a {
					color:#ED6104;
				}
			}
		}

		a {
			display:block;
			text-decoration:none;
			padding:4px 8px;
			color:#828c93;
			font-size:1.167em;
			background:#f9f9f9;
			@include border-top-radius(3px);
			outline:0;
		}
	}

	fieldset,
	> div {
		display:none;
		@include border-radius(3px);
		@include border-top-left-radius(0);
		border:none;
		padding:20px 0;
		background:none;

		h4 {
			display:none;
		}
	}

	.active {
		display:block;
	}
}

.tabs.vertical {
	
	> ul {
		float:left;

		li {
			float:none;
			left:1px;
			top:0;
			position:relative;
			border:1px solid #e2e2e2;
			border-right:none;
			background:#f1f1f1;
			margin-bottom:3px;
			margin-right:0;
			@include border-left-radius(3px);
			@include border-top-radius(0);
			width:80px;

			&.active {
				border-right:1px solid #fff;
				background:#fff;

				a {
					color:#606B73;
				}
			}
		}
	}

	> div {
		margin-left:82px;
		min-height:40px;
	}
}

/* =============================================================================
   Dark Bar
   ========================================================================== */

.darkBar {
	/*background: #373c45 inline-image('/structure/darkBar.png') top left repeat-x; 
	background: -moz-linear-gradient(top, #767a83 0%, #5b6069 50%, #50555e 50%, #373c45 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#767a83), color-stop(54%,#5b6069), color-stop(54%,#50555e), color-stop(100%,#373c45)); 
	background: -webkit-linear-gradient(top, #767a83 0%,#5b6069 50%,#50555e 50%,#373c45 100%); 
	background: -o-linear-gradient(top, #767a83 0%,#5b6069 50%,#50555e 50%,#373c45 100%); 
	background: -ms-linear-gradient(top, #767a83 0%,#5b6069 50%,#50555e 50%,#373c45 100%); 
	background: linear-gradient(top, #767a83 0%,#5b6069 50%,#50555e 50%,#373c45 100%); */

	background: #606060; /* Old browsers */
	background: -moz-linear-gradient(top, #606060 0%, #333333 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606060), color-stop(100%,#333333)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #606060 0%,#333333 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #606060 0%,#333333 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #606060 0%,#333333 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#606060', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #606060 0%,#333333 100%); /* W3C */

	padding:8px 10px;
	margin:0;

	border:1px solid #272727;
	border-left:none;
	border-right:none;
	@include box-shadow(#9b9ea5 0 1px 0 0 inset);

	@extend .clearfix;
	
}

/* =============================================================================
   Buttons
   ========================================================================== */

form {
	button,
	input[type=submit] {
		background:#ed6104;
		border:none;
		padding:10px 20px;
		margin:0 auto;
		display:block;
		text-align:center;
		font-size:1.5em !important;
		font-weight:bold;
		color:#fff;
		@include border-radius(3px);
		cursor:pointer;

		&:hover {
			@include box-shadow(0 2px 6px 0 rgba(0,0,0,0.2) inset);
		}

		&:active {
			@include box-shadow(0 2px 6px 0 rgba(0,0,0,0.5) inset);
		}
	}
}

.lightButton {
	padding:4px 6px;
	background:#efefef;
	border:1px solid #dadee1;
	@include border-radius(3px);
	@include box-shadow(0 1px 0 #fff inset);
	display:block;

	&:hover {
		background:#5f97eb;
		border-color:#5f97eb;
		color:#fff;
		@include box-shadow(none);
		text-decoration:none;

		&.disabled {
			background:#efefef;
			border-color:#dadee1;
			color:inherit;
			@include box-shadow(0 1px 0 #fff inset);
		}
	}

	&:active {
		@include box-shadow(0 2px 6px 0 rgba(0,0,0,0.5) inset);
		text-decoration:none;
	}

	a, a.btn, .btn, button, input[type=submit], input[type=button], input[type=reset] {
		@extend .lightButton;
	}
}

.darkButton {
	
	display:block;
	padding:4px 9px;
	@include border-radius(3px);
	color:#e3e3e4 !important;
	text-shadow:0 -1px 0 #000;
	text-decoration:none;

	background: #353940 inline-image('/structure/darkBarBtn.png') top left repeat-x; /* Old browsers */
	background: -moz-linear-gradient(top, #787c82 0%, #54585f 45%, #4f535a 55%, #40444b 55%, #353940 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#787c82), color-stop(45%,#54585f), color-stop(55%,#4f535a), color-stop(55%,#40444b), color-stop(100%,#353940)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #787c82 0%,#54585f 45%,#4f535a 55%,#40444b 55%,#353940 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #787c82 0%,#54585f 45%,#4f535a 55%,#40444b 55%,#353940 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #787c82 0%,#54585f 45%,#4f535a 55%,#40444b 55%,#353940 100%); /* IE10+ */
	background: linear-gradient(top, #787c82 0%,#54585f 45%,#4f535a 55%,#40444b 55%,#353940 100%); /* W3C */

	@include box-shadow(0 1px 0 0 rgba(255,255,255,0.27) inset, 0 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 0 0 rgba(255,255,255,0.14));

	border:1px solid #030303;

	&:hover {
		background: #575a60 inline-image('/structure/darkBarBtnHover.png') top left repeat-x; /* Old browsers */
		background: -moz-linear-gradient(top, #8f9297 0%, #74777c 41%, #6d7076 55%, #606469 55%, #575a60 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8f9297), color-stop(41%,#74777c), color-stop(55%,#6d7076), color-stop(55%,#606469), color-stop(100%,#575a60)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #8f9297 0%,#74777c 41%,#6d7076 55%,#606469 55%,#575a60 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #8f9297 0%,#74777c 41%,#6d7076 55%,#606469 55%,#575a60 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #8f9297 0%,#74777c 41%,#6d7076 55%,#606469 55%,#575a60 100%); /* IE10+ */
		background: linear-gradient(top, #8f9297 0%,#74777c 41%,#6d7076 55%,#606469 55%,#575a60 100%); /* W3C */
		color:#fff;
	}

	&:active {
		@include box-shadow(0 2px 6px 0 rgba(0,0,0,0.5) inset);
		text-decoration:none;
	}

	&.negativeAction:hover {
		background:#c81010;
	}

	&.positiveAction:hover {
		background:#75a53c;
	}

	a, a.btn, .btn, button, input[type=submit], input[type=button], input[type=reset] {
		@extend .darkButton;
	}
	
}

.lightButtons {
	a, a.btn, .btn, button, input[type=submit], input[type=button], input[type=reset] {
		@extend .lightButton;
	}
}
.darkButtons {
	a, a.btn, .btn, button, input[type=submit], input[type=button], input[type=reset] {
		@extend .darkButton;
	}
}



.buttonSet {
	margin:0;
	padding:0;
	list-style:none;
	font-size:1.167em;
	@extend .clearfix;

	.ie7 &,
	.ie8 & {
		border-right:1px solid;
	}

	li {
		float:left;

		a {
			@include border-radius(0px);
			border-right-width:0;
		}

		&:first-child {
			a {
				@include border-left-radius(3px);
			}
		}

		&:last-child {
			a {
				@include border-right-radius(3px);
				border-right-width:1px;
			}
		}
	}
}

button,
input[type=submit],
.btn {
	display:inline-block !important;

	.ie6 &,
	.ie7 & {
		display:inline !important;
		zoom:1;
	}

	&:hover {
		text-decoration:none;
	}
}

.buttonsAlignLeft {
	float:left;
}

.buttonsAlignRight {
	float:right;
}


/* =============================================================================
   Sprite Icons
   ========================================================================== */

@include all-icons-sprites;
.icons {
	display:block;
}

@include all-sections-sprites;


/* =============================================================================
   helper classes
   ========================================================================== */
.thickBorder {
	padding:8px;
	@include border-radius(5px);
	background:rgba(0,0,0,0.11);

	.ie7 & {
		zoom:1;
	}

	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c000000, endColorstr=#1c000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1c000000, endColorstr=#1c000000)";
}

.help {
	background:#fdfebd;
	@include border-radius(3px);
	padding:5px;
	@include box-shadow(0 1px 1px 0 rgba(0,0,0,0.2));
}

.important {
	@extend help;
	font-size:2em !important;
}

/* For image replacement */
.ir { 
	display: block; 
	border: 0; 
	text-indent: -9999em; 
	overflow: hidden; 
	background-color: transparent; 
	background-repeat: no-repeat; 
	text-align: left; 
	direction: ltr; 
}
.ir br { display: none; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display: none;
    visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
    visibility: hidden
}
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both
}
.clearfix {
    zoom: 1
}

.module {
	margin-bottom:15px;
}

.activatedPanel {
	margin-left:0 !important;
}

.disabled {
	@include opacity(.3);
	cursor:normal;
}

/* hide from no js browsers */
.no-js {

	.saveActions {
		display:none;
	}

}

@import 'media-queries.scss';
@import 'print.scss';