@charset "UTF-8";
/* body elements */

* {
	margin: 0;
	padding: 0;
}

/* Set 1em to 10px */
body {font-size: 62.5%;}
html>body {font-size: 10px;}

/* Base font face */
* {font-family: Helvetica, Arial, sans-serif;} 
html>body * {font-family: Helvetica, Arial, sans-serif;}

/* Base font size */
#container {
	font-size: 1em;
	line-height: 1.3em;
}

a, a:visited, a:link {
	color: #000000;
	border-bottom: 2px solid #CCCCCC;
	text-decoration: none;
}

a:active {
	color: #3366FF;
	text-decoration: none;
}

a:hover {
	border-bottom: 2px solid #3366FF;
}

a img {
	border: 0;
	border-bottom: none;
    text-decoration: none;
}

img {
	border: 0;
	border-bottom: none;
    text-decoration: none;
}


/* main navigation */

body {
	margin: 0px;
	padding: 0px;
	background-color: #333333;
}

#container {
	margin: 0px 10px 10px 10px;
    min-width: 500px;
}	

/* nav */

.top {
	height: 35px;
}

.nav {
	float: left;
	text-align: left;
}

.nav ul {
	list-style: none;
	margin: 10px 0px 0px 0px;
}

.nav li {
	float: left;
	display: block;
	margin: 0px 5px 0px 0px;
	background-color: #CCCCCC;
	font-size: 1.2em;
	font-weight: bold;
}

.nav .selected {
	background: #FFFFFF;
}

.nav li a, .nav li a:link, .nav li a:visited {
	display: block;
	height: 13px;
	padding: 8px 8px 4px 8px;
	text-decoration: none;
	border-bottom: none;
}

.nav li a:hover {
	/*color: #<?= $r_hex ?>;
	background: #FFFFFF;*/
    color: #FFFFFF;
	background-image: url("img/grayscale.gif");
    background-repeat: repeat;
    background-attachment: fixed; 
    background-position: top left;
}

.egg {
	float: left;
    margin: 6px 5px 0px 10px;
}

.logo {
	float: right;
}

.logo p {
	float: left;
    margin: 12px 0px 10px 0px;
    font-size: 1.2em;
    font-weight: bold;
	color: #FFFFFF;
    
}

.logo p.img {
	float: left;
    height: 20px;
    width: 20px;
    margin: 7px 0px 10px 5px;
	background-image: url("img/grayscale2.gif");
    background-repeat: repeat;
    background-attachment: fixed; 
    background-position: top left;
}


/* Home Layout */

#mainContent {
	padding: 5px 5px 0px 15px;
	background-color: #FFFFFF;
}

.postGrid {
	padding: 10px 10px 5px 0px;
}


/* Post Content */

.post {
	padding: 0px 0px 10px 0px;
}

.post ul {
	float: left;
	list-style: none;
}

.post li {
	float: left;
	list-style: none;
	text-align: left;
	width: 300px;
	color: #000000;
	margin: 0px 15px 15px 0px;
}

.post p.post-title, .photoGrid p.post-title {
	margin: 0px 0px 5px 0px;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1.4em;
}

.post p.post-body {
	margin: 0px 0px 5px 0px;
	font-size: 1.2em;
	line-height: 1.4em;
}

.post .post-body p, .photoGrid .post-body p {
	margin: 0px 0px 5px 0px;
	font-size: 1.2em;
	line-height: 1.4em;
}

.post p.tags, .photoGrid p.tags {
	margin: 0px 0px 5px 0px;
	font-size: 1.0em;
    line-height: 1.2em;
    color: #999999;
    border-left: 1px dotted #999999;
    padding-left: 5px;
}

.post p.tags a, .post p.tags a:visited, .post p.tags a:visited,
.photoGrid p.tags a, .photoGrid p.tags a:visited, .photoGrid p.tags a:visited {
	font-size: 1.0em;
    line-height: 1.2em;
    color: #999999;
    border-bottom: none;
}

.post p.tags a:hover, .photoGrid p.tags a:hover {
	color: #3366FF;
}

.post p.date, .photoGrid p.date {
	margin-bottom: 1px;
	font-weight: bold;
	font-size: 1em;
	letter-spacing: .02em;
	color: #999999;
}

.post p img {
	margin: 0px 0px 10px 0px;
	border: 0;
	border-bottom: none;
}

.post p a img {
	border: 0;
	border-bottom: none;
    text-decoration: none;
}

