/*
Theme Name: Akroyd Wallis
Theme URI: http://www.akroyd-wallis.co.uk/
Description: The default Akroyd|Wallis theme and colours.
Version: 0.0.0.2
Author: Nick Wallis
Author URI: http://www.akroyd-wallis.co.uk/
Tags: blue, fixed width, ems, XHTML
*/

/*******************************************************************************
** $Id: style-screen.css 87 2010-10-07 21:41:17Z nick $
**
** NOTE: In this theme the terminology used does not relate to the Wordpress 
** concept of page and post.
**
** A page refers to a webpage, irrespective of whether it is a Wordpress page, 
** post, or collection of posts.
**
** An article is an individual story, irrespective of whether it is a Wordpress 
** page or post.
**
** -----------------------------------------------------------------------------
** Colour Summary
**
** Pantone 292c : 78b3e0
** Pantone 286c : 005da4
** Pantone 656c	: dbded6
** Pantone 127c	: f0e07d
** Pantone 5435c: abb8c2
** Pantone 5245c: 8599a8
** Pantone 8201c: 617a8a
** Pantone 5405c: 45637a
**
** -----------------------------------------------------------------------------
** Font Summary
** Frutiger Linotype is the default font
** Logo is Garamond
** Monospace is Courier New
**
** Sizing is in ems and is based on the article 'How to Size Text in CSS' by Richard Rutter
** [http://www.alistapart.com/articles/howtosizetextincss/]
** Font sizes:
**  1.375em = 20px
**  1.125em = 18px
**  1em = 16px
**  0.75em = 12px
**  0.6875em = 11px
**  0.625em = 10px
** 
*******************************************************************************/

body {
	background-color: #eee;
	background:url('http://www.akroyd-wallis.co.uk/gradient.jpg') repeat-x ;
	color: black;
	font-size:100%;
	font-family: 'Frutiger Linotype', Segoe, Corbel, Calibri, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:1.25em; /* 20/16px = 1.5em */
	padding: 0.5em;
	width:60em;
	margin: 0.5em auto 0.5em auto;
}
.wrapper, #content {
	background:white;
	width:60em;
	border:1px solid #abb8c2;
}

p, 
li {
	font-size:0.875em; /* 14px */
	margin: 1.286em 0;
}

h1	{
	font-size:1.375em; /* 20px */
	line-height:1.375em; /* 36px */
}

h2	{
	font-size:1.125em; /* 18px */
}

h3,h4,h5,h6	{
	font-size:1.0em;
}

h1,h2,h3	{
	font-weight:bold;
}

h4,h5 {
	font-weight:normal;
	font-style:italic;
}

h6 {
	font-weight:lighter;
}

/* 
** fonts
 */
code, pre, tt, sup   {
	font-family: 'Courier New', Courier, monospace;
	font-weight: normal;
}

/* 
** borders
*/
h1.page-title	{
	background: #78b3e0;
	color: white;
	border: 2px solid #78b3e0;
	text-align:center;
	margin: 0;
	font-weight:normal;
}

h1{
	border-bottom: 2px solid #78b3e0;
}

h1, h2 {
	margin:0.5em 0;
	clear:both;
}

h2, h3, h4, h5, h6 {
	border:none;
}


/*
** tables
** Tables are centered on the page.
** Rather than give the table a font size use contextual selectors to target the
** th and td elements within.

*/
table	{
	border-collapse:collapse;
	clear:left;
	margin-left:auto;
	margin-right:auto;
}

th	{
	font-weight:bold;
	font-size: 1em; /* 16 px */
	padding: 0 0.643em 0.571em 0.643em; /* 0.643*14=9px, 0.571*14=8px */  
	border-bottom:1px solid #78b3e0;
	border-top:1px solid #78b3e0;
}

td	{
	font-size: 1em; /* 16px */
	padding:0.333em 0.75em 0.417em 0.75em; /* 12*0.333=4px 12*0.75=9px 12x0.417=5px */
	line-height: 1em; /* 12x1=12px */ 
	border-bottom:1px solid #dbded6;
}

/*
** Hyperlinks
** Make active links really stand out when using the TAB key to move around 
** the page.
*/
a {
	color: #005da4;
	text-decoration: none;
	border: 1px solid white;
	border-bottom: 1px solid #78b3e0;
}

a:hover, a:active, a:focus {
	color: black;
	background: #f0e07d;
	border: 1px solid #8599a8;
}

