/*----------------------------------------------------------------------------
[Structure stylesheet]

This stylesheet should only contain structure styles, i.e. header, content,
right column, side column, footer etc. All styles should be separated with a
heading.

Project:	    	Webstructure.NET
Version:	    	1.0.0 [http://semver.org/]
Primary use:		For use of styling the structure i.e. layout
Original Author: 	Qasim Alyas
Last change:		18/Mar/10 []
Last Assigned to:	Qasim Alyas

-----------------------------------------------------------------------------*/

/* Float enclosing for structural elements */
#mast_sleeve {
	height: 95px;
}
#mast_sleeve:after, #columns:after, .twocolumn:after, .section_twocolumn:after {
	content: ".";
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}

#wrapper {
	position: relative;
	width: 940px;
	margin: 0 auto;
	padding: 0 0 21px;
	background:#FFF;
}

#mast {
	padding-right: 10px;
	background:#4AACF0 url(/magazine/graphics/decoration/mast.bg.jpg) no-repeat top;
}
#attachments #mast {
	background-image: url(/magazine/graphics/decoration/attachment.mast.bg.jpg);
	height: 99px;
}

/* MAIN COLUMNS */
#columns {
	clear: both;
	width: 620px;
	margin-bottom: 42px;
	padding: 21px 0 0;
	min-height: 1px;
}
#attachments #columns {
	margin-bottom: 0;
}
#colwrapper {
	width: 100%;
}
#colmain, #content {
	float: left;
	width: 100%;
}
#content {
	float: right;
}

/* Ensure that changes here are reflected in padding for #columns */
#content_sleeve {
	background:#FFF;
}
#rightcolumn {
	float: right;
	width: 300px;
	margin-right: -320px;
	padding-left: 20px;
}

	.twocolumn:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
		.column1 {
			float: left;
			width: 300px;
		}
		.column2 {
			float: right;
			width: 300px;
		}

.section_twocolumn:after {
	content: ".";
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}
	.section_column1 {
		float: left;
		width: 300px;
		margin-bottom: 21px;
	}
	.section_column2 {
		float: left;
		width: 300px;
		margin: 0 0 0 20px;
		background-color: #FFF;
	}
		.section_column2 .column1, .section_column2 .column2 {
			float: none;
			width: auto;
		}

.twoCol #columns {
	padding-left: 0;
	width: 620px;
}

	.storytext {
		min-height: 1px;
		background-color: #FFF;
	}
		.storytextSleeve {
			background-color: #FFF;
		}
	/* Removes the border and padding */
	.storytextSleeve .colour1, .formbox .storytext, #StoryBlog .storytext {
		margin: 0;
		border: 0;
		padding: 0;
	}
/* =INDEX PAGE */
	#index .column1 .story_large, #index .column1 .story_small,
	#index .column2 .story_large, #index .column2 .story_small {
		margin-bottom: 0;
		border-bottom: 0;
		padding-bottom: 0;
	}
	#index .column1 .story_list, #index .column2 .story_list, #index .story_large .story_list, #index .spin_feed .story_list {
		margin-bottom: 0;
		border-bottom: 0;
		padding-bottom: 0;
	}

	/* =STORY, COMBINATION PAGE */
	#combination .section_column1 {
		margin: 0;
		border: 0;
		width: 300px;
		background-color: #FFF;
	}
	#story .storytext {
		margin: 0;
		border: 0;
		padding: 0;
		background-color: #FFF;
	}

/* =SECTION PAGE */
#section #pageIntroBlock {
	margin-bottom: 14px;
	background-color: #FFF;
}

/* =SECONDARY CONTENT */
#secondaryContent .column1, #secondaryContent .column2 {
	float: none;
	width: auto;
}

