body{
	background-image: url(../img/AWoodBackground-smaller.jpg);
	background-attachment:fixed;
    min-height:100%;
}

#long-long-page body {
	background-image: none;
	background-color: yellow;

	}

#whole-page-index{ /* this is the background setup for anything of a page or less. If multiple pages, see below for the book setup */
    background-image: url(../img/old_paper_stock_03.png);
    background-repeat: no-repeat;
    background-position:top center;
    /* I could use background-size:900px; and make this PNG smaller, but that won't work in IE8, so i have to resize the actual PNG (half a meg). */
	min-height: 1100px;
} 

#container{
	position:relative; 
	width: 850px; /* I need to check this width works ok with resizing */
	min-height: 100%;
	margin: auto;
	} /* I think 'book' uses this one and the others use the one in grid.css... Gotta fix that ! */

a {
	color: #8A4B08;
	text-decoration:none;
	/* font-weight:normal; I turned this off, so that I didnt need to turn links bold manually in book-intro, res-intro and within <strong>s */
	}

a:hover {
	color: #5F3100;
	}

.a-bold {
	font-weight:bold;
	}

.korero {
	padding: 120px 150px 10px 175px; 
/*	margin: 75px 0 75px 0; this is what I used to have here but meant popping comp/calc moved text, and needed BRs at top. Can kill this i think */
	vertical-align: center;
	text-align: center;
	font-family: Special Elite, sans-serif;
	font-weight: bold;
	color: #000000;
	}

#buttons {
	margin: 50px 0 50px 0;
	text-align: center;
	font-family: Special Elite, sans-serif;
	line-height: 60px;
}

.buttons-right {
	margin: 0 10px 0 0;
	text-align: right;
	font-family: Special Elite, sans-serif;
	line-height: 40px;
}

.btn {
	color: #F5DA81;
	background: #3B240B url(../img/small-wood.jpg) no-repeat right top;
	padding: 15px 30px;
	margin: 0 0 40 0;
	border-radius: 25px;
	font-weight: bold;
	text-transform: uppercase;
}

.btn:hover {
	color: #F5DA81;
	font-weight: 800;
	background: #8A4B08 url(../img/small-wood-lighter.jpg) no-repeat right top;
}

#translate {
	margin: 75px 0 0 0;
	vertical-align: center;
	text-align: center;
	font-family: Special Elite, sans-serif;
	font-weight: smaller;
	color: #000000;
	}


/* these styles are for the book lists(s), or in fact anywhere there's multiple pages of content */
#whole-page-book{ /* this does the background for the top of the page */
    background-image: url(../img/old_paper_stock_03.png);
    background-repeat: no-repeat;
    background-position:top center;
    min-height: 100%;
}


#book-intro { /* this is the top para */
	padding: 120px 90px 5px 90px;
/*	margin: 5px 90px 5px 90px; */
/*	padding: 0 10 20 10; */
	vertical-align: center;
/*	text-align: center; */
	font-family: Special Elite, sans-serif;
	font-weight: bold;
/*	color: #000000; */
	}

#book-intro a{
	font-weight:bold;
	}

#book-body { /* this does the repeating background for middle of the content */
	/* first the text tho... */
	padding-right: 60px;
	padding-left: 60px;
	margin: 10px 30px 0px 30px; /* had to make top 10 and bottom 0 or it put an annoying strip of desktop before footer paper */
	vertical-align: center;
	font-family: Special Elite, sans-serif;
	font-weight: normal;
/*	color: #000000; */
    
    /* ...then there's the background */
    background-image: url(../img/old_paper_stock_03-MIDDLE.png);
    background-repeat: repeat-y;
    background-position:top center;
    min-height: 100%; /* til i can offset this from text, I'm using <BR>s to offset in index.html */
    /* i also need to set a bg color -  just in case */
    }

