/** ----------------------------------------------------------
 *
 * Contains the main layout of the page and the individual styles.
 * Acts as the main stylesheet for theme.
 *
 *		Include your notes or table of contents below....
 *		Include color hex's or values of your grid
 *
 *		1. OOCSS GRID
 *		2. MAIN LAYOUT
 *		3. HEADER
 *			- Brand
 *			- Search Form
 *		4. Navigation
 *			- Primary Navigation
 *			- tablet Navigation
 *			- Secondary Navigation
 *			- Secondary Nav 2-5 Levels deep
 *		5. Mixed
 *		6. Footer
 *		7. Page Specific Layout
 *			- Homepage
 *			- Search Results
 *		8. Device and Responsive Layout
 *			- Breakpoint 960px
 *			- Breakpoint 640px
 *				- Search Form
 *				- Main Content
 *		9. Print Styles
 *			- Simple Theme custom print styles
 *
 * @author Your Name <email@silverstripe.com>
 * ------------------------------------------------------- */

/* OOCSS Grid
* https://github.com/stubbornella/oocss/wiki/grids
*/

.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
.lastUnit {
	overflow:hidden;
	*overflow:visible;
	*zoom:1;
/*	padding:0 10px; */
}
.unit { /* unit - Base class which divides a line into sections (columns). */
	float:left;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
	float:right;
}

/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. 
The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */

.size1of1 {
	float:none;
}
.size1of2 {
	width:50%;
}
.size1of3 {
	width:33.33333%;
}
.size2of3 {
	width:66.66666%;
}
.size1of4 {
	width:25%;
}
.size3of4 {
	width:75%;
}
.size1of5 {
	width:20%;
}
.size2of5 {
	width:40%;
}
.size3of5 {
	width:60%;
}
.size4of5 {
	width:80%;
}
.lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */
	float:none;
	width:auto;
	_position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters. 
	meaning that anything prefixed with _ wouldn't be picked up by any other browsers */
	_left:-3px;
	_margin-right:-3px;
}

/* MAIN LAYOUT */
body {
    margin: 0;
    background: #ecf0df;
    min-width: 240px; 
    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
}
	.ie7 body,
	.ie8 body {
	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
	}
	.main {
	    background: #ecf0df;
	    min-height: 300px;
	}
	.inner {
	    max-width: 1100px;
	    margin: 0 auto;
	    padding: 0 30px;
		background: #fff;
	}
	.ie6 .inner {
	    width: 960px;
	}
	.no-sidebar .content-container {
	    float: left;
	    width:100%; /* makes content container full width when there is no sidebar */
	}
	.no-sidebar .sidebar {
		display: none;
	}
	

/* HEADER */
.header {
	background-color:#ecf0df;
	width:100%;
}
	.header .inner { 
		margin-top:50px;
		background-color:#fff;
	}		
		
		
