/*
Theme Name: Business Casual 
Theme URI: http://www.siolon.com/2007/business-casual-wordpress-theme/
Description: A simple theme with a business casual style.
Theme Version: 1.1.3
Tags: red, gray, two, columns, fixed, width, business, casual
Author: Chris Poteet
Author URI: http://www.siolon.com

	All elements of this theme are protected by the GPL:
	http://www.opensource.org/licenses/gpl-license.php

    Built on the Basic WordPress theme:
    http://www.visual-assault.org/wpTheme_basic/

	Business Casual uses Fam Fam Fam Silk Icons: 
	http://www.famfamfam.com/lab/icons/silk/

*/

body {
	margin: 0;
	padding: 0;
	background-color:#FFF;
	height: auto;
}

/* Header & Navigation */



#header {
	margin: 5px auto auto auto;
	position: relative;
	float: none;
	left: auto;
	width: 960px;
	height: 245px;
	padding-top: 2px;
	background-color: #fff;
	text-align: center;
	border-bottom: 10px solid #becdcf;
	background-image:url(http://squareknife.com/mentalmodels/banner.png);
	background-repeat:no-repeat;
}

/* I've kept the background colour of the header as white #fff (the same background as the banner) to make it look like the text is typed rather than an image */

#header h1 {
	float: left;
	margin: 12px 0;
	padding-left: 8px;
	letter-spacing: 2px;
	font-family: Arial, Helvetica, sans-serif;
	max-width: 360px;
	font-size: 24px;
	text-align: left;
}
#header h1 a {
	text-decoration: none;
	display:none;
}
#header h3 {
	margin: 0;
	padding-top: 25px;
	padding-left: 250px;
	text-align: right;
	font: italic 40px Arial, Helvetica, sans-serif;
	color: #fff;
}
#nav {
	height: 75px;
	display:none;
}
#header ul {
	list-style-type: none;
	vertical-align: bottom;
	margin:40px 255px 0 0;
	padding:155px 5px 0;
	display:inline;
	float: left;
	height: 30px;
}
#header ul.ie {
	list-style-type: none;
	vertical-align: bottom;
	margin: 37px 15px 0 0;
	padding: 20px;
	display: inline;
	float: right;
	height: 30px;
}
.current_page_item a {
	background-color: #fff !important;
}
#header li {
	float:left;
}
#header li a {
	color: #406b73;
	text-decoration: none;
	padding: 10px;
	margin: 0;
	font: 16px Arial, Helvetica, sans-serif;
	background-color:#fff;

}
a img {
	border: none;
}

/* The same formatting applies to all of the h1 and p tags throughout the site, as shown below - when I grouped it together it would not work so instead i have listed it next to each other*/

#hometext h1 {
	font-family:Arial, Helvetica, sans-serif;
	color: #406b73;
}

#hometext p {
	font-family:Arial, Helvetica, sans-serif;
	color: #143137;
}

#aboutmm h1 {
	font-family:Arial, Helvetica, sans-serif;
	color: #143137;
}

#aboutmm p {
	font-family:Arial, Helvetica, sans-serif;
	color: #143137;
}

/* to hide the text part of links, i must do the following:

put a huge text-indent on, make the font size 0px, display: block if the link is to be the size of an image, and optional: make the text the colour of the background e.g. in this case white #fff */

#navlinks li a {
	background-image:url('/links.png');
	height:18px;
	text-indent:-10000px;
	font-size:0px;
	display:block;
	
	}

/* to make my image rollover/hovers, i must make each link a separate class - here they are menu1, menu2 etc. 
so first i have my div - #navlinks.
then i have li to denote the list item.
then a to denote the link.
then a dot . to denote the class
then the class name, menu1

then i need to position the image. the first one is 0px along, this is the base image.
the second image, menu2 is -100px along (so 100px to the left). i also give this a width to ensure the full text shows up.
the third is 215px to the left. and so on. 

each image has a width, and they move gradually to the left because my links are in a line.

for the hover, i keep the same x-axis positioning, so -100px for the 2nd, -215px for the third etc, but i move all of the images up, because the hover links are underneath the static links */

#navlinks li a.menu1 {
background-position:0px -4px;
width:60px;
}

