p, blockquote, pre, img,
fieldset, form, label, legend,
caption, h1, h2, h3, h4, h5, h6,
dl, dt, dd, ol, ul, li, menu,
abbr, address, small, sub, sup {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
input, textarea, select, option {
	font: inherit;
}
header, footer, aside, nav,
section, article, hgroup,
details, figure, video, audio,
datalist, output {
	display: block;
}
acronym {
		border:0;
}
object, img {
	max-width: 100%;
}
ol {
	margin-left: 15px;
}
html,body {
	min-height: 100%;
}

body {
	background:#fff;
	color:#111;
	font: 13px/1.4 'helvetica neue', 'helvetica-neue', helvetica, arial, sans-serif;
	margin:0;
	padding:0;
	width:100%;
	min-width: 220px;
  }

header div, .campaign div, #content, footer, #subnav ul, #devo, #topic-intro {
	clear: both;
	width: 940px;
	max-width:100%;
	margin: 0 auto;
}

.hide {
	display:none;
	}

.clear {
	clear: both;
}

footer:after, #content:after, .sp2:after, #tags:after {
	content: ".";
	display: block;
	height:0;
	clear: both;
	visibility: hidden;
}

.main {
	float: left;
	width: 71%;
	max-width:665px;
}
aside {
	float:right;
  width:27%;
  max-width:250px;
}

.asideleft .main {
	float: right;
}
.asideleft aside {
	float:left;
}
.asideleft aside section.info {
	padding: 10px 20px;
}
.asideleft aside section.info p.tags,
.asideleft aside section.info p.author,
.asideleft aside section.info p.category {
	font-weight: normal;
}

.asideleft aside section.info p strong {
	display: block;
}

ul.tags li {
	display: inline;
	font-size: .8em;
	margin-right: 3px;
}

.asideleft aside section p>a {
	font-weight: normal;
}

#content {
	padding-top:20px;
	}

.indent {
	text-indent:-99em;
	overflow:hidden;
	height:0;
	margin:0;
	}

.nobullets {
	list-style: none;
}

select {
	height: 1.6em;
	vertical-align: middle;
}

/* SEARCH */

label[for=q], .hidden {
	position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
	}

form[role=search] {
	float:right;
	text-align:right;
	margin-top:23px;
	}

form[role=search] input {
	background:#ac0d13;
	font-size:11px;
	color:#fff;
	line-height:1;
	}

form[role=search] input[type=text] {
	width:142px;
	border:1px solid #9e0c12;
	border-width:1px 0 1px 1px;
	padding:2px 3px;
	height:24px;
	border-radius:3px 0 0 3px;
	margin:0;
	-moz-box-sizing: border-box;
	}

form[role=search] input[type=text]:focus {
	background:#fff;
	color:#000;
}

form[role=search] input[type=submit] {
	text-indent:-999em;
	overflow:hidden;
	width:28px;
	padding:5px 0 6px;
	background:#ac0d13 url(../img/sprites.png) -29px -120px no-repeat;
	border:1px solid #9e0c12;
	border-width:1px 1px 1px 0px;
	border-radius:0 3px 3px 0;
	cursor: pointer;
	vertical-align: middle;
	height: 24px;
	line-height: 24px;
	}

form[role=search] input[type=search]:focus {
	background:#fff;
	color:#111;
	border-color:#111;
	}

/* LOGIN AND USERINFO */

/*#login, */#userinfo {
	float:right;
	position:relative;
	font-size:11px;
	color:#fff;
	text-shadow:0 1px 1px #700;
	margin:0 15px 0 0;
	padding: 27px 15px 28px 15px;
	}

/*#login a {
	color:#fff;
	padding: 0;
	}
*/
/*#login > a:after, */#userinfo-name:after {
	content: '';
	display: block;
	width:21px;
	height:16px;
	background:transparent url(../img/usericon.png) -11px 0 no-repeat;
	float:right;
	}

#userinfo-name:after {
	width:32px;
	background-position:0 -16px;
	}

#userinfo-name:after {
	background-position:0 -32px;
	}

#userinfo ul {
	display:none;
	box-sizing: border-box;
	width:180px;
	margin-left: -30px;
	background:#cc0f16 url(../img/stripes.png);
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
	position:absolute;
	top: 70px;
	}

#userinfo:hover ul {
	display:block;
	}

#userinfo li button.logout {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	color: #fff;
	font-weight: bold;
	padding: 5px 15px;
	line-height: 2;
	margin: 0;
	font-size: 11px;
	font-family: 'helvetica neue', 'helvetica-neue', helvetica, arial, sans-serif;
	text-shadow:0 1px 1px #700 !important;
	cursor: pointer;
}

#userinfo li a {
	text-align:left;
	line-height:2;
	padding:5px 15px;
	}

#userinfo li:hover {
	background:#900c13;
	}

#userinfo li:first-child a {
	padding-top:10px;
	}

#userinfo li:last-child a {
	padding-bottom:10px;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
	}

/* TYPOGRAPHY */

h1, h2, h3, h4 {
	line-height:1.2;
	margin-bottom:20px;
	}

h1 {
	font-size:42px;
	line-height:60px;
	margin-bottom:20px;
	}

h2 {
	font-size:18px;
	}

