Admin Panel starter for wp310 blog demo

admin-style.css

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Coustard|Droid+Sans:400,700);
/* =RESET */
body,html {
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 100%;
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,li,form {
	margin: 0;
	padding: 0;
}
input {
	vertical-align: bottom;
}
*, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}
/* ======================================== basic layout */
header {
	height: 121px;
	background-color: #EEE;
	background: #333333;
	background: -moz-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(18%, #333333), color-stop(21%, #303030), color-stop(23%, #272727), color-stop(24%, #656565), color-stop(25%, #4c4c4c), color-stop(60%, #4c4c4c), color-stop(63%, #484848), color-stop(65%, #3d3d3d), color-stop(66%, #ebebeb), color-stop(68%, #efefef), color-stop(72%, #eeeeee), color-stop(90%, #e0e0e0), color-stop(94%, #dfdfdf), color-stop(95%, #dcdcdc), color-stop(97%, #e6e6e6), color-stop(98%, #c1c1c1), color-stop(98%, #cccccc), color-stop(99%, #e5e5e5), color-stop(100%, #f7f7f7));
	background: -webkit-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%);
	background: -o-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%);
	background: -ms-linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#f7f7f7', GradientType=0 );
	background: linear-gradient(top, #333333 0%, #333333 18%, #303030 21%, #272727 23%, #656565 24%, #4c4c4c 25%, #4c4c4c 60%, #484848 63%, #3d3d3d 65%, #ebebeb 66%, #efefef 68%, #eeeeee 72%, #e0e0e0 90%, #dfdfdf 94%, #dcdcdc 95%, #e6e6e6 97%, #c1c1c1 98%, #cccccc 98%, #e5e5e5 99%, #f7f7f7 100%);
}
header h1,
main,
footer {
	padding: 10px;
}
footer {
	background-color: #EEE;
	padding: 10px;
	clear: both;
}
header h1 {
	position: absolute;
	top: 24px;
	left: 10px;
	color: white;
	font-family: "Coustard", "Arial Black", Gadget, sans-serif;
	font-size: 26px;
	font-weight: normal;
}
nav ul {
	padding-top: 80px;
}
nav ul a {
	display: block;
	padding: 10px;
	text-decoration: none;
	border-left: 1px solid #F7F7F7;
	border-right: 1px solid #D0D0D0;
	color: #454545;
	font-weight: bold;
}
nav ul a:hover,
nav ul a:focus {
	background-color: #FFF;
}
/*
 == "active" states
*/
.dashboard .dashboard a,
.write .write a,
.manage .manage a,
.comments .comments a,
.profile .profile a{
	background-color:white;
	height:41px;	
}

