/* Custom theme by Choc Chip */

// Grid & Layout
.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {
	float: left;
	margin-right: 20px;
}

.span-1 { width: 60px; }
.span-2 { width: 140px; }
.span-3 { width: 220px; }
.span-4 { width: 300px; }
.span-5 { width: 380px; }
.span-6 { width: 460px; }
.span-7 { width: 540px; }
.span-8 { width: 620px; }
.span-9 { width: 700px; }
.span-10 { width: 780px; }
.span-11 { width: 860px; }
.span-12 { margin-right: 0; width: 940px; }

.last { margin-right: 0; }

@spacing: 20px;

// Colour
@color1: #f6efb9; //Yellow
@color2: #f9f4f1; // Grey
@color3: #000;
@color4: #ad5027; // Brown
@color5: #7B3B3B; // Dark Brown
@color6: #FFF;

@font1: omnes-pro, sans-serif;

// Mixins
.border-radius(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

.box-shadow (@x: 0 2px 4px rgba(0, 0, 0, 0.75)) {
	-moz-box-shadow: @x;
	-webkit-box-shadow: @x;
	box-shadow: @x;
}

.transition (@time: .2s) {
	-moz-transition: @time;
	-webkit-transition: @time;
	transition: @time;
}


/* Global HTML Elements */

body {
	background-color: #f4f4f4;
	color: @color3;
	font-family: @font1;
	font-size: 16px;
	line-height: 1.3em;
}

header > .wrap, article, .region-content-bottom, footer > .wrap, footer .wrap {
	margin: 0 auto;
	position: relative;
	width: 980px;
}

h1, h2, h3, h4 {
	color: @color3;
	font-family: @font1;
	font-weight: normal;
	line-height: 1.3em;
	
	* {
		color: @color4;
		text-decoration: none;
	}
}

h1 {
	color: @color3;
	font-size: 46px;
	line-height: 1.5em;
	overflow: hidden;
	margin-top:0px;
	margin-bottom:0px;
	padding-bottom:0px;
}

h2 {
	font-size: 28px;
	margin-bottom: @spacing;
}

h3 {
	font-size: 18px;
	margin-bottom: 20px;
}

h4 {
	font-size: 16px;
}

ul, ol {
	margin: 0 0 @spacing @spacing;
	
	li {
		margin: 0 0 5px;
	}
}

dl {
	
	dd {
		margin-bottom: 20px;
	}
}

p {
	margin-bottom: @spacing;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

a {
	color: @color5;
	text-decoration: underline;
	.transition;
	
	&:hover {
		text-decoration: none;
	}
	
	&:visited {
		color: @color5 - #111;
	}
}

small {
	font-size: 14px;
}

form {
	
	label {
		color: @color3;
		font-size: 14px;
		font-weight: normal;
	}
	
	input {
		
		&[type="checkbox"] {
			float: left;
			margin: 5px 5px 10px 0;
		}
	
		&[type="text"], &[type="password"] {
			border: 1px solid @color2;
			font-size: 14px;
			margin-bottom: 10px;
			padding: 5px;
			
			&:hover {
				border-color: @color2 - #111;
			}
		}
		
		&[type="submit"] {
			background: @color5;
			border: none;
			.border-radius;
			.box-shadow;
			color: @color1;
			cursor: pointer;
			font-size: 16px;
			font-weight: bold;
			margin-top: 10px;
			padding: 10px 20px;
			.transition;
			
			&:hover {
				background-color: @color5 + #111;
			}
			
			&:active {
				.box-shadow(none);
			}
		}
	}
	
	select {
		padding: 2px;
	}
	
	textarea {
		border: 1px solid @color2;
		font-size: 14px;
		margin-bottom: 10px;
		min-height: 100px;
		padding: 3px 5px;
		width: 100%;
		
		&:hover {
			border-color: @color2 - #111;
		}
	}
}

table {
	width: 100%;
	
	thead, tfoot {
		background: @color2;
	}
	
	tbody {
		background: @color1;
		
		tr:nth-child(even) {
			
			th, td {
				background: @color1 - #111;
			}
		}
	}
	
	th, td {
		padding: 10px;
	}
	
	th {
		font-weight: bold;
	}
}

iframe {
	z-index: 0;
}

del, strike { /* 'strike' is deprecated, remove as soon as ckeditor replaces it with 'del' */
	text-decoration: line-through;
}

ins {
	font-weight: bold;
}


/* Page Elements */

header {
	overflow: hidden;
	
	.wrap {
		background: @color1;

		#headerclearfix {
			clear:both;
		}

		#header-top {
			height:165px;
			float:right;
			
			h1 a {
				color: @color3;
				border:none;
				display: block;
				margin-top:40px;
				margin-bottom:0px;
				padding-bottom:10px;
				padding-right:@spacing;
				text-decoration: none;
				
				:hover {
					color: @color4;	
				}
			}
		
			h2{
				color: @color3;
				float: right;
				padding-right:@spacing;
			}
		}
			
		#logo {
			float: left;
			margin: 14px 40px 0 0;
			
			&:hover {
				opacity: 0.8;
			}
			
			&:active {
				opacity: 1;
			}
		}

		nav {
			float: right;
			margin-top: 0px;
			padding-top: 5px;
			width:100%;
			height:25px;
			background: @color4;
		
			ul {
				float: right;	
			}
			
			li {
				display: inline-block;
				margin-right: @spacing;
				*display: inline;
			
				a {
					color: @color2;
					font-family: Georgia, 'Times New Roman', serif;
				font-weight: normal;
					padding: 8px 0 10px;
					text-decoration: none;
					
					&:hover {
						color: @color1;
						text-decoration: none;
					}
					
					&.active {
						color: @color2;
					}
				}
			}
		}
		
		.block-search {
			background: url(../images/search.png) no-repeat;
			float: right;
			margin-top: 18px;
			width: 251px;
		}
	}
}
	