h3, h4 {
	font-size:16px;
	line-height:20px;
	}

a {
	color:#222;
	text-decoration:none;
	}

a:hover {
	color:#1096d5;
	text-decoration:underline;
	}

p + p {
	margin-top:15px;
	}

section {
	clear:both;
	}

section .sp2 li {
	clear:none;
	float:right;
	width:49%;
	max-width:320px;
	}

section .sp2 li:nth-child(odd) {
	clear:both;
	float:left;
	}

h2.small {
	clear:both;
	font-size:12px;
	font-weight:normal;
	color:#555;
	line-height:20px;
	margin-bottom:10px;
	}

/* HEADER */

header {
	clear:both;
	min-height:71px;
	position:relative;
	background:#cc0f16 url(../img/stripes.png);
	font-size: 12px;
	text-shadow:0 1px 1px #700;
}

#logo {
	display:block;
	float:left;
	margin:16px 22px 0 10px;
	line-height:1;
	border-radius: 3px;
	background: #b80f16;
	text-align: center;
	font-size: 1.6em;
	text-transform: uppercase;
	letter-spacing: -1px;
	padding: 10px 15px;
	}

header ul {
	list-style: none;
}

header li {
	position:relative;
	}

header a {
	display: block;
	font-weight:bold;
	text-align:center;
	color: #fff;
}

#nav a {
	padding:27px 15px 28px 16px;
}

header a:hover, header .selected a {
	color:#fff;
	text-decoration:none;
	}

header fieldset input[type="submit"] {
	margin: 0 0 0 -5px;
}

#nav li:hover a:after,
#nav .selected a:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 45%;
	bottom: 0px;
	border: 5px solid transparent;
	border-bottom-color: #882419;
}

.article-view #nav li:hover a:after,
.article-view #nav li.selected a:after,
.article-view,
.widgets header,
.extensions header,
.themes header,
.unite header {
	border-bottom-color: #fff;
}


header {
	border-bottom: 1px solid #882419;
}

.addons > header {
	border-bottom: none;
}

.widgets > header #nav li:hover a:after,
.widgets > header #nav .selected a:after,
.extensions > header #nav li:hover a:after,
.extensions > header #nav .selected a:after,
.themes > header #nav li:hover a:after,
.themes > header #nav .selected a:after,
.unite > header #nav li:hover a:after,
.unite > header #nav .selected a:after,
.addons > header #nav li:hover a:after,
.addons > header #nav .selected a:after {
	border-bottom-color: #000;
}

.labs > header {
	border-bottom: 1px solid #fff;
}

.labs > header #nav li:hover a:after,
.labs > header #nav .selected a:after {
	border-bottom-color: #fff;
}

#nav {
	margin:0;
}
#nav li {
	float:left;
}

#subnav {
	clear:both;
	margin:0;
	min-height:32px;
	background:#000;
	}

#subnav li {
	float:left;
	line-height:32px;
	font-size:11px;
	margin:0;
}

#subnav li:hover a:after,
#subnav li.selected a:after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 47%;
	bottom: 0;
	border: 3px solid transparent;
	border-bottom-color: #fff;
}

#subnav a {
	line-height:32px;
	text-shadow:none;
	padding: 0 15px;
	}

#subnav a:hover {
	color:#cc0f16;
	}


.pagination {
	list-style: none;
}

.pagination li {
	float: left;
	margin: 5px 5px 10px 0;
}

.pagination .next,
.pagination .prev,
.pagination .first,
.pagination .last {
	text-shadow:0 1px 1px #fff;
	box-shadow: inset -1px -1px 1px rgba(166, 166, 166, 0.1), inset 1px 1px 1px rgba(255, 255, 255, 0.4);
	font-weight:bold;
	float:left;
	background:#eee;
	border:1px solid #bbb;
	}

.pagination .next:hover,
.pagination .prev:hover,
.pagination .first:hover,
.pagination .last:hover {
	border:1px solid #888;
	text-decoration:none;
}

.pagination a, .pagination a {
	text-decoration: none;
	display: block;
	padding:5px 10px;
	color: #000;
}

.pagination a:hover, .pagination a:hover {
	color:#111;
}

.pagination > .active {
	font-weight: bold;
	padding:5px 10px;
	border:1px solid #aaa;
}

/* CAMPAIGNS */

.campaign {
	background: url(../img/campaigns/background.png);
	font-size:15px;
	line-height:25px;
	box-sizing: border-box;
	margin-bottom:10px;
	}

.campaign > div {
	margin: 0 auto;
	width: 1152px;
	height: 430px;
	background-image: url('../img/campaigns/front.jpg');
	background-position: center center;
	background-repeat: no-repeat;
}

.campaign > div > h1 {
	background: #000;
	opacity: .8;
	display: block;
	text-decoration: none;
	background-image: url('../img/campaigns/icons-front.png');
	background-position: 20px -10px;
	background-repeat: no-repeat;
	width: 410px;
	padding: 0;
	position: absolute;
	margin: 200px 0 0 640px;
	font-size: 2.6em;
	font-weight: normal;
	line-height: 1em;
	padding: 2.5em 1em 1em 1em;
	color: #fff;
	text-shadow: none;
}