#navlinks li a.menu2 {
background-position:-100px -4px;
width:70px;
padding-right: 15px;
}
	
#navlinks li a.menu3 {
background-position:-215px -4px;
width:100px;
}

#navlinks li a.menu4 {
background-position:-355px -4px;
width:50px;
}

#navlinks li a.menu5 {
background-position:-440px -4px;
width:100px;
}

	
#navlinks li a.menu1:hover {
background-position:0px -38px;
width: 60px;
}
	
#navlinks li a.menu2:hover {
background-position:-100px -38px;
width:70px;
padding-right: 15px;
}

#navlinks li a.menu3:hover {
background-position:-215px -38px;
width:100px;
}

#navlinks li a.menu4:hover {
background-position:-355px -38px;
width:50px;
}

#navlinks li a.menu5:hover {
background-position:-440px -38px;
width:100px;
}


/* Search Styles */

#search {
	position: absolute;
	left: 600px;
	margin-top: 260px;
	display: none;
}
#header input {
	background-image: url(images/back_input.gif);
	background-position: center top;
	background-repeat: repeat-x;
	height: 14px;
	padding: 2px 1px;
	font: 14px;
	font-family:Arial, Helvetica, sans-serif;
}
#header input[type="image"] {
	border: none;
	background-image: none;
	vertical-align: top;
	height: 16px;
}

/* Content Styles */

#main {
	background-color: #fff;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	padding-top: 10px;
	clear: both !important;
	min-height: 500px;
	overflow: hidden;
    
}

#hometext {
	width: 685px;
	float:left;
	height: 406px;
	margin-left: 10px;
}

/* i have applied a height and width to the #leftbook div, this is the exact size of the background-image, so i know it won't streth or be mishapen */

#leftbook {
	width: 260px;
	float: left;
	background-image:url(http://squareknife.com/mentalmodels/book.png);
	height:406px;
	margin-left: 5px;
}

#leftbook a {
	margin-left: 20px;
	text-indent: -99999999999px;
	text-decoration:none;
	font-size:0px;
	height: 406px;
	width: 261px;
	display: block;
	color: #fff;
}

#links {
	width: 940px;
	min-height:2000px;
	padding: 0px 10px 0px 10px;
}

#links h1, p {
	font-family: Arial, Helvetica, sans-serif;
}

#links h1 {
	color: #406b73;
}

#links h2 {
	font-family:Arial, Helvetica, sans-serif;
	color: #143137;
	font-weight:bolder;
	font-size:20px;
}

#links h3 {
	color: #143137;
	font-weight:bolder;
	font-family:Arial, Helvetica, sans-serif;
}

#links p {
	color: #143137;
}

blockquote {
	padding-left: 5px;
}

#indexcontent {
	padding-left: 20px;
	padding-right: 20px;
	width: 475px;
	font: 14px;
	font-family:Arial, Helvetica, sans-serif;
	text-align: justify;
	min-height: 500px;
}
#content {
	padding-left: 20px;
	padding-right: 20px;
	width: 660px;
	font: 12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align: justify;
        float: left;
        height: auto;
}
#content img {
        width: 180px;
}
span img, #meta img {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.aboutheadings li {
	font-family:Arial, Helvetica, sans-serif;
}

#abouttext {
	display: inline;
	float: left;
	width: 710px;
}

#abouttext h1 {
	font-family:Arial, Helvetica, sans-serif;
	color: #406b73;
}

#abouttext p, .aboutheadings {
	font-family:Arial, Helvetica, sans-serif;
	color: #143137;
}

span img {
	vertical-align: top;
}
#meta {
	margin-left: 150px;
	background-color: #eee;
	width: 400px;
	text-align: center;
	padding: 10px;
}
#meta img {
 vertical-align: top;
 }
#main ul, #main li {
	margin-left: 0;
	list-style-type: none;
	list-style-image: url('images/arrows.gif');
}
#main h3 {
	font-size: 16px;
}
h3.single {
	margin-bottom: 0;
}
#previousposts {
	padding-left: 30px;
}
#previousposts li {
	list-style-image: url('images/posts.png');
	margin: 0 0 30px 0;
}
#previousposts h4 {
	font-size: 15px;
	margin: 0;
}
#previousposts .date {
	font-size: 12px;
}