/* NAVIGATION */
	/* Primary navigation */
	.primary {	
		background: #ecf0df;
		float:left;
		clear:both;
		width:100%;
		margin-bottom:25px;
	}
	.primary ul {
		float:left;
	}	
	.primary li {
		float:left;		
	}
	.primary li a {
	    color: #333;
		font-weight:bold;
		float:left;		
		padding:15px 15px 10px 15px;
		text-transform:uppercase;
	}
	.primary li a:hover {
	    color: #000;
		background-color: #d5d9ca;
		border-bottom:5px solid #d5d9ca;
	}
	.primary li.section a,
	.primary li.current a {
	    color: #000;
		border-bottom:5px solid orange;
	}
	
	#ftp-button {
		color: #333;
		font-weight:bold;
		float:right;		
		padding:15px 15px 10px 15px;
		text-transform:uppercase;
	}
	#ftp-button:hover {
		color: #000;
		background-color: #d5d9ca;
		border-bottom:5px solid #d5d9ca;
	}


	/* Souls Template Changes */	
	.background-image {
		position:relative;
		z-index:1;
		width:100%;
		margin-bottom:30px;
	}	
	.background-image.smell {
		background-image:url('images/home-flower-background.jpg');
		min-height:732px;
	}
	.background-image.see {
		background-image:url('images/whatwedo-arm-background.jpg');
		background-repeat:no-repeat;
		color:#fff;
		min-height:855px;
		background-color:#000;
	}	
	.background-image.touch {
		background-image:url('images/aboutus-leg-background.jpg');
		color:#fff;
		min-height:732px;
	}		
	.background-image.touch-large {
		background-image:url('images/aboutus-leg-background-large.jpg');
		background-repeat:no-repeat;
		background-color:#000;
		color:#fff;
		min-height:1000px;
	}		
	.sidebar {
		position:relative;
		z-index:2 !important;
		width:100% !important;
	}	
	.content-container {
		width:100% !important;
		float:left;
	}
	.image-overlay {
		margin-top:40px;
		padding:40px;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		background: rgb(244, 236, 204); /* The Fallback */
		background: rgba(244, 236, 204, 0.8);
		min-height:410px;
	}
	.content-padding {
		padding:40px;
	}
	#service-logo {
		background-image:url('images/service-printers-logo.png');
		float:left;
		width:368px;
		height:26px;
		margin-bottom:20px;
		margin-top:35px;
	}
	#service-icon {
		background-image:url('images/service-printers-icon.png');
		float:right;
		width:63px;
		height:40px;
		margin-top:25px;
		margin-bottom:20px;
	}
	#client-slider {
		float:left;
		width:132px;
		height:180px;
		padding:5px;
		background-color:#fff;
		margin-bottom:20px;
	}	
	.footer {
		display:none !important;
	}		
	#testimonial-links a {
		color:#000;
		text-transform: uppercase;
		font-size:22px;
	}
	#testimonial-links a:hover {
		border-bottom:0px;
	}
	.red-links {
		margin-top:10px;
		float:left;
		padding:15px;
		color:#fff !important;
		background-color:#B80000;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}
	
	.magnific {
		margin-bottom:30px !important;
	}
	
	.red-links:hover {
		border-bottom:0px !important;
		background-color:#c80000;
	}
	#staff-right, #staff-left  {
		margin-top:30px;
		margin:0px; padding:0px;
		float:left;
		width:250px;
	}
	#staff-left li, #staff-right li {
		list-style-type:none !important;
		margin-top:18px;
	}
	.staff-profile-lightbox {	
		margin:0 auto;
		padding:40px;
		width:700px;
		min-height:350px;
		background-color:#fff;	
	}
	.staff-profile-lightbox h2 {
		font-size:24px;
		margin-bottom:10px;
	}
	.staff-profile-lightbox p {
		margin-bottom:10px;
	}
	.staff-profile-image {
		float:left;
		margin-bottom:70px;
		margin-right:20px;
	}
	.logout-link {
		padding:5px 17px 6px 17px;
		color:#fff !important;
		background-color:#B80000;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		position:relative;
		top:-3px;
		margin-left:364px;
	}
	.logout-link:hover {
		border-bottom:0px !important;
		background-color:#c80000;
	}
	.misc-link-btn {
		padding:5px 17px 6px 17px;
		color:#fff !important;
		background-color:#B80000;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		position:relative;
		top:-3px;
	}
	.misc-link-btn:hover {
		border-bottom:0px !important;
		background-color:#c80000;
	}
	#upload-page  {
		padding:40px;
		float:left;
		background-color:#eee;
		margin-bottom:30px;
		width:100%;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}
	#client-files {
		clear:both;
		float:left;
		background-color:#fff;
		padding:45px;
		border: 1px solid #D4D4D4;
	}
	.ss-uploadfield-item-preview.ss-uploadfield-dropzone.ui-corner-all {
		padding:0px 35px 0px 35px;
	}	
	.ss-uploadfield .ss-uploadfield-item {
		width:100%;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}	
	.ss-gridfield-table {
		width:100%;
	}
	.ss-gridfield-table .main {
		background-color:#eee !important;
	}	
	#action_SetOrderTitle, #action_SetOrderCreated{
		font-weight:bold;
		margin:0px !important;
		padding:10px 25px 10px 25px !important;
		background-color:#D7D7D7;
		margin-top:3px !important;
		margin-bottom:3px !important;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
	}
	#action_SetOrderTitle:hover, #action_SetOrderCreated:hover{
		background-color:#ccc;
	}
	.ss-gridfield-table .gridfield-button-delete {
		margin:4px;
		background-image:url('images/cross.png');
		height:16px;
		width:16px;
		padding:0px;
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		background-color:#fff;
	}	
	.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name {
		padding-top:8px;
	}
	.ss-gridfield-button-filter.trigger {
		display:none;
	}
	.typography table td, .typography table th {
	}
	.bottom-all {
		background-color:#eee !important;
	}
	.col-StripThumbnail {
		padding-top:11px !important;
		padding-bottom:5px !important;
	}	
	.ss-uploadfield-edit-iframe {
		background-color:#fff;
	}	
	.CompositeField.composite.cms-file-info-preview.nolabel {
		padding:40px;
		text-align:center;
		background-color:#eee;
	}	
	#MemberLoginForm_LoginForm {
		background-color:#eee !important;
		padding:40px !important;
		width:400px;
		margin-bottom:30px;
	}
	#MemberLoginForm_LoginForm_Email {
		background-color:#fff !important;
		border:1px solid #ccc !important;
	}
	#MemberLoginForm_LoginForm_Password {
		background-color:#fff !important;
		border:1px solid #ccc !important;
	}
	#MemberLoginForm_LoginForm_action_dologin {
		background-color:#8ECB36;
		color:#fff;
		padding:16px 30px 13px 30px;
	}
	#MemberLoginForm_LoginForm_Remember {
		position:relative;
		top:3px;
	}			
	.owl-wrapper a:hover {
		border:0px !important;
	}
	#slider-container {
	}
	#slider-container img {
		background-color:#fff;
		padding:5px;
		padding-top:10px;
		padding-bottom:10px;
		max-width:100%;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
	}
	.magnific:hover {
		border-bottom:0px !important;
	}
	.client-profile-lightbox {	
		margin:0 auto;
		padding:40px;
		width:700px;
		min-height:280px;
		background-color:#fff;	
	}
	.client-profile-lightbox h2 {
		font-size:24px;
		margin-bottom:10px;
	}
	.client-profile-lightbox p {
		margin-bottom:10px;
	}
	.client-image {
		float:left;
		margin-bottom:70px;
		margin-right:20px;
	}	
	#showcase-carousel {
		float:left;
		width:1100px;
		height:180px;
		background-color:#fff;
		color:#000;
		padding:20px;
		padding-left:0px;
		padding-right:0px;
	}			
	.showcase-slide-lightbox {
		margin:0 auto;
		padding:30px;
		background-color:#fff;
		width:616px;
		margin-top:30px;
		margin-bottom:30px;
	}
	.showcase-slide-lightbox img {
		float:left;
		margin-bottom:20px;
	}
	.slide-desc {
		width:616px;
	}
	
	
	
	

	/* Secondary navigation */	
	
	.main .secondary h3 {
		display:none;
	}	
	.main .secondary {
		padding:30px;
		padding-top:20px;
		margin-bottom:65px;
	}
		.main .secondary ul {
		    padding: 0;
		    margin: 0;
		}
		.main .secondary ul li {
		    list-style-type: none;
			float:left;
			margin-right:30px;
		}		
		.main .secondary li .arrow {
			display:none;
		}					
		.main .secondary li a { /* side nav link styling */	
			color:#fff;
		    padding: 12px;
		    display: block;
		    text-transform: uppercase;
		    letter-spacing: 2px;
		    border-bottom: none;
		}
		.main .secondary li .text {
		    display: block;
		}
		.main .secondary li.current a.current {
			color: #000;
			background-color: #fff;
		}
		.main .secondary li.section,
		.main .secondary li.current {
		    background-color: #F3F3F3;
		}
			.main .secondary li.section a,
			.main .secondary li.current a {
			    color: #000;
			}			
			
			
			
		/* Secondary navigation 2-5 levels deep */
		.main .secondary ul ul {		
			float:left;
			position:absolute;
			z-index:50;
			display: block;
			background-color: #ddd;
		}		
		
		.main .secondary ul ul li {		
			float:left !important;
			margin-right:0px !important;	
			border:0px !important;	
			margin:0px !important;	
		}
		
		.main .secondary ul ul li a {
			background-color:none !important;	
			border-bottom:0px !important;	
			border-right:1px solid #ccc;
			border-top:1px solid #ccc;
		}		
		.secondary li.current {
			background-color:#000 !important;
			color:#000;
		}		
		.secondary li.current ul ul {
			display: block; 
		}
		.main .secondary li a:hover,
		.main .secondary li.section a:hover,
		.main .secondary li.current a:hover {
			background-color: #fff;
			color:#000;
		}			
		
		#mobile-logo {
			display:none;
		}

		.slicknav_menu {
			display:none;
		}		
		
		.magnific img {
			margin-bottom:20px !important;
		}
		
		.selectnav { display: none; }

		
