/* @override 
	http://matteblack.lab/css/matteblack.css
	http://alext.dev.matteblack.alex-and-alex.com/css/matteblack.css
*/

/* @group Grid */

body		{ margin: 0; text-align: left;}
.container	{ text-align: left; margin: 1em 20px; }
.showgrid	{ background: url(/img/grid.png); }

/* @end */

/* @group Typography */

/* Default font settings. 
   The font-size percentage is of 16px. (0.625 * 16px = 10px) */
body { 
	color: #fff;
	background: #000;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	font-size: 12px;
	line-height: 20px;
}

p { margin: 0 0 20px 0; }

a, a:link, a:visited { color: #31bde6; text-decoration: none; }
a:hover { text-decoration: underline; }
a:active {  color: #e62fc6; }

h2, h3, h4 {
	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #b3b3b3;
	margin: 0 0 20px 0;
}

h2 a, h2 a:link, h2 a:visited, h2 a:hover, h2 a:active,
h3 a, h3 a:link, h3 a:visited, h3 a:hover, h3 a:active,
h4 a, h4 a:link, h4 a:visited, h4 a:hover, h4 a:active {
	color: #b3b3b3; text-decoration: none;
}

h2 {
	font-size: 20px;
	line-height: 26px;
	border-bottom: 2px solid;
	margin: 20px 0 12px 0;
}

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

h4 {
	font-size: 14px;
	line-height: 20px;
}

h3.home, h3.work, h3.about, h3.contact, h3.login, div.work-detail h3 {
	border-bottom: 2px solid;
	margin: 0 0 18px 0;
}

h2.home, h3.home { border-color: #ffaa2d; }
h2.work, h3.work, div.work-detail h3 { border-color: #ff662a; }
h2.about, h3.about, h2.projects, h3.projects { border-color: #e62fc6; }
h2.contact, h3.contact, h2.users, h3.users { border-color: #31dbe6; }
h2.login, h3.login, h2.logout, h3.logout, h2.admin, h3.admin { border-color: #31a0ff; }


/* @end */

/* @group Header */

#header {
	height: 100px;
}

#header h1 {
	float: left;
	height: 80px;
	width: 620px;

	margin: 0 100px 0 0;
	padding: 0;

	text-indent: -5000px;
	font-size: 1px;
	color: #000;

	background-image: url(/img/logo.png);
	background-repeat: no-repeat;
}

#header h1 a {
	display: block;
	height: 100%;
	width: 100%;
}

#header ul.contact {
	list-style: none;
	width: 220px;
	margin: 0;
	float: left;
	font-size: 10px;
	color: #b3b3b3;
}

/* @end */

/* @group Nav */

ul#main-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#main-nav li {
	float: left;
	width: 160px;
	height: 40px;
	
	text-indent: -5000px;
	font-size: 1px;
	color: #000;
}

ul#main-nav li a {
	background-repeat: no-repeat;
	display: block;
	height: 100%;
	width: 100%;
}

ul#main-nav li a:hover, ul#main-nav li.here a { background-position: 0 -40px; }

ul#main-nav li.home	a { background-color: #ffaa2d; background-image: url(/img/nav-home.png); }
ul#main-nav li.work	a { background-color: #ff662a; background-image: url(/img/nav-work.png); }
ul#main-nav li.about a { background-color: #e62fc6; background-image: url(/img/nav-about.png); }
ul#main-nav li.contact a { background-color: #31bde6; background-image: url(/img/nav-contact.png); }
ul#main-nav li.login a { background-color: #31a0ff; background-image: url(/img/nav-login.png); }
ul#main-nav li.admin a { background-color: #31a0ff; background-image: url(/img/nav-admin.png); }
ul#main-nav li.logout a { background-color: #31a0ff; background-image: url(/img/nav-logout.png); }
ul#main-nav li.settings a { background-color: #31a0ff; background-image: url(/img/nav-setting.png); }
ul#main-nav li.projects a { background-color: #e62fc6; background-image: url(/img/nav-projects.png); }
ul#main-nav li.users a { background-color: #31bde6; background-image: url(/img/nav-users.png); }
/* @end */

/* @group Footer */

#footer {
	border-top: 1px solid #b3b3b3;
	margin: 20px 0 0 0;
	font-size: 10px;
	color: #b3b3b3;
}

