/*
Theme Name: AK
Description: Custom layout for thealanknox.com.
Version: 2.0
Author: Alan Knox
Author URI: http://thealanknox.com/
Tags: blue, beige, orange, custom, one column
*/



/*  POSITIONING
	
	lesson learned - always set dimensions, especially the width. and 
	if it's images even more so. remember, always set body to no margin
	or padding. when it gets tricky, it may be the later content that's 
	messing up your perfect left corner. keep laying things out and it'll eventually work. */

body {
	background: #56dadf;
	margin: 0px;
	padding: 0px;
	}

#container {
	margin: 20px 0px 0px 80px;
	width: 835px;
	}

#logo {
	background: url('images/logo.png') no-repeat;
	width: 205px;
	height: 163px;
	}

#nav {
	width: 205px;
	height: 97px;
	}

#page {
	width: 630px;
	margin: -260px 0px 0px 205px;
	}
	
#header {
	background: url('images/header.jpg') no-repeat top center;
	width: 630px;
	height: 210px;
	}
	
#content {
	background: url('images/hairline.png') repeat-y center;
	width: 630px;
	}

.post { /* don't let the class fool you, didn't want to manip wordpress */
	margin: 0px;
	color: #47b5b9;
	padding: 0px;
	}

#profilehead {
	margin-left: 55px;
	}

#profiletext {
	margin-top: -48px;
	margin-left: 175px;
	padding-bottom: 25px;
	width: 340px;
	color: #ec6F31;
	}

#threecolumn {
	position: relative;
	margin-top: -48px;
	margin-left: 175px;
	width: 350px;
	height: 100px;
	color: #ec6F31;
	}
	
#columnleft {
	width: 110px;
	float: left;
	padding-right: 10px;
	}
	
#columnmiddle {
	width: 110px;
	float: left;
	padding-right: 10px;
	}
	
#columnright {
	width: 90px;
	float: left;
	}
	
#drpmb {
	margin-left: 55px;
	}
	
#drpcontainer {
	width: 340px;
	height: 298px;
	margin-top: -55px;
	margin-left: 175px;
	padding-bottom: 25px;
	color: #ec6f31;
	}
	
#drpimage {
	width: 230px;
	padding-right: 10px;
	float: left;
	position: relative;
	}
	
#drpcaption {
	width: 100px;
	float: left;
	position: relative;
	}

#newshead {
	margin-left: 55px;
	}

#newstext {
	margin-top: -38px;
	margin-left: 175px;
	padding-bottom: 40px;
	width: 340px;
	}
	
#footer {
	background: url('images/footer.jpg') no-repeat bottom center;
	width: 630px;
	height: 140px;
	}
	
/*  below is a very important line. post-2 represents design page while
	post-6 represents illustration page. if either page ever gets deleted
	then the -x must change accordingly. note the three large code sections
	below of navdesign/illustration/profile [not news] and these msut all
	remain exactly the same, including float, positioning and z-index
	properties. */

#post-2, #post-6 {
	margin-top: -30px;
	}

#topimage {
	margin-left: 15px;
	position: relative;
	}
		
#regularimage {
	margin-top: 45px;
	margin-left: 15px;
	position: relative;
	}

#caption {
	margin-left: 15px;
	margin-top: -1px;
	}
	
#captiontext {
	margin-left: 135px;
	margin-top: -43px;
	width: 340px;
	}
	
#viewmedia {
	margin-top: -40px;
	margin-right: 15px;
	position: relative;
	float: right;
	}
	
/*
	this fella is just a nudge tweak for the little edit this entry
	that shows up when you're logged in */

.pageedit {
	margin-left: 15px;
	margin-top: 30px;
	padding-bottom: 20px; /* padding automatically populates remainder */
	}
	
.newer img {
	border: none;
	}

.older img {
	border: none;
	}	
	
#error404 {
	margin: -15px 0px -20px 255px;
	padding-bottom: 20px;
	color: #ec6f31;
	text-transform: uppercase;
	}
		