.post p.hr {
	margin: 10px 0px 10x 0px;
	color: #CCCCCC;
    height: 2px;
}

.post p.thumb a, .photoGrid p.thumb a {
	border-bottom: none;
}

.post p.thumb a:hover, .photoGrid p.thumb a:hover {
	height: 1px;
	opacity: .75;
    filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
    khtml-opacity: .75;
}

/* flickr box */

.post-flickr {
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 15px 0px;
	border: 2px solid #333333;
	background-color: #CCCCCC;
}

.post-flickr p {
	padding: 10px 10px 0px 10px;
	color: #000000;
}

.post-flickr p.flickr-title {
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.2em;
	color: #000000;
}

.flickr_badge_wrapper { 
	padding: 10px 0px 0px 10px;
}
.flickr_badge_image { 
	float: left;
	display: block;
	margin: 10px 10px 0px 0px;
}

.flickr_badge_image a {
	display: block;
	border: 1px solid #000000;
}

.flickr_badge_image a:hover {
	display: block;
	border: 1px solid #FFFFFF;
}


/* 900px width page: eg. photo-single */

.post900 {
	padding: 10px 10px 5px 0px;
    width: 900px;
}

.post900 p.title {
	margin: 0px 0px 0px 0px;
	font-size: 2.8em;
	line-height: 1.2em;
    	letter-spacing: -.02em;
    	width: 600px;
}

.post900 p.title a {
	border-bottom: none;
	color: #000000;
}

.post900 p.title a:hover {
	border-bottom: none;
	color: #3366FF;
}

.post900 p.body, .post900 .body p {
	margin: 0px 0px 15px 0px;
	font-size: 1.4em;
	line-height: 1.5em;
    width: 600px;
} 
 

.post900 p.single-date {
	margin: 0px 0px 10px 0px;
	padding-left: 4px;
	color: #CCCCCC;
	border-left: 1px dotted #CCCCCC;
	font-size: 1.2em;
	line-height: 1em;
	letter-spacing: .02em;
}

.post900 p.single-cat {
	margin: 0px 0px 1px 0px;
	padding-left: 5px;
	border-left: 1px dotted #666666;
	color: #666666;
	font-size: 1.4em;
	line-height: 1.2em;
	letter-spacing: .02em;
}

.post900 p.single-tags {
	margin: 0px 0px 15px 0px;
	padding-left: 5px;
	border-left: 1px dotted #666666;
	color: #666666;
	font-size: 1.4em;
	line-height: 1.2em;
	letter-spacing: .02em;
}

.post900 p img {
	margin: 0px 0px 0px 0px;
}

.post900 p img a, .post900 .body p img a {
	border-bottom: none;
}


/* photo grid */

.photoGrid {
	padding: 0px 10px 5px 0px;
}

.photoGrid p.post-title {

}

.photoGrid ul {
	float: left;
	list-style: none;
}

.photoGrid li {
	float: left;
	list-style: none;
	text-align: left;
	width: 300px;
	color: #000000;
	margin: 0px 15px 15px 0px;
}

.photoGrid p img {
	margin: 0px 0px 5px 0px;
}

.photoGrid p img a {
	border-bottom: none;
}

.photoGrid p.title, .postGrid p.title {
	margin: 0px 0px 10px 0px;
	font-size: 2.8em;
	line-height: 1.2em;
    letter-spacing: -.02em;
	color: #000000;
}

.photoGrid p.title a, .postGrid p.title a {
	border-bottom: none;
	color: #000000;
}

.photoGrid p.title a:hover, .postGrid p.title a:hover  {
	border-bottom: none;
	color: #3366FF;
}


/* projects */

.projects-post {
	padding: 10px 0px 15px 0px;
}

.projects-post p.title {
	font-size: 2.8em;
	color: #000000;
	margin: 10px 0px 15px 0px;	
}

/* tags + misc */

.project-tags {
	width: 600px;
}

.project-tags p.title {
	font-size: 1.4em;
}

.project-tags ul {
	margin: 0px;
	padding: 0px;
}

.project-tags li {
	float: left;
	list-style-type: none;
	margin: 0px 10px 0px 0px;
	font-family: "Times New Roman", Times, serif;
	font-size: 2.8em;
	line-height: 1.4em;
}

.project-tags li a {
	font-family: "Times New Roman", Times, serif;
	border-bottom: 3px solid #CCCCCC;
}

