// Layout.less is the main file to contain all project specific styling. The only other file you would expect to change is project-mixins.less.

//	----------------------------------------
//	Imports
//	----------------------------------------

@import 'reset.less'; // standard resets
@import 'modules.less'; // legacy
@import 'generic-mixins.less'; // standard mixins library sourced from the interwebs
@import 'project-mixins.less'; // specific complex mixins developed for this project


/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

/*							  GLOBAL SETTINGS
						:: page specific CSS styling ::
					   :: think before you class-ify ::
						
/*========================================================================*/
/*========================================================================*/
/*========================================================================*/



//	----------------------------------------
//	Colour Variables
//	----------------------------------------

@light-gray:#dadada;
@dark-gray:#8c8a8b;
@red:#e4001b;
@blue:#00306e;
@white:#fff;
@off-white:#efefef;

//	----------------------------------------
//	Font Definitions
//	----------------------------------------

.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: @size;
	font-weight: @weight;
	line-height: @lineheight;
}
.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
	font-family: 'Rockwell W01 Light', "Georgia", Times New Roman, Times, sans-serif;
	font-size: @size;
	font-weight: @weight;
	line-height: @lineheight;
}
.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
	font-family: "Monaco", Courier New, monospace;
	font-size: @size;
	font-weight: @weight;
	line-height: @lineheight;
}


//	----------------------------------------
//	Link Styles
//	----------------------------------------


a {
	&:link {color:@blue;}
	&:visited {color:@blue;}
	&:hover {color:darken(@blue,10%);}
	&:active {color:darken(@blue,10%);}
}

.linkred {
	a {
		&:link {color:@red;}
		&:visited {color:@red;}
		&:hover {color:darken(@red,10%);}
		&:active {color:darken(@red,10%);}
	}
}

.linkwhite {
	a {
		&:link {color:@white;}
		&:visited {color:@white;}
		&:hover {color:darken(@off-white,10%);}
		&:active {color:darken(@off-white,10%);}
	}
}

.linkgray {
	a {
		&:link {color:@dark-gray;}
		&:visited {color:@dark-gray;}
		&:hover {color:@red;}
		&:active {color:@red;}
	}	
}

//	----------------------------------------
//	Body Typography
//	----------------------------------------

body {
	.serif(normal,15px,1.3);
	color:#444; 
	*font-size:small;
}

//	----------------------------------------
//	Headings
//	----------------------------------------

h1, .h1, h1 a, .h1 a {font-size:26px; color:@red;}
h2, .h2, h2 a, .h2 a  {font-size:18px; color:@red;}
h3, .h3, h3 a, .h3 a  {font-size:16px; color:@red;}
h4, .h4, h4 a, .h4 a  {font-size:14px; color:@red;}
h5, .h5, h5 a, .h5 a  {font-size:12px; color:@red;}
h6, .h6, h6 a, .h6 a  {font-size:12px; color:@red;}

h1,h2,h3,h4,h5,h6 {line-height:1.4em; margin-bottom: 0.3em; font-weight:normal;}


//	----------------------------------------
//	Spacing
//	----------------------------------------

li {margin-left:30px;}

p,dl,hr,ol,ul,pre,table,address,fieldset {margin-bottom:20px;}


//	----------------------------------------
//	Photo Floats
//	----------------------------------------

.floatright {
	float: right; 
	margin-left: 10px; 
	margin-bottom: 10px;
}
.floatleft {
	float: left; 
	margin-right: 10px; 
	margin-bottom: 10px;}
	
.float, .floatnone {margin-bottom: 10px;}

.image-caption {font-size: 10px; font-weight: bold; margin-top: 5px;}

//	----------------------------------------
//	Paragraphs, Quotes and Lists
//	----------------------------------------


p {margin-bottom:1em;}
blockquote {
	.serif(normal,1.2em,1.3em);
	padding-left:10px; 
	border-left: 4px solid #ccc;
	}
	
blockquote cite {font-size:.9em;}



	
/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

/*				       Modules
			Global objects that are common to all projects.
			
			1. Navigational Menus
			2. Breadcrumbs
			3. Blocks (set-off regions - think sidebar in mag)
			4. Buttons
			5. Pullquotes
			6. Lists (styled)
			
			7. Seach block
			8. 
			
			4. Slideshows
			5. Tables
			6. Forms
			8. Miscellaneous project specific modules
			
		   :: think before you class-ify ::
						
/*========================================================================*/
/*========================================================================*/
/*========================================================================*/



