@charset "utf-8";



/*
 * ------------------------------------------------------------------------ MAIN TAGS
 */

* {
	padding: 0;
	margin: 0;
}
html {
	height: 100%;
}
body {
	height: 100%;
	/*font: 12px/1.4 Verdana, Arial, Helvetica, sans-serif;*/
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 13px;
	background: #CCC;
	margin: 0;
	padding: 0;
	color: #333;
}
h1 {
	display: inline;
	font-size: 26px;
	font-weight: normal;
	color: #888;
	padding-left: 10px;
}
h2, h3, h4, h5, h6 {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	padding: 0px 15px 5px 15px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}
h2 {
	font-weight: normal;
	font-size: 26px;
	color: #FF8300;
	padding-left: 40px;
	background-image: url(../imgs/titleIco.gif);
	background-repeat: no-repeat;
	background-position: 14px 7px;
}
#contSidepanel h2 {
	font-size: 26px;
	padding: 4px 15px 8px 15px;
	line-height: 20px;
	background: none;
}
h3 {
	/*font-weight: bold;*/
	font-size: 14px;
	padding-bottom: 4px;
	color: #CA8C4A;
}
p, dl {
	margin-top: 0;
	padding: 0 15px 8px 15px;
}
dt {
	/*font-weight: bold;*/
	font-size: 16px;
	padding-bottom: 0px;
	color: #CA8C4A;
}
dd {
	padding-bottom: 4px;
}
code {
	display: block;
	white-space: pre;
	overflow-x: auto;
	padding: 9px 15px 9px 15px;
	margin: 4px 0 2px 0;
	background-color: #555;
	color: #FFF;
	font-size: 11px;
}
.codeCaption {
	position: relative;
	top: 6px;
	padding: 5px 10px 4px 10px;
	margin-left: 15px;
	background-color: #555;
	/*font-weight: bold;*/
	color: #FF8300;
	font-size: 11px;
}
.codeEvidence {
	color: #C5D169;
}
.codeComment {
	color: #A0A0A0;
}
.inlineCode {
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	white-space: nowrap;
	color: #000;
}
a img {
	border: none;
}
#contPage img {
	padding: 0 15px 0px 15px;
}
a:link, a:visited, a:active, a:focus {
	color: #0099BC;
	text-decoration: underline;
	outline: none;
}
a:hover { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #FF8300;
}
em {
	font-style: normal;
	font-size: 15px;
}
strong {
	font-size: 13px;
}
small {
	font-size: 11px;
}
ul {
	list-style-position: inside;
	list-style-type: square;
	margin-bottom: 11px;
	padding: 0 15px 0 30px;
}

/*
 * ------------------------------------------------------------------------ HEADER
 */

#header {
	padding: 20px 15px 10px 15px;
}
#header a img {
	padding: 0 0 0 0;
}
.headerBigLink a:link, .headerBigLink a:visited {
	font-size: 26px;
	text-decoration: none;
}
.headerBigLink a:hover, .headerBigLink a:active, .headerBigLink a:focus {
	outline: none;
	color: #FF8300;
}
.headerSmlLink a:link, .headerSmlLink a:visited {
	padding-left: 10px;
	margin: auto;
	color: #0099BC;
	font-size: 12px;
	text-decoration: none;
}
.headerSmlLink a:hover, .headerSmlLink a:active, .headerSmlLink a:focus {
	outline: none;
	color: #FF8300;
}
.headerDonate {
	position: absolute;
	top: 55px;
	margin-left: 827px;
}
.headerDonate form {
	display: inline;
}
.headerDonate .flattr {
	display: block;
	position: relative;
	left: -10px;
	top: -5px;
}

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

#footer {
	display: block;
	clear: both;
	padding: 0px 0 0 0;
	text-align: center;
	background-color: #AAA;
}
#footerContent {
	display: block;
	margin: auto;
	background-color: #111;
	padding: 14px 0 16px 0;
	color: #FF8300;
	font-size: 11px;
}

/*
 * ------------------------------------------------------------------------ MENUS
 */

.menuBar ul {
	list-style: none;
	padding: 0;
	margin-bottom: 11px;
}
.menuBar li {
	display: inline-block;
}
.menuBar a, .menuBar a:visited {
	display: block; /* this causes the entire area to react to a mouse click. */
	padding: 8px 10px 8px 10px;
	width: 90px;  /* this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
	text-decoration: none;
	background: #0099BC;
	color: #FFF;
	text-align: center;
	font-size: 13px;
	margin-left: -1px;
	margin-right: 0px;
	border-top: 7px solid #EEE;
	border-bottom: 2px solid #EEE;
	border-left: 2px solid #EEE;
	border-right: 2px solid #EEE;
	font-size: 12px;
}
.menuBar a:hover, .menuBar a:active, .menuBar a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background: #FF8300;
	color: #FFF;
	outline: none;
}

.menuBar .selectedMenu a, .menuBar .selectedMenu a:visited, .menuBar a:hover, .menuBar .selectedMenu a:active, .menuBar .selectedMenu a:focus {
	background: #FF8300;
	color: #FFF;
	outline: none;
}

#menuBar1 {
	padding: 0 0 1px 0;
	background-color: #CCC;
	text-align: center;
}

.summary ul {
	list-style: none;
	margin-bottom: 15px;
}
.summary a, .summary a:visited {
	display: block;
	padding: 0 0 1px 10px;
	margin: 2px 15px 0px 15px;
	border-bottom: 1px dashed #0099BC;
	text-decoration: none;
	font-size: 13px;
}
.summary a:hover, .summary a:active, .summary a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	border-bottom: 1px dashed #FF8300;
	text-decoration: none;
	outline: none;
}

/*
 * ------------------------------------------------------------------------ SIDEPANEL
 */

#contSidepanel {
	overflow: hidden;
	display: block;
	position: relative;
	float: right;
	width: 260px;
	padding: 3px 0 10px 0;
}
.sideDonate {
	text-align: center;
}
.sideDonate form {
	display: inline;
}
.sideDonate .flattr {
	margin-bottom: 4px;
}