.web .campaign > div {
	background-image: url('../img/campaigns/web.jpg');
}

.web .campaign > div > h1 {
	background-image: url('../img/campaigns/icons-web.png');
	background-position: 0px 0px;
	width: 500px;
	margin: 260px 0 0 410px;
	padding: .8em .8em .8em 5em;
}

.addons .campaign > div {
	background-image: url('../img/campaigns/addons.jpg');
	background-position: center bottom;
}

.addons .campaign > div > h1 {
	background-image: url('../img/campaigns/icons-addons.png');
	background-position: 10px 20px;
	width: 530px;
	margin: 255px 0 0 400px;
	padding: .8em .8em 1em 4.5em;
}

.mobile .campaign > div {
	background-image: url('../img/campaigns/mobile.jpg');
}

.mobile .campaign > div > h1 {
	background-image: url('../img/campaigns/icons-mobile.png');
	background-position: right -5px;
	width: 460px;
	margin: 225px 0 0 40px;
	padding: .8em 4.5em 1em .8em;
}

.tv .campaign > div {
	background-image: url('../img/campaigns/tv.jpg');
	background-position: top center;
}

.tv .campaign > div > h1 {
	background-image: url('../img/campaigns/icons-tv.png');
	background-position: 560px -10px;
	width: 560px;
	margin: 195px 0 0 20px;
	padding: .8em 4.5em 1em .7em;
}

.tv .campaign > div > h1 > a {
	color: #cc0f16;
}

.labs .campaign {
	background: #fff;
	border-bottom: 1px solid #eee;
}

.labs .campaign > div {
	background-image: url('../img/campaigns/labs.jpg');
	height: 310px;
	background-position: bottom center;
}

.labs .campaign > div > h1 {
	background-image: url('../img/campaigns/icons-labs.png');
	background-position: 5px 0;
	margin: 130px 0 0 20px;
	width: 450px;
	padding: .8em .8em 1.2em 4.2em;
}

.by, .by a, .by a:hover {
	color:#cc0f16;
	}

h1 a:hover {
	color:#111;
	}

#extensions, #web {
	border:none;
	}

#mobile a:before {
	background-position:0 -75px;
	}

#tv a:before {
	background-position:-75px 0;
	}

#operalabs a:before {
	background-position:-150px 0;
	}

#addons a:before {
	background-position:-74px -76px;
	}

#extensions a:before {
	background-position:-150px -75px;
	}

#widgets a:before {
	background-position:-150px 0;
	}

#skins a:before {
	background-position:-225px -75px;
	}

#unite a:before {
	background-position:-225px 0;
	}

/* SEARCH RESULTS */

.results {
	list-style:none;
	font-size:11px;
	color:#777;
	}

.results a, .results p + p {
	color:#888;
	}

.results .title {
	font-size:14px;
	font-weight:bold;
	color:#111;
	}

.results p {
	margin:0;
	}

.results li {
	border-top:1px solid #d8d8d8;
	padding-top:19px;
	margin-bottom:20px;
	}

/* HOME */

.floatright {
	float:right;
	margin:0 0 20px 25px;
	}

.floatleft {
	float:left;
	margin:0 25px 20px 0;
	}

.biglist {
	line-height:20px;
	margin-bottom:35px;
	}

.biglist h2 {
	font-size:15px;
	margin:0;
	}

.biglist li {
	font-size:13px;
	margin-bottom:15px;
	}

.articlelist {
	list-style: none;
	clear:both;
	}

.articlelist .img {
	margin-bottom: 35px;
}

.img, .featured {
	display:block;
	width:100%;
	background:#fff;
	border:1px solid #d8d8d8;
	box-sizing: border-box;
	border-radius:4px;
	padding:9px;
	margin:0 20px 0 0;
	}

.img {
	float:left;
	width:41%;
	max-width:220px;
	height:auto;
	}

.img img, .featured img {
	width:100%;
	max-width: 220px;
	display:block;
	}

.articlelist.sp2 {
	padding-top:20px;
	}

.articlelist li {
	clear:both;
	padding-bottom:20px;
	width: 100%;
	}

.articlelist li:first-child {
	padding-top:0px;
	}

.articlelist:not(.sp2) li>h2,
.articlelist:not(.sp2) li>p {
	float:right;
	width: 405px;
}

.img:hover {
	border-color:#aaa;
	}

.articlelist h2 {
	font-size:16px;
	line-height:25px;
	margin:0 0 0.5em;
	}

.articlelist h2 + p, .articlelist p a {
	color:#777;
	font-size:12px;
	}

.articlelist a.tag {
	color:#000;
	}

.articlelist a.com {
	position:relative;
	display:inline-block;
	background:#fff;
	color:#000;
	line-height:1;
	border-radius:3px;
	margin-left:3px;
	text-decoration:none;
	border:1px solid #d8d8d8;
	}

.articlelist a.com span {
	display:block;
	padding:3px 5px;
	}

.articlelist a.com:after {
	content:'';
	display:block;
	width:0;
	height:0;
	position:absolute;
	left:33%;
	bottom:-9px;
	border:4px solid transparent;
	border-top-color:#d8d8d8;
	z-index:222;
}

.articlelist a.com:hover {
	border-color:#aaa;
	}

