@font-face { font-family:mainFont; src:url(../fonts/trebuc.ttf); }

* { margin:0; padding:0; font-family:mainFont; color:#FFF; }
body {
	background:url(../img/background.png) top left repeat;
}
ul { list-style:none; }
a { text-decoration:none; }
.green { color:#8dc40e; }
.orng { color:#D79B0B; }
.red { color:#D72F0B; }

.hidden-imgs {
	display:none;
}

header {
	width:98%;
	max-width:1000px;
	margin:60px auto 40px;
}
header .left {
	width:50%;
	height:71px;
	text-align:left;
	float:left;
}
header .right {
	width:50%;
	height:71px;
	text-align:right;
	display:table-cell;
	vertical-align:middle;
}
header h1 {
	font-size:32pt;
}
header p {
	font-size:12.6pt;
}
header img {
	margin:auto;
}

nav,
nav.sub-nav-websites,
nav.sub-nav-graphics {
	width:100%;
	border-bottom:1px #FFF solid;
	margin:0 auto;
	text-align:center;
}
nav.sub-nav {
	display:none;
}
nav ul,
nav.sub-nav-websites ul,
nav.sub-nav-graphics ul {
	width:98%;
	margin:0 auto;
	max-width:1000px;
	display:inline-block;
	position:relative;
}
nav li,
nav.sub-nav-websites li,
nav.sub-nav-graphics li {
	margin:10px 30px 10px 0;
	display:inline;
	float:left;
}
nav li a,
nav.sub-nav-websites li a,
nav.sub-nav-graphis li a {
	padding:8px 0;
}
#main-magic-line { position: absolute; bottom: -4px; left: 0; width: 100px; height: 2px; border-bottom: 4px #6ccb18 solid; margin:0; padding:0; }
#sub-nav-websites-magic-line,
#sub-nav-graphics-magic-line,
#sub-nav-games-magic-line,
#sub-nav-programming-magic-line,
#sub-nav-photography-magic-line { position: absolute; bottom: -4px; left: 0; width: 100px; height: 2px; border-bottom: 4px #298e00 solid; margin:0; padding:0; }

.sub-nav-websites,
.sub-nav-graphics,
.sub-nav-games,
.sub-nav-programming {
	display:none;
}

.pages {
	width:98%;
	max-width:1000px;
	margin:28px auto 0;
}
section.sec-updates {
	float:left;
	width:493px;
	text-align:left;
}
section.sec-updates a,
section.sec-updates a:visited {
	color:#6ccb18;
}
section.sec-updates a:hover {
	text-decoration:underline;
}
section.sec-about-contact {
	float:left;
	width:330px;
	text-align:left;
}
section.sec-about {
	width:375px;
}
section.sec-donate {
	width:100%;
}
section.sec-donate p.sec-headers {
	width:auto;
}
aside {
	float:right;
	width:452px;
	text-align:left;
}
aside.sec-contact {
	float:right;
	width:285px;
	text-align:left;
	font-size:11pt;
}

p.section-headers {
	font-size:18pt;
	margin-bottom:5px;
}

.sec-about-contact,
.sec-about,
.sec-contact,
.sec-donate {
	display:inline-block;
}

.sec-updates article,
.sec-about article,
aside.sec-contact ul {
	margin:30px 0;
	padding-bottom:25px;
}
.sec-donate {
	width:100%;
	display:inline-block;
}
.sec-donate article {
	display:table;
	margin-bottom:35px;
}

ul.funds {
	margin-bottom:50px;
}
.sec-donate .funds li {
	width:33%;
	text-align:center;
	float:left;
}

.sec-contact li {
	margin-bottom:15px;
}

.sec-about ul {
	width:225px;
	margin:0 auto 30px;
}
.sec-about li {
	font-size:10pt;
}

.sec-updates article p.section-headers,
.sec-about article p.section-headers {
	font-size:13.5pt;
	margin-bottom:15px;
}
.sec-updates article p {
	font-size:10pt;
}
.sec-about article p {
	font-size:10pt;
	width:225px;
	margin:0 auto;
}
.sec-updates article p.update-date,
.sec-about article p.update-date {
	border-top:1px #FFF dashed;
	margin-top:25px;
	text-align:right;
}

.work-box {
	width:223px;
	position:relative;
	display:inline-block;
	margin:0px 11px 22px;
	background:#6ccb18;
	font-size:10pt;
	text-shadow:0px 0px 2px #000;
}
aside .work-box {
	margin:0 auto 5px;
}
.work-box img {
	border:2px #FFF solid;
	display:block;
}
p.expand {
	width:223px;
	height:26px;
	line-height:26px;
	text-align:center;
	cursor:pointer;
}
.work-box .details {
	display:none;
	position:absolute;
	background:#227500;
	padding:15px 10px;
	z-index:99;
	width:203px;
}
.work-box .details li {
	margin:12px 0;
}
.work-box .details a {
	text-decoration:underline;
}
.description-box {
	position:absolute;
	width:219px;
	height:126px;
	display:none;
	background:rgba(0, 0, 0, 0.9);
	border:2px solid #FFF;
	line-height:126px;
	text-align:center;
	z-index:9;
}
.description-box a {
	display:inline-block;
	width:100%;
}

footer {
	width:98%;
	margin:10px auto;
	max-width:1000px;
	clear:both;
}
footer p {
	width:98%;
	text-align:left;
}