a:visited {
	color: black;
	text-decoration: none;
}

a:active, a:focus {
	border: 1px solid #78b3e0;
}

a img {
	border: none;
}

blockquote	{
	background-color: #78b3e0;
	color: black;
	text-align:left;
	display: block;
	padding: 1em 1em 0.5em 1em;
	width: 33em;
}

blockquote:before, blockquote:after {
	color: #fa6336;
	display: block;
	width: 50px;
	font-size: 3em;
}

blockquote:before {
	content:open-quote;
	height: 0;
	margin-top: 0em;
	margin-left: -0.45em;
}
blockquote:after {
	content: close-quote;
	height: 50px;
	margin-top: -1.5em;
	margin-left: 11em;
}

/*
** Classes and specific regions
*/

/*
** text alignment
*/
.caption	{
	text-align:center;
	color: #45637a;
}

/*
** Image classes
*/
.thumbnail,
.portrait  {
	float:left;
	text-align:center;
	font-size: 0.6875em; /* 11px */
	margin: 0em 0.5em 0em 0em;
}

.aligncenter	{
	text-align:center;
}

img.thumbnail,
img.portrait,
img.white {
	border:1px solid black;
}

.thumbnail .caption,
.portrait .caption {
	color: black;
	font-weight:normal;
}

/* 
** Announcements and box outs
** Blue boxes with black text, box-outs to the right of the content.
** The white border ensures that if displayed next to a header the header border 
** does not run into the box.
*/
.announcement, 
.box-out	{
	background-color: #78b3e0;
	color: black;
	margin: 0.5em 0;
	padding:0.5em;
}

.box-out	{
	border-left: 0.5em solid white;
	width:20em;
	float:right;
}

.announcement h2, 
.box-out h2, 
.box-out h3, 
.box-out h4, 
.box-out h5, 
.box-out h6 {
	border:none;
	padding-top: 0;
	margin-top:0.25em;
}

.announcement h2,
.box-out h2 {
	border-bottom:1px solid white;
}

.announcement h2,
.box-out h2 {
	font-size:1.0em; /* 16 px */
}

.announcement h3,
.announcement h4,
.announcement h5,
.announcement h6,
.box-out h3,
.box-out h4,
.box-out h5,
.box-out h6	{
	font-size:0.875em /*14px*/;
}



.announcement a, 
.announcement a:visited,
.box-out a, 
.box-out a:visited  {
	color:white;
	border: 1px solid #78b3e0;
	border-bottom: 1px solid white;
	font-weight:bold;
}

.announcement a:hover,
.announcement a:active,
.announcement a:focus,
.box-out a:hover,
.box-out a:active,
.box-out a:focus {
	color: black;
	background: #f0e07d;
	border: 1px solid #8599a8;
}

.announcement a:visited,
.box-out a:visited {
	color: black;
	text-decoration: none;
}

.announcement a:active,
.announcement a:focus,
.box-out a:active,
.box-out a:focus {
	border: 1px solid white;
}

/* 
** Horizontal rules are hidden on screen, but will display in print media.
*/
hr	{
	visibility:hidden;
	height: 0px;
	margin:0;
	padding:0;
	border:0;
}

#content{
	float:left;
}


/* 
** Sidebar panel is to the right of the main content, so does not need to be positioned absolutely.
*/ 
#sidebar  {
	margin: 0;
	font-size:0.75em; /* 11 px */
	text-align:left;
	width:20em;
	float:right;
	clear:right;
	padding:0.5em;
}

#articles   {
	padding: 0.5em;
	margin:0;
	width: 43em;
	border-right:1px dotted #abb8c2;
	float:left;
	clear:none;
}

#footer {
	font-size: 0.75em;
	line-height: 0.625em;
	text-align:center;
	clear:both;
	border-top:1px dotted #abb8c2;
}

/*
** Although the logo is a link don't use borders as a cue, just background
** colour changes.
** Only the named logo region should be larger, all other logo classes just use the font.
*/
.logo {
	padding: 0.25em;
	clear:both;
	font-family: Garamond, Georgia, serif;
	font-weight:normal;
	border:none;
}

#logo   {
	padding:0.25em;
	margin: 0;
	font-size:3em;
	float:left;
}

header-image {
	float:right;
	margin:0;
	padding:0;
}

.logo a {
	border:0;
	padding:0.25em;
}

.bar {
	color:#78b3e0;
}

.icon {
	border:0;
}