.articlelist a.com:hover:after {
	border-top-color:#aaa;
	}

.articlelist a.com span:after {
	content:'';
	display:block;
	width:0;
	height:0;
	position:absolute;
	left:33%;
	bottom:-8px;
	border:4px solid transparent;
	border-top-color:#fff;
	z-index:333;
	}

.articlelist h2 + p a {
	text-decoration: underline;
}

.articlelist a.readmore {
	color: #900;
	font-size: .85em;
	display: block;
	margin-top: 0.5em;
}

.readmore:hover {
	color: #cc0f16;
}


.articlelist p {
	margin:0 0 10px 0;
	}

.articlepage {
	background:#fff;
	}

.articlepage article {
	text-shadow:none;
	}

hr {
	clear:both;
	height:1px;
	border:1px solid #d8d8d8;
	border-width:1px 0 0 0;
	background:#fff;
	margin:15px 0;
	}

/* TAG CLOUD */

h2 + #tags {
	margin:30px 0 60px 0;
	}

#tags li {
	float:left;
	line-height:30px;
	height:30px;
	margin:5px 15px 0 0;
	}

.size1 {
	font-size:12px;
	}

.size2 {
	font-size:14px;
	}

.size3 {
	font-size:18px;
	}

.size4 {
	font-size:23px;
	}

.size5 {
	font-size:26px;
	}

/* LICENSES */
#content.license ul {
	margin: 1em 0 1em 1.5em;
}

#content.license a {
	text-decoration: underline;
}

#content.license p,
#content.license li {
	text-align: justify;
}

/* COLLECTIONS */

.collection ul li {
	margin-left: 1em;
	cursor: pointer;
}

.collection .sub-collection ul {
	display: none;
}

.collection .sub-collection.current ul {
	display: inherit;
}

.sub-collection > span {
	font-weight: bold;
	font-size: .7em;
	display: block;
	float: left;
	padding: 4px 3px 0 0;
	font-family: monospace;
}

.collection a.current {
	font-weight: bold;
}

.collection>ul {
	margin: 0 0 0 -10px;
	list-style: none;
}

.collection li.leaf {
	list-style: square;
}

form[name="collections"] table,
#manage-pages {
	width: 100%;
	border-spacing: 0;
}

form[name="collections"] table th,
#manage-pages th{
	text-align: left;
	padding: 5px;
	border-bottom: 1px #000 solid;
}

tr.collection td {
	vertical-align: middle;
	padding: 5px;
}

tr.collection td input[type="text"] {
	margin: 0;
}

tr.collection td input[type="number"] {
	width: 100%;
}

#toplvl a:before {
	content: '« ';
}

.collection ul .parent-collection .parent-collection > span:not(.decendant):before,
.collection ul .parent-collection.collection-shown > span.descendant:before,
.collection-shown > span:before {
	content: '[-] ';
}

.collection ul .parent-collection > span.descendant:before,
.collection ul .parent-collection:not(.current) > span:before {
	content: '[+] ';
}

.collection ul .parent-collection > span.expandable:before {
	content: '[+] ' !important;
}

.parent-collection .parent-collection { margin: 0 !important; padding: 0; }
.parent-collection .parent-collection ul { margin-left: 1.35em; }

.collection.depth-2 {
	background-color: #f0f0f0;
}

.collection.depth-2 td:first-child {
	border-left: 20px solid #fff;
}

.collection.depth-3 {
	background-color: #e0e0e0;
}

.collection.depth-3 td:first-child {
	border-left: 40px solid #fff;
}

.collection.depth-4 {
	background-color: #c0c0c0;
}

.collection.depth-4 td:first-child {
	border-left: 60px solid #fff;
}

/* TOOLS */

aside section {
	background: #fcfcfc;
	border:1px solid #d8d8d8;
	box-shadow: inset -1px -4px 4px rgba(166, 166, 166, 0.102), inset 1px 1px 1px #fff;
	border-radius:4px;
	padding: 0 16px 14px;
	margin-bottom:20px;
	}

aside h2 {
	font-size: 13px;
	margin: 0 -17px 1em -17px;
	background: #ccc;
	padding: 2px 17px 3px 17px;
	}

aside section > h2:first-of-type {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}

aside section li {
	line-height: 1.4;
}

section.main .articlelist h2,
section.main .articlelist h2 a {
	line-height: 1.25;
	margin-bottom: 0;
	color: #444;
}

aside ul {
	margin-bottom:20px;
	line-height:20px;
	list-style: none;
	}

aside li {
	margin-bottom:5px;
	}

.tools ul {
	list-style: none;
}

.tools li, .collection>ul>li {
	padding-left:15px;
	font-size:13px;
	background:transparent url(../img/arrow.png) 2px 8px no-repeat;
	}

.tools>ul>li>strong {
	display: block;
}

p#resources {
	padding-top:2px;
	text-align:right;
	}

p#resources img {
	margin-left:2px;
	}

/* LABS */

.labs .articlelist p {
	margin-left:0;
	}

.labs .articlelist li:first-child {
	padding-top:0;
	border:none;
	}

.more {
	font-weight:bold;
	}

.more:after {
	color:#bbb;
	content:' »';
	}

.graduates > li > a {
	text-decoration: underline;
}

