/*
Theme Name: ajgrahampro
Theme URI: http://www.ajgraham.com/
Description: white/grey theme.
Version: 1.0
Author: Alex Graham
Author URI: http://www.ajgraham.com/
*/

/* CSSReset v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body {font:100% Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; color:#666666}
a {text-decoration:none; border:0}
p {line-height:1.4}
img {border:0}
h1, h2, h3, h4, h5, h6 {letter-spacing:-0.05em; font-weight:normal; font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif}
abbr {border-bottom:1px dotted #cccccc}
ol {list-style-type:decimal; margin:0 0 0 25px}
blockquote {padding:8px; font-style:italic; background:transparent url(images/blockquote.png) no-repeat 0 0}
pre {width:600px; padding: 0; margin: 0;	background: #f0f0f0; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; line-height: 20px; /*--Height of each line of code--*/	overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/ overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/}
pre code {margin: 0 0 0 10px;  /*--Left Margin--*/ padding: 18px 0; display: block; font-family:"Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif}
.clear {clear:both}
.clear-right {clear:right}

#wrapper {margin:0 auto; overflow:auto}

.skipnav {text-align:left}
.skipnav a {position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.skipnav a:focus, .skipnav a:active {position:static; left:0; width:auto; height:auto; overflow:visible; text-decoration:underline}

/* HEADER */
#header {}

#header-top-container {width:960px; height:72px; margin:0 auto}
#header-top-container h2#logo {float:left; width:320px}
#header-top-container h2#logo a {display:block; width:320px; height:72px; background:#f9f9f9 url('images/logo.png') no-repeat scroll 0 0}
#header-top-container h2#logo a:hover {}
#header-top-container h2#logo a i {position:absolute; left:-9999px}

.menu-mini-container {width:550px; overflow:auto; padding:40px 0 0 80px;}
	.menu-mini-container ul {float:left; width:220px; margin:6px}
	.menu-mini-container ul li {float:left; margin-left:24px; padding-left:10px; font-size:10px; background:url('images/square-bullet.gif') no-repeat scroll left center #ffffff;}
	.menu-mini-container ul li a {color:#888888; font-size:1.1em;}
	.menu-mini-container ul li a:hover, .menu-mini-menu-container ul li a:focus {color:#626262;}

#header-top-container #top-nav form#search-form {float:right; left:990px; position:absolute; top:40px; width:300px;}
#header-top-container #top-nav form#search-form #search-box {float:left; width:229px; height:18px; padding:2px 2px 3px; border:1px solid #eeeeee}
#header-top-container #top-nav form#search-form #search-button {float:right; width:60px; height:25px; padding:4px 2px; border:1px solid #eeeeee; color:#888888; font-size:10px; text-transform:uppercase; background:url('images/form-button-bg.png') repeat-x scroll 0 0}

#header-bottom-container {height:222px; background:transparent url('images/body-bg.png') repeat top left}
#box-container {width:960px; margin:0 auto}
#box-container .boxes {float:left; width:310px; height:212px; padding:5px}

#box-container #box1 {background-image:url('images/box1.png')}
#box1 #featured {width:310px; padding-right:250px; position:relative; height:212px}
#box1 #featured ul.ui-tabs-nav {position:absolute; top:0; left:320px; list-style:none; padding:0; margin:0; width:310px}
#box1 #featured ul.ui-tabs-nav li {padding:1px 0; font-size:12px; color:#666}
#box1 #featured ul.ui-tabs-nav li img {float:left; margin:2px 5px; background-color:#fff; padding:2px; border:1px solid #eee}
#box1 #featured ul.ui-tabs-nav li span{font-size:11px; font-family:Verdana; line-height:18px}
#box1 #featured li.ui-tabs-nav-item a {display:block; height:51px; color:#333; background-color:#fff; line-height:20px}
#box1 #featured li.ui-tabs-nav-item a:hover {background-color:#f2f2f2}
#box1 #featured li.ui-tabs-selected {background:url('images/selected-item.gif') 0% 100% no-repeat}
#box1 #featured ul.ui-tabs-nav li.ui-tabs-selected a {background-color:#ccc}
#box1 #featured .ui-tabs-panel {width:310px; height:212px; background-color:#999; position:relative}
#box1 #featured .ui-tabs-panel .info {position:absolute; bottom:0px; left:0px; background:url('images/transparent-bg.png')}
#box1 #featured .info h2 {letter-spacing:0em; font-size:15px; color:#fff; padding:5px; margin:0; overflow:hidden}
#box1 #featured .info p {margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0}
#box1 #featured .info a {text-decoration:none; color:#fff}
#box1 #featured .info a:hover {text-decoration:underline}
#box1 #featured .ui-tabs-hide {display:none}

#box-container #box2 {background-image:url('images/box2.png')}
#box-container #box3 {}

#box-container #box3 h3 {padding:10px; font-size:20px}
#box-container #box3 .latest-post {height:160px; overflow:hidden; padding:0 20px}
#box-container #box3 .latest-post span.post-date {display:block; font-size:10px; letter-spacing:1.5px; line-height:1.7em}
#box-container #box3 .latest-post h4 {margin:5px 0; font-size:18px}
#box-container #box3 .latest-post h4 a {color:#464646}
#box-container #box3 .latest-post h4 a:hover {color:#626262}
#box-container #box3 .latest-post p {margin:0}
#box-container #box3 .latest-post a {color:#464646}
#box-container #box3 .latest-post a:hover {color:#626262}

#box-container #box3 a#rss {background:transparent url('images/rss.png') no-repeat scroll 50% 50%; top:-12px; display:block; height:42px; overflow:hidden; position:relative; right:-260px; text-indent:-99999em; width:42px}

/* MENU */
.menu-main-container {clear:both; background:#ccc; height:32px;}
	.menu-main-container ul {width:960px; margin:0 auto;}
	.menu-main-container ul li {float:left; position:relative;}
	.menu-main-container ul li a {display:block; margin:4px 1px 0; padding:5px 20px 10px; color:#1b1713; font-size:11px; text-transform:uppercase;}
	.menu-main-container ul li a:hover, .menu-main-menu-container ul#menu-main-menu li a:focus {background-color:#fff; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px;}
	.menu-main-container ul li.current-menu-item a, .menu-main-container ul li.current-page-ancestor a {-moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; background-color:#fff;}

.menu-services-container, .menu-portfolio-container {clear:both; background:#888; height:32px;}
	.menu-services-container ul, .menu-portfolio-container ul {width:960px; margin:0 auto;}
	.menu-services-container ul li, .menu-portfolio-container ul li {float:left; position:relative;}
	.menu-services-container ul li a, .menu-portfolio-container ul li a {display:block; margin:0px 1px; padding:9px 20px 6px; color:#f9f9f9; font-size:11px; text-transform:uppercase;}
	.menu-services-container ul li a:hover, .menu-portfolio-container ul li a:hover, .menu-services-container ul#menu-main-menu li a:focus, .menu-portfolio-container ul#menu-main-menu li a:focus {background-color:#adadad; -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px;}
	.menu-services-container ul li.current-menu-item a, .menu-portfolio-container ul li.current-menu-item a {-moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; background-color:#adadad;}	

/* CONTENT */
#content {clear:both; width:960px; margin:0 auto; padding:45px 0 0}
#content h1 {float:left; width:300px; color:#464646; text-align:right; font-size:26px}
#content h2 {margin:18px 0 9px; font-size:18px; color:#464646}
#content h2.entry-title {float:right; width:630px}
#content h3 {color:#464646; font-size:18px}
#content p {color:#666; margin:0 0 15px; letter-spacing:0.3px; font-size:14px; font-family:"Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;}
#content a {padding:0 4px; color:#333; background-color:#e4e4e4; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px}
#content a:hover, #content a:focus {color:#fff; background-color:#484848}
#content .button {background:url("images/form-button-bg.png") repeat-x scroll 0 0 transparent; border:1px solid #EEEEEE; color:#888888; font-size:10px; height:25px; padding:4px 2px; text-transform:uppercase}
#content blockquote {background:url("images/blockquote.png") no-repeat scroll 0 0 transparent; margin-left:80px; margin-top:15px; padding-left:30px}

#content .header {}
#content .header h1 {float:left; width:300px; color:#464646; text-align:right; font-size:26px}
#content .header p {float:right; width:630px;}

#content .entry-container {clear:left; width:100%; overflow:auto}
#content .entry-container h2 a {background:transparent; padding:0; -moz-border-radius-topleft:0; -webkit-border-top-left-radius:0; -moz-border-radius-topright:0; -webkit-border-top-right-radius:0}
#content .entry-container h2 a:hover, #content .entry-container h2 a:focus {color:#464646; background:transparent}

#content .entry-content {float:right; width:630px; margin:0 0 30px; border-bottom:6px double #F1F1F1}
#content .entry-content p {}
#content .entry-content p:first-child {line-height:24px}
#content .entry-content ul {list-style-type:disc; margin:10px 0 10px 25px}
#content .entry-content ul li {}

#content .entry-meta {float:left; width:300px; margin:0 0 15px; text-align:right}
#content .entry-meta p, #content .entry-meta a {margin:4px 0 0}
#content .entry-meta p {font-size:12px; letter-spacing:1.5px; line-height:1.7em; text-align:right; background-color:#f7f7f7}

#content #comments {clear:both; float:left; width:930px; margin:20px 0}
#content p#comment-notes {float:left; width:300px; margin:4px 0 15px}
#content #comments-list {float:right; width:600px}
#content #comments-list p {width:600px}
#content #respond .formcontainer {float:left; width:300px}

#content .navigation {float:right; width:630px}
#content .nav-previous {float:right; width:48%; text-align:right}
#content .nav-next {float:left; width:48%}

/* HOMEPAGE */
body.home #content {overflow:hidden; padding:45px 0 0}
body.home #content h1#title {}
body.home #content p {}

/* FOOTER */
#footer {clear:both; width:960px; margin:30px auto}

#footer #content-boxes {clear:both; margin:10px 0; overflow:auto}
#footer #content-boxes .box {float:left; width:300px; margin-right:30px; background:transparent url('images/body-bg.png') repeat top left}
#footer #content-boxes .box h2 {margin:5px}
#footer #content-boxes .box h2 a {color:#464646; text-decoration:none; font-size:18px}
#footer #content-boxes .box h2 a:hover {}
#footer #content-boxes .box img {float:left; width:290px; height:110px; margin:0 5px}
#footer #content-boxes .box p {margin:15px 5px}
#footer #content-boxes .box a.more {float:right; width:290px; padding:5px; color:#464646; text-decoration:none; text-align:right; text-transform:uppercase; font-size:11px; background-color:#f4f8ec}
#footer #content-boxes .box a.more:hover {color:#888888}
#footer #content-boxes .last {margin:0}

#footer #box-footer {clear:both; width:960px; height:271px; background:transparent url('images/box-bg-2.png') repeat-y top left}
#footer #box-footer .box {float:left; width:285px; overflow:hidden; margin:0 30px 0 0; padding:25px 0 15px 15px}
#footer #box-footer .box h3 {padding:5px 0; font-size:20px}
#footer #box-footer .last {margin:0; padding:25px 0 15px}

/* Box 1 */
#box-footer #twitter {}
#box-footer #twitter p {text-align:right}
#box-footer #twitter a {color:#464646; text-align:right}
#box-footer #twitter a:hover {color:#626262}


/* Box 2 */
#box-footer #latest-posts {padding:0 15px}
#box-footer #latest-posts span.post-date {display:block; font-size:10px; letter-spacing:1.5px; line-height:1.7em}
#box-footer #latest-posts h4 {margin:5px 0; font-size:18px}
#box-footer #latest-posts h4 a {color:#464646}
#box-footer #latest-posts h4 a:hover {color:#626262}

/* Box 3 */
#box-footer #contact-details {}
#box-footer #contact-details p {color:#888888; margin:0 0 0 98px; font-size:12px; line-height:24px}
#box-footer #contact-details a {color:#464646}
#box-footer #contact-details a:hover {color:#888888}

#footer #menu2 {clear:both; margin:15px 0; overflow:auto}
#footer #menu2 ul {}
#footer #menu2 ul li {float:left}
#footer #menu2 ul li a {color:#1B1713; margin:0 40px 0 0; font-size:11px; text-transform:uppercase}
#footer #menu2 ul li a:hover, #footer #menu2 ul li a:focus {color:#626262}
body.home #menu2 a#link-home, body.projects #menu2 a#link-projects, body.portfolio #menu2 a#link-portfolio, body.services #menu2 a#link-services, body.cv #menu2 a#link-cv, body.blog #menu2 a#link-blog, body.about #menu2 a#link-about, body.contact #menu2 a#link-contact {color:#626262}

#footer span#copywrite {float:left; margin:20px 0; font-size:10px}
#footer a#sitemap {float:right; margin:20px 0; font-size:10px; color:#626262;}

/* Costs */
table.costs {clear:left; margin:0 0 10px; border:1px solid #ccc; padding:2px;}
table.costs th {padding:2px; border:1px solid #ccc; font-weight:bold;}
table.costs tr {padding:2px; border:1px solid #ccc;}
table.costs tr.alt {border:1px solid #ccc; background:#DFDFDF;}
table.costs td {padding:2px; border:1px solid #ccc;}

/* Highlighter */
pre {margin: .5em; padding: .5em; background-color: #f4f4f4}
pre code, pre .ruby .subst, pre .lisp .title {color: black}
pre .string, pre .title, pre .parent, pre .tag .attribute .value, pre .rules .value, pre .rules .value .number, pre .preprocessor, pre .ruby .symbol, pre .instancevar, pre .aggregate, pre .template_tag, pre .django .variable, pre .smalltalk .class, pre .addition, pre .flow, pre .stream, pre .bash .variable, pre .apache .cbracket {color: #050}
pre .comment, pre .annotation, pre .template_comment, pre .diff .header, pre .chunk {color: #777}
pre .number, pre .date, pre .regexp, pre .literal, pre .smalltalk .symbol, pre .smalltalk .char, pre .change {color: #800}
pre .label, pre .javadoc, pre .ruby .string, pre .decorator, pre .filter .argument, pre .localvars, pre .array, pre .attr_selector, pre .pseudo, pre .pi, pre .doctype, pre .deletion, pre .envvar, pre .shebang, pre .apache .sqbracket {color: #00e}
pre .keyword, pre .id, pre .phpdoc, pre .title, pre .built_in, pre .aggregate, pre .smalltalk .class, pre .winutils, pre .bash .variable, pre .apache .tag, pre .xml .tag, pre .xml .title {font-weight: bold; color: navy}
pre .html .css, pre .html .javascript, pre .html .vbscript {opacity: 0.5}
/* --- */
pre .apache .tag {font-weight: bold; color: blue}