@charset "utf-8";

body {
	font: 100% arial, helvetica, sans-serif;
	margin: 0;
	padding: 2em;
}

/*
 Prevents sub and sup affecting line-height in all browsers:
 	gist.github.com/413930 
 
 (Note: I modified the version from that URL.)
*/
sup {
    font-size: 70%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.75em;
}
 
h1 sup {
    font-size: 35%;
	left: -1%;
}

h1 sup {
    top: -1.75em;
}


/* NAVIGATION
------------------------------------------------ */
.nav,
.nav ul {
	background: #000;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav {
	min-height: 1.3em;
 	overflow: auto;
	padding: 10px 10px 10px 16px;

	/* 
		Tools like css3please.com, which I used for the code that follows, help you generate CSS3 code. Try it out yourself!
	*/
  -webkit-border-radius: 6px 6px 0 0; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 6px 6px 0 0; /* FF1-3.6 */
          border-radius: 6px 6px 0 0; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  
	/* useful if you don't want a bg color from leaking outside the border: */        
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

.nav a {
	color: #eee;
	display: block;
	font-weight: bold;
	text-decoration: none;
}

.nav li {
	float: left; 				
	width: 10em;
}

.nav li a:hover {
	color: #aabadd;
}

/* :::: Navigation Submenus (the dropdowns) :::: */
.nav ul {
	margin-left: -10px;
	padding: 10px 10px 15px;
	
	/* 
		Tools like css3please.com, which I used for the code that follows, help you generate CSS3 code. Try it out yourself!
	*/
  -webkit-border-radius: 0 0 8px 8px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 0 0 8px 8px; /* FF1-3.6 */
          border-radius: 0 0 8px 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

	/* useful if you don't want a bg color from leaking outside the border: */        
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

.nav li ul {
	left: -9999em; /* hide a submenu offscreen by default so visitors don't see it */
	position: absolute;
	z-index: 1000;
}

.nav li:hover ul {
	left: auto; /* show the submenu when user hovers over the parent li */
	width: 10em;
}

.nav ul li {
	float: none;
	font-size: .875em;
	margin-top: .5em;
	width: auto;
}


/* CONTENT AREA
------------------------------------------------ */
div[role="main"] {
	background: #eee;
	border: 1px solid #000;
	clear: left;
	margin-top: 7px;
	padding: 1em;

	/* 
		Tools like css3please.com, which I used for the code that follows, help you generate CSS3 code. Try it out yourself!
	*/	
  -webkit-border-radius: 0 0 8px 8px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
     -moz-border-radius: 0 0 8px 8px; /* FF1-3.6 */
          border-radius: 0 0 8px 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

	/* useful if you don't want a bg color from leaking outside the border: */        
	-moz-background-clip: padding; 
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;	
}

div[role="main"] p {
	font-size: .8125em;
	line-height: 1.4;
}

div[role="main"] p:first-line {
	font-size: 1em;
	font-weight: bold;
}

div[role="main"] h1 {
	margin: 1em 0 0;
	text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
}

/* :::: Breadcrumb Navigation :::: */
.breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb li {
	display: inline;
	font-size: .75em;
	font-weight: bold;
	padding: 5px 5px 0 0;
}

.breadcrumb li a {
	color: #648dc7;
	padding-right: 3px;
}

.breadcrumb li:after {
   content: " > ";
}

.breadcrumb li:last-child:after {
   content: "";
}