/*  NAVS - THE BACKGROUND BLOCKS POSITION:

    these next three guys have a simple div declaration in each 
    of their respective back-end pages. iow the doc starts out
    saying div id equals navdesign then an immediate div close
    and regular page gets started. the whole purpose is to clarify
    which page you are on with the block png with respective
    highlight. */

#navdesign {
	background: url('images/designpage.png') no-repeat;
	width: 205px;
	height: 97px;
	margin-left: -205px;
	margin-top: -17px;
	float: left;
	position: relative;
	z-index: 1;
	}
	
#navillustration {
	background: url('images/illustrationpage.png') no-repeat;
	width: 205px;
	height: 97px;
	margin-left: -205px;
	margin-top: -17px;
	float: left;
	position: relative;
	z-index: 1;
	}

#navprofile {
	background: url('images/profilepage.png') no-repeat;
	width: 205px;
	height: 97px;
	margin-left: -205px;
	margin-top: -47px;
	float: left;
	position: relative;
	z-index: 1;
	}

/*  but ... navnews is different. it stays on the header.php file
	because	the blog post flowing through on news [remember: settings,
	reading, postspage, news - i can't manipulate the blog itself so 
	to speak. only the three pages. oh and notice his z-index is 0.
	thus he is on the bottom most, then the other three block pngs -
	who are at one, and then the hovers are all on top at level 2 */   

#navnews {
	background: url('images/newspage.png') no-repeat;
	width: 205px;
	height: 97px;
	margin-left: 0px;
	margin-top: -97px;
	position: relative;
	z-index: 0;
	}
	
/*  NAVS - THE HYPERLINK HOVERING POSITION:
	
	the first strand is our absolutely positioned hovers that all reference
	what's embedded in header.php and header.php only. it's the put the links
	between i tags trick, make the font size mega small - 2px and then put the
	hovers over respective spot, making sure they're the tallest in the doc;
	they are - at z-index two ... and also defining dimensions as well as
	distance from the top left of the nav div. well, except for the logolink */

#logo a i { 
	visibility: hidden;
	font-size: 2px; }

a#logolink {
	position: absolute;
	width: 160px;
	height: 90px;
	top: 40px;
	left: 80px;
	}

/*	just notice the above two is for the logo only. the rest is the link hovers */

#nav a i { 
	visibility: hidden;
	font-size: 2px; /* remember, small font-size so it won't push boundaries */
	}

a#designlink {
	position: absolute;
	z-index: 2;
	width: 85px;
	height: 12px;
	top: 183px;
	left: 100px;
	}

a#illustrationlink {
	position: absolute;
	z-index: 2;
	width: 85px;
	height: 13px;
	top: 195px;
	left: 100px;
	}
	
a#profilelink {
	position: absolute;
	z-index: 2;
	width: 85px;
	height: 14px;
	top: 208px;
	left: 100px;
	}

a#newslink {
	position: absolute;
	z-index: 2;
	width: 85px;
	height: 12px;
	top: 222px;
	left: 100px;
	}

a#designlink:hover{
	background: url('images/design.png');
	}

a#illustrationlink:hover {
	background: url('images/illustration.png');
	}

a#profilelink:hover {
	background: url('images/profile.png');
	}

a#newslink:hover{
	background: url('images/news.png');
	}
	
a:focus {outline: none} /* mozilla focus box fix, like inspiresharegive problem */


/* Formatting */
body {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 60%;	
	}

body p {
	margin-top: 0px;
	}
	
a, a:hover, a:visited, a:active {
	text-decoration: none;
	color: #ec6f31;
	}
	
#profiletext a, #threecolumn a, #drpcontainer a {
	color: #47b5b9;
	}
	
img {
	border: none;
	}
	
.post h2 {
	display: none;
	}
	
.entryimage {
	border: none;
	}
	
span#full {
	font-style: italic;
	}	

/*other*/

.postmetadata, small, .navigationsingle, .commentlist, .nocomments {
	display: none
	}
	
#wpsidebar, #wpcommentspopup, #wpcomments, #wprespond, h3#comments, #comments, #archivecontent {
	display: none;
	}