//	----------------------------------------
//	Breadcrumb
//	----------------------------------------

#breadcrumb {
	margin-bottom:20px; 
	font-size:12px; 
	padding-top:5px; 
	padding-bottom:5px; 
	border-top:1px dotted @dark-gray; 
	border-bottom:1px dotted @dark-gray; 
	font-weight:bold; 
	color:@dark-gray;
}
#breadcrumb a {color:@dark-gray;}


//	----------------------------------------
//	Feed items
//	----------------------------------------

.feeditem {
	
	.date {
		color:@red;
		text-transform:uppercase;
		font-weight:bold;
	}
	
	.linkgray;	
}

//	----------------------------------------
//	Buttons
//	----------------------------------------
	

.more {
	position:absolute;
	bottom:-10px;
	.inline-button;

}

.read-more {
	.inline-button;
}

//	----------------------------------------
//	Pagination
//	----------------------------------------

.pagination {
	.horizlist-reset;
	.display-center;
			
	li {
		margin-left:10px;
		&:first-child {margin-left:0}
	}
	
}

//	----------------------------------------
//	Downloads block
//	----------------------------------------
	
.downloads {background:@light-gray; padding:2px;}

	
	
//	----------------------------------------
//	Media Block
//	----------------------------------------

.media {position:relative; margin-bottom:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}

.mb20 {margin-bottom:20px;}

.downloads .media {margin-bottom:0px;}
.downloads .media a {display: block;}

/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

/*						Global Page Templating
						Regions
						* Body wrap
						* Header
						* Footer
						
						
/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

//	----------------------------------------
//	Wrap
//	----------------------------------------

body {
	/*#gradient > .vertical(#EFEFEF, #FFF);*/
	
	background:url('/default/theme/images/gradient_bg.jpg') no-repeat fixed;
}

#wrap {}

//	----------------------------------------
//	Header
//	----------------------------------------

#header {
	padding: 15px 0px 15px 0px;
	
	.search-box {
		padding-top: 90px;
		
		input.text-input {
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size:12px;
		}
		
		input.submit {
			font-size:12px;
			.button(@red,@white,0 1px 1px rgba(255,255,255,.75),12px,2px,3px);
			text-decoration:none;
			color:white;
			padding: 12px;
			border: 0px;
			height: 25px;
			line-height: 0pt;
			top: 0px;
		}
	}
}
.search-inner {
	.search-input {
		padding: 2px;
		font-size: 10pt;
	}
}
.results {
	.bold {
		font-weight: bold;
	}
	.list {
	border-bottom: 1px dotted #8C8A8B;
	margin-bottom: 15px;
	padding-bottom: 5px;
	}
	.url {
		padding-top: 5px;
		font-size: 9pt;
	}
	#pagination div {
		margin: 0px 3px 0px 3px;
		border: 1px solid #8C8A8B;
		padding: 5px 10px 5px 10px;
		display: inline;
	}
	#pagination div.current {
		background-color: #DADADA;
	}
}
//	----------------------------------------
//	Sidebar
//	----------------------------------------

#sidebar {}


//	----------------------------------------
//	Global Header Nav
//	----------------------------------------
	
	#global {
		background:@red;
		position:relative;
		height:12px;
		
		.links {
			position:absolute;
			right:100px;
			width:700px;
			height:40px;
			background:url('/default/theme/images/global_header.png') no-repeat;
			.horizlist-reset;
			
			li {
				color:@off-white;

			}
			a {
				font-size:12px;
				.button(@red,@white,0 1px 1px rgba(255,255,255,.75),12px,2px,3px);
				text-decoration:none;
				color:white;
				padding:4px;
			}
			
			input.submit {
				font-size:12px;
				.button(@red,@white,0 1px 1px rgba(255,255,255,.75),12px,2px,3px);
				text-decoration:none;
				color:white;
				padding:4px;
			}
			
			li.link1 {
				position:absolute;
				left:110px;
				top:3px;
				
			}
			
			li.link2 {
					position:absolute;
					left:420px;
					top:5px;
					
				a {
					.button(@dark-gray,@white,0 1px 1px rgba(255,255,255,.75),12px,2px,3px);
					
				}
			}
		}
	}
	
