/**
* Ubuntu Font base stylesheet
*
* A base stylesheet containing site-wide styles
*
* @project Ubuntu Font
* @version 1.0
* @author Canonical Web Team: Steve Edwards
* @copyright 2011 Canonical Ltd.
*/

/**
* @section Global
*/

body {
	padding-bottom: 30px;
	background: url('../img/background-body.png') 0 0 repeat #fff;
	font-family: 'Ubuntu', 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: #333;
}
a {
	color: #dd4814;
	text-decoration: none;
	outline: 0;
}
p {
	margin-bottom: 10px;
}
em {
	font-style: italic;
}
strong {
	font-weight: bold;
}
select {
	margin-right: 5px;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #ccc;
}
h1 {
	font-size: 36px;
	line-height: 1.1;
	margin-bottom: 20px;
}
h2 {
	font-size: 24px;
	line-height: 1.2;
	margin-bottom: 14px;
}
h3 {
	padding-top: 8px;
	font-size: 16px;
	line-height: 1.3;
	margin-bottom: 8px;
}

/**
* @section Structure
*/

#header-and-content {
	position: relative;
	z-index: 1;
	background-color: #fff;
		-moz-box-shadow: 0 2px 3px #c9c9c9;
		-webkit-box-shadow: 0 2px 3px #c9c9c9;
	box-shadow: 0 2px 3px #c9c9c9;
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
#header {
	height: 64px;
	background: url('../img/background-header.png') 0 0 repeat-x #dd4814;
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
#header a,
#header h2 {
	color: #fff;
	float: left;
}
#header .logo-ubuntu {
	position: relative;
	top: 14px;
}
#header h2 {
	display: inline;
	text-transform: lowercase;
	font-size: 20px;
	position: relative;
	top: 20px;
	left: 10px;
}
#header ul {
	float: right;
	position: relative;
	left: 1px;
	border-left: 1px solid #c03d14;
	border-right: 1px solid #e6633a;
}
#header li {
	float: left;
	font-size: 14px;
	line-height: 62px;
}
#header li a {
	padding: 0 10px;
	height: 64px;
	display: block;
	border-left: 1px solid #e6633a;
	border-right: 1px solid #c03d14;
}
#header li a.active {
	background: url('../img/background-header-active.png') 0 0 repeat-x #b83a10;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}
#footer {
	padding: 10px 0;
	position: relative;
	z-index: 0;
	background-color: #f7f7f7;
		-moz-border-radius: 0 0 4px 4px;
		-webkit-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
	font-size: 12px;
	min-height: 100px;
}
#footer a {
	color: #000;
}
#footer ul {
	margin: 10px 20px 33px 0;
	float: left;
	width: 140px;
}
#footer li {
	margin-bottom: 10px;
}
#footer li:first-child {
	padding-bottom: 5px;
	font-weight: bold;
	border-bottom: 1px dotted #aea79f;
}
#footer p {
	position: absolute;
	bottom: 0;
	color: #aea79f;
}
#footer .logo-ubuntu {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
#content {
	padding-bottom: 60px;
	min-height: 600px;
}

/**
* @section Site-wide
*/

