@import "style_common.css";

div#printOnly
{
	display : none;
}

/* BODY ------------------------------------------------------------ */

body
{
	background  : url(./images/stylesheets/wayward/wallpaper5.png); 
}

body, td
{
	color        : #2c2622; /* base font colour */
}

/* DIV PARTS ------------------------------------------------------- */

#wrapper /* wraps all and forms the 'magazine' */
{
	width  : 1000px;
	border : 4px solid #19140b;
	margin : 25px auto;
}

#banner /* top banner */
{
	width      : 100%;
	height     : 141px;
	background : url(./images/stylesheets/wayward/header.png);
}

#social /* soc icons site to the left of the main menu */	
{
	float  : left; 
	margin : 9px 0 0 17px;
}

#menu /* main menu under the banner */
{
	width       : 100%;
	height      : 50px;
	background  : url(./images/stylesheets/wayward/menubg.png);
}

#lowerwrapper /* wraps the sidebar, main content and footer into a common box for background */
{
	background  : url(./images/stylesheets/wayward/paper_repeat.png) top left repeat-x;
	padding-top : 10px; /* lower down from menu */
	width       : 100%; 
}

#lowerwrapperbg /* to give lower section solid colour background when the PNG runs out */
{
	background : url(./images/stylesheets/wayward/bg_tile.png);
	width      : 100%; 
}

/* lowerwrapper contents ...>> */
		
		#main 
		{
			float         : left;
			width         : 750px;
			border-left   : 2px solid #461e06; /* articles/main breaker border */	
			margin        : 5px 10px 5px 0px; 
			padding       : 10px 10px 15px 20px; 
			border-radius : 20px; /* curve the breaker border with CSS3 */
		}
	
		#sidebar
		{
			float           : left;
			margin          : 5px 0px 5px 10px;
			padding         : 0px 0px 0px 5px;
			width           : 170px;
			font-size       : 12px;
		}
		
		#adverts
		{
			margin-top : 60px;
		}

		#footer
		{
			width      : 100%; 
			height     : 100px;
			clear      : both;
			background : url(./images/stylesheets/wayward/footer_bg.png);
		}

/* SCREEN ONLY TYPOGRAPHY ------------------------------------------ */

#main h2.withGraphic, #main h3.withGraphic /* for long articles add a breaker decorative above the H2 */
{
	background  : url(./images/stylesheets/wayward/breaker2.png) no-repeat center top;
	padding     : 40px 0 0 0;
}

/* FONT STACKS ----------------------------------------------------- */

#mainmenu, #sidebar, #articles, h1, h2, h3
{
	font-family  : "Century Gothic", "Gil Sans", "Lucida Grande", Verdana, sans-serif;
}

#sidebar, #articles, h1, h2
{
	color: #2c2622;
}

div#crumbs
{
	font-family  : "Helvetica", "Arial", sans-serif; 
}

body, td
{
	font-family  : "Gil Sans Regular", "Baskerville", "Times New Roman", serif;
	font-size: 1em;
	line-height : 1.4;
}

/* FOOTER DESIGN --------------------------------------------------- */

#footertext
{
	padding-top : 25px;
	text-align  : center;
	width       : 100%;
}

#footer p
{
	margin-top : 5px;
}

#footer, #footer a, #footer a:active, #footer a:visited
{
	color       : #c7bfb3;
}

/* MAIN MENU -------------------------------------------------------- */

#social a
{
	text-decoration: none;
}

#mainmenu a, #mainmenu a:visited #mainmenu a:active, #mainmenu
{
	color           : #f4ece1;
	text-decoration : none;
}

#mainmenu a:hover, #mainmenu li.selected /* hover effect */
{
	border-bottom : 1px solid #f4ece1;
}

#mainmenu
{
	text-align      : center;
	text-transform  : uppercase; 
	font-size       : 14px;
	padding         : 17px 0;
}

#mainmenu li
{
	display     : inline;
	margin      : 0 8px;
}

/* SUBMENU SPECIFIC ------------ */

#articles ul
{
	list-style   : none;
	font-size    : 130%;
	font-variant : small-caps;
}

#articles ul li
{
	padding : 7px 2px 7px 0px;
}

#articles li.selected
{
	padding-left  : 25px;
	background    : url(./images/stylesheets/wayward/menuHand.png) left no-repeat;
	border-bottom : 2px solid #461e06;	
}

/* LINKS -------------------------------------------------------- */

a.ext  
{
	padding-right : 10px;
	background    : transparent url("images/aoutside.gif") center right no-repeat;
}

#main a, #main a:visited, #main a:active, #articles a, #articles a:active, #articles a:visited
{
	color           : #880907;
	text-decoration : none;
}

#main a:hover, #articles a:hover
{
	color           : #c73d3b;	
}