/*
Title:			Notebook
Description:	tommyogden.com styling for screen media
Author:			Tommy Ogden
Updated:		4 May 2009

Colour Palette:

	Red:		#7A0F0F
	Black		#131413
	White		#F5F5DA
	Orange		#B68173
	
	Grey		#272927
	Light Grey	#9BA39B
	Blue		#394CA8
	Brown		#735148

Grid: 

	80px by 48px with a 16px right margin.

/*


/* Body -------------------------- */

	body {
	
		background-position: 16px;
		background-color: #7a0f0f;
		background-image: url(images/red-noise.png);
	
		padding: 0px;
		margin: 0px;
		
		text-align: left;
		font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Lucida", "Bitstream Vera Sans", Verdana, sans-serif;
		font-size: 12px;
		color: white;
	
	}
	
	img {
	
		border:0;
	
	}
	
	hr {
	
		clear:both;
		visibility:hidden;
	
	}
	
	.clear {
	
		clear:both;
	
	}

	.centered, p.centered {
	
		text-align:center;
	
	}

	.right {
	
		text-align:right;

	}

	.alignright {
	
	float: right;
	
	}

	.alignleft {
	
	float: left
	
	}			
	
/* Page -------------------------- */

	#page {
	
		background: url(images/red-noise-gradient.png) 0px 0px repeat-x;
	
		width: 100%;
		min-width: 976px;
	
		padding-right: 0px;
		padding-left: 0px;
		
		float: left;
		
		text-align: left;
		
	}
	
/* Header ------------------------ */

	#header {
	
		background-repeat: no-repeat;
		background-position: 0px 140px;
		background-image: url(images/notebook-top.png);
	
		width: 864px;
		float: left;
		height: 192px;
	
		padding-left: 16px;
		margin-bottom: 0px;
		margin-top: 48px;
		
		text-indent: -9999px;
		
	}
	
	
/* Logo ----------- */	
	
	#logo {
	
		height: 48px;
		width: 224px;
	
		margin-left: 80px;
		margin-top: 0px;
	
		float: left;
	
		
	}
	
	#logo a:link, #logo a:visited {

		width: 296px;
		height: 48px;
		
		background-position: 0px 0px;
		background-image: url(images/logo.png);
		background-repeat: no-repeat;
	
		padding: 0px;
		margin: 0px;
	
		border-style: none;
	
		display: block;	
	
	}
	
	#logo a:hover {

		width: 296px;
		height: 48px;
	
		background-position: 0 -48px;
		background-image: url(images/logo.png);
		background-repeat: no-repeat;		
	
		display: block;
	
		padding: 0px;
		margin: 0px;
	
		border-style: none;
	
	}
	
	#logo h1 {
	
		/*text-indent: -9999px;*/
	
		margin: 0px;
	
	}
	
/* Nav ------------ */	
	
	#nav {
	
		margin-left: 80px;
		clear: left;
		float: left;
		width: 320px;
		height: 48px;


	}

	#nav ul {
	
		height: 48px;
		list-style: none;
		margin: 0;
		padding: 0;

	}
	
	#nav li {

		float: left;
		width: 64px;
		height: 48px;
		text-align: left;
		list-style-type: none;
		list-style-image: none;	
		margin-right: 16px;
		padding-left: 0px;
		padding-right: 0px;	
	
	}
	
	#nav li a
	
	{
	
		display: block;
		width: 64px;
		height: 48px;
		overflow: hidden;
		border: none;
		
	}

	
	li#notes a:link, li#notes a:visited {
	
		background-image: url(images/nav.png);
		background-position: 0px 0px;
	
	}

	li#notes a:hover, li#notes a:focus {
		
		background-image: url(images/nav.png);
		background-position:0px -96px !important;
	
	 }
	 
	li#stuff a:link, li#stuff a:visited {
	
		background-image: url(images/nav.png);
		background-position: -80px 0px;
	
	}

	li#stuff a:hover, li#stuff a:focus {
	
		background-image: url(images/nav.png);
		background-position: -80px -96px !important;
	
	}
	 

	li#about a:link, li#about a:visited {
	
		background-image: url(images/nav.png);
		background-position: -160px 0px;
	
	}

	li#about a:hover, li#about a:focus {
		
		background-image: url(images/nav.png);
		background-position: -160px -96px !important;
	
	}


	li#other a:link, li#other a:visited {
	
		background-image: url(images/nav.png);
		background-position: -240px 0px;
	
	}

	li#other a:hover, li#other a:focus {
	
		background-image: url(images/nav.png);
		background-position: -240px -96px !important;
	
	}

	body#page-notes li#notes a {
	
		background-position: 0px -48px;
	
	}
	
	body#page-stuff li#stuff a {
	
		background-position: -80px -48px;
	
	}
	
	body#page-about li#about a {
	
		background-position: -160px -48px;
	
	}
	
	body#page-other li#other a {
	
		background-position: -240px -48px;
	
	}

