/* $ Global */

body {
	margin: 0 auto;
	padding: 0;
	font: 300 1em/1.4 Ubuntu, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
	color: #333;
	text-align: center;
	background: #fefefe;
}

header,
.content,
footer {
	clear: both;
	margin: 0 auto;
	width: 86%;
	padding: 2%;
	background: #fff;
	text-align: left;
}

header {
	background: #fefefe;
	padding: 0;
	width: 90%;
}

footer {
	background: #eee;
	border-top: 6px solid #333;
	border-bottom: none;
	-webkit-border-radius: 12px 12px 0 0;
	border-radius: 12px 12px 0 0;
	font: 400 1em/1.7 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	text-align: left;
	color: #333;
}

.content {
	border-right: 1px solid #eee;
	border-left: 1px solid #eee;
}

.top {
	border-bottom: none;
	border-top: 6px solid #eee;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.bottom {
	border-top: none;
	border-bottom: 6px solid #eee;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

.last {
	padding: 6% 2%;
	background: transparent;
	border: none;
}


/* $ Typography */

h1, h2, h3, h4, h5, h6 {
	font-family: Ubuntu, MuseoSlab300, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
	font-weight: 300;
	padding: 0;
	margin: .45em;
}

h1 {
	font: 300 3.3em/1 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	margin: .2em 0;
}
header h1 a { color: #777; }
header h1 a:hover { color: #DD4814; }

h2 {
	font: 300 1.7em/1.4 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	color: #222222;
	text-align: center;
	margin: .765em 0;
}
.content h2 { border-bottom: 3px solid #eee; }
h2 a { color: #444; }
h2 a:hover { color: #DD4814; }

h3 {
	font: 300 1.5em/1.4 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	color: #222222;
	text-align: center;
	margin: .675em 0;
}

h4 {
	font: 300 1.3em/1.25 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	color: #333333;
	text-align: center;
	margin: .5em .585em;
}

h5 {
	font: 400 1em/1.4 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	color: #555555;
	margin: .45em;
}

h6 {
	font: 400 1em/1.4 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	color: #666666;
	margin: .45em;
}

a {
	text-decoration: none;
	font-weight: 400;
	color: #DD4814;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
a:hover, a:active, a:focus {
	color: #DD4814;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}



/* $ Navigation */

header nav {
    margin: 0 2%;
    width: 96%;
}

header nav a {
	font: 400 1em/1 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
	padding: 1em 0;
	margin: 0;
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
	display: block;
	text-align: center;
}
header nav a:hover {
	background: #eee;
	color: #DD4814;
}

footer p { padding: 5px; }



/* $ Adverts */

.ad { text-align: center; }
.ad ins {
    background: #f9f9f9;
    border-radius: 3px;
}

.ad.banner.large {
	width: 970px;
	min-height: 111px;
	margin: 3% auto !important;
}
.ad.skyscraper.large {
	margin: 3% auto !important;
	width: 300px;
	min-height: 621px;
}

.about-ads {
	margin: 0;
	color: #AEA79F;
	padding-left: 0;
	padding-right: 0;
	font: 400 .8em/1 Ubuntu,'lucida sans unicode','lucida grande','Trebuchet MS',verdana,arial,helvetica,helve,Sans;
}
.about-ads a {
	color: #AEA79F;
	float: right;
}
.about-ads a:hover { color: #DD4814; }
@media only screen and ( max-width: 1000px ){ .ad.banner.large { width: 320px; min-height: 71px; } }




.authheader {
	float: right;
	text-align: right;
	margin: 10px 0 -10px;
}

.box {
	border: 1px solid #eee;
	margin: .5em 0;
	border-radius: 3px;
}

.general { background: #eee; border: 1px solid #ddd; border-radius: 3px; padding: 1%; }
.warning { background: #DF382C; border: 1px solid #ce271b; color: #ffffff; border-radius: 3px; padding: 1%; }
.info { background: #3a8ee6; border: 1px solid #297dd5; color: #ffffff; border-radius: 3px; padding: 1%; }
.warning h3, .info h3, .warning h4, .info h4 { color: #ffffff; }
.warning a, .info a { color: #efefef; }
.warning a:hover, .info a:hover { color: #ffffff; }

.download {
	color: #fff;
	background: #DD4814;
	border: 1px solid #cc3703;
	padding: 3%;
	-webkit-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}
.download:hover { color: #fff; }
.breaker {
	clear: both;
	height: 10px;
}
.break { margin-top: 10%; }

.textright { text-align: right; }
.textcenter { text-align: center; }
.textleft { text-align: left; }

.clear { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }

.floatnone { float: none; }
.floatleft { float: left; }
.floatright { float: right; }

code, .code {
	color: #fefefe;
	font: 400 1em/1.5em 'Ubuntu Mono', monospace;
	border: none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-align: left;
	outline: 0px;
	width: 94%;
	padding: 3%;
	margin: 2% 0;
	display: block;
	background: #333333;
	border: 1px solid #222;
	resize: none;
}
.inline-code {
	font: 400 1em/1.5em 'Ubuntu Mono', monospace;
	border: none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 3px;
	background: rgba(0,0,0,0.3);
}

.editable { color: #3a8ee6; }

b, strong, .strong, .bold { font-weight: 400; }

p {
	-webkit-hyphens: auto;
	-webkit-hyphenate-character: '\2010';
	-webkit-hyphenate-limit-after: 1;
	-webkit-hyphenate-limit-before: 3;
	-moz-hyphens: auto;
	hyphens: auto;
	text-align: justify;
}
p.intro, p.important {
	font: 300 1em/1.5 Ubuntu, MuseoSlab100, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
	margin-bottom: .5em;
}
p, ol, ul, dl, address {
	margin: .5em;
	font-size: .9em;
}
ul { list-style: disc; }
ol { list-style: decimal; }
ul, ol {
	margin: 0 0 1.5em 0;
	padding: 0 0 0 24px;
}
li ul, li ol {
	margin: 0;
	font-size: 1em;
}
dl, dd { margin-bottom: 1.5em; }
dt { font-weight: normal; }

hr {
	display: block;
	margin: 1em 0;
	padding: 0;
	height: 1px;
	border: 0;
	border-top: 1px solid #eee;
}

small { font-size: 0.9em; }
.grey { color: #AEA79F; }

sub, sup {
	font-size: 0.9em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup { top: -.5em; }
sub { bottom: -.25em; }
.subtext { color: #666; }

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1.4em;
	width: 100%	;
}
th { font-weight: 400; }
tr:nth-child(even) { background: #eee; }
th, td, caption { padding: .25em 10px .25em 5px; }
tfoot { font-style: italic; }
caption { background: transparent; }

form {
	margin: 0;
	display:  inline-block;
}
fieldset {
	margin-bottom: 1.5em;
	padding: 0;
	border-width: 0;
}
legend {
	margin-left: -7px;
	padding: 0;
	border-width: 0;
}
label {
	font-weight: normal;
	cursor: pointer;
	display: block;
	margin: 10px 0 0 0;
	position: relative;
	top: 0;
	left: 0;
}
label.inline {
	display: inline;
	margin: 0;
}
label span {
	color: #666;
	font-size: .9em;
}
label span.right {
	position: absolute;
	bottom: 0;
	right: 1em;
	text-align: right;
}
label.disabled {
	color: #eee;
}
button, search, input, select, textarea {
	font-size: 100%;
	margin: 0;
	vertical-align: baseline;
	vertical-align: middle;
}
button, input {
	line-height: normal;
	overflow: visible;
	text-align: center;
}
button, input[type='button'], input[type='reset'], input[type='submit'] {
	cursor: pointer;
	margin: 60px auto;
	padding: 2% 3%;
	width: auto;
	color: #333;
	font-size: 1.5em;
	line-height: 1.3;
	text-align: center;
}
button, input[type='button'], input[type='reset'], input[type='submit'] { -webkit-appearance: button; }
input[type='checkbox'], input[type='radio'] { box-sizing: border-box; }
input::-webkit-input-placeholder, input:-moz-placeholder, .placeholder { color: #bbb; }
input::-moz-focus-inner { border: 0; }
input[type='search'] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
input[disabled='disabled'], input.disabled {
	color: #999;
	background: #f5f5f5;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0;
	border: 0;
}
input[type='checkbox'], input[type='radio'] {
	box-sizing:  border-box;
	width: auto;
	display: inline-block;
	margin: 0;
	box-sizing: border-box;
}
button, input, select, textarea {
	outline: 0;
	font-family: Ubuntu, MuseoSlab100, lucida sans unicode, 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
	color: #333;
}
input {
	display: block;
	width: 98%;
	margin: 0 0 20px 0;
	border: 1px solid #eee;
	font-size: 1em;
	padding: 1%;
	outline: 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #eee;
	border: 1px solid #eee;
}
textarea {
	text-align: left;
	width: 98%;
	margin: 0 0 20px 0;
	border: 1px solid #eee;
	padding: 1%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	overflow: auto;
	vertical-align: top;
}
button.no, input[type='button'].no, input[type='reset'].no, input[type='submit'].no {
	display: inline-block;
	border: none;
	box-shadow: none;
	margin: 0;
	font: 1em/1.4 Ubuntu, 'lucida sans unicode', 'lucida grande', 'Trebuchet MS', verdana, arial, helvetica, helve, sans-serif;
	color: #DD4814;
	background: transparent;
	transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
}
button.no:hover, input[type='button'].no:hover, input[type='reset'].no:hover, input[type='submit'].no:hover {
	color: #3a8ee6;
	transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
}




.bubble {
	background: #fefefe;
	border: 1px solid #eee;
	border: 1px solid #eee;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 1% 3% 3%;
	margin: 7% 3%;
	border: 1px solid #eee;
}




.spanpage {
	display: block;
	position: relative;
	padding: 2%;
}

.spanpage.saucy {
	background: #ddd url(../images/ubuntu-background-1310.jpg) no-repeat top center fixed;
	background-size: cover;
}

.spanpage.trusty,
.spanpage.utopic,
.spanpage.latest {
	background: #ddd url(../images/ubuntu-background-1404.jpg) no-repeat top center fixed;
	background-size: cover;
}



.spanpage .bubble {
    background: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.2);
}
.spanpage .bubble h2,
.spanpage .bubble h3,
.spanpage .bubble h4 {
    color: #fff;
    border-color: rgba(0,0,0,0.2);
}





/* General Fixes */
img {
	border : 0;
	max-width: 100%;
	vertical-align: middle;
}
.round, .round img { -webkit-border-radius: 3px; border-radius: 3px; }
b, strong { font-weight: 600; }
sub, sup {
	font-size: .75em;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup { top: -.5em; }
sub { bottom: -.25em; }
small {
	font-size: .9em;
	color: #777;
}
table { width: 100%; }

.transparent { background: transparent; }



/* Colorbox */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url('../images/colorbox/overlay.png') repeat 0 0;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url('../images/colorbox/controls.png') no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url('../images/colorbox/controls.png') no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url('../images/colorbox/controls.png') no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url('../images/colorbox/controls.png') no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url('../images/colorbox/controls.png') left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url('../images/colorbox/controls.png') right top repeat-y;}
    #cboxTopCenter{height:21px; background:url('../images/colorbox/border.png') 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url('../images/colorbox/border.png') 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url('../images/colorbox/loading_background.png') no-repeat center center;}
        #cboxLoadingGraphic{background:url('../images/colorbox/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url('../images/colorbox/controls.png') no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url('../images/colorbox/controls.png') no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url('../images/colorbox/controls.png') no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}



/* Google Search Box Fixes */
.gsc-search-box td { vertical-align: top !important; }
.gsc-input { padding-top: 0px !important; }
.gsc-input input { text-align: left; margin: 0 !important; height: 22px !important; }
.gsc-input-box {
	height: 30px !important;
	border: 1px solid #eee !important;
	-webkit-border-radius: 2px !important;
	-moz-border-radius: 2px !important;
	border-radius: 2px !important;
}
.gsc-search-button { padding: 0px !important; }
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { padding: 8px 27px 7px !important; }
.gsc-control-cse { padding: 2em 0 0 !important; }
.gs_tti0 { padding: 4px 6px !important; }
.gsib_b { padding: 2px 6px !important; }
.gsc-search-box table, .gsc-search-box tr, .gsc-search-box td 	{ outline: none !important; }
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult, .gsc-results .gsc-cursor-box .gsc-cursor-page { padding: 10px !important; }
.cse .gsc-search-button input.gsc-search-button-v2, input.gsc-search-button-v2 { margin-top: 0 !important; }
.gsc-control-cse, .gsc-control-cse .gsc-table-result { font-family: Ubuntu, sans-serif !important; }
.gsc-selected-option { font-weight: normal; }



/* Social */
.networks a { color: #555; }
.network {
	margin: 0;
	padding: 16px 16px;
	position: relative;
}
.network:first-child {
	-webkit-border-radius: 3px 3px 0 0;
	border-radius: 3px 3px 0 0;
}
.network:last-child {
	-webkit-border-radius: 0 0 3px 3px;
	border-radius: 0 0 3px 3px;
}
.network iframe { border: none; padding: none; margin: none; }
.network .box {
	margin: 0 auto;
	padding: 12px;
	height: 20px;
	color: #4f4f4f;
	clear: both;
	text-align: right;
	background: white;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 300ms color ease;
	-moz-transition: 300ms color ease;
	-ms-transition: 300ms color ease;
	-o-transition: 300ms color ease;
	transition: 300ms color ease;
}
.google { background-color: #cc3732 }
.facebook { background-color: #3b5998 }
.twitter { background-color: #4099ff }
.youtube { background-color: #c4302b }
.google #___follow_0,
.google iframe,
.facebook .fb_iframe_widget,
.facebook > iframe,
.twitter .twitter-follow-button,
.twitter iframe,
.youtube #___ytsubscribe_0,
.youtube iframe {
	position: absolute !important;
	left: 28px;
	top: 28px;
}
/* Fix YouTube alignment.
	As it HAS to be 4px taller than all the others,
	move it 2px further up. If it won't be the same,
	it will damn well be symmetrical.
*/
.youtube #___ytsubscribe_0 { top: 26px !important; }
/* Responsiveness */
@media only screen and (max-width: 999px) { .network .type { display: none; } }



/* Responsive Pages */

@media only screen and (min-width:1340px) {
	.content,
	footer { width: 76%; }
	header { width: 80%; }
}

@media only screen and (min-width:1500px) {
	.content,
	footer { width: 66%; }
	header { width: 70%; }
}

@media only screen and (min-width:1900px) {
	.content,
	footer { width: 56%; }
	header { width: 60%; }
}

@media only screen and (max-width:899px) {
	header,
	.content,
	footer {
		width: 95%;
		padding: 2%;
	}
}