#book-footer{ /* and this is the background for the bottom of the content */
    background-image: url(../img/old_paper_stock_03.png);
    background-position:bottom center;
 	background-repeat: no-repeat;
 	padding: 0;
 	margin-top: 0;
 	}
	
/* taking this out, replaced by a 'a-bold' class that does the reverse
#book-body  a{
	font-weight: bold;
	}
*/

#book-body ul {	
	margin-left :5px;
	padding-left :5px;
		}/* these are just so the bullet list in about works with better white space between bullets */

#book-body li {	
	margin-bottom : 10pt;
	}

.list-tighter {
	margin-left :25px;
	padding-left :25px;
	}


/* These styles are for the resume files */
#res-intro {
	padding: 120px 150px 10px 175px;
	vertical-align: center;
	font-family: Special Elite, sans-serif;
	font-weight: bold;
	color: #000000;
	}

#res-intro a{
	font-weight:bold;
	}

#res-intro ul {	
	margin-left :5px;
	padding-left :5px;
	}

#res-intro li {	
	margin-bottom : 5pt;
	}

/* line-height: 1.25em; This increasing "leading", but that wasn't what I wanted (I was looking to increase space between bullets, which the LI thing does nicely. Handy to keep for future tho ! */

#res-index {
	padding: 0px 150px 0px 150px;
	vertical-align: center;
	font-family: Special Elite, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #000000;
	}

#res-body {
	padding: 0px 150px 5px 175px;
	margin: 0px 0px 5px 0px;
	vertical-align: center;
	font-family: Special Elite, sans-serif;
	font-weight: normal;
	color: #000000;
	}

/* taking this out, replaced by a 'a-bold' class that does the reverse
#res-body  a{
	font-weight: bold;
	}
*/

#res-body ul {	
	margin-left :5px;
	padding-left :5px;
		}

#res-body li {	
	margin-bottom : 10pt;
	}
		
.hanging-indent { /* this is for the top ten list*/
    padding-left: 33px ;
    text-indent: -50px ;
	}

.img-res {
	vertical-align:middle;
	height:55px;
	margin: 5px 10px;
	}

	.img-res:hover {
		vertical-align:middle;
		height:70px;
		margin: 0px 10px;
		}

.img-res-why {
	vertical-align:middle;
	height:100px;
	margin: 0px 20px;
	}

#res-buttons {
	margin: 50px 150px 0px 0px;
	text-align: right;
	font-family: Special Elite, sans-serif;
	}

#res-paper-nav-txt {
	position: absolute;
	top: 120px;
	left: 120px;
	margin: 0 auto;
	font-family: Special Elite, sans-serif;
	font-weight: bold;
	color: #000000;
	}

#res-why-buttons {
	margin: 25px 75px 0px 50px;
	text-align: middle;
	font-family: Special Elite, sans-serif;
	}

.btn-smaller {
	color: #F5DA81;
	background: #3B240B url('../img/small-wood.jpg') no-repeat right top;
	padding: 10px 18px;
	margin: 0px 5px 25px 5px;
	border-radius: 25px;
	font-weight: bold;
	text-transform: uppercase;
	font-size:smaller;
	clear:right;
}

.btn-box-right {
	clear:right;
	float:right;
	text-align:center;
	vertical-align: center;
	padding: 10px 18px;
	margin: 5px 5px 5px 5px;
}

.btn-smaller-multiple {
	color: #F5DA81;
	background: #3B240B url('../img/small-wood.jpg') no-repeat right top;
	padding: 10px 18px;
	margin: 0px 5px;
	float:right;
	border-radius: 25px;
	font-weight: bold;
	text-transform: uppercase;
	font-size:smaller;
	text-align:center;
	vertical-align: center;
}

	.btn-smaller:hover {
		color: #F5DA81;
		font-weight: 800;
		background: #8A4B08 url('../img/small-wood-lighter.jpg') no-repeat right top;
		font-size:100%;
		}