/* Content ----------------------- */

	#content {
			
		background-image: url(images/notebook-content.png);
		background-repeat: repeat-y;
	
		padding-top: 1px;
		padding-right: 0px;
		padding-left: 17px;
	
		width: 563px;
		color: #272927;
		float: left;
		
	}
	
	#content p {

		text-align: justify;
		font-size: 12px;
		line-height: 32px;
		
		padding-left: 8px;	
		padding-bottom: 16px;
		padding-right: 8px;
		padding-top: 0px;
	
		margin-bottom: 0px;
		margin-top: 0px;
		
	}
	
	#content p.footnote {
		
		text-align: justify;
		font-size: 10px;
		line-height: 32px;
		
		padding-left: 8px;	
		padding-bottom: 16px;
		padding-right: 8px;
		padding-top: 0px;
		
		margin-bottom: 0px;
		margin-top: 0px;
		
	}
	
	#content h1 {

		font-size: 20px;
		line-height: 32px;
	
		text-align: justify;
		font-style: normal;
		font-weight: normal;

		padding-left: 8px;
		padding-bottom: 16px;
		padding-right: 8px;
		padding-top: 16px;

		margin-bottom: 0px;
		margin-top: 0px;
		
	}
	
	#content h2 {

		color: #735148;
		text-transform: uppercase;
		font-size: 10px;
		line-height: 32px;

		border-top-style: none;
		border-top-width: 0px;

		padding-left: 8px;
		padding-bottom: 8px;
		padding-right: 8px;
		padding-top: 8px;

		margin-bottom: 0px;
		margin-top: 0px;
		margin-right: 100px;
		margin-left: 80px;
		
	}
	
	#content h3 {

		font-size: 20px;
		font-style: normal;
		font-weight: normal;
		line-height: 32px;
		
		padding-left: 8px;
		padding-bottom: 16px;
		padding-right: 8px;
		padding-top: 0px;
	
		margin-bottom: 0px;
		margin-top: 0px;
		
	}
	
	#content h4 {

		padding-left: 8px;
		padding-bottom: 0px;
		padding-right: 8px;
		padding-top: 0px;
	
		margin-bottom: 0px;
		margin-top: 0px;
	
		line-height: 32px;
		font-weight: bold;
		font-size: 14px;
		
	}
	
	#content h5 {
	
		line-height: 16px;
		padding: 0px;
		margin: 0px;
	}

	#content blockquote {
	
		padding-right: 16px;
		margin: 0px;
		padding-left: 16px;
		font-size: 12px;
		line-height: 32px;
		color: #735148;
	
	}

	#content .date {

		width: 48px;

		color: #735148;
		text-align: justify;
		line-height: 32px;
		font-size: 12px;
		font-style: normal;
		font-weight: normal;
	
		padding-left: 8px;
		padding-bottom: 0px;
		padding-right: 8px;
		padding-top: 0px;
	
		margin-bottom: 0px;
		margin-top: 0px;
			
		float: left;	
		
	}
	
	#content a:link, a:visited {
	
		color: #2F3E8A;
		text-decoration: none;

	}
	
	#content a:hover, a:focus {
	
		color: #735148;
		text-decoration: none;
		
		border-bottom: dashed #735148 1px;
	
	}
	
	.post {
		
		margin-right: 100px;
		margin-left: 80px;
		margin-bottom: 15px;
		
		border-bottom-color: #735148;
		border-bottom-style: dashed;
		border-bottom-width: 1px;
	}
	
	#content .box {

		text-align: justify;
		font-size: 12px;
		line-height: 32px;
	
		background-image: url(images/box.png);
		
		margin-right: 100px;
		margin-left: 80px;
		margin-bottom: 14px;
		margin-top: 0px;
		
		padding-left: 0px;
		padding-right: 8px;
		padding-top: 0px;
		
		border-color: #735148;
		border-right-width: 0px;
		border-left-width: 0px;
		border-bottom-width: 1px;
		border-bottom-style: dashed;
		border-top-style: dashed;
		border-top-width: 1px;
		
	}
	
	#content img.fullwidth {
	
		border-bottom-width: 1px;
		border-top-width: 1px;
		border-color: #735148;
		border-style: dashed;
	
		padding: 8px;
	
	}
	
	#content img.img-left {
	
		background-position: 8px 0px;
		background-image: url(images/box.png);
	
		border-bottom-width: 1px;
		border-top-width: 1px;
		border-color: #735148;
		border-style: dashed;	
		
		margin-left: 24px;
		margin-top: 16px;
		margin-bottom: 16px;
			
		padding: 8px;
	
		float: left;

	}
	
	#content img.img-left-caption {
	
		background-position: 8px 0px;	
		background-image: url(images/box.png);
	
		border-top-width: 1px;
		border-color: #735148;
		border-style: dashed;	
		
		margin-top: 16px;
		margin-bottom: 0px;
			
		padding: 8px;
	
		float: left;
	
	}
	
	#content span.caption {

		width: 352px;

		background-position: 8px 0px;
		background-image: url(images/box.png);
			
		font-size: 10px;
		color: #735148;
		text-align: left;
		
		margin-top: 0px;
		padding-left: 8px;
		padding-right: 8px;
		
		border-top-width: 0px;
		border-bottom-width: 1px;
		border-left-width: 0px;
		border-right-width: 0px;
		border-color: #735148;
		border-style: dashed;
		clear: both;
		
		display: block;
		
	}

	#content img.img-right {
	
		background-position: 8px 0px;
	
		background-image: url(images/box.png);
	
		border-bottom-width: 1px;
		border-top-width: 1px;
		border-color: #735148;
		border-style: dashed;	
		
		margin-left: 24px;
		margin-top: 16px;
		margin-bottom: 16px;
			
		padding: 8px;
	
		float: right;

	}
	
	#content img.inline-circle {
		
		vertical-align: text-top;		
	
	}
	
	#content img.inline-badge {
	
		padding: 1px;
		vertical-align: middle;
		
		border-color: #735148;
		border-style: dashed;
		border-width: 1px;
				
		margin-right: 12px;
				
		background-image: url(images/box.png);		
	
	}

	#content ul.elsewhere {

		vertical-align: text-bottom;
		font-size: 12px;
		line-height: 32px;

		margin-bottom: 16px;
		margin-right: 0px;
		margin-top: 0px;
		margin-left: 4px;
	
		padding: 0px;
	
		list-style-position: outside;
	
	
	
	}

	#content img.badge {
		
		background-image: url(images/box.png);	
		
		border-width: 1px;
		border-style: dashed;
		
		padding: 1px;
		
	}

	#content ul.pw-route {

		vertical-align: text-bottom;
		font-size: 12px;
		line-height: 32px;
	
		padding: 0px;

		margin-left: 8px;
		margin-bottom: 16px;	
		margin-right: 0px;
		margin-top: 0px;
			
		list-style-position: outside;
		
	}

	#content ul {

		margin-left: 8px;
		margin-bottom: 16px;
		margin-right: 0px;
		margin-top: 0px;

		padding-left: 0px;
		padding-bottom: 0px;
		padding-right: 0px;
		padding-top: 0px;

		line-height: 32px;
		vertical-align: text-bottom;
		font-size: 12px;
	
		list-style-position: outside;
	
	}
	
	#content li {
		
		background-repeat: no-repeat;
		
		padding-left: 16px;
		
		list-style-type: none;

	}

	#content li.pw-route-stop {

		background-repeat: no-repeat;
		background-image: url(images/pw-route-stop.png);
		
		list-style-type: none;

		padding-left: 32px;

	}

	#content li.pw-route-top {

		background-repeat: no-repeat;
		background-image: url(images/pw-route-top.png);

		list-style-type: none;

		padding-left: 32px;

	}

	#content li.pw-route-bottom {

		background-repeat: no-repeat;
		background-image: url(images/pw-route-bottom.png);
		
		list-style-type: none;

		padding-left: 32px;

	}

	.post-left-wide {

		width: 224px;
		
		margin-left: 80px;
		margin-bottom: 15px;
		
		border-bottom-color: #735148;
		border-bottom-style: dashed;
		border-bottom-width: 1px;
		
		float: left;

	}

	#content .left-wide {

		margin-right: 16px;
		margin-left: 0px;
		
		width: 224px;
		
		float: left;

	}

	.post-right-narrow {
		
		width: 144px;
		float: left;
		
		margin-left: 16px;
		margin-bottom: 15px;
		
		border-bottom-color: #735148;
		border-bottom-style: dashed;
		border-bottom-width: 1px;
		
	}

	#content .right-narrow {

		width: 144px;
		
		margin-right: 16px;
		margin-left: 0px;

		float: left;
	}

	#content table {

		margin-bottom: 15px;
		
		border-collapse: collapse;
		border-bottom-style: dashed;
		border-bottom-color: #735148;
		border-bottom-width: 1px;
		border-spacing: 0px 0px;

	}

