* {margin:0;padding:0;text-decoration:none;}
body {font-family:'Avenir', sans-serif;font-weight:500;}
pre {font-family:'Ubuntu Mono', sans-serif;font-size:13px;}
ul.bottom a {color:#E9E5D2;}
ul.top a {color:#063541;}
table {margin:20px 0;border-collapse:collapse;}
table td, table th {border:1px solid #073642;padding:5px;}
table th {background:#073642;color:#EBE6D3;}
table * {text-align:left;font-size:13px;}

table.pin-functions {width:100%;}
table.pin-functions td {width:16.6666%;}

.prettyprint {
	word-wrap:break-word;
}

.logo {
	width:250px;
	font-size:24px;
	line-height:23px;
	cursor:pointer;
	position: absolute;
	left:0px;
	top:28px;
	z-index:1;
	font-weight:600;
}
.logo a {color:#FFFFFF;}
.logo img {float:left;margin:0 13px;}
.logo a:hover span, .logo a:hover, .logo a:hover span.out {
	color:#FFFFFF;
}

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


#container {
	width:1000px;
	margin:0 auto;
	position:relative;
	padding-top:4px;
}


/*
Footer language nav
*/

#lang {
	display:block;
	overflow:hidden;
	background:#C7C2AE;
	position:absolute;
	bottom:0px;
	width:100%;
}

.lang-nav {
	line-height:30px;
	display:block;
	overflow:hidden;
	float:right;
	margin:0;
	padding:0;
	margin-right:10px;
	list-style:none;
}
.lang-nav li {
	margin:0;
	padding:0;
	float:left;
}

.lang-nav li:last-child {
	border-right:none;
	padding-right:0px;
}


.lang-nav li a {
	padding-left:10px;
	color:#6D6D6D;
	font-size:16px;
}
.lang-nav li a:hover {
	color:#D6264E;
}

/*
Content Area
*/

#content {
	float:left;
	background:#EBE6D3;
	width:500px;
	min-height:640px;
	position: relative;
	padding-bottom:50px;
}
.boards-page #content {
	width:698px;
}
#content h1 {font-size:30px;}
#content h2 {font-size:20px;margin-top:20px;}
#content h1,h2,h3,h4,h5 {font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}

#content article {
	padding:15px;
}

p.intro {
	color:#268BD2;
}
p,pre {
	margin-top:10px;
	font-size: 16px;
	line-height: 150%;
}
h3 {
	color:#D33682;
	font-size:22px;
	font-weight:bold;
}

article a {color:#859900;text-decoration:underline;}
article ul {margin-left:20px;margin-top:10px;margin-bottom:10px;}

/*
Drop down nav
*/


#featured {
	overflow:hidden;
	background:#C32672;
}

#featured .more {
    border: 2px solid #fff;
    padding: 3px 3px;
    display: block;
    color: #FFF;
    clear: both;
    margin: 0 auto;
    white-space: pre;
    width: 270px;
    text-align: center;
    margin-bottom: 8px;
    margin-top: 8px;
    height: 22px;
    font-size: 16px;
    line-height: 22px;
}
#featured .more:hover {
	background:#D33682;
}
#featured ul {
	overflow: hidden;
}

#sections .featured, #boards .board, #featured .board  {
	box-sizing:border-box;
	width:25%;
	display:block;
	float:left;
	text-align:center;
}
#featured .board  {width:25%;}
#sections .group li.featured {
	margin-right:0px;
}
#boards .board a, #featured .board a {
	padding-top: 20px;
	padding-bottom: 0px;
	min-height: 190px;
	display:block;
}
#featured .board a {
	min-height:130px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#sections .featured img, #boards .board img, #featured .board img {
	max-width:80%;
	height:auto;
	display:block;
	margin:0 auto;
}
#featured .board img {max-width:50%;}
#sections .featured a, #boards .board a, #featured .board a {
	background:none;
}
#sections .boards hr {
	clear:both;
	border:none;
	border-top:3px solid #D33682;
	margin-bottom:5px;
	background:none;
}

#sections .boards .featured a:hover {
	background: #D33682;
}
#featured .board a:hover {
	background: #D33682;
}
#boards .board a:hover {
	background: #fdfaf0;
}
#sections .featured strong, #boards .board strong, #featured .board strong  {
	font-size:16px;
	font-family: 'Avenir', sans-serif;
    font-weight: 500;
    color:#FFFFFF;
    margin: 0;
    padding: 0 5px;
    display:block;
}
#boards .board strong {
	color:#333333;
}