@media only screen and (max-width: 1160px) {
	.header .inner { 
		margin-top:0px;
	}		
	.background-image {
		margin-bottom:10px;
	}
}
@media only screen and (max-width: 960px) {
	.unit.size1of5.unitRightv {
		display:none;
	}
	.size3of5 {
		width:80%;
	}
	body {
		background-color:#fff !important;
	}
}
@media only screen and (max-width: 860px) {
	.size3of5 {
		width:92%;
	}			
}
@media only screen and (max-width: 770px) { 
	.primary {
		display:none;
	}	
	.main .secondary li a  {
		display: none;
	}	
	.slicknav_menu {
		display:block;	
	}
	.selectnav { 
		display: block;
		width:100%;
		padding:15px;
	}
	.background-image.see {
		min-height:1150px;
	}	
}
@media only screen and (max-width: 700px) { 
	.background-image.touch {
		background-image:none;
		color:#000 !important;
	}
	.staff-profile-lightbox {
		width:100%;
		box-sizing:border-box;
		padding:5%;
	}
	.client-profile-lightbox {
		width:100%;
		box-sizing:border-box;
		padding:5%;
	}
}
@media only screen and (max-width: 620px) {
	.content-padding {
		padding:5%;
		color:#000 !important;
	}
	.background-image {
		background-image:none !important;
		min-height:0px !important;
		background-color:#fff !important;
	}
	.size3of5 {
		width:100%;
	}
	.image-overlay {
		margin-top:0px;
		padding:5%;
		background-color:#fff;
	}	

}
@media only screen and (max-width: 530px) {
	#service-icon {
		display:none;
	}
	#service-logo {
		display:none;
	}
	#mobile-logo {
		margin-top:15px;
		display:block;
		width:100%;
		text-align:center;
	}
	#mobile-logo img {
		max-width:100%;
	}
	.action  {
		width:100% !important;	
	}		
	.staff-profile-lightbox p, .staff-profile-lightbox h2, .client-profile-lightbox p, .client-profile-lightbox h2  {
		clear:both;
	}
}
@media only screen and (max-width: 440px) {
	.inner  {
		padding:0px;
	}
	.image-overlay {
		background-color:#fff;
	}
	.red-links {
		width:100%;
		box-sizing:border-box;
	}
}