nav ul li,
.utilities li {
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}
.utilities li {
	margin: 0 5px 0 0;
	color:white;
}
ul.utilities {
	position: absolute;
	top: 0px;
	right: 5px;
}
.utilities a {
	display: block;
	padding: 7px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	border: solid 1px rgba(256,256,256,.2);
	border-top-color: rgba(0,0,0,.4);
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,.3);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,.3);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,.3);
	background-color: #399;
}
.utilities a:hover,
.utilities a:focus {
	padding: 10px 7px;
}
.logout a {
	background-color: #C66;
}
.utilities a {
	text-decoration: none;
	color: white;
}
main h2,
main h4 {
	margin: 16px 0 8px 6px;
	color: #333;
}
main h3 {
	background: #e7e7e7;
	background: -moz-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e7e7e7), color-stop(35%, #e7e7e7), color-stop(57%, #dddddd), color-stop(100%, #dddddd));
	background: -webkit-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%);
	background: -o-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%);
	background: -ms-linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#dddddd', GradientType=0 );
	background: linear-gradient(top, #e7e7e7 0%, #e7e7e7 35%, #dddddd 57%, #dddddd 100%);
	padding: 5px 10px;
	color: #333;
	text-shadow: 0px 1px 0px #fff;
	filter: dropshadow(color=#ffffff, offx=0, offy=1);
	font-size: 17px;
	margin-bottom: 10px;
}
/*
	== Grid Panels
*/
.panel {
	border: 1px solid #DDDDDD;
	margin-bottom: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 6px;
	min-width: 200px;
}
.noborder {
	border: none;
	padding: 0;
}
.onequarter {
	width: 24%;
	float: left;
	margin-right: 1%;
}
.onehalf {
	width: 49%;
	float: left;
	margin-right: 1%;
}
.threequarters {
	width: 74%;
	float: left;
	margin-right: 1%;
}
.onethird {
	width: 32%;
	float: left;
	margin-right: 1%;
}
.twothirds {
	width: 65%;
	float: left;
	margin-right: 1%;
}
/* 
== general typography
*/
main ul li {
	list-style-type: none;
	margin-bottom: 10px;
}
main a {
	background-color: #EEE;
	padding: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: solid 1px #DDD;
	display: inline-block;
	text-decoration: none;
	color: #036;
}
main a:hover,
main a:focus {
	background-color: #CCC;
	border-color: #BBB;
	color: white;
}
main ul {
	list-style: none;
	padding-left: 1em;
}
main li:before {
	content: "\00BB \0020";
}
h4 em {
	font-weight: normal !important;
	font-style: normal;
	color: #696;
}
.postmetadata {
	color: #999;
	margin-bottom: 15px !important;
	display: block;
}
.draft {
	color: #C66;
	background-color: #FFC;
	padding: 2px;
	display: inline-block;
}
.published {
	color: #366;
	background-color: #CFF;
}
a.edit {
	background-image: url(images/edit.png);
	background-repeat: no-repeat;
	padding-left: 20px !important;
	background-position: 3px 5px;
}
label {
	display: block;
}
.userpic {
	padding: 6px;
	border: solid 1px #CCC;
	background-color: #EEE;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .3);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .3);
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .3);
}
.panel p{
	margin:.6em 0;
}
.body{
	color:#666;	
}
/*
== Tables
*/
table {
	width: 100%;
	border-collapse: collapse;
}
table td {
	border-bottom: solid 1px #EEE;
	padding: .5em;
}
table th {
	background-color: #EEE;
	text-align: left;
	padding: .5em;
}
table tr:hover {
	background-color: #EEE;
}
main table a {
	background: transparent;
	border: none;
	display: block;
}
/* =================================== FORMS */

fieldset {
	border: none;
	margin: 10px 0;
	padding: 0;
	display: block;
}
textarea {
	min-height: 20em;
	resize: none;
}
input[type=text],
input[type=password],
input[type=submit],
select,
textarea {
	display: block;
	margin-bottom: 10px;
}
input[type=text],
textarea,
input[type=password] {
	width: 95%;
	padding: 5px;
	font-size: 1.1em;
}
input[type=checkbox] + label {
	display: inline;
}
.button,
input[type=submit] {
	background-color: #66CCCC;
	border: medium none;
	border-radius: 10px 10px 10px 10px;
	color: #FFFFFF !important;
	cursor: pointer;
	font-size: 120%;
	margin-top: 20px !important;
	padding: 5px;
}
.warn{
	background-color:#C66 !important;	
}
.warn:hover{
	background-color:#C03 !important;	
}
.message {
	background-color: #FFC;
	border: solid 1px #FFCC66;
	padding: .5em;
	-webkit-border-radius: 1em;
	border-radius: 1em;
	color: #930;
}
.success {
	background-color: #D5FED3;
	color: #060;
	border: solid 1px #99CC66;
}

admin.php

<!doctype html>
<html>
<head>
	<title>Admin Panel</title>
	<link rel="stylesheet" type="text/css" href="../css/admin-style.css">
</head>
<body>
	<header>
		<h1>Blog Admin Panel</h1>
		<nav>
			<ul>
				<li><a href="#">Dashboard</a></li>
				<li><a href="#">Write Post</a></li>
				<li><a href="#">Manage Posts</a></li>
				<li><a href="#">Manage Comments</a></li>
				<li><a href="#">Edit Profile</a></li>
			</ul>
		</nav>
		<ul class="utilities">
			<li><a href="#" class="warn">Log Out!</a></li>
		</ul>
	</header>

	<main>
		put content here!
	</main>

	<footer>
		&copy; 2014 Your Name Here!
	</footer>
</body>
</html>