#content {
	clear: both;
	background-repeat:repeat;
	clear:both;
	margin:0px;
	
	#wrap {
		background: transparent url(../images/tile.jpg);
		margin: 0 auto;	
		padding: 0 20px;
		width: 940px;
	}
	
	article {
		padding: @spacing 0;
		width: 940px;
				
		#clearfix{
			clear:both;
		}
		#fish{
			background-image: url(../images/fish.png);
			display:block;
			height:396px;
			margin: 40px auto 0;
			width: 334px;
		}
		#webform-fish{
			background-image: url(../images/fish.png);
			display:block;
			float: left;
			height:396px;
			margin: 40px 0 0 140px;
			width: 334px;
		}		
		#right-content{
			margin-top:40px;
			width:300px;
			margin-left: @spacing;
			float:left;
			background-color:@color1;
			padding: @spacing;
			opacity:0.9;
			border-style:solid;
			border-color:#a09a9a;
			border-width:1px;
			a:visited, a:hover, a:active, a{
				color:@color3;
				text-decoration:none;
				font-weight:normal;
			}
			textarea{
				resize:none;
			}
		}
		#webform-right-content{
			margin-top:40px;
			width:300px;
			margin-left: 40px;
			float:left;
			background-color:@color1;
			padding: @spacing;
			opacity:0.9;
			border-style:solid;
			border-color:#a09a9a;
			border-width:1px;
			a:visited, a:hover, a:active, a{
				color:@color3;
				text-decoration:none;
				font-weight:normal;
			}
			textarea{
				resize:none;
			}
		}
		ul.tabs {
			background: #000;
			border: 1px dashed @color3;
			.border-radius;
			font-size: 12px;
			right: 0;
			padding: 5px;
			position: absolute;
			top: 10px;
			z-index: 500;
			
			li {
				padding: 10px 0;
			
				a {
					background: none;
					color: #fff;
					border: none;
					padding: 5px;
					
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
		
		#block-system-main {
			background: none;
			.border-radius(0);
			.box-shadow(none);
		}
		
		.block {
			background: @color3 url(../images/box-bg.png) repeat-x;
			.border-radius;
			.box-shadow;
			overflow: hidden;
		}
		
		.facebook-comments {
			margin-top: @spacing;
		}
		
		.views-row {
			background-color:@color1;
			margin-bottom:20px;
			margin-left:80px;
			margin-right:80px;
			margin-top:40px;
			padding-top:@spacing;
			padding-left:@spacing;
			padding-right:@spacing;
			padding-bottom:0px;
			border-style:solid;
			border-width:1px;
			border-color:#a09a9a;
			opacity:0.9;
			
			.field-type-image{
				width:220px;
				float:right;
				padding:0px;
				margin:0px;
			}
			.field-type-text-with-summary{
				width:530px;
				float:left;
			}
		}
	}
}

// align specific page right boxes
.front #content article #right-content{
	margin-left: 50px;
	margin-top: 95px;
}

.page-node-6 #content article #right-content{
	margin-left: 50px;
	margin-top: 95px;
	
	h2 {
		text-align: center;
	}
}

// Blog styles 

.page-blog {
	#post-meta-text {
		display: block;
		font-size: 12px;
		line-height: 32px;
		margin: 0 0 10px 0;
	}

	h2 {
		font-size: 32px;
		margin-bottom: 0;	
	}
	
	.views-row {
		margin: 20px auto!important;
		padding: 20px;
		position: relative;
		width: 66%;	
	}
	
	.edit-link {
		.border-radius(5px);
		background: @color3;
		color: @color6;
		display: block;
		font-size: 12px;
		padding: 5px;
		position: absolute;
		right: 5px;
		text-decoration: none;	
		top: 5px;
		
		:hover {
			text-decoration: underline;	
		}
	}
	
	.facebook-comments {
		background: @color1;
		padding: @spacing 0;
		
		h2 {
			margin-bottom: 10px;	
		}		
	}
}