.labs aside section.tools li {
	line-height: 1.4;
	color: #555;
	font-size: 11px;
}

.labs aside section.tools li > a:first-child {
	font-size: 12px;
}

.labs aside section.tools li > a:first-child {
	font-weight: bold;
	text-decoration: none;
	display: block;
}

.graduates > li {
	font-size: .9em;
}

/* TOPIC INTRO */
#topic-intro {
	border: 1px solid #e0e0e0;
	padding: 10px;
	width: 920px;
	border-radius: 5px;
	background: #f6f6f6;
	box-shadow: inset #fff 0 75px 150px;
}

#topic-intro p:last-child {
	margin: 0;
}

#topic-intro p a {
	text-decoration: underline;
}

#topic-intro ul {
	list-style: none;
}

#topic-intro ul:after {
	clear: both;
	content: '';
	display: block;
}

#topic-intro ul li:nth-child(2n) {
	border-right-color: transparent;
	padding: 10px 0 10px 16px;
}

#topic-intro ul li:nth-child(3),
#topic-intro ul li:nth-child(4) {
	border-bottom-color: transparent;
}

#topic-intro ul li {
	padding: 10px 16px 10px 0;
	width: 48%;
	float: left;
	border: 1px solid #e9e9e9;
	border-left-color: transparent;
	border-top-color: transparent;
}

#topic-intro ul li img {
	float: left;
	display: block;
	width: 64px;
	height: 64px;
}

#topic-intro ul li p,
#topic-intro ul li h3 {
	float: left;
	width: 350px;
	margin: 0 0 0 10px;
}

#topic-intro ul li h3 {
	margin-bottom: 5px;
}

#topic-intro ul li p {
	font-style: oblique;
	font-size: .9em;
}

#topic-intro ul li a {
	display: block;
	float: left;
	padding: 1px;
}

#topic-intro ul li a:active {
	padding: 2px 0 0 2px;
}

#topic-intro > p {
	margin: 0 0 10px 0;
	padding: 5px;
}


/* FORMS */

textarea,
select,
input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=url],
input[type=file],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=day],
input[type=time] {
	box-sizing: border-box;
	width: 100%;
	padding: 4px;
	border: 1px solid #aaa;
			border-radius: 2px;
	margin-bottom:8px;
}
select {
			border-radius: 0;
			box-shadow: none;
}
#content input[type=submit] {
	padding: 4px 12px;
	border: 1px solid #207da8;
	cursor: pointer;
	line-height: 1;
	font-size: 13px;
	background-color: #1096d5;
	color: #fff;
		box-shadow: inset -10px -15px 30px rgba(0,0,0,.1), inset 1px 1px 1px rgba(133,217,255,1);
	border-radius:3px;
}
#content input[type=submit]:hover {
		background-color:#20a9e9;
	text-shadow: none;
}
textarea {
	height: 75px;
}
textarea.article {
	height: 400px;
}
label {
	margin-top: 10px;
	display: inline-block;
	font-weight: bold;
}
label:after {
	content: ':';
}
form small {
	font-style: italic;
}
.radios label {
	display: block;
	cursor: pointer;
	font-weight: normal;
}
.radios label:after {
	content: '';
}

/* Articles and infopages */
.aside, .info, pre {
  background:#fafafa;
  border: 1px solid #ddd;
  border-radius:4px;
  padding: 12px;
  margin: 20px 0;
}

.info a {
	text-decoration: underline;
}

.infopage ul {
	margin: 1em 0 1em 1.5em;
	list-style: square;
}

.infopage a {
	text-decoration: underline;
}

.infopage>ul.faq, .infopage>h3, .infopage>h4 {
	margin: 1em 0 1em 0;
}

.infopage>ul.faq>li {
	margin: 0 0 1em 0;
}

.infopage ol {
	margin: 1em 0 1em 1.5em;
}

#head_html {
	height: 150px;
}

#body_html {
	height: 300px;
}

#preview-note {
	width: 450px;
	margin-left: 480px;
	background: #ffc;
	text-align: center;
	font-size: 16px;
	padding: 7px;
	line-height: 1;
	position: absolute;
	top: 20px;
}

#manage-pages td {
	padding: 5px;
}

#manage-pages td a {
	text-decoration: underline;
}

a#new-page {
	border: 1px #ccc solid;
	padding: 5px;
	border-radius: 3px;
	margin: -45px 0 10px 0;
	display: block;
	width: 200px;
	text-align: center;
	float: right;
	box-shadow: inset #eee 0 -10px 20px;
}

a#new-page:hover {
	border: 1px #999 solid;
	text-decoration: none;
	color: #000;
}

a#new-page:after {
	content: ' »';
	color: #cc0f16;
}

#create-page fieldset {
	margin-bottom: 25px;
}

#create-page legend {
	font-size: 1.1em;
	font-weight: bold;
	border-bottom: 1px solid #999;
	width: 100%;
}

#create-page textarea {
	font-family: monospace;
	font-size: 0.9em;
}

button.delete {
	color: #c00;
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 13px;
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

button.delete:hover {
	color: #f33;
}

button.tools {
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 13px;
	padding: 0;
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* User profile */
#profile>fieldset {
	width: 48%;
	margin: 0 0 2em 0;
}

#profile>fieldset:nth-child(2n-1) {
	float: left;
	clear: left;
}