//	----------------------------------------
//	Global Footer Nav
//	----------------------------------------

#global-footer {
	background:@red;
	padding-top:10px;
	height:30px;
	background:url('/default/theme/images/footer_bg.png') no-repeat 50% 0;
}

.footer-nav {
	padding-top:0px;
	padding-left:40px;
	color:@white;
	text-align:center;
	
	.linkwhite;
	
}

//	----------------------------------------
//	Primary Nav
//	----------------------------------------

#nav {}

/*** SKIN ***/

.sf-menu {margin-bottom:10px; .clearfix;}
.sf-menu {background:@light-gray;}
.sf-menu a {padding: 11px 11px; text-decoration:none;}

.sf-menu a {font-size:18px; color:@red !important; }
.sf-menu li li a {font-size:14px; color:white !important;}

/*text colour*/
.sf-menu a,
.sf-menu a:visited {color: #FFF;} /* visited pseudo selector so IE6 applies text colour*/

/* lvl#1 background */
.sf-menu li {}


/* lvl#2 background */
.sf-menu li li {
	#translucent > .background(@dark-gray, 0.95);
}

/* lvl#3 background */
.sf-menu li li li {
	#translucent > .background(@dark-gray, 0.95);

	}

/* current and hoverstate background colours */ 
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu li.current
	{
	#translucent > .background(@dark-gray, 0.95);
	outline:0;}

/* current and hoverstate text colours */ 
.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu li.current > a, /*modern browsers only :( */
.sf-menu li li.current a,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {color: @red !important; outline:0;}


/* indicator */
.sf-sub-indicator {
/*	    background: url('/default/theme/images/down_arrow.png') no-repeat scroll 0 -110px transparent;*/
    background: url("/lib/js/superfish-1.4.8/images/arrows-ffffff.png") no-repeat scroll 0 -110px transparent;
    display: block;
    height: 10px;
    overflow: hidden;
    position: absolute;
    right: 7.5px;
    text-indent: -9999px;
    top: 15px;
    width: 10px;
}

//	----------------------------------------
//	Secondary Nav
//	----------------------------------------

.menu {

		.vertreset;
		
		// first level
		li {

			a {
				display:block; 
				padding:4px 10px;
				margin:2px 0;

				&:hover {
					background-color:@red;
					color:@white;
				}
			}
		
		}
		
		li.current {
			a {
				background-color:@red;
			}
			
		}
		
		// second level
		ul {
			li {
				a {
					padding-left:20px;
					font-size:0.8em;
				}
			}
		}



}


//	----------------------------------------
//	Footer
//	----------------------------------------


#footer {}
#footer .sponsors {text-align:center; margin-bottom: 10px;}
#footer .sponsors img{ margin-right: 20px; }

#footer, #footer .box {text-align: center;  padding: 10px; margin-bottom: 5px;}
#footer .copyright {background: #191919; color: #FFF; font-size: 11px;}
#footer .copyright a {color: #FFF;}




/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

/*						Page Templating
						
						Create page-specific blocks or styling.
						If you find reusable objects, rather package them
						and use them as global objects.
						
/*========================================================================*/
/*========================================================================*/
/*========================================================================*/



//	----------------------------------------
//	Home Page
//	----------------------------------------

	
#services-box {
	.block(@light-gray, @red, white);
	}
	
#training-box {
	.block(@light-gray, @red, white);
	}
	
#newsletter-box {
	.block(@light-gray, @red, white);
	margin-bottom:5px;
	}
	
#news-box {
	.block(@light-gray, @dark-gray, white);
	}
	
#info-box {
	.block(@light-gray, @dark-gray, white);
	}
	
#events-box {
	.block(@light-gray, @dark-gray, white);
	}

.section_nav {
	.block(@dark-gray, @light-gray, @red);
	color:#EFEFEF;
	.linkwhite;
}

.newsletter_input {
	width: 157px;
}

.newsletter_button {
	font-size:12px;
	.button(@red,@white,0 1px 1px rgba(255,255,255,.75),12px,2px,3px);
	text-decoration:none;
	color:white;
	padding: 12px;
	border: 0px;
	height: 25px;
	line-height: 0pt;
	top: 0px;
	margin-top: 5px;
}



//	----------------------------------------
//	News Index
//	----------------------------------------