// Content type: full page (has an id of extract, used for styling) 

#extract {
	background-color:@color1;
	border: 1px solid #a09a9a;
	margin: 20px auto;
	opacity:0.9;
	padding: 0 20px;
	width: 66%;
	
	h2 {
		text-align: center;	
	}
	
	.centered {
		font-style: italic;
		text-align: center;	
	}
	
	.indented {
		margin-left: 20px;
		text-indent: -20px;
	}
}

// Contact Page styles

.page-node-3 {
	#email {
		display: block;
		margin: 10px 0;	
	}
}

footer {
	clear: both;
	margin: 0px;
	
	.footerblock{
		width: 490px;
		height: 170px;
		background-color: @color1;
		margin-bottom: @spacing;
		overflow: hidden;		
		
		.blockfooterimage {
			clear: left;
			float: left;
			margin: -23px @spacing @spacing 0px;
		}		
	}
	
	.right, .left {		

		h3 {
			margin-bottom: 0;
		}

		.blockfooterimage { 
			padding: 0;
		}
		
		p {
			display: block;
		}
	}
	
	#footerclearfix{
		clear:both;
	}
	.wrap {
		margin-top:0px;
		background-color:@color4;
		#first{
			margin-left:130px;
		}
		#fine-print {
			#theteam{
				margin-top:@spacing;
				font-size: 20px;
			}
			
			a:visited, a:active, a{
				color:@color3;
				text-decoration:none;
				font-weight:normal;
			}
			
			a:hover {
				text-decoration: underline;	
			}
			
			p {
				float:right;
				font-size: 12px;
				margin-right:130px;
				margin-bottom:0px;
				display: inline-block;
				padding:0px;
				zoom: 1;
				*display: inline;
			}
		}
	}
}

// Social links in footer
.social-icons-list {
	float: left;
	list-style: none;
	margin: 0;
	padding: @spacing;

	li {
		display: inline-block;
		margin-right: 25px;
	}

	img {
		display: block;
		float: left;
		margin-right: 10px;
	}

	// Span around link text
	span {
		color: @color6;
		display: block;
		float: left;
		line-height: 39px;
	}

	a:hover span {
		text-decoration: underline;
	}
}

/* Misc */

// Clearfix utility class
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.fbConnectWidgetFooter {
	display: none!important;
	border-bottom: 1px solid #CCC;	
}

// Where to buy page
.buy-book-section {
	clear: left;
	margin-bottom: @spacing;

	h3 {
		PADDING-top: 35px;
	}
}

.buy-cover {
	display: block;
	float: left;
	margin-right: 20px;
}

// Brian image - Bottom of where to buy page
#brian {
	margin-left: 160px;
}

// Shae block
#block-block-2 {
	.shae-title {
		float: left;
		margin-left: 124px;
		margin-top: 15px;
		text-align: right;
	}
}

.shae-img {
	float: right;
	margin-right: 103px;
}


#buy-now-btn {
	.border-radius(10px);
	.box-shadow(0 0 6px rgba(0, 0, 0, 0.7));
	background: @color4 url('../images/btn-gradient.jpg') top left repeat-x;
	color: @color1!important;
	float: right;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 900;
	line-height: 45px;
	margin-bottom: 5px;
	padding: 5px 20px;
	text-decoration: underline!important;
	
	:hover {
	background: @color4 + #111;	
	}
}

.separator {
	border-bottom: 1px dashed @color3;
	clear: both;
	margin-bottom: @spacing;
}

.clear {
	clear: both;
}

.shadow {
	.box-shadow(0 0 2px rgba(0, 0, 0, .75));
}

ul.inline {
	margin-left: 0;
	
	li {
		padding: 0;
	}
}

.field-type-image {
	margin-bottom: @spacing;
}

.left {
	float: left;
	
	&.inset {
		margin-right: @spacing;
	}
}

.right {
	float: right;
	
	&.inset {
		margin-left: @spacing;
	}
}

// Set Typekit fonts to hidden while loading
.wf-loading {
	visibility: hidden;
}

// Set Typekit fonts to visible when they have loaded (this technique hides the ugly flash of unstyled text)
.wf-active {
	visibility: visible;
}

/* Hide heading text while TypeKit fonts are loading */

.wf-loading {
    // /* Hide titles while web fonts are loading */
   h1, h2, h3, h4 {
       visibility: hidden;
    }
}

.form-item, .form-actions {
	margin: 0 0 @spacing 0;
}