.project-tags li a:hover {
	font-family: "Times New Roman", Times, serif;
	border-bottom: 3px solid #3366FF;
}


/* pagination */
/* inspired by flickr */
.pagination {
	padding: 5px 0px 15px 0px;
	text-align: right;
	font-size: 1.1em;
	line-height: 1.2em;
}

.pages {
	margin-left: auto;
	margin-right: auto;
}

.pagination .currentPage {
	text-decoration: none;
	background: #FFFFFF;
	border: none;
	color: #3366FF;
	font-weight: bold;
}

.pagination .next {
	margin-left: 8px;
}

.pagination .prev {
	margin-right: 8px;
}

.pagination a {
	text-decoration: none;
	background: #FFFFFF;
	border: solid 1px #3366FF;
}
.pagination a:hover {
	background: #3366FF;
	border: solid 1px #3366FF;
	color: #FFFFFF;
}
.pagination a, .pagination span { 
	padding: 5px 5px 3px 5px;
	margin: 0px 2px 0px 2px;
}
.pagination a.page {
	text-decoration: none;
}
.pagination a.page:hover{ 
	background: #3366FF;
	border: solid 1px #3366FF;
	color: #FFFFFF;
}
.pagination p {
	color: #000000;
}

p.viewMore {
	font-weight: bold;
	float: right;
}

p.viewPrev {
	font-weight: bold;
	float: left;
}

p.viewPrev a, p.viewMore a {
	padding: 5px 5px 3px 5px;
	border: solid 1px #3366FF;
}

p.viewPrev a:hover, p.viewMore a:hover {
	padding: 5px 5px 3px 5px;
	border: solid 1px #3366FF;
	color: #FFFFFF;
	background-color: #3366FF;
}


/* Footer */
.footer {
	border-top: 1px dotted #333333;
	background-color: #CCCCCC;
	margin: 0px 0px 10px 0px;
    padding: 10px 10px 10px 15px;
}

.col300 {
	float: left;
	width: 300px;
	margin: 5px 10px 0px 0px;
	padding: 0px 5px 0px 0px;
}

.col600 {
	float: left;
	width: 600px;
	margin: 0px 15px 5px 0px;
	padding: 5px;
}

.footer ul {
	list-style: none;
}

.footer li {
	
}

.col300 p.title, .col600 p.title {
	margin: 0px 0px 5px 0px;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.2em;
	color: #000000;
}

.col300 p.tag-cloud {
	margin: 0px 0px 5px 0px;
	line-height: 2em;
	font-weight: bold;
}

p.tag-cloud .t1 {
	font-size: 1.4em;
}

p.tag-cloud .t2 {
	font-size: 1.6em;
}

p.tag-cloud .t3 {
	font-size: 1.8em;
}


.col300 p.tag-cloud a {
	border-bottom: none;
	margin: 0px 6px 0px 0px;
	color: #FFFFFF;
}

.col300 p.tag-cloud a:hover {
	color: #3366FF;
}

.col300 .archiveList {
	clear: both;
}

.col300 .archiveList ul {
	margin: 0;
	padding: 0;
	background: #CCCCCC;
	font-size: 1.2em;
	font-weight: bold;
}

.col300 .archiveList li a {
	display: block;
	color: #FFFFFF;
	border-left: 1px dotted #FFFFFF;
	border-bottom: 1px dotted #FFFFFF;
	padding: 4px 4px 4px 4px;
}

.col300 .archiveList ul li a:hover {
	color: #3366FF;
}

.col300 .archiveList ul {
	list-style-type: none;
}

.search p img {
	border: 0;
	border-bottom: none;
}

.search p a img {
	border: 0;
	border-bottom: none;
    text-decoration: none;
}


/* search bar */

.search {
	float: left;
	width: 200px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 15px 0px;
}

input.searchField { /* input */
	float: left;
	padding: 5px 2px 0px 4px;
	font-size: 1.4em;
	height: 18px;
	width: 200px;
	border: solid 1px #333333;
}

input.submitButton { /*submit button */
	display: block;
	border: 0px;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 0px 5px;	
	background: #333333;
	color: #FFFFFF;
	font-size: 1.2em;
	font-weight: bold;
	cursor: pointer;
}


/* Fixin's */

.clear:after {
	clear: both;
	content: '.';
	display: block;
	visibility: hidden;
	height: 0;
}

* html .clear {
	height: 1%;
}