/*
	#content a.button {
	
		text-align: right;
		font-size: 10px;
		text-transform: uppercase;
		
		border-width: 1px;
		border-style: dashed;
		border-color: #735148;
		
		padding-left: 4px;
		padding-bottom: 2px;
		padding-top: 2px;
		padding-right: 4px;
		
		float: none;
		
	}
*/

	#content th.one-col {

		color: #735148;
		text-align: right;		
		width: 48px;
		font-size: 8px;
		line-height: 30px;
		text-transform: uppercase;
	
		margin-left: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
		margin-top: 0px;
		
		padding-right: 24px;
		padding-left: 8px;
		
	}

	#content th.two-col {

		width: 128px;
		
		font-size: 8px;
		line-height: 30px;
		text-transform: uppercase;
		color: #735148;
		text-align: right;
			
		margin-left: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
		margin-top: 0px;
	
		padding-right: 8px;
		padding-left: 8px;

	}

	#content td.one-col {

		text-align: right;
		font-size: 12px;
		line-height: 31px;
				
		margin: 0px;
		
		padding-bottom: 0px;
		padding-top: 0px;
		padding-right: 24px;
		padding-left: 8px;
		
	}

	#content td.two-col {

		text-align: right;
		font-size: 12px;
		line-height: 31px;

		margin: 0px;

		padding-bottom: 0px;
		padding-top: 0px;
		padding-right: 8px;
		padding-left: 8px;

	}

	#content iframe.map {
		
		width: 368px;
		
		padding-right: 8px;
		padding-left: 8px;
		padding-bottom: 8px;
		padding-top: 8px;

		border-bottom-color: #735148;		
		border-bottom-style: dashed;
		border-top-style: dashed;
		border-bottom-width: 1px;
	}
	