#profile>fieldset:nth-child(2n) {
	float: right;
}

#profile>input[type="submit"] {
	display: block;
	float:left;
	margin: .6em 0 0 4%;
	font-size: 1.3em;
	padding: .5em 2em;
}

#profile>fieldset>legend {
	font-size: 1.3em;
	font-weight: bold;
	padding: .2em 0 .2em 0;
	border-bottom: 1px solid #eee;
	display: block;
	width: 100%;
	margin: 0 0 .5em 0;
	float:left;
	clear:both;
}

#profile>fieldset:nth-child(2n-1):not(:nth-child(7)) label {
	float: left;
	width: 35%;
	text-align:right;
	padding: 0 1% 0 0;
}

#profile>fieldset:nth-child(2n-1) input:not([type="checkbox"]),
#profile>fieldset:nth-child(2n-1) select {
	width: 64%;
	margin: .5em 0 0 0;
}

#profile>fieldset #avatar {
	width: 84%;
}

#profile>fieldset label {
	font-weight: normal;
}

#profile>fieldset label:after {
	content: '';
}

#profile>fieldset>img.avatar {
	display: block;
	float: left;
	padding: 5px;
	margin: .2em 1em 2em 0;
}

/* Author page */
.authorinfo {
	min-width:960px;
}

.authorinfo>aside h2 {
	background: none;
	font-size: 1.5em;
}

.authorinfo>aside {
	float: left;
	width: 180px;
	margin: 0 100px 0 0;
	font-size: .9em;
}

.authorinfo aside ul li a {
	text-decoration: underline;
}

.authorinfo>ul {
	width: 70%;
	margin: 0;
	float: left;
}

.authorinfo>h3 {
	margin: 2.1em 0 1em 0;
}

/* Miscellaneous */

.error {
	background:#ffa;
	padding:8px;
	margin:8px 0;
	border:1px solid #da0;
	clear: both;
	}

p.error {
	float: left;
	width: 98%;
}

.print {
	display: none;
}


/* FOOTER */

footer {
  padding:20px 0;
	color:#666;
	font-size: 12px;
}

footer p {
	}

footer ul {
	list-style:none;
	margin:10px 0 0;
}
footer li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	border-right: 1px solid #ccc;
	line-height: 1;
	color:#666;
}
footer ul li:last-child {
	border: 0;
}

#change-language {
	float: right;
}

#login {
	display: none;
}

@media all and (max-width: 1152px) {
	.campaign > div > h1 {
		position: absolute;
		right: 20px;
	}

	.mobile .campaign > div > h1,
	.tv .campaign > div > h1,
	.labs .campaign > div > h1 {
		left: 0;
	}

	.tv .campaign > div > h1 {
		margin-top: 260px;
	}
}

@media all and (max-width: 960px) {

h1 {
	font-size:22px;
	margin-bottom:10px;
	}

.floatright {
	max-width:45%;
	height:auto;
	}

.floatleft {
	max-width:45%;
	height:auto;
	}

.img {
	max-width: 28%;
	padding: 1%;
	}

.main, #content > aside { float: none !important; width: 98% !important; }
.wrap, #content, footer {
	width: 98% !important;
	box-sizing: border-box;
	padding:1%;
	margin: 10px auto;
	}

.wrap {
	min-width:128px;
	margin:0 auto;
	padding:10px 0 0 0;
	}


/* Author pages */
.authorinfo>aside>ul, .authorinfo>aside>img {
	float: left;
	margin: 0 10px 0 0;
}

.authorinfo>aside {
	clear: both;
	width: 100%;
	max-width: none;
}

.authorinfo>ul, .authorinfo>h3 {
	width: 100%;
	margin: 0 10px 1em 10px;
}

.articlelist > li > h2,
.articlelist > li > p,
.articlelist > li > a.readmore {
	float: right;
	width: 66% !important;
}

.articlelist > li > .img {
	float: left;
	width: 28%;
	margin-right: 2%;
}

.articlelist.sp2 > li > h2,
.articlelist.sp2 > li > p,
.articlelist.sp2 > li > a.readmore {
	float: left;
	width: 100% !important;
}

/* HEADER */

#userinfo a, /*#login a, */#userinfo-name {
	font-size: 11px;
}

/*#login, #login > a {
	text-align: left;
	height: 30px;
}

#login {
	padding: 27px 0 10px 0;
}

#login > a{
	padding: 0;
}
*/
#userinfo ul {
	margin: 0;
	width: 100%;
	border: none;
	position: absolute;
	clear: none;
}

header fieldset input {
	height: 2em !important;
}

header fieldset input[type="submit"] {
	margin: 0 0 0 -3px !important;
}

.campaign > div > h1 {
	background-image: none !important;
	margin: 360px 0 0 0 !important;
	left: 0;
	right: 0;
	width: 100% !important;
	font-size: 1.5em;
	padding: .5em 0 !important;
}
.campaign > div > h1:before {
	content: '';
	margin-right: .3em;
}

.labs .campaign > div > h1 {
	margin: 250px 0 0 0 !important;
}

#topic-intro {
	width: 95%;
}

} /* END @media all and (max-width: 960px) */