#footer p {	margin: 0; }
#footer a { color: #b3b3b3; }
#footer a:hover { text-decoration: none; }

#footer ul.nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer ul.nav li {
	float: left;
	width: 60px;
	margin: 0 20px 0 0;
	border-bottom: 1px solid;
}

#footer ul.nav li a {
	display: block;
	color: #b3b3b3;
	text-decoration: none;
}

#footer ul.nav li.home { border-color: #ffaa2d; }
#footer ul.nav li.work { border-color: #ff662a; }
#footer ul.nav li.about { border-color: #e62fc6; }
#footer ul.nav li.contact { border-color: #31bde6; }
#footer ul.nav li.login { border-color: #31a0ff; }

#footer ul.links {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer ul.links li {
	float: left;
	width: 140px;
	margin: 0 20px 0 0;
}

#footer ul.links li.last { margin: 0; }

/* @end */

div.recent-work {
	border-bottom: 1px solid #ff662a;
	margin: 0 0 19px 0;
}

/* @group Pagination */

ul.pagination { padding: 0; margin: 0 0 10px 0; }

ul.pagination li {
	float: left;
	list-style: none;
	display: block;
	
	font-size: 11px;
	line-height: 18px;
	margin-right: 5px;
	border: 1px solid #b3b3b3;
}