/* Sidebar Styles */

#sidebar {
	float: right;
	width: 200px;
	text-align: left;
	font: 12px;
	vertical-align: top;
	padding-left: 0;
	margin-top: 25px;
}
#sidebar h2 {
	color: #406b73;
	font: bold 14px Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
}
#sidebar ul {
	padding-left: 0;
}
#sidebar li {
	padding: 4px;
	list-style-image: none;
	background-color: #eee;
}
#sidebar li:hover {
	padding: 4px;
	list-style-image: none;
	background-color: #ccc;
	background-image: url('images/arrow.gif');
	background-repeat: no-repeat;
	background-position: right;
}
#sidebar li:hover a, #sidebar li:hover a:hover {
	color: #000;
}
#sidebar a:hover {
	text-decoration: none;
}
#content h2 {
	color: #406b73;
}
h6 {
	margin: 0;
	padding-top: 22px;
	font: italic 16px Arial, Helvetica, sans-serif;
}
hr {
	background-color: #406b73;
}

/* Footer Styles */

#footer {
	margin: auto;
	width: 960px;
	color: #99b380;
	height: 35px;
	background-color: #406b73;
	font: 12px;
	clear: both;
        padding-bottom: -10px;
}

/* the foottext div applies styling to the first half of the footer, the copyright area.

the devby div applies styling to the second half of the footer, the developed by side */

.foottext {
	padding-top: 10px;
	padding-left: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

.devby {
	margin-left: 760px;
	margin-top: -19px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

/* i must remember to add specific styling to any links, e.g. in the footer, by applying styling to the div name followed by a, for the link itself */

#footer a {
        padding-top: -5px;
	color: #fff;
	text-decoration: underline;
}

/* Comment Styles */

#commentcontainer {
	width: 675px;
	background-color: #fff;
}
#commentcontainer h4 {
	background: url('images/comments.gif') no-repeat;
	padding-left: 18px;
}
#comments {
	padding-left: 0;
	width: 350px;
}
#replies {
	float: left;
	width: 350px;
	background-color: #fff;
}
#reply {
 	float: right;
 	width: 250px;
 	background-color: #fff;
 	margin-left: 10px;
}
#comments p {
	text-align: left;
}
ol#comments li {
	position: relative;
	list-style-image: none;
	margin-top: 15px;
	padding: 5px 42px 5px 5px;
	position: relative;
	text-align: right;
}
.avatar {
	position: absolute;
	left: 300px;
	top: 0;
	padding: 0 !important;
	margin: 0;
}
cite {
	position: relative;
	bottom: -13px;
	right: 5px;
	padding: 2px 4px 2px 4px;
	background-color: white;
}
.alt {
	background-color: #eee;
}
input, textarea {
	background-image: url(images/back_input.gif);
	background-position: center top;
	background-repeat: repeat-x;
	font: 11px;
}

/* Archive Styles */

.archive {
	border-bottom: 1px solid #ccc;
}

/* TinyMCE Styles */

.alignright {
	float: right;
}
.alignleft {
	float: left;
}
.aligncenter {
	text-align: center;
}

/* Anchor Styles */

a {
	color: #406b73;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.subnav {
	margin:0px -200px 0 0;
	display:inline;
	float: right;
}

#aboutsidebar {
      width: 200px;
      float: right;
	  font-family:Arial, Helvetica, sans-serif;
}

#david {
     width: 200px;
}

#george {
     width: 200px;
}

#aboutsidebar h5 {
     font-size: 15px;
     padding-left:33px;
     text-align:left;
}

#buybook {
	width: 680px;
}

#buybook h1 {
	font-family:Arial, Helvetica, sans-serif;
	color: #406b73;
}

#buybook p {
	font-family:Arial, Helvetica, sans-serif;
	color: #143137;
}

#leftbook1 {
	width: 260px;
	float: left;
	background-image:url(http://squareknife.com/mentalmodels/book.png);
	height:406px;
	margin-left: 805px;
	margin-top: -500px;
}

#leftbook1 a {
	color: #FFFFFF;
	text-indent: -99999999999999999px;
	text-decoration:none;
	font-size:0px;
	height: 406px;
	width: 261px;
	display:block;
}