h2{
    text-align:center;
    text-transform: uppercase;
    margin-bottom:15px;
}

h2 a{
    float:right;
}

h3{
    text-align:left;
	text-transform: uppercase;
}

.star-inline {
	vertical-align:top;
	height:25px;
	margin: 0px 0px;
	}

.star-inline-bott {
	vertical-align:bottom;
	height:25px;
	margin: 0px 0px;
	}

.star-inline-mid {
	vertical-align:middle;
	height:25px;
	margin: 0px 0px;
	}


.pic-btn {
	float:right;
	vertical-align:middle;
	height:60px;
	margin: 25px 30px;
	}

	.pic-btn:hover {
		vertical-align:middle;
		height:70px;
		margin: 20px 25px;
		}


.pic-btn-inline {
	vertical-align:middle;
	height:40px;
	margin: 10px 10px;
	}

	.pic-btn-inline:hover {
		vertical-align:middle;
		height:50px;
		margin: 5px 5px;
		}

.pic-btn-inline-bigger {
	vertical-align:middle;
	height:70px;
	margin: 10px 10px;
	}

	.pic-btn-inline-bigger:hover {
		vertical-align:middle;
		height:80px;
		margin: 5px 5px;
		}

.pic-btn-inline-smaller {
	vertical-align:middle;
	height:30px;
	margin: 0px 7px;
	}

	
.pic-inline-right {
	float:right;
	margin: 0 5px 10px 25px;
	max-height:200px;
	max-width:200px;
	}
	
	.pic-inline-right:hover {
		max-height:200px;
		margin: 0 5px 10px 15px;
		max-width:210px;
		}
	
	.pic-inline-right-nogrow {
		float:right;
		margin: 0 5px 10px 25px;
		max-height:200px;
		max-width:200px;
		} 
		
.pic-inline-right-bigger {
	float:right;
	margin: 0 5px 10px 25px;
	max-height:400px;
	max-width:300px;
	}

	.pic-inline-right-bigger:hover {
		max-height:400px;
		max-width:310px;
		margin: 0 5px 10px 15px;
		}
	
.pic-inline-right-smaller {
	float:right;
	margin: 0 5px 10px 25px;
	max-height:100px;
	max-width:33%;
	}
	
.pic-inline-left {
	float:left;
	margin: 0 25px 10px 5px;
	max-height:200px;
	max-width:200px;
	}

	.pic-inline-left:hover {
		margin: 0 15px 10px 5px;
		max-height:200px;
		max-width:210px;
		}
	.pic-inline-left-nogrow {
		float:left;
		margin: 0 25px 10px 5px;
		max-height:200px;
		max-width:200px;
		}

.pic-inline-left-bigger {
	float:left;
	margin: 0 25px 10px 5px;
	max-height:400px;
	max-width:45%;
}

	.pic-inline-left-bigger:hover {
		max-height:440px;
		max-width:50%;
		margin: 0;
	}
	
	.pic-inline-left-bigger-nogrow {
	float:left;
	margin: 0 25px 10px 5px;
	max-height:400px;
	max-width:45%;
}
.pic-inline-left-smaller {
	float:left;
	margin: 0 25px 10px 5px;
	max-width:33%;
	max-height:100px;
}

.pic-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:50%;
	max-height:300px;
}
	.pic-center:hover {
		max-width:53%;
		max-height:315px;
	}

.pic-center-bigger {
    display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:55%;
	max-height:450px;
}

	.pic-center-bigger:hover {
		max-width:58%;
		max-height:475px;
	}