/* =PAGES and SUBNAV LAYOUT */
	.layoutContainer h2 {
		border-bottom:4px solid #7FC7E8;
		color:#27446E;
		font-size:1.077em;
		font-weight:bold;
		line-height:1.5;
		margin-bottom:14px;
		padding:0 0 3px;
	}
		.layoutContainer ul {
			margin-bottom:0;
			}
			.layoutContainer li {
				margin-bottom: 14px;
				padding:0;
				background: none;
			}
			.layoutContainer li:after {
				content: ".";
				visibility: hidden;
				height: 0;
				display: block;
				clear: both;
			}
				.layoutContainer li h2 {
					border:0;
					font-size:1.231em;
					font-weight:normal;
					line-height:1.25;
					margin: 0 20px 7px 0;
					padding:0;
				}
					.layoutContainer li h2 span {
						color:#666;
					}
						.layoutContainer li h2 a img {
							margin:-2px 20px 0 5px;
							position:absolute;
						}
				.layoutContainer li img {
					float: left;
					border-right: 10px solid #fff;
				}
				.layoutContainer li a:hover img {
					opacity:.5;
					filter:alpha(opacity=50);
				}
				.layoutContainer ul ul {
					font-size:1em;
					margin:14px 0 7px;
				}
					.layoutContainer li li {
						margin:0;
						padding: 0 0 7px 10px;
						background: url(/magazine/graphics/decoration/combiList.png) no-repeat 0 4px;
					}
			.layoutContainer li:after {
				content: ".";
				visibility: hidden;
				height: 0;
				display: block;
				clear: both;
			}
				.layoutContainer h3 {
					font-size:1.231em;
					font-weight:normal;
					line-height:1.25;
					margin: 0 20px 7px 0;
				}
					.layoutContainer h3 span {
						color:#666;
					}
						.layoutContainer h3 a img {
							margin:-2px 20px 0 5px;
							position:absolute;
						}
				.layoutContainer p {
					font-size:1em;
					margin-bottom: 7px;
					word-wrap: break-word;
				}
				.layoutContainer p.meta {
					font-size:.923em;
					font-style:italic;
					line-height:1.333;
					padding-top:7px;
				}
					.layoutContainer p.meta img {
						border:0;
						float:none;
						padding:1px 5px 0;
					}
				.layoutB li.alt, .layoutC li.alt {
					margin-left: 16px;
				}

/* Layout column list view */
.layoutContainer .columns:after {
	content: ".";
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}

/* Layout A */
.layoutA p.meta {
	padding:0;
}

/* Layout B - small inline view */
.layoutB li {
	display: inline-block;
	vertical-align: top;
	width: 300px;
}
	.layoutB li li {
		display: block;
		width: auto;
	}

/* Layout C - full grid view */
.layoutC h3,
.layoutC li h2 {
	font-size:1.538em;
	line-height:1.2;
	margin-bottom:0;
}
	.layoutC h3 span,
	.layoutC li h2 span {
		font-size:.65em;
		line-height:1.231;
	}
		.layoutC li {
			display: inline-block;
			vertical-align: top;
			width: 300px;
		}
			.layoutC p.meta {
				clear:both;
			}
				.layoutC li li {
					display: block;
					width: auto;
				}
				.layoutC ul li img {
					float: none;
					margin-right: 0;
					border-right: 0;
				}

/* Layout D - list standard view */
.layoutD {
	margin:0 0 14px;
}
	.layoutD ul li {
		margin-bottom:14px;
		padding: 0 0 0 10px;
		background: url(/magazine/graphics/decoration/combiList.png) no-repeat 0 4px;
	}
		.layoutD ul li h2,
		.layoutD ul li h3 {
			font-size: 1em;
			line-height:1.231;
			margin:0 20px 0 0;
		}
			.layoutD ul ul {
				margin:7px 0;
			}
				.layoutD li li {
					display:block;
					margin:0 0 7px;
				}

/* Layout E - list inline view */
.layoutE {
	margin:0 0 14px;
}
	.layoutE ul li {
		margin-bottom:14px;
		padding: 0 0 0 10px;
		background: url(/magazine/graphics/decoration/combiList.png) no-repeat 0 4px;
	}
		.layoutE ul li h2,
		.layoutE ul li h3 {
			font-size: 1em;
			line-height:1.231;
			margin:0 20px 0 0;
		}
			.layoutE ul ul {
				margin:7px 0;
			}
				.layoutE li li {
					margin:0 0 7px;
				}

/* Overrides */
.storytext .layoutContainer {
	border: 0;
	padding: 0;
	background-color: transparent;
	clear:both;
}