.metatop {font-size:0.85em; font-weight:bold}


//	----------------------------------------
//	News Entry
//	----------------------------------------

.author {
	&:after {
		content: " | ";
	}
}

.news-share-box {
	float:right;
	padding-bottom: 10px;
	padding-left: 10px;
	.share-button {
		padding-bottom: 10px;
	}
}

//	----------------------------------------
//	Static
//	----------------------------------------

.info-box {
	width: 33%;
	float: right;
	border: 1px solid @dark-gray;
	margin-left: 10px;
	padding: 10px;
}

//	----------------------------------------
//	Columns
//	----------------------------------------


.grid {	
	.columnhelper(600px,4,10px,200px); /* width,columns,gutter,cell-height*/
	padding-top:10px;
	background:#EFEFEF;
	
	.media {
		background:@light-gray;
		.box-shadow(3px 3px 5px rgba(0,0,0,.25));
	}
	
}



//	----------------------------------------
//	Calendar
//	----------------------------------------

.featured {
	.columnhelper(690px,3,10px,230px);
	.block(@dark-gray, @light-gray, @red);
	.linkwhite;
	padding-bottom:10px; 
	margin-bottom:10px;
}
.cal-image {
	padding-top: 15px;
}
.eventlist {
	.block(@light-gray, @dark-gray, white);
	.clearfix;
	background:@light-gray; 
	padding-bottom:10px; 
}
.resourceslist {
	.block(@light-gray, @dark-gray, white);
	.clearfix;
	background:@light-gray; 
	padding-bottom:10px; 
}

.events-date-location {
	float: left;
	width: 60%;
}
.events-share-box {
	float: right;
	width: 39%;
	padding-bottom: 10px;
	padding-top: 10px;
	.share-button {
		float:left;
	}
}


//	----------------------------------------
//	resources
//	----------------------------------------

.resources-share-box {
	float:right;
	padding-bottom: 10px;
	.share-button {
		float:left;
	}
}
h2.featured-resource {
	color: #fff;
	font-size: 22px;
}

//	----------------------------------------
//	Gallery
//	----------------------------------------


/*
.promo_feed {margin-bottom:20px;}




#nav {position:relative;}
#primary-search {position: absolute; top: 1px; right: 2px;}
h1 {display: block; border-bottom: 3px solid #555;}

.date {font-size: 11px;
    font-style: italic;
    font-weight: bold;}
.date .author {font-weight: normal;}


.section_nav {margin-top: 3px;}
#sidebar {position: relative;}
.h4m_logo {}


.feature-entry {}
.feature-entry.alt {background: #FFFCF2;}

.download-hide {
  background: none repeat scroll 0 0 transparent !important;
  padding-left: 5px !important;
}


.feature-summary {margin: 0 0 0 0;}
ul.meta {margin-bottom: 0; margin-top: 5px;}

div.menu div {padding: 4px 10px;}



/*========================================================================*/
/*	BLOG / INDEX
/*========================================================================*/


/*========================================================================*/
/*	GALLERY / ALBUM
/*========================================================================*/
#gallery .pagination {text-align: center;}
#gallery .pagination .pages {margin: 0 auto; height: 25px; width: 72px;}
#gallery .pagination .pages li {padding: 0 5px;}




/* PROMO FEED */

/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

/*							PRINT AND OTHER MEDIA

/*========================================================================*/
/*========================================================================*/
/*========================================================================*/

/* 
 * print styles
 */
@media print {
	* { background: transparent !important; color: #444 !important; text-shadow: none !important; }

	a, a:visited { color: #444 !important; text-decoration: underline; }

	a:after { content: " (" attr(href) ")"; } 

	abbr:after { content: " (" attr(title) ")"; }

	.ir a:after { content: ""; }  /* Don't show links for images */

	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

	thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ 

	tr, img { page-break-inside: avoid; }

	@page { margin: 0.5cm; }

	p, h2, h3 { orphans: 3; widows: 3; }

	h2, h3{ page-break-after: avoid; }
}



/*
 * Media queries for responsive design
 */

@media all and (orientation:portrait) { 
  /* Style adjustments for portrait mode goes here */
  
}

@media all and (orientation:landscape) { 
  /* Style adjustments for landscape mode goes here */
  
}

/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)  
   Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
  
  
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
     j.mp/textsizeadjust 
  html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}