/* Sidebar ----------------------- */

	#sidebar {
	
		margin-left: 76px;
		margin-right: 0px;
			
		width: 224px;
		float: left;
		
		text-indent: -9999px;
		
	}
	
	#sidebar p {
	
		line-height: 16px;
		
		padding-right: 0px;
		padding-left: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		
	}
	
	#sidebar h2 a, #sidebar p a	{
	
		display: block;
		overflow: hidden;
		border: none;
		
	}

	#sidebar #greeting {
	
		width: 224px;
		height: 96px;
	
		background-repeat: no-repeat;
		background-image: url(images/sb-hej.png);
			
		margin: 0px;

	}
	
	#sidebar #blurb a:link, #sidebar #blurb a:visited {
	
		width: 224px;
		height: 144px;
		
		background-repeat: no-repeat;
		background-image: url(images/sb-blurb.png);
		
		margin: 0px;

	}
	
	#sidebar #blurb a:hover {
	
		width: 224px;
		height: 144px;
		
		background-repeat: no-repeat;
		background-image: url(images/sb-blurb.png);
		background-position: 0px -144px;
		
		margin: 0px;

	}
	
	 #sidebar #feed a:link, #feed a:visited {
	
		width: 224px;
		height: 96px;
	
		background-repeat: no-repeat;
		background-image: url(images/sb-feed.png);
			
		margin: 0px;

	}
	
	 #sidebar #feed a:hover {
	
		width: 224px;
		height: 96px;
	
		background-repeat: no-repeat;
		background-image: url(images/sb-feed.png);
		background-position: 0px -96px;
			
		margin: 0px;

	}



	
/* Footer ------------------------ */

	#footer {

		width: 864px;
		height: 144px;
		
		background-repeat: no-repeat;
		background-position: 0 0px;
		background-image: url(images/notebook-bottom.png);	
		
		margin-bottom: 48px;
		margin-left: 0px;
		margin-top: 0px;		
		
		padding-left: 16px;

		clear: both;
		
	}
	
/* Notice ------------ */
	
	#notice {
		
		height: 48px;
		width: 384px;
			
		padding-right: 0px;
		padding-left: 0px;
		padding-top: 0px;
	
		margin-left: 80px;
		margin-top: 96px;

		float: left;
	
	}
	
	#notice p {
		
		color: #B68173;
		text-align: justify;
		line-height: 24px;
		font-size: 10px;
		
		margin-top: 0px;
				
		padding-bottom: 0px;
		padding-top: 0px;
		padding-right: 8px;
		padding-left: 8px;
		
	}
		
	                         	
	
	#notice a:link, #notice a:visited {
		
		text-decoration: none;
		color: #FFFFFF;
		text-align: justify;
		line-height: 24px;
		font-size: 10px;
		
		margin-top: 0px;
		
		padding-bottom: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-left: 0px;
		
	}
	
	#notice a:hover {

		text-decoration: none;
		line-height: 24px;
		font-size: 10px;		
		color: #B68173;
		text-align: justify;
		
		margin-top: 0px;
		
		padding-bottom: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-left: 0px;

		
		border-bottom-width: 1px;
		border-bottom-style: dashed;
		border-bottom-color: #B68173;
		
	}
		
/* Badges ------------ */	
	
	#badges {
		
		width: 224px;
		height: 48px;
		
		margin-bottom: 0px;
		margin-right: 0px;		
		margin-top: 96px;
		margin-left: 0px;
		
		float: right;
	
	}