@media all and (max-width: 840px) {
p > a {
	text-decoration: underline !important;
}

a.com {
	text-decoration: none !important;
}

body {
	position: absolute;
	left: 0; /* overrides Mini's width stuff */
	right: 0;
	padding:0;
}

section#author-info > p {
	margin-left: 70px;
	width: auto;
}


.main, aside, header {
	float:none;
  width: 100%;
  max-width:100%;
}

#content {
	padding:5px 0;
	}

footer {
	padding:0 5px;
	}

.main, aside {
	box-sizing: border-box;
	padding:0 10px 10px 10px;
	}

header #nav {
	margin:0;
	}

select,
object,
input,
img {
	max-width: 100% !important;
	height: auto !important;
}

.hide-narrow {
	display: none;
}
header div {
	height: auto;
	overflow: hidden;
	margin: 0;
	padding: 0;
	clear: both;
	background-image: none;
	border-radius: 0;
	font-size: 11px;
}

header #nav {
	margin:0;
	height:auto;
	}

form[role=search] {
	white-space:nowrap;
	width:62%;
	box-sizing: border-box;
	padding:5px;
	margin:0;
	}

form[role=search] input[type=search] {
	width:65%;
	}

#logo {
	height:auto;
	margin:10px 0 5px 10px;
	}

header div fieldset {
	margin: 10px;
}

#nav {
	clear:both;
	width:100%;
}

#userinfo-name:after/*,
#login a:after*/ {
	margin: 0 0 7px 0;
	float: left;
}

#nav li {
	width:50%;
	}

header div ul {
	margin:0;
	border-top:1px solid #000;
	}

#nav {
	clear:none;
	}

#nav a,
/*#login > a,*/
#userinfo-name {
	display:block;
	box-sizing: border-box;
	border:1px solid #000;
	border-width:1px 0 0 1px;
	line-height:1;
	height:auto;
	text-align:left;
	font-weight: bold;
	padding:7px 10px;
	font-size:11px;
	color:#fff;
	margin: 0;
}

/*#login, */#userinfo {
	clear:both;
	box-sizing: border-box;
	width:50%;
	float:left;
	margin:0;
	height: auto;
	padding: 0;
	max-height: 20px;
	}

#userinfo ul {
	position:relative;
	top: 0;
	}

/*#login > a:after, */#userinfo > a:after {
	margin-top: -2px;
	padding-right: 5px;
}

#userinfo:hover {
	max-height: none;
}

#userinfo:hover #userinfo-options li {
	border-left: 1px solid #000;
}

#userinfo:hover #userinfo-options li a,
#userinfo:hover #userinfo-options li button {
	padding: 6px 0 0 10px;
}

#userinfo:hover #userinfo-options form {
	padding-bottom: 6px;
}

#userinfo a {
	height: 28px;
}

header div li:hover a:after, header .selected a:after {
  display: none !important;
	}

h1 {
	font-size:18px;
	}

.articlelist p {
	margin-left:0px;
	}

.floatright, .floatleft {
	max-width:100% !important;
	float:none;
	margin:0;
	}

section .sp2 li {
	clear:both;
	float:left;
	width:100%;
	box-sizing: border-box;
	max-width:100%;
	}

} /* END @media all and (max-width: 840px) */

@media all and (max-width: 640px) {

#username {
	margin-right:10px;
	}

#userinfo {
	float:left;
	}

.campaign > div > h1 {
	font-size: 1.3em !important;
	margin: 390px 0 0 0 !important;
}

.addons .campaign > div > h1 {
	margin: 370px 0 0 0 !important;
}

.labs .campaign > div > h1 {
	margin: 270px 0 0 0 !important;
}

} /* END @media all and (max-width: 640px) */

@media all and (max-width: 480px) {
	.tv .campaign > div > h1 {
		font-size: 1em !important;
		margin-top: 400px !important;
	}

	.tv .campaign > div {
		background-position: 70% 50%;
	}

	#topic-intro {
		padding: 0;
		width: 87%;
	}
}

@media all and (max-width: 440px) {
#nav li, /*#login, */#userinfo {
	width:100%;
	height: auto;
	max-height: 28px;
	}

#userinfo-options li {
	border-left: none !important;
}

form[role=search] fieldset {
	width: 50%;
}

#q-submit {
	margin: 0 0 0 -10px !important;
}

/*#login a,*/ #userinfo-name {
	border:1px solid #000;
	border-width:1px 0 1px 0;
	}

#userinfo:hover #userinfo-name {
	border-width:1px 0 0 0;
}

#userinfo:hover #userinfo-options li a {
	border: none;
}

#userinfo ul {
	border-bottom: 1px solid #000;
}

#nav li a {
	border-width:0 0 1px 0;
	text-align:left;
}

.img {
	float:none;
	width:100%;
	max-width:100%;
	margin:0 0 10px 0;
	}

#logo {
	margin:10px 0 5px 5px;
	}

header div fieldset {
	margin: 10px;
	position: absolute;
	top: 8px;
	right: 10px;
}

#subnav ul li a {
	padding: 0 10px;
}

.campaign > div {
	height: 230px !important;
}

.labs .campaign > div {
	background-position: 60% 100%;
}

