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

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

#top
{
	background-image:url(../images/top-bg.png);
	background-repeat:repeat-x;
	background-position:center top;
	height:50px;
}

.title-bar h1 a
{
	text-decoration:none;
	color:#FFF;
}

.title-bar h1 a:hover
{
	text-decoration:underline;
}

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

.branding-nav
{
	width: 970px;
	margin: 0 auto;
}

.branding-nav h1.logo a
{
	background-image:url(../images/degrafa-logo.png);
	background-repeat:no-repeat;
	background-position: left 3px;
	display:block;
	float:left;
	width:110px;
	height:47px;
	text-indent:-9999px;
	border-right: solid #284A6B 1px;
}

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

.branding-nav ul.main-nav
{
	display:block;
	float:left;
	width:680px;/*Added for IE6 */
}

.branding-nav ul.main-nav li
{
	display:block;
	float:left;
	font-size: 1.2em;
	border-right: solid #284A6B 1px;
}

.branding-nav ul.main-nav li a
{
	color:#FFFFFF;
	line-height:47px;
	text-decoration:none;
	text-transform:uppercase;
	background-image:url(../images/nav-items-bg.png);
	background-repeat:repeat-x;
	background-position: center 0px;
	height:47px;
	text-align:center;
	padding: 0 16px 0 16px;
	display:inline;/* Switched from block for IE6 */
	float:left;/* Added this for IE6 */
}

.branding-nav ul.main-nav li a:hover
{
	background-position: center -50px;
}

.branding-nav ul.main-nav li.selected a
{
	background-position: center -100px;
}

/*---------------------------------------------------------------------- SUB NAVIGATION */

.branding-nav ul.sub-nav
{
	display:block;
	float:right;
}

.branding-nav ul.sub-nav li
{
	display:block;
	float:right;
	height:47px;
	padding: 0 16px 0 0;
}

.branding-nav ul.sub-nav li a
{
	color:#B4D7E7;
	line-height:47px;
	text-decoration:none;
}

.branding-nav ul.sub-nav li a:hover
{
	color:#FFFFFF;
}

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

/*---------------------------------------------------------------------- HOME */

#home
{
	background-image:url(../images/main-intro-bg.jpg);
	background-repeat:repeat-x;
	background-position:center top;
}

/*---------------------------------------------------------------------- HOME INTRO */