/*
 * ------------------------------------------------------------------------ OTHER CONTAINERS
 */

#contBody {
	width: 960px;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	background-color: #EEE;
}
#contMain {
	display: block;
	margin: -10px -1px 0 -1px;
	border-top: 12px solid #CCC;
}
#contPage {
	width: 690px;
	padding-bottom: 0;
	border-right: 12px solid #CCC;
	background-color: #EEE;
}

/*
 * ------------------------------------------------------------------------ ARTICLES
 */

.article {
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: 12px solid #CCC;
}
#contSidepanel .article {
	text-align: center;
}
#emptyColArticle {
	display: none;
}
.emptyColArticle {
	border-bottom: none;
	color: #BBB;
	font-size: 17px;
}
.emptyColArticle p {
	padding: 30px 50px 30px 50px;
	border-bottom: 1px dashed #BBB;
}
.wideArticle, .contributorsArticle {
	padding: 50px 40px 40px 40px;
}
.wideArticle dd {
	padding-bottom: 30px;
}

.donateArea {
	margin-left: 15px;
}
.donateArea div,
.donateArea form {
	display: inline;
	padding-right: 0;
	margin-right: 0;
}
.donateArea .flattr {
	position: relative;
	top: -2px;
	left: -30px;
}

/*
 * ------------------------------------------------------------------------ CLASSES and MODIFIERS
 */

.subtitle {
	font-size: 70%;
}
.backToTop {
	display: block;
	height: 20px;
	padding-right: 15px;
}
.backToTop a, .backToTop a:visited, .backToTop a:hover, .backToTop a:active, .backToTop a:focus{ /* Back to top link */
	float: right;
	background-image: url(../imgs/icoBack.gif);
	background-repeat: no-repeat;
	background-position: 64px 7px;
	padding: 5px 15px 0 0;
	text-decoration: none;
	font-size: 11px;
	color: #0099BC;
	outline: none;
}
.backToTop a:hover, .backToTop a:active, .backToTop a:focus{ /* Back to top link */
	float: right;
	background-image: url(../imgs/icoBack_over.gif);
	color: #FF8300;
	outline: none;
}
.tip, .tip .inlineCode {
	color: #628C31;
}
.tipTitle {
	display: inline-block;
	font-size: 11px;
	background-color: #B3DA55;
	color: #FFF;
	padding: 2px 5px 2px 5px;
	margin-right: 5px;
}
.spotlight {
	display: block;
	margin: 8px 15px 8px 15px;
	padding: 20px;
	font-size: 18px;
	background-color: #FF8300;
	text-align: center;
	color: #FFF;
}
.spotlight strong {
	font-size: 20px;
}
.spotlight small {
	font-size: 13px;
}
.spotlight a, .spotlight a:visited {
	display: inline-block;
	font-size: 26px;
	font-weight: bold;
	color: #0099BC;
}
.spotlight a:hover, .spotlight a:active, .spotlight a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #FFF;
	outline: none;
}
.spotlight.dotween {
	background-color: #94de59;
	color: #FFF;
}
.spotlight.dotween a { color: #0091BD; }
.spotlight.dotween a:hover, .spotlight.dotween a:active, .spotlight.dotween a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #006887;
}
.expandToggleCode, .collapseToggleCode {
	background-image: url(../imgs/arrowClosed.gif);
	background-repeat: no-repeat;
	background-position: 15px 2px;
	padding-bottom: 2px;
}
.expandToggleCode {
	background-image: url(../imgs/arrowClosed.gif);
	background-repeat: no-repeat;
	background-position: 15px 2px;
	padding-bottom: 4px;
}
.expandToggleCode a, .collapseToggleCode a {
	display: block;
	margin-left: 15px;
	font-size: 16px;
	font-weight: normal;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
}
.hidden {
	display: none;
	background-color: #FFF;
	margin: 0 15px 4px 15px;
	padding: 5px 0 0 0;
	border: 1px solid #DDD;
}
.hidden p {
	padding: 0;
	margin-top: -2px;
	margin-bottom: -2px;
}
.hidden .descr {
	padding: 5px 10px 8px 10px;
}
.collapseToggleCode {
	background-image: url(../imgs/arrowOpen.gif);
	background-position: 15px 2px;
}
.codeListTitle {
	margin: 5px 10px 40px 10px;
	font-weight: bold;
}
.codeList {
	display: block;
	padding-top: 3px;
}
.codeList dt {
	float: left;
	clear: left;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	padding: 1px 5px 0 0px;
}
.codeList dd {
	display: block;
	padding: 0;
	font-size: 12px;
}
.codeList ul {
	list-style: none;
	margin-bottom: 15px;
}
.exampleText {
	display: inline-block;
	vertical-align: top;
	padding-right: 0;
	margin-right: 0;
	width: 391px;
}
.exampleImg {
	display: inline;
	padding-left: 0;
	margin-left: 0;
}
.twitter-icon {
	position: relative;
	left: -10px;
	top: 2px;
}