/* html5 sections */
header, footer, section, nav{
	display:block;
}




body {
width:960px;
background:#F4F4F4;
font:15px normal;
font-family: "Lucida Sans Unicode","Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif;
line-height:1.6em;
color:#333;
margin:0 auto;
}

/* global */
small {
font-size: 10px;
}
h1{
font-size: 26px;
color: #229BD4;
margin: 0 0 19px 0;
font-weight:normal;
}
h2, h3{
font-size: 20px;
color: #333;
font-weight:normal;
margin:10px 0 6px 0;
}
h3 {
	font-size: 16px;
}
a {
color: #229BD4;
}

a:hover {
color: #006b9d;
}


p {
	margin: 0 0 15px 0;
	padding:0;
}

.fl {
float:left
}
.fr {
	float:right;
}

.third {
	width: 200px;
	padding: 10px;
	border: 1px solid #fff;
}

.half {
	float:left;
	width: 379px;
	padding-right: 30px;
	margin:0;
}

.half:nth-child(even) {
	padding-right:0;
	margin-left: 30px;
	border:0;
	
}

.center {
	text-align:center;
}

.end {
	margin-right:0;
}

.clear {
	clear:both;
}

hr {
border:0;
border-bottom: 1px dotted #ccc;
display:block;
outline:none;
margin: 20px 0;
}
.subhead, .subhead-noborder {
	font-size: 1.3em;
	line-height: 1.7em;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 20px;
	margin-bottom:20px;
}
.subhead-noborder {
	border-bottom:0;
	padding:0;
	margin:0;
}
.highlight {
	color: #FFAE3A;
}

.smallhead {
font-size: 14px;
font-style: italic;
color: #999;
}

.framedpic {
border: solid 10px #f9f9f9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}


a.bigbutton {
padding: 8px 35px;
font-weight:bold;
border: none;
text-shadow: 0 1px 1px rgba(255,255,255,.85);
display:inline-block;
color: #006b9d;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
background: -moz-linear-gradient(0% 100% 90deg,#bbb, #fff);

-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);

margin: 10px auto;
cursor:hand;
text-decoration:none;
}

.divider {
display:block;
width: 100%;
height: 1px;
background: #ccc;
margin: 50px 0;
}

header {
margin: 20px 0 10px 0;
padding: 20px 40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 30px;
z-index:2;
}

header a strong {
width: 291px;
height: 109px;
background: url(../site-images/logo3.png) no-repeat;
margin: 3px 0 0 -25px;
z-index:20;
display:block;
position:relative;
text-indent: -900px;
}



section, footer{
border:1px solid #fff;
overflow:auto;
margin: 0 0 15px 0;
padding: 20px 70px;
background:#fff;
color:#666;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
clear:both;
z-index:1;
}

section.main {
padding: 55px 70px;
}

footer {
padding: 20px 40px;
text-align: center;
margin: 0;
clear:left;
font-size: 12px;
}
footer p {
	margin:0;
	padding:0;
}
footer #contactinfo {
	font-size: 10px;
}


nav {
float:right;
}

nav ul {
	list-style:none;
	display:block;
	float:left;
	margin:0;
	padding:0 5px;
	overflow:hidden;
}

nav ul li {
	float:left;
	margin:0;
	padding:0;
}


nav ul li a {
	display:block;
	float:left;
	padding: 5px 15px 5px 15px;
	background: #fff;
	margin: 0 5px 0 0;
	color: #999;
	text-decoration:none;
}




#thumbnails img {
display:block;
}
#thumbnails a img {
border:0;
}
#thumbnails {
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#thumbnails li {
float:left;
}
#thumbnails li a {
margin: 0 10px 10px 0;
float:left;
border: 1px solid;
padding: 3px;
background: #efefef;
display:inline-block;
}


/* just the homepage */
#project_list, .subproject_list {
	margin:0;
	padding:0;
	list-style:none;
}
.subproject_list {
	clear:left;
	padding-top: 40px;

}
#project_list li, .subproject_list li {
	float:left;
}
#project_list li a {
	float:left;
	width: 250px;
	margin: 0 30px 0 0;
	height: 234px;
	position:relative;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

.subproject_list li a {
	float:left;
	width: 250px;
	margin: 0 30px 0 0;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
text-align:center;
background: #f7f7f7;
padding: 7px 0;
}

#project_list li a.end, .subproject_list li a.end {
	margin:0;
}
#project_list li a span {
	position: absolute;
	bottom:0px;
	left:0;
	display:block;
	padding: 5px 0 7px 0;
	text-align:center;
	width: 255px;
}




/* just the palette extender */

#code {
width:210px;
height:450px;
border:1px solid #000;
padding:5px
}

#showthepreview {
width:550px;
margin-right:20px;
}

#showthecode p {
width:210px;
}