#content #nav-secondary {
	margin-top: 0;
	margin-bottom: 20px;
}
#nav-secondary ul {
	background-color: #efefef;
		-webkit-border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-moz-border-radius-bottomright: 4px;
		-moz-border-radius-bottomleft: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;	
}
#nav-secondary li {
	line-height: 40px;
	float: left;
}
#nav-secondary a {
	padding: 0 10px;
	height: 40px;
	display: block;
	color: #333;
	border-right: 1px solid #fff;
}
#nav-secondary a.active {
	color: #dd4814;
}
#content .grid-12:first-child {
	margin-top: 40px;
}
#content ul,
#content ol {
	margin-bottom: 10px;
}
#content ul.list-bullets li {
	margin-bottom: 10px;
	list-style: disc;
	list-style-position: inside;
}
#content ol ol,
#content ol ol ol {
	margin-top: 10px;
}
#content ol li {
	margin-bottom: 10px;
	list-style: decimal;
	list-style-position: inside;
}
#content ol ol li {
	margin-left: 20px;
	list-style: lower-alpha;
	list-style-position: inherit;
}
#content ol ol ol li {
	margin-left: 40px;
	list-style: lower-roman;
	list-style-position: inherit;
}
.content-heading {
	padding: 0 20px;
}
.content-intro {
	padding: 20px;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.4;
}
.content-sample {
	margin-bottom: 20px;
	padding: 20px 20px 0 0;
}
.content-main {
	padding: 20px;
	width: 900px;
	background-color: #f7f7f7;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	border-radius: 4px;
}
input[type='text'] {
	padding: 5px;
	border: 1px solid #ccc;
	width: 160px;
}
.link-action {
	margin-bottom: 20px;
	padding: 8px 12px;
	display: block;
	background-color: #dd4814;
	color: #fff;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #dd4814;
	background: -moz-linear-gradient(top, #dd4814 0%, #c13f11 100%);
	background: -webkit-linear-gradient(top, #dd4814 0%, #c13f11 100%);
	background: -o-linear-gradient(top, #dd4814 0%, #c13f11 100%);
	background: -ms-linear-gradient(top, #dd4814 0%, #c13f11 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4814', endColorstr='#c13f11', GradientType=0 );
	background: linear-gradient(top, #dd4814 0%, #c13f11 100%);
	font-size: 16px;
	line-height: 1.3;
}
.link-action:hover {
	background: -moz-linear-gradient(top, #c84312 0%, #af3a0f 100%);
	background: -webkit-linear-gradient(top, #c84312 0%, #af3a0f 100%);
	background: -o-linear-gradient(top, #c84312 0%, #af3a0f 100%);
	background: -ms-linear-gradient(top, #c84312 0%, #af3a0f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c84312', endColorstr='#af3a0f', GradientType=0 );
	background: linear-gradient(top, #c84312 0%, #af3a0f 100%);
}
.disabled {
	color: #aea79f;
}
.border-right {
	border-right: 1px dotted #aea79f;
}
.border-left {
	border-left: 1px dotted #aea79f;
}
.grid-4.border-right,
.grid-4.border-left {
	padding: 0 20px;
	margin-bottom: 20px;
	width: 259px;
	min-height: 330px;
}
.grid-12 .link-action {
	float: right;
}

/**
* @section Page specific
*/

.home #content .grid-12:first-child {
	margin-bottom: 20px;
	border-bottom: 1px dotted #aea79f;
}
.home .link-action {
	float: left;
}
#tester {
	margin-bottom: 20px;
	padding: 20px;
	background: url('../img/background-tester.png') 2px 0 repeat #fff;
}
#tester h1 {
	font-size: 48px;
	line-height: 1.2;
	height: 220px;
	overflow: hidden;
}
#tester h1 span {
	margin-bottom: 20px;
	display: block;
}
#tester-controls {
	padding: 20px;
	background-color: #f7f7f7;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	border-radius: 4px;
}
#tester-controls input[type='text'] {
	margin-bottom: 15px;
	border: 3px solid #ccc;
	width: 844px;
}
#tester-controls label {
	margin: 0 5px;
}
.charset {
	padding: 20px 20px 0 20px;
	background-color: #f7f7f7;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	border-radius: 4px;
}
.charset a {
	margin-top: 10px;
	padding-bottom: 5px;
	display: block;
	text-align: right;
	border-bottom: 1px dotted #aea79f;
}
.charset p {
	margin-bottom: 0;
	padding: 10px 20px;
	background-color: #fff;
	font-size: 48px;
	line-height: 1.2;
}
.charset-light p {
	font-weight: 300;
}
.charset-regular p {
	font-weight: normal;
}
.charset-medium p {
	font-weight: 500;
}
.charset-bold p {
	font-weight: 700;
}
.charset-italic p {
	font-style: italic;
}
.charset-condensed p {
	font-family: 'Ubuntu Condensed';
}
.charset-monospace p {
	font-family: 'Ubuntu Mono';
	line-height: 0.6em; /* should be 1.0 but this balanced the 1.4em at the top level */
}
#sample,
#sample-inactive {
	margin-bottom: 20px;
	padding: 20px;
	font-size: 180px;
	height: 280px;
	overflow: hidden;
	text-align: center;
	border: 1px solid #dd4814;
	cursor: pointer;
}
#gallery {
	padding: 20px 20px 0 20px;
	background-color: #f7f7f7;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	border-radius: 4px;
}
#gallery li {
	margin: 0 20px 20px 0;
	width: 284px;
	height: 300px;
	position: relative;
	border: 1px solid #dd4814;
	float: left;
}
#gallery li.last {
	margin-right: 0;
}
#gallery li p {
	margin-bottom: 0;
	padding: 10px;
	position: absolute;
	bottom: 0;
	width: 264px;
	background-color: #fff;
}
#resources {
	padding: 20px;
	background-color: #f7f7f7;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	border-radius: 4px;
}
#resources li {
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 16px;
	border-bottom: 1px dotted #aea79f;
}