/* Start of CMSMS style sheet 'layout' */
/*
* Directory 1.0
* Layout Stylesheet
* Copyright 2012, The Company Warehouse
* www.thecompanywarehouse.co.uk
* 07/12/2012
*/

/* Table of Contents
==================================================
	
	#Icon Fonts
	#Site Styles
	#Navigation
	#Page Styles
	#Page Specific Styles
	#Media Queries */



/* #Site Styles
================================================== */
	.page-wrap { min-height: 100%; width: 100%; }
	.page { margin: 0 auto; overflow: visible; }


/* #Page Styles
================================================== */


	/* Header */
	.header { clear:both; width:100%; padding-top:20px; background-color:#5a5a5a; }

	/* Logo */
	#logo{text-align:left;}
	
	/* Search, Phone, Email */
	.searchbar, .phone, .email {margin-bottom:10px;}
	.searchbar, .phone, .email a, .email a:visited {text-align:right;color:#fff;font-size:14px;font-weight:700;}
	.phone img, .email img {vertical-align:middle;margin-left:10px;}
	.phone img {margin-left:13px;}
	/* Search in base.css under forms */
	.searchbar  label {display:none;}
	
	
	/* Nav */
	.nav {width:100%;background-color:#0a3e75;}


	/* Content */
	#main-content, #feature-content, #support-content {padding:20px 0;background-color:#fff;}


	/* ------------------------------------------- */
	/* Footer */
	#footer .container12 {padding:20px 0;}
	
	/* newsfeed 
	.container12 .twelve.columns.newsfeed{margin-top:20px;margin-bottom:20px;}*/
	/* liScroll styles */
	.tickercontainer { /* the outer div */
		height:18px;margin:0;padding:0;overflow:hidden;
		background-image:url('templates/default/icons/newsticker-icon.png');
		background-repeat:no-repeat;
		background-position:center left; 
	}
	.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
		position:relative;
		left:18px;
		top:0;
		overflow:hidden;
	}
	ul.newsticker { /* that's your list */
		position: relative;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	ul.newsticker li {
		float: left; /* important: display inline gives incorrect results when you check for elem's width */
		margin:0;
		padding: 0;
		border-right:1px solid #231f20;
		margin-right:20px;
		padding-right:20px;
		color:#231f20;
		font-size:12px;
	}
	ul.newsticker a {
		white-space: nowrap;
		padding: 0;
		color: #231f20;
		font-size:12px;
		margin: 0 30px;
		transition:color ease-in-out 0.3s;
	} 
	ul.newsticker a:hover,ul.newsticker a:focus, ul.newsticker a:active{color:#0066a8;text-decoration:none;}
	
	/* #company-details */
	#company-details {background-color:#5a5a5a;}
	
	#company-details li, #company-details li a {font-size:10px;line-height:10px;color:#fff;margin-bottom:10px;}
	#company-details li a, #company-details a:visited {text-decoration:underline;}

	#company-details .alpha {text-align:left;}
	#company-details .omega {text-align:right;}




/* #Page Specific Styles
================================================== */

	/* a) Home */
	#feature-content .container12 {position:relative;}

	.four.columns.banner {position:absolute;top:0;right:0;bottom:0;z-index:100;margin-right:20px;text-align:right;padding:20px 12px;background-color:rgba(255, 255, 255, .7);}
	.ie .four.columns.banner {background-color:#fff;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter:alpha(opacity=70);}
	.banner h1 {color:#0a3e75;}
	.banner p {font-size:16px;line-height:24px;}
	
	
	#support-images {padding:20px 0;background-color:#0066a8;}
	#support-images img{display:block;margin:0 auto;}
	#support-content .four.columns,
	#support-content .six.columns {text-align:center;height:175px;}
	#support-content .buttoncontainer{position:absolute;left:0;bottom:0;right:0;}
	#support-content .buttoncontainer a.button{margin:0 auto;}
	#support-content h2 {color:#0a3e75;}
	


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {

		/* a) Home */
		.banner h1 {font-size:18px;font-size:1.8rem;line-height:22px;}
		.banner p {font-size:12px;line-height:16px;}
		
		.footer-wrap { width: 768px; }

	}

/* Desktop screens */
@media only screen and (min-width: 960px) {
		 /* Content */
}

/* Most screens */
@media only screen and (min-width: 768px) {

		/* Search, Phone, Email */
		.searchbar, .phone, .email {text-align:right;}
 		.searchbar input[type="text"] {width:220px;}

		/* Footer */
		 #footer .omega {text-align:right;}
}





/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { 

 		/* Search, Phone, Email */
		.searchbar, .phone, .email {text-align:center;}
 		.searchbar input[type="text"] {width:100%;}

		 /* Logo */
		#logo {text-align:center;margin:20px 0;}


		/* Content */
		/* a) home page*/
		#feature-content {position:relative;overflow:visible;max-height:100%;}
 		#feature-content .container12 {position:relative;}
 		.four.columns.banner {position:relative;margin-right:0;padding:20px 0 0 0;border-bottom:2px solid #5fa6d5;}
		#support-images {display:none;}
		
		#support-content .four.columns,
		#support-content .six.columns{height:auto;}
		#support-content .buttoncontainer{position:relative;}


		/* Footer */
		#footer .alpha, #footer .omega {text-align:center;}




		/* Update footer padding to allow for multi line text */
		.footer-wrap { width: 420px; }
		.footer { padding-top: 20px; }

}






/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {


}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {


		/* Reduce font size */
		html { font-size: 57.5%; }

		/* Centrally align the logo */
		#logo { float:none; text-align:center; }

		.footer-wrap { width:300px; }

}
/* End of 'layout' */