#sections .featured span, #boards .board span, #featured .board span {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    padding: 0 5px;
    display:block;
}

.facets {
	position: relative;
    top: 90px;
    padding: 4px 15px 15px 15px;
    background: #073642;
        border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-right: 18px;
}
.facets h4, .boards-page #interfaces h4 {
	text-transform: capitalize;
    font-size: 16px;
    margin: 10px 0 0 0;
    color:#ffffff;
}

.facets ul, .facets li {
	margin:0;
	padding:0;
	list-style:none;
}

.facets .facet li {
    display: inline-block;
    padding: 0px 10px 0px 10px;
    margin-top: 2px;
    margin-right: 2px;
    background: #859900;
    color: #FFF;
    font-size: 13px;
    line-height: 23px;
    height: 22px;
    cursor:pointer;
    text-transform:capitalize;
}
.facets .facet li:hover, .facets .facet li.selected {
	color: #859900;
    background: #FFF;
}

.facets .facet:nth-of-type(2) li {
    background: #D33682;
}
.facets .facet:nth-of-type(2) li:hover, .facets .facet:nth-of-type(2) li.selected {
	color: #D33682;
    background: #FFF;
}

.facets .facet:nth-of-type(1) li {
	background: #268BD2;
}
.facets .facet:nth-of-type(1) li:hover, .facets .facet:nth-of-type(1) li.selected {
	color: #268BD2;
    background: #FFF;
}

/*
Footer
*/

.footer a {color:#5F8645;}


/*
Left Column
*/

#leftcolumn {
	float:left;
	width:500px;
}

.boards-page #leftcolumn {
	width:302px;
}

#interfaces ul, #interfaces li {
	list-style:none;
	margin:0;
	padding:0;
}

#interfaces li{
	display:inline-block;
}

#interfaces {
	background:#6c71c4;
	padding:4px 6px 6px 6px;
}

.boards-page #interfaces {
	background:transparent;
	padding: 4px 30px 5px 15px;
    position: relative;
    top: 100px;
}

#interfaces li a {
	display:inline-block;
	padding:0px 10px 0px 10px;
	margin-top:2px;
	margin-right:2px;
	background:#5c61b4;
	color:#FFF;
	font-size: 14px;
    line-height: 23px;
    height: 22px;
}
#interfaces li a:hover {color: #5c61b4;background:#FFF;}

#interfaces h2 {
	color:#063541;
	font-size: 24px;
    line-height: 23px;
    font-family:'Avenir', sans-serif;
    padding:10px 10px 5px 10px;
}

/*
GPIO nav
*/


nav#gpio {
	position:relative;
	width:292px;
	background:#5F8645;
	height:662px;
	margin-right:208px;
	border-top-right-radius:46px;
	border-bottom-right-radius:46px;
}
.boards-page nav#gpio {
	margin-right:0;
}
nav#gpio:before, nav#gpio:after {
	content:'';
	display:block;
	width:28px;
	height:28px;
	background:#FFFFFF;
	border-radius:50%;
	border:14px solid #F7DF84;
	right:19px;
	top:19px;
	position: absolute;
}
nav#gpio:after {
	top:586px;
}
.phys {
	color:#002B36;
	font-size:11px;
	opacity:0.8;
	position:absolute;
	left:-33px;
}
.bottom .phys {
	text-align:right;
	left:auto;
	right:30px;
}

nav#gpio ul.top, nav#gpio ul.bottom {
	position:absolute;
	left:246px;
	top:87px;
	list-style:none;
}
nav#gpio ul.bottom {
	left:0px;
}

nav#gpio ul.top li {text-indent:63px;}
nav#gpio ul.top li a, nav#gpio ul.bottom li a {
	display:block;
	width:244px;
	position:relative;
	font-size:14px;
	line-height:23px;
	height:22px;
	margin-bottom:2px;
	border-top-left-radius:13px;
	border-bottom-left-radius:13px;
}
nav#gpio ul.top a {
	width:250px;
}
nav#gpio ul.bottom li a {
	border-top-right-radius:13px;
	border-bottom-right-radius:13px;
	border-top-left-radius:0px;
	border-bottom-left-radius:0px;
}