.pic-outto-right {
	position: absolute;
	right:10;
	bottom:0;
	max-height:300px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-right-r10-d300 {
	position: absolute;
	right: -200px;
	top:300px;
	max-height:300px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-right-d250 {
	position: absolute;
	right: -10%;
	top:250px;
	max-height:300px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-right-d500 {
	position: absolute;
	right: -10%;
	top:500px;
	max-height:300px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-right-2 {
	position: absolute;
	right: -10%;
	top:5;
	max-height:300px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-right-3 {
	position: absolute;
	right: -10%;
	bottom:35%;
	max-height:300px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-right-4 {
	position: absolute;
	right: 5%;
	top: 95%;
	max-height:250px;
	max-width:20%;
	margin-left: 50%
}

.pic-outto-left {
	position: absolute;
	left: -10%;
	top:5;
	max-height:300px;
	max-width:20%;
	margin-right: 50%
}

.pic-outto-left2 {
	position: absolute;
	left: -15%;
	top:5;
	max-height:300px;
	max-width:20%;
	margin-right: 60%
}

.pic-outto-left-d400 {
	position: absolute;
	left: -10%;
	top:400px;
	max-height:150px;
	max-width:20%;
	margin-right: 50%
}

.pic-outto-left3 {
	position: absolute;
	left: 5%;
	top:5;
	max-height:300px;
	max-width:20%;
	margin-right: 60%
}

.pic-outto-left-l0-d400 {
	position: absolute;
	left: 0;
	top:400px;
	max-height:300px;
	max-width:20%;
	margin-right: 60%
}

.pic-outto-left-l2-d700 {
	position: absolute;
	left: 2px;
	top:700px;
	max-height:300px;
	max-width:20%;
	margin-right: 60%
}

.pic-outto-left4 {
	position: absolute;
	left: -20%;
	bottom: 25%;
	max-height:400px;
	max-width:30%;
	margin-right: 60%
}

.pic-outto-left-5 {
	position: absolute;
	left: -17%;
	bottom: 40%;
	max-height:200px;
	max-width:30%;
	margin-right: 60%
}
.pic-outto-left-6 {
	position: absolute;
	left: 5%;
	top:5;
	max-height:300px;
	max-width:20%;
	margin-right: 50%
}



/* These IDs set up the compass and calculator that appear on each page, as well as making them "jump" when you hover over them */
#img-desktop-calculator {
	float:right; 
	max-height:300px ;
}

	#img-desktop-calculator:hover {
		max-height:320px
	}

#img-desktop-compass {
	float:left;
	max-height:175px;
	padding-top:20%;
	padding-left:50px;
	position:relative;
	}

	#img-desktop-compass:hover {
		max-height:190px;
		}
/* end */

/* a few handy CLASSes for book pages */
.bk-title {
	font-weight: bold;
	}	

.bk-fave {
	color:#5F3100;
	}	

	.bk-fave a{
		text-decoration: underline;
		}
/* end */

/* Settings for a small screen */
@media screen and (max-width: 1200px) {
	#img-desktop-compass , #img-desktop-calculator {
		display: none;
		}
}
/* end */

/* Settings for an ipadish-sized screen 
this is when design breaks down.
ipad is actually width of 'old-paper' (768px) */
@media screen and (max-width: 850px) {
#container{
	width: 100%;
	}
#book-intro {
	margin: 5px 75px 5px 75px;
	}
#book-body {
	padding-right: 75px;
	padding-left: 75px;
	margin: 5px 0px 5px 0px;
	}
#res-intro {
	padding: 120px 200px 10px 170px;
	}
#res-index {
	padding: 0px 5px 5px 5px;
	}
#res-body {
	padding: 0px 200px 5px 75px;
	margin: 0px 10px 5px 0px;
	}
}
/* end */

/* Settings for an iphone-sized screen */
@media screen and (max-width: 490px) {
#book-intro {
	margin: 5px 15px 5px 15px;
	}
#book-body {
	padding-right: 15px;
	padding-left: 15px;
	margin: 5px 0px 5px 0px;
	}
#res-intro {
	padding: 120px 50px 10px 50px;
	}
#res-body {
	padding: 0px 500px 5px 50px;
	margin: 0px 10px 5px 0px;
	}

}
/* end */