ul.pagination li span { padding: 0 10px; display: block; height: 100%; }
ul.pagination li span.off { color: #000; }
ul.pagination li span.current { color: #fff; background: #000; }
ul.pagination li.hide { display: block; border-color: #000; }

ul.pagination li a {
	display: block;
	background: #000;
	color: #fff;
	padding: 0 10px;
}

ul.pagination li a.off { color: #666; background: #000; }
ul.pagination li a.here { color: #fff; background: #242424; }

ul.pagination li a:hover { text-decoration: none; background: #242424; }
ul.pagination li.last { margin-right: none; }

/* @end */

/* @group Thumbnails List */

ul.thumbnails {
	list-style: none;
	padding: 0; margin: 0
}

ul.thumbnails li {
	margin: 0 0 20px 0;
}

/* @end */

/* @group Details List */

ul.details-list {
	list-style: none;
	margin: 0 0 20px 0;
}

ul.details-list li {
	
}

ul.details-list li a { color: #fff; }
ul.details-list li a:hover { text-decoration: none; }

/* @end */

/* @group User List */

ul.user-list { margin: 0 0 20px 0; list-style: none; }
ul.user-list li {
	background: #121212;
	line-height: 39px;
	border-bottom: 1px solid #000;
}

ul.user-list li a { padding: 0 0 0 5px; display: block; color: #fff; }
ul.user-list li a:hover { background: #242424; text-decoration: none; }

ul.user-list li table th { width: 150px; }

input.approve { float: left; margin: 0 10px; }
span.email { color: #999; }

/* @end */



/* @group Gallery */

ul.gallery { padding: 0; margin: 0; }
ul.gallery li { list-style: none; display: block; float: left; margin: 0 20px 20px 0; }
ul.gallery li.last { margin-right: 0px; }

/* @end */

/* @group Image Admin */

ul.image-admin { padding: 0; margin: 0; }
ul.image-admin li { 
	list-style: none;
	display: block;
	float: none;
	margin: 0; padding: 0;
	
	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #000;

	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

ul.image-admin li a {
	color: #000;
}

ul.image-admin.public { background: #ADE8FD; background-image: url(/img/public.png); }
ul.image-admin.private { background: #ffb4b4 url(/img/private.png); }

ul.image-admin li.last { margin-right: 0px; }

/* @end */

/* @group Status */

div.publish-state { padding: 7px 0 7px; text-align: center; }
div.publish-state p { font-size: 20px; line-height: 28px; color: #000; font-weight: 700; margin: 0; }
div.publish-state a { color: #000; }

div.public { background: #ADE8FD; background-image: url(/img/public.png); }

div.private { background: #FCB2B2; background-image: url(/img/private.png); }

select.publish-state { display: inline; padding: 0; margin: 0 0 0 5px; }

/* @end */



/* @group Tabs */

ul.tabs {
	padding: 0;
	margin: 0 0 20px 0;
	overflow: hidden;
}

ul.tabs.strap {	margin-right: 10px; }

ul.tabs li {
	float: left;
	list-style: none;
	display: block;
	
	width: 159px;
	height: 36px;
	border-right: 1px solid #333;
	
	background:  #000;

	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	font-weight: 700;
	color: #333;

	font-size: 14px;
	line-height: 20px;
}

ul.tabs li.last { width: 150px; border-right: none; }

ul.tabs li a, ul.tabs li.ui-tabs-unselect a {
	color: #fff;
	display: block;
	
	border-top: 2px solid;
	padding: 8px 0 10px 10px;	
	width: 150px;
}

ul.tabs a:hover { text-decoration: none; border-top: 4px solid; padding-top: 6px; }
ul.tabs a:active { background: #b3b3b3; }
ul.tabs li.here a, ul.tabs li.ui-tabs-selected a { text-decoration: none; border-top: 4px solid; padding-top: 6px; }

ul.tabs.home a, ul.tabs.home li.here a { border-color: #ffaa2d; }
ul.tabs.work a, ul.tabs.work li.here a { border-color: #ff662a; }
ul.tabs.about a, ul.tabs.about li.here a, ul.tabs.projects a, ul.tabs.projects li.here a { border-color: #e62fc6; }
ul.tabs.contact a, ul.tabs.contact li.here a, ul.tabs.users a, ul.tabs.users li.here a { border-color: #31bde6; }
ul.tabs.login a, ul.tabs.login li.here a, ul.tabs.logout a, ul.tabs.logout li.here a, ul.tabs.admin a, ul.tabs.admin li.here a { border-color: #31a0ff; }


/* @end */

/* @group Forms */

.row { margin-bottom: 20px; }
label.heading { display: block; }
label, legend {
	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 20px;
	color: #b3b3b3;
	margin: 0; padding: 0;
}

fieldset { border: 1px solid #B4AC9F; margin: 0 10px 0 0; }

input {
	background: #fff;
	color: #000;
	border: none;
	
	line-height: 20px;
	margin: 0; padding: 0 2px;
	height: 20px;
}

/* input widths to allow for padding */
input.span-1 {width:56px;}
input.span-2 {width:136px;}
input.span-3 {width:216px;}
input.span-4 {width:296px;}
input.span-5 {width:376px;}
input.span-6 {width:456px;}
input.span-7 {width:536px;}
input.span-8 {width:616px;}
input.span-9 {width:696px;}
input.span-10 {width:776px;}
input.span-11 {width:856px;}

input.required { background-color: #cbf6ff; }
input.upload { line-height: 28px; background: #fff; color: #000; }

a.button, input.button {
	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 20px;
	color: #000;
	background-image: url(/img/corner-br.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

a.button.home, input.button.home { background-color: #ffaa2d; }
a.button.work, input.button.work { background-color: #ff662a; }
a.button.about, input.button.about, a.button.projects, input.button.projects { background-color: #e62fc6; }
a.button.contact, input.button.contact, a.button.users, input.button.users { background-color: #31bde6; }
a.button.login, input.button.login, a.button.logout, input.button.logout, a.button.admin, input.button.admin { background-color: #31a0ff; }

a.button:hover, input.button:hover {
	color: #fff;
	cursor: pointer;
}

a.button { display: block; color: #000; text-align: center; line-height: 20px; }
a.button:hover { text-decoration: none; }

input.button.delete { background: #650000; float: right; }
input.button.delete:hover { background: #F00; }

textarea { padding: 0; margin: 0; border: none; }
textarea.small-input { height: 140px; }
textarea.large-input { height: 280px; }
textarea.span-6 { width: 456px; }
textarea.span-7 { width: 536px; }

/* @end */

img { display: block; }

.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 {float:left;margin-right:20px;}
.last {	margin-right: 0; }