@charset "UTF-8";
/*Some thanks to sites who's code and examples helped me out:
The base of the Dreamweaver CSS frameworks is happy. Don't judge me for using Dreamweaver. I think it's great, even if I never spend any time on the design side of it 
Footer sticks to bottom from http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
The middle rollover key images based off of http://matthewjamestaylor.com/blog - who I might later adopt the thumb grid as well, depending
Embeding fonts from: http://code.google.com/webfonts and http://bjorkoy.com/css/screen.css
http://www.webmasterworld.com/forum83/3762.htm for the CSS Table thing on the main page
http://css-discuss.incutio.com/wiki/Using_Percent for the image size changing
Yep, this is a frankenstein of a site if ever there was one. I'd probably know this stuff already if I made more sites. I'm fine with that.
http://www.alistapart.com/articles/holygrail - 3 column layout
http://960.gs/ or google blueprint if I end up heading to the dark arts of CSS Grids
http://wiki.github.com/sorccu/cufon/about - custom fonts
http://www.mways.co.uk/prog/hidemail.php - hides email & anything else from the spammers
Use http://shadowbox-js.com/forum.html#nabble-td1562161 if shadowbox is trouble
Yay for learning.
*/

html{margin:0px; padding:0px; height: 100%;}
*{margin:0px;}
body {
	font: 100%/1.4 "Adobe Caslon Pro", "Adobe Caslon Regular", "ACaslonPro", "Big Caslon CC", "Big Caslon CC", "Caslon", "Caslon Old Face BT", "ITC Caslon 224 LT Book", 'Josefin Sans Std Light', Garamond, Georgia, serif;
	background: #a17e00 url(images/background_scott.jpg) repeat left top;
	margin: 0;
	padding: 0;
	color: #000;
	height: 100%;
}


/* ~~ Element/tag selectors ~~ */
ul, ol, dl {padding: 0;margin: 0; list-style-type: none;}
h1, h2, h3, h4, h5, h6, p {margin: 0; padding-right: 15px; padding-left: 15px; }

html h1 {font-size:1.4em;}		/*Main Titles*/
html h1 em {font-size:.8em; font-style:normal;}
html h2 {font-size:1em;} 	/*Secondary Titles*/
html h2 em {font-weight:100; font-size:.9em; padding-left:5px;}
html h4 {font-size:.8em; padding:none; margin-top:-5px; margin-bottom:10px; font-style:normal;}	/*Main Title subline */
/* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
html h5 {font-size:2em; font-weight:100;}
a img {border: none;}
.dd {font-weight:bold; color:#960;}
.hk{ background:#FF0;}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {color: #b70000; text-decoration: none;}
a:visited {color: #b70000; text-decoration: none;}
a:hover, a:active, a:focus {color:#b70000; text-decoration: underline;}

.wrapper {
	width: auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position:relative;
	margin: 0 auto;
	padding-bottom:30px;
}

.header {
	height:190px;
}
.header ul{
	list-style-type: none;
	list-style-image: none;
	list-style-position: inside;
}
.header ul {padding:34px 0 0 0px; font-size:1.6em;}
.header li a:link, .header li a:visited{color:#efece6;text-decoration:none; padding:4px 150px 4px 40px;}
.header li a:hover, .header li a:active, .header li a:focus{color:#efece6; text-decoration:none; padding:4px 150px 4px 40px; background-color:#9D8000;}*/


/* ~~ This is the layout information. ~~ 

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/

.content {padding: 10px 0;}

/* ~~ The footer ~~ */
.footer {
		position:relative;
		bottom:0;
		width:100%;
		height:30px;
		background: url(images/TransparentBG.png) repeat;
		text-align:center;
		padding:3px;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #wrapper) if the #footer is removed or taken out of the #wrapper */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}


/*For Thumbnails on Mainpage*/
.portfolios {position:relative; left:50%; margin-left:-50%; width:100%; min-width:50em; max-width:63em; font-size: 1.5em;}
html body .top .column {padding-top:0px; padding-bottom:0px;} 
.column {position:absolute; top:5px; border:none;}
.column a:link {color: #483528;	text-decoration: none;}
.column a:visited {color: #483528;text-decoration: none;}
.column a:hover, a:active, a:focus {color: #b70000;text-decoration: none;}/* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */

.col1,.col2,.col3,.col4{
		padding:10px;
		background: url(images/TransparentBG.png) repeat;
		text-align:left;}
	
.column img {width:100%}
.col1 {left:1%; width:22%;}
.col2 {left:26%; width:22%;}
.col3 {left:51%; width:22%;}
.col4 {left:76%; width:22%;}


.columnContainer2 {position:absolute; top:470px; left:50%; margin-left:-50%; width:100%; min-width:70em; padding:10px; background: url(images/TransparentBG.png) repeat; text-align:left; font-size: 1.1em;
}
.columnContainer2 .col5 {left:51%; width:40%; background:none; padding-top:5px;}
.aboutContainer {position:relative; top:40px; margin-left:-10px; width:100%; min-width:75em; padding-left:10px; text-align:left; height:1350px;} /*1000px=hack to solve footer problem. Will need to resolve*/
.aboutContainer table {width:100%; padding:0px; margine:0px; border-spacing:15px;}
.aboutContainer td {vertical-align:top; width:20%; padding:5px; background: url(images/TransparentBG.png) repeat; margin-right:30px;}
.aboutContainer p,h5 { padding-bottom:20px; }

/*This is getting ugly. I'll need to refine all this*/

ul.ptut li ul li {padding-left:10px; font-size:.8em;}

/*IE8 Shadow Box Fix, in theory  - must test.*/
#shadowbox_title {border: 0px solid;}
#shadowbox_info {border: 0px solid;}