nav#gpio li a small {font-size:11px;}


nav#gpio ul.top li a:hover,
nav#gpio ul.bottom li a:hover,
nav#gpio ul.top li.active a,
nav#gpio ul.bottom li.active a {
	background:#063541;
	color:#FFFFFF;
}
nav#gpio li a:hover .phys, nav#gpio li.active a .phys{
	color:#FFFFFF;
}

nav#gpio li.overlay-pin a:hover .phys, nav#gpio li.overlay-pin a .phys {
	color:#002B36;
}

nav#gpio ul.bottom li a:hover,
nav#gpio ul.bottom li.active a {
	background:#063541;
	color:#FFF;
}


nav#gpio li.overlay-pin a,
nav#gpio ul.bottom li.overlay-pin a {
	background:rgb(235, 230, 211);
	color:#063541;
}

article .pin-hover {cursor:help;}
article .pin-hover:hover {color:#880000;}


nav#gpio ul li.hover-pin a,
nav#gpio ul.bottom li.hover-pin a {
	color:#FFF;
	background:rgba(200,0,0,0.6);
}

nav#gpio ul.bottom a {
	text-indent:10px;
}
nav#gpio span.pin {
	display:block;
	border:1px solid transparent;
	border-radius:50%;
	width:16px;
	height:16px;
	background:#002B36;
	position:absolute;
	right:2px;
	top:2px;
}
nav#gpio span.pin:after {
	content:'';
	display:block;
	border-radius:100%;
	background:#FDF6E3;
	position:absolute;
	left:5px;
	top:5px;
	width:6px;
	height:6px;
	font-size:7px;
}
nav#gpio ul.top span.pin {
	left:2px;
	top:2px;
}
nav#gpio li.legend a {
	background:#EBE6D3;
}
nav#gpio li.legend a {}
nav#gpio ul.bottom li.legend a {
	background:#063541;
}
nav#gpio ul.top li.legend {
	width:177px;
	position:relative;
	padding-left:5px;
	left:-5px;
}
nav#gpio li.pow5v span.pin {background:#DC322F;}
nav#gpio li.gpio span.pin {background:#859900;}
nav#gpio li.uart span.pin {background:#6c71c4;}
nav#gpio li.pow3v3 span.pin {background:#B58900;}
nav#gpio li.i2c span.pin {background:#268BD2;}
nav#gpio li.spi span.pin {background:#D33682;}
nav#gpio li.pin1 span.pin {border-radius:0;}

div#pinbase, div#pinbasebplus {width:58px;position:absolute;left:216px;}

div#pinbase {
	height:324px;
	background:#073642;
	top:80px;
}
div#pinbasebplus {
	height:177px;
	background:#184753;
	top:404px;
}
.pin27, .pin28 {margin-top:12px;}

ul.legend {
	float:right;
	list-style:none;
	margin-top:-26px;
}
ul.legend.expansion {
	margin-top:-52px;
}
ul.legend li {
	float:left;
	line-height:20px;
	font-size:12px;
	padding:3px 7px;
	height:20px;
}
ul.legend li a {
	color:#FDF6E3;
}
li.legend_5 {background:#DC322F;}
li.legend_3 {background:#B58900;}
li.legend_ground, li.legend_pwm {background:#002B36;}
li.legend_uart {background:#B58900;}
li.legend_gpio, li.legend_dot3k {background:#859900;}
li.legend_spi {background:#D33682;}
li.legend_i2c, li.legend_atmega, li.legend_pibrella {background:#268BD2;}
li.legend_ladder {background:#5F8645;}
li.legend_wiringpi {background:#EBE6D3;}
ul.legend li.legend_wiringpi a {color:#063541;}
li.legend_ledborg {background:#000000;}
ul.legend li.legend_ledborg a {color:#FFFFFF;}
li.legend_clockatoo {background:#D33682;}
span.alternate {display:none;}
ol.linenums {margin-left:30px;}

@media (min-width:1200px){
	#container {
		width:1200px;
	}
	.board {
		right:1200px;
	}
	#sections ul .dropdown {
		min-width:700px;
		max-width:700px;
	}
	#content {
		width:700px;
	}
	.boards-page #content {
		width:898px;
	}
}