@charset "UTF-8";
/* CSS Document */

/*------------------------------------------------------------------------------------ LAYOUT */

.wrapper
{
	width: 940px;
	margin: 0 auto;
}

.wrapper .content
{
	padding: 0 0 50px 0;
	min-height: 600px;
}

.wrapper .about
{
	padding: 0 0 50px 0;
	min-height: 600px;
}

/*------------------------------------------------------------------------------------ TOP NAVIGATION/BRANDING */

.wrapper #header
{
	height: 50px;
	border-bottom: solid 1px #CCC;
	border-top: solid 4px #e89003;
}

.wrapper #header h1.logo
{
	height: 40px;
	width: 92px;
	text-indent: -9999px;
	display:inline;
	float:left;
	background-image:url(../images/logo-small.jpg);
	background-repeat:no-repeat;
	margin: 5px 10px 0 0;
}

.wrapper #header a.orange-link
{
	margin: 12px 0 0 0;
}

/*---------------------------------------------------------------------- MAIN NAVIGATION */

.wrapper #header ul.nav
{
	padding: 12px 0 0 20px;
	float:left;
	display:inline;
	width:620px;

}

.wrapper #header ul.nav li
{
	float:right;
	padding: 0 10px 0 0;
	font-weight: bold;
	font-size:12px;
	display:inline;
}

.wrapper #header ul.nav li a
{
	padding: 0px;
	padding-left:10px;
	padding-right:10px;
	line-height: 2em;
	color: #666;
	text-decoration:none;
	float:left;
	display:inline;
}

.wrapper #header ul.nav li a:hover
{
	background-color:#EEE;
}

.wrapper #header ul.nav li.selected a
{
	color: #FFF;
	background-color:#666;
	padding: 0px;
	padding-left:10px;
	padding-right:10px;
	display:inline;
	line-height: 2em;
}


/*------------------------------------------------------------------------------------ CONTENT */


.content .large-logo
{
	background-image:url(../images/logo-large.jpg);
	background-repeat:no-repeat;
	width:296px;
	height:136px;
	margin: 50px auto 20px auto;
	display:block;
	text-indent: -9999px;
}

.content .left-column
{
	width: 430px;
	float:left;
	padding: 0 0 0 116px;
}

.content .left-column h2
{
	padding: 0 0 12px 0;
}

.content .left-column .orange-link
{
	margin: 20px 0 0 0;
}

.content .right-column
{
	width: 226px;
	float:right;
	padding: 0 110px 0 0;
}

.content .right-column .examples-block
{
	background-color: #EEE;
	padding-left:20px;
	padding-top:16px;
	padding-bottom:16px;
	width:210px;
}

.content .right-column .examples-block ul.examples-list
{
	padding: 5px 5px 5px 0px;
}

.content .right-column .examples-block ul.examples-list li
{
	float:left;
	background-color:#FFF;
	border: solid 1px #CCC;
	padding: 2px;
	width:84px;
	height:76px;
	margin: 0 6px 6px 0;
}


.examples-list li img {
	width:84px;
	float:left;
}

/*---------------------------------------------------------------------- RESOURCES */
#resources.content {
	width:600px;
    margin: 0 auto;
	margin-top:50px;
}
#resources.content img.top {
	margin-top:20px;
}

#resources.content p.top {
	margin-top:10px;
}


div.line {
	float:inherit;
	width:600px;
	margin-top:20px;
	margin-bottom:20px;
	height:2px;
	background-color:#777777;
}


/*---------------------------------------------------------------------- DOCS */



/*---------------------------------------------------------------------- SAMPLES */
#examples.content {
	width:800px;
    margin: 0 auto;
}

#examples.content h2 {
	margin-top:30px;
}

ul.samples-list
{
	display:block;
	margin: 0 0 14px 0;
}

ul.samples-list li
{
	display:block;
	float:left;
	width:200px;
	border: solid #EEEEEE 1px;   
	margin: 20px 25px 0 0;
	padding:10px;
}

ul.samples-list li p.title
{
	font-size: 1.2em;
	color:#ba7405;
	padding: 4px 0 0 0;
	line-height: 1.2em;
	font-weight:bold;
	margin:0px;
}

ul.samples-list li p.title a
{
	text-decoration:none;
	color:#ba7405;
}

ul.samples-list li p.author
{
	margin:0;
	padding: 0;
	font-style:italic;
	color:#333333;
	line-height:1.2em;
}

ul.samples-list li p.author a
{
	color:#333333;
	text-decoration:none;
}

ul.samples-list li p.author a:hover, ul.samples-list li p.title a:hover
{
	text-decoration:underline;
}

ul.samples-list li dl.options
{
	display:block;
	margin: 4px 0 0 0;
}

ul.samples-list li dl.options dd
{
	display:block;
	float:left;
	margin: 0 10px 0 0;
}



/*---------------------------------------------------------------------- ABOUT */

.about div {
	width:700px;
}
.about img.portrait
{
	padding:3px;
	border: solid 1px #CCCCCC;
	width:72px;
	height:72px;
	float:left;
	margin: 0px;
	margin-right:5px;
	display:block;
}


.about img.frame
{
	margin-top:10px;
	padding:3px;
	border: solid 1px #CCCCCC;
	width:350px;
	margin-bottom: 10px;
	margin-right:5px;
	display:block;
}

.about h4 {
	padding-top:20px;
	color:#333333;
}



.about .left-column
{
	width: 360px;
	float:left;
	padding: 0 0 0 60px;
}



.about .left-column .orange-link
{
	margin: 20px 0 0 0;
}

.about .right-column
{
	width: 360px;
	float:right;
	padding: 0 110px 0 0;
}

.about .right-column .examples-block
{
	background-color: #EEE;
	padding:16px;
}

.about .right-column .examples-block ul.examples-list
{
	padding: 10px 0 0 0;
}

#about-block {
	float:left;
	width:340px;
	background-color:#777;
	border: solid 1px #333;
	color:#FFF;
	padding: 10px;
	margin-top:25px;
}

#about-block h4 {
	color:#000;	
	padding-top:5px;
}


/*---------------------------------------------------------------------- BLOG */




/*------------------------------------------------------------------------------------ BUTTONS */

a.orange-link
{
	padding: 2px 10px 0px 10px;
	font-size:12px;
	line-height: 2em;
	color: #FFF;
	text-decoration:none;
	background-color:#e89003;
	font-weight:bold;
	height: 26px;
	display:block;
	width: 100px;
	text-align:center;
}



/*------------------------------------------------------------------------------------ TEXT */



/*------------------------------------------------------------------------------------ FOOTER */

#footer
{
	border-top: solid 1px #CCC;
	padding: 10px;
	height:16px;
	clear:both;
}

#footer p
{
	float:left;
}

#footer ul
{
	float:right;
}

#footer ul li
{
	float:right;
	padding: 0 0 0 10px;
}

#footer ul li a
{
	color:#666;
}