/*
	WHAT IS THIS FILE?
	
	This file contains all the more advanced layout style properties, such as 
	widths, heights, spacing and positioning. If you want to change colours, 
	backgrounds and fonts, see simple.css. 
	*/




	
	/*
	|--------------------------------------------------------------------------
	| Wrapper
	|--------------------------------------------------------------------------
	
	This controls the styles for the wrapper div that
	contains all page elements, ie:
	<div id="wrapper">
	
	*/
	
	#wrapper {
		margin: 10px 15px 0 15px; /* 10px top, 15px right, 0px bottom, 15px left */
		min-width: 460px;
	}





	/*
	|--------------------------------------------------------------------------
	| Header
	|--------------------------------------------------------------------------
	*/

	#header {	
		
			/*  
			This controls the layout of <div id="header">
			If you change the image inside the header, 
			make sure you set the "height" property below
			to match the height of the new image
			
			See simple.css for colour properties
			*/
		
		position: relative;
		margin: 0 0 0 0; 
		overflow: hidden; 
	}
	

	#nav {
	
			/*  
			Layout properties for <ul id="nav"> 
			See simple.css for colour properties
			*/
	
		display: block;
		padding: 0 0 0 20px;
		list-style: none;
		clear: both;
		font-size: 1.3em;
		height: 2.8em;
	}
	
	#nav li {
		display: block;
		float: left;
		list-style: none;
		padding: 0;
	}
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Main
	|--------------------------------------------------------------------------
	|
	*/
	
	#main {
		position: relative;
		overflow: hidden;
	}
	
	#content {
		/* 
		Styles for the div thay wraps the main content, eg:
			<div id="content">
		*/
		padding: 1.5em 20em 20px 20px;
	}
	
	#content.full-width {
		/* 
		Adding a class of "full-width" to the #content div
		will use these styles, eg.
		<div id="content" class="full-width"> 
		*/
		padding-right: 20px;
	}
	
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Sidebar
	|--------------------------------------------------------------------------
	*/
	
	#sidebar {
	
		/*
		Styles for the sidebar wrapper, eg. 
		<ul id="sidebar">
		You can probably leave this as is
		*/
	
		width: 15em;
		padding: 6em 20px 0 0;
		float: right;
	}
	
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Image Alignment Classes
	|--------------------------------------------------------------------------

	These are used to align images (see the content page example)
	You shouldn't need to change these. 

	*/
	
	.align-right {
		float: right;
		margin: 0 0 1.5em 1em;
	}
	
	.align-left {
		float: left;
		margin: 0 1em 1em 0;
	}
	
	.align-centre {
		margin: 0 0 1.5em 0;
		text-align: center;
	}
	
	.caption {
		font-style: italic;
		text-align: center;
	}
	
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Widget Boxes
	|--------------------------------------------------------------------------
	
	Layout styles for widget boxes, ie <li class="widget">
	See simple.css for colour properties
	
	*/
	
	.widget {
		margin: 0 0 1em 0;
		list-style: none;
		padding: 0;
	}
	
	.widget-heading {
		padding: 15px 10px;
		font-size: 1em;
		margin: 0;
	}
	
	.widget-content {
		padding: 0px 10px 0 10px;
	}
	
	.photo-gallery {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	.photo-gallery li {
		float: none;
		display: inline;
		padding: 0;
	}
	
	.photo-gallery li img {
		padding: 0 1em 1em 0;
	}
	
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Footer
	|--------------------------------------------------------------------------
	
	Styles for <p id="footer">
	
	*/
	
	#footer {
		margin: 15px;
	}