#home .home-intro
{
	display:block;
	height: 260px;
	width:540px;
	margin: 0 auto;
	background-image:url(../images/degrafa-icon-lrg.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding: 40px 0 0 300px;
}

#home .home-intro h3
{
	color:#FFFFFF;
	font-size:2.2em;
	float:left;
}

#home .home-intro ul
{
	display:block;
	float:left;
	margin: 0 0 0 6px;
	width:380px;/*Added for IE6 */
}

#home .home-intro ul li
{
	color:#B1D5E6;
	font-size:2.2em;
	margin: 0 0 10px 0;
	display:block;/*Added for IE6 */
}

#home .home-intro .intro-callout
{
	width:480px;
	height:50px;
	background-image:url(../images/intro-callout-bg.png);
	padding: 6px 6px 0 6px;
	background-repeat:no-repeat;
	background-position:left top;
	margin: 20px 0 0 0;
}

#home .home-intro .intro-callout h2
{
	color:#CCCCCC;
	background-image:url(../images/fx-icon.png);
	padding: 0 0 0 44px;
	font-weight:normal;
	background-repeat:no-repeat;
	background-position:left top;
	line-height:38px;
	font-size:1.4em;
}

#home .home-intro .intro-callout h2 a
{
	color:#FFFFFF;
	padding: 0 0 0 30px;
}

.content
{
	background-image:url(../images/blue-white-grad.jpg);
	background-repeat:repeat-x;
	background-position:center top;
}

.content .main
{
	display:block;
	width:970px;
	margin: 0 auto;
	padding: 12px 0 0 0;
}

.content .main .holder
{
	display:block;
	background-image:url(../images/main-content-bg.png);
	background-repeat:no-repeat;
	background-position: left top;
	clear:both;
	padding: 30px 30px 0 30px;
}

.content .main .holder .small-column
{
	display:block;
	width:230px;
	float:left;
	margin: 0 30px 0 0;
}

.content .main .holder .small-column-right
{
	display:block;
	width:260px;
	float:right;
	margin: 0 0 0 0;
}

.content .main .holder .medium-column
{
	display:block;
	width:384px;
	float:right;
}

.content .main .holder .large-column
{
	display:block;
	width:610px;
	float:left;
	min-height: 600px;
}

#home ul.degrafa-for
{
	display:block;
	padding: 0 0 0 54px;
}

#home ul.degrafa-for li
{
	display:block;
	float:left;
	font-size: 1.4em;
	color:#333333;
	margin: 0 20px 0 0;
	background-repeat:no-repeat;
	background-position:left top;
	padding: 4px 0 10px 38px;
}

#home ul.degrafa-for li.lead
{
	color:#316394;
	padding-left:0;
}

#home ul.degrafa-for li.rui
{
	background-image:url(../images/rui-icon.png);
}

#home ul.degrafa-for li.dv
{
	background-image:url(../images/dv-icon.png);
}

#home ul.degrafa-for li.map
{
	background-image:url(../images/map-icon.png);
}

#home ul.degrafa-for li.ge
{
	background-image:url(../images/ge-icon.png);
}

#home ul.degrafa-for li.more
{
	background-image:url(../images/more-icon.png);
	background-position: left 6px;
}

#home ul.learn-links
{
	display:block;
	margin: 0 0 0 6px;
}

#home ul.learn-links li
{
	display:block;
	float:left;
	font-size: 1.1em;
	color:#316394;
	margin: 0 20px 0 0;
	text-align:center;
	text-transform:uppercase;
}

#home ul.learn-links li a
{
	display:block;
	background-repeat:no-repeat;
	background-position:center top;
	padding: 62px 0 0 0;
	width:52px;
	text-decoration:none;
}

#home ul.learn-links li a:hover
{
	text-decoration:underline;
}

#home ul.learn-links li.docs a
{
	background-image:url(../images/docs-icon.png);
}

#home ul.learn-links li.samples a
{
	background-image:url(../images/samples-icon.png);
	background-position:center 10px;
}

#home ul.learn-links li.tutorials a
{
	background-image:url(../images/tutorials-icon.png);
	background-position:center 10px;
}

#home ul.learn-links li.group a
{
	background-image:url(../images/group-icon.gif);
	background-position:center 10px;
}

#home ul.community-links
{
	display:block;
	margin: 0;
}

#home ul.community-links li
{
	display:block;
	border-top: solid #CCCCCC 1px;
	padding: 6px 0 6px 8px;
}

#home ul.community-links li p
{
	font-style:italic;
	padding:0;
}

.recent-samples
{
	border-bottom: solid 1px #CCCCCC;
}

.degrafa-icons
{
	background-image:url(../images/degrafa-icons.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	height:18px;
	display:block;
	margin: 40px 0 10px 0;
}

ul.preso-list
{
	margin: 0 0 10px 10px;	
}

ul.preso-list li
{
	margin: 0 0 8px 0;
	font-size:1.1em;
}

ul.preso-list li a
{
	color:#C60;
}

#home ul.community-links li p
{
	font-style:italic;
	padding:0;
}

/*-------------------------------------------- JS COMMUNITY LINKS */

#home .js-community-links
{
	display:block;
	margin: 0;
}

#home .js-community-links li
{
	display:block;
	border-top: solid #EEE 1px;
	padding: 6px 0 6px 8px;
	font-weight:bold;
	font-size:1.2em;
}

#home .js-community-links li p
{
	font-style:italic;
	padding:0;
}

/*---------------------------------------------------------------------- CODE */

#code
{
	background-image:url(../images/main-intro-bg.jpg);
	background-repeat:repeat-x;
	background-position:center -238px;
}

.source-list
{
	display: block;
	margin: 10px 0 0 0;
}

.source-list li
{
	display: block;
	background-image: url(../images/dark-grey-box-top-280.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	background-color:#333333;
	width: 280px;
	float:left;
	margin: 0 20px 10px 0;
	padding: 10px 0 0 0;
}

.source-list li .source-bottom
{
	display: block;
	background-image: url(../images/dark-grey-box-bottom-280.jpg);
	background-repeat:no-repeat;
	background-position:left bottom;
	width: 280px;
	height: 7px;
	padding:0;
	margin:0;
}

.source-list li.fl
{
	background-image: url(../images/dark-grey-box-top-280-fl.jpg);
}

.source-list li.fx
{
	background-image: url(../images/dark-grey-box-top-280-fx.jpg);
}

.source-list li.src
{
	background-image: url(../images/dark-grey-box-top-280-src.jpg);
}

.source-list li.svn
{
	background-image: url(../images/dark-grey-box-top-280-svn.jpg);
}

.source-list li p
{
	padding-bottom: 4px;
}

.source-list li a
{
	color:#CCCCCC;
	padding: 0 0 0 10px;
}

.source-list li h3
{
	color:#FFFFFF;
	padding: 0 0 0 10px;
}

.source-list li span
{
	display: block;
	background-image: url(../images/dark-grey-box-bottom-280.jpg);
	background-repeat:no-repeat;
	background-position:left bottom;
	width: 280px;
	height: 7px;
}

dl.details
{
	margin: 4px 0 20px 0;
}

dl.details dt
{
	font-weight:bold;
	margin: 0;
	color:#999999;
	margin: 8px 0 0 0;
}

dl.details dd
{
	margin: 4px 0 0 0;
}

dl.details dd strong
{
	font-size: 1.2em;
}

.content .main .holder .large-column dl.details dd p
{
	padding: 0 0 10px 0;
}

.content .main .holder .large-column dl.details dd ul
{
	list-style-type:disc;
	list-style:disc;
}

.content .main .holder .large-column dl.details dd ul li
{
	margin: 0 0 10px 30px;
	font-size: 1.1em;
	list-style-type:disc;
	list-style:disc;
}

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

#docs
{
	background-image:url(../images/main-intro-bg.jpg);
	background-repeat:repeat-x;
	background-position:center -238px;
}

/*---------------------------------------------------------------------- SAMPLES */

#samples
{
	background-image:url(../images/main-intro-bg.jpg);
	background-repeat:repeat-x;
	background-position:center -238px;
}

.title-bar
{
	width:930px;
	margin: 0 auto 4px auto;
	padding: 10px 20px;
}

.title-bar h1
{
	display:block;
	width: 500px;
	float: left;
}

.title-bar h1 span
{
	color:#CCCCCC;
}

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

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

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

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

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;
}


dl.categories-list
{
	margin: 0 0 14px 0;
	font-size: 1.2em;
}

dl.categories-list a
{
	color:#333333;
	text-decoration:none;
}

dl.categories-list a:hover
{
	background-color:#DDDDDD;
}

dl.categories-list dt
{
	margin: 2px 0 4px 0;
	
}

dl.categories-list dt.selected a
{
	background-color:#316394;
	color:#FFF;
}

dl.categories-list dt a
{
	font-weight:bold;
	padding:3px 4px 2px 4px;	
}

dl.categories-list dd
{
	margin: 2px 0 2px 10px;
	
}

dl.categories-list dd a
{
	padding:3px 4px 2px 4px;
}

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

#about
{
	background-image:url(../images/main-intro-bg.jpg);
	background-repeat:repeat-x;
	background-position:center -238px;
}

#about .members
{
	margin: 14px 0 0 0;
	display:block;
}

#about .members li.portrait
{
	padding:4px;
	border: solid 1px #CCCCCC;
	width:72px;
	height:72px;
	float:left;
	margin: 0;
	display:block;
}

#about .members li.bio
{
	margin: 14px 0 14px 96px;
	display:block;
}

#about .members li.bio h5
{
	color: #333333;
	font-size: 1.2em;
	font-style:italic;
	font-weight:normal;
	margin:0;
	padding:0 0 2px 0;
}

.degrafa-for-box
{
	background-color:#333333;
	background-image:url(../images/dark-grey-box-bottom.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	padding: 0 0 2px 0;
	margin:10px 0 0 0;
}

.degrafa-for-box span
{
	height:7px;
	width:260px;
	display:block;
	background-image:url(../images/dark-grey-box-top.jpg);
	background-position:center top;
	background-repeat:no-repeat;
}

.degrafa-for-box ul
{
	display:block;
	margin:12px 18px 0 18px;
}

.degrafa-for-box ul li
{
	display:block;
	font-size: 1.4em;
	color:#FFFFFF;
	margin-bottom: 6px;
	background-repeat:no-repeat;
	background-position:left top;
	padding: 4px 0 10px 38px;
}

.degrafa-for-box ul li.lead
{
	display:block;
	color:#CCCCCC;
	padding:0;
}

.degrafa-for-box ul li.rui
{
	background-image:url(../images/rui-icon.png);
}

.degrafa-for-box ul li.dv
{
	background-image:url(../images/dv-icon.png);
}

.degrafa-for-box ul li.map
{
	background-image:url(../images/map-icon.png);
}

.degrafa-for-box ul li.ge
{
	background-image:url(../images/ge-icon.png);
}

.degrafa-for-box ul li.more
{
	background-image:url(../images/more-icon.png);
	background-position: left 6px;
}

.ohloh
{
	background-image:url(../images/ohloh.jpg);
	background-repeat:no-repeat;
	background-position:left -4px;
	padding: 0 0 0 50px;
	margin: 20px 0 0 0;
	line-height: 14px;
}

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

#blog
{
	background-image:url(../images/main-intro-bg.jpg);
	background-repeat:repeat-x;
	background-position:center -238px;
}


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

.blue-button
{
	background-image:url(../images/blue-button.png);
	background-position:center top;
	background-repeat:no-repeat;
	width:206px;
	line-height:42px;
	color:#FFFFFF;
	font-size:1.4em;
	text-align:center;
	display:block;
	text-decoration:none;
}

.grey-button
{
	background-image:url(../images/grey-button.png);
	background-position:center top;
	background-repeat:no-repeat;
	width:206px;
	line-height:42px;
	color:#FFFFFF;
	font-size:1.4em;
	text-align:center;
	display:block;
	text-decoration:none;
}

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

h4.rui
{
	background-image:url(../images/rui-icon.png);
	background-repeat:no-repeat;
	background-position: right top;
	padding-top:10px;
}

h4.dv
{
	background-image:url(../images/dv-icon.png);
	background-repeat:no-repeat;
	background-position: right top;
	padding-top:10px;
}

h3.twitter
{
	background-image:url(../images/twitter.jpg);
	background-repeat:no-repeat;
	background-position: right top;
	display:block;
	padding: 50px 0 0 0;
}

h3.preso
{
	background-image:url(../images/preso.jpg);
	background-repeat:no-repeat;
	background-position: right top;
	display:block;
	padding: 50px 0 0 0;
}

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

#footer
{
	background-color:#CCCCCC;
	height:28px;
}

#footer .footer-content
{
	width:970px;
	margin: 0 auto;
}

#footer .footer-content p
{
	width:400px;
	float:left;
	margin:0 0 0 10px;
	padding:6px 0 0 0;
}

#footer .footer-content ul
{
	display:block;
	float:right;
	margin: 7px 0 0 0;
}

#footer .footer-content ul li
{
	display:block;
	float:right;
	margin: 0 10px 0 0;
	font-size:1.1em;
}

#footer .footer-content ul li a
{
	text-decoration:none;
	color:#333333;	
}

#footer .footer-content ul li a:hover
{
	text-decoration:underline;
}