.campaign > div > h1,
.web .campaign > div > h1,
.addons .campaign > div > h1,
.mobile .campaign > div > h1,
.tv .campaign > div > h1,
.labs .campaign > div > h1 {
	margin: 185px 0 0 0 !important;
}

.mobile .campaign > div {
	background-position: 70% 80%;
}

.campaign > div > h1 {
	font-size: 1em !important;
}

.tv .campaign > div {
	background-position: 80% 5%;
}

.articlelist h2 {
	font-size:15px;
	line-height:1.2;
	font-weight:bold;
	}

.articlelist li {
	margin-bottom:15px;
	}

article dl dd {
	margin: 5px 0;
	width: 100%;
	word-wrap: break-word;
}

article dt {
	margin: 10px 0 0 0;
}

article dl {
	margin: 0 0 20px 0;
	width: 100%;
}

} /* END @media all and (max-width: 440px) */

@media all and (max-width: 320px) {
	form[role="search"] label {
		display: block;
	}

	form[role="search"],
	form[role="search"] fieldset {
		width: 30%;
	}

	#q {
		width: 90%;
	}

	.right {
		max-width: 100%;
	}

	article img {
		max-width: 100%;
	}

	#topic-intro {
		margin: 5px auto;
	}
}


@media all and (max-width: 280px) {
	aside section {
		background:transparent;
		border:none;
		padding:0;
	}

	form[role=search] {
		width:100%;
		clear:both;
		text-align:left;
	}

	/* Hide campaigns on small screens */
	.campaign {
		display: none;
	}

	#subnav ul li {
		width:112px;
		background: #000;
		border-bottom: 1px solid #fff;
	}

	#subnav ul li:nth-child(2n) {
		border-left: 1px solid #fff;
	}

	#subnav ul li:hover a:after {
		display: none;
	}

	.articlelist li a.img {
		display: none;
	}

	.articlelist > li > h2,
	.articlelist > li > p,
	.articlelist > li > a.readmore {
		float: left;
		width: 100% !important;
	}

} /* END @media all and (max-width: 280px) */

@media all and (max-width: 239px) {
	body {
		min-width: 108px;
		font: 11px/1.4 'helvetica neue', 'helvetica-neue', helvetica, arial, sans-serif;
	}

	#logo {
		clear: both;
		margin: 5px auto 0 auto !important;
		text-align: center;
		padding: 5% 0;
		width: 100%;
	}

	header fieldset {
		clear: both;
		position: relative !important;
		margin: 0 auto 10px auto !important;
		width: 90% !important;
	}

	#q {
		width: 98% !important;
	}

	#q-submit {
		margin: 0 0 0 -5px !important;
	}

	/*#login a,*/
	#userinfo-name,
	#userinfo li button.logout,
	#userinfo li a,
	#nav a,
	.articlelist li p,
	.articlelist li p a,
	.tools a,
	code,
	article li,
	.commentdate,
	.commentcontent,
	.pagination li,
	.tools ul li {
		font-size:10px !important;
	}

	a.readmore {
		margin: 5px 0 10px 0;
	}

	aside section h2,
	.tools h2,
	.commenter a,
	#comments form fieldset input[type="submit"] {
		font-size: 11px;
	}

	.articlelist li h2 {
		font-size: 12px;
		margin: 0;
	}

	.articlelist li p {
		margin: 0;
	}

	#content > section {
		padding: 3px !important;
	}

	pre {
		padding: 5px;
		font-size: 10px;
	}

	pre code {
		padding: 0 !important;
	}

	#license,
	.info,
	.note {
		font-size: 10px;
		padding: 5px !important;
		background-image: none;
	}

	section[role="contentinfo"] {
		font-size: 10px;
		padding: 0 !important;
	}

	.asideleft aside {
		padding: 0 !important;
	}

	#resources a img {
		width: 24px;
	}

	article h1 {
		font-size: 13px !important;
	}

	article h2,
	#comments h2 {
		font-size: 12px !important;
	}

	article h3 {
		font-size: 11px !important;
	}

	article p {
		font-size: 10px;
	}

	#subnav ul li {
		width:100%;
		font-size: 10px;
		background: #000;
		border: 0 !important;
	}

	#subnav ul li a {
		padding: 0 0 0 10px !important;
		text-align: left !important;
	}

	img.avatar {
		width: 32px;
		margin: 3px 5px 20px 0;
	}

	.commenter {
		line-height: 1;
	}

	.active, .next a, .prev a {
		padding: 2px 4px !important;
	}

	#userinfo-name:after {
		display: none;
	}

	#userinfo-name {
		border-bottom: none;
	}

	#userinfo {
		max-height: none !important;
	}

	#userinfo-options {
		height: auto !important;
		display: block !important;
	}

	#userinfo-options li a,
	#userinfo-options li button {
		padding: 6px 0 0 10px !important;
	}

	#userinfo-options li a:before,
	#userinfo-options li button:before {
		content: "»" !important;
		padding-right: 5px;
		font-size: 12px;
	}

	#userinfo-options form {
		padding-bottom: 6px;
	}

	#topic-intro {
		padding: 0;
		border: none;
		width: 100%;
	}

	.main+aside,
	.tools {
		padding: 0;
	}

	.tools h2 {
		padding: 0;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
}