style.css

/**
 Theme name: formattd
 Theme URI: http://dev.gunters.org/
 Description: 
 Author: Dougal Campbell
 Author URI: http://dougal.gunters.org/
 Version: 0.1
 License: GNU General Public License
 License URI: license.txt
 Tags: fluid-width, post-formats, threaded-comments, sticky-post, translation-ready, microformats
 **/
/* ==== Scroll down to find where to put your styles :) ==== */

/*  HTML5 ✰ Boilerplate  */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
li { margin-bottom: 0.25em; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, b, th { font-weight: bold; }
em, i { font-style: oblique; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 1em; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px .3em red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #FF5E99; }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {  color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

/** Basics **/
body{
	font-family:Helvetica, Helvetica Neue, Arial, sans-serif;
	background-color: #fffff0;
	color: #222;
}

p,ul,ol,blockquote {
	margin-bottom: 1em;
}

/** Positioning **/
/* see: http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm */

#header-container {
	float: left;
	clear: both;
	width: 100%;
	position: relative;}

#main, #content-wrap {
	width: 100%;
	float: left;
	position: relative;
}

#main {
	clear: both;
}

#content-wrap {
	right: 25%;
}

#content {
	float: left;
	position: relative;
	padding: 0 0 1em 0;
	overflow: hidden;
	width: 66%;
	left: 24%;
}

#primary {
	width: 33%;
	left: 24%;
	float: left;
	position: relative;
	overflow: hidden;
	padding: 0 0 1em 0;
	max-width: 300px;
	min-width: 150px;
}

div.spacer {
	margin-left: 7em;
	margin-right: 3em;
	position: relative;
}

/** Colors, spacing, etc. **/

#header-container {
	background-color:#f16529;
	color: white;
	height:130px;
	margin-bottom:30px;
	-webkit-box-shadow:0 40px 40px -40px #AAA;
	   -moz-box-shadow:0 40px 40px -40px #AAA;
	        box-shadow:0 40px 40px -40px #AAA;
}

#nav-above,#nav-below {
	width: 100%;
	float: left;
	margin: 1em 0;
	font-size: 1.25em;
	font-variant: small-caps;
}

.nav-previous, .nav-next {
	width: 45%;
}

.nav-previous {
	float: left;
	text-align: left;
	margin-left: 1em;
}

.nav-next {
	float: right;
	text-align: right;
	margin-right: 1em;
}


h2, h3{
	margin: 0;
}

#title, h2, h3{
	font-weight:bold;	
}

#branding {
	position: absolute;
	float: left;
	height: 100%;
	padding: 4px;
}

#title{
	
}

#title a {
	color: #fcfcfc;
	text-decoration: none;
}

#title a:hover {
	color: #fff;
}

#site-description {
}

h1{
	font-size: 3.0em;
}

h2{
	font-size: 2.5em;
}

h3{
	font-size: 2.0em;
}

h4{
	font-size: 1.75em;
}
 
h5{
	font-size: 1.5em;
}

h6{
	font-size: 1.3em;
}


/* Main nav */

#header-container nav {
	position: absolute;
	bottom: 1.25em;
}

#header-container nav ul, #header-container nav ul li {
	display:inline;
}

#header-container nav ul li {
	margin-left: 5px;
}

#header-container nav a {
	padding:1.25em .25em;
	color: #eee;
	text-decoration:none;
	background-color:#e44d26;
}

#header-container nav a:hover {
	color: #fff;
	background-color: #e8512a;
}

/* 
	LEVEL ONE
*/
#header-container nav ul { 
	position: relative; 
	z-index: 99;
}

#header-container nav ul li { 
	/* font-weight: bold; */
	float: left; 
	zoom: 1; 
	/* background: #ccc; */
} 

#header-container nav ul li:last-child a { 
	/* border-right: none; */
} /* Doesn't work in IE */
#header-container nav ul li.hover,
#header-container nav ul li:hover { 
	/* background: #F3D673; */
	/*  color: black; */
	position: relative; 
}

#header-container nav ul li.hover a { 
	/* color: black; */
}

/* 
	LEVEL TWO
*/
#header-container nav ul ul { 
	width: 220px; 
	visibility: hidden; 
	position: absolute; 
	top: 2.2em; left: -0.4em; 
}

#header-container nav ul ul li { 
	font-weight: normal; 
	background: #f6f6f6; 
	color: #000; 
	border-bottom: 1px solid #ccc; 
	float: none; 
}
									  
                                    /* IE 6 & 7 Needs Inline Block */
#header-container nav ul ul li a { 
	border-right: none; 
	width: 100%; 
	display: inline-block; 
} 

/* 
	LEVEL THREE
*/
#header-container nav ul ul ul { 
	left: 100%; 
	top: -20px; 
}

#header-container nav ul ul ul li {
	margin-left: 0;
}

#header-container nav ul li:hover > ul { 
	visibility: visible; 
}


.skip-link { display: none; }


/* Primary sidebar */

aside#primary {
	color:white;
	background-color:#f16529;
	margin-bottom:2em;
	-webkit-border-radius: 10px;
           -moz-border-radius: 10px;
                border-radius: 10px;
	-webkit-box-shadow:0 0px 8px 0px #AAA;
	   -moz-box-shadow:0 0px 8px 0px #AAA;
	        box-shadow:0 0px 8px 0px #AAA;	
}
#primary h3 {
	font-size: 1.5em;
}

aside.widget-area ul {
	margin: .3em .9em;
}

.widget-area li {
	list-style: none;
	list-style-image: none;
}

aside li.widget-container {
	margin-bottom: 0.75em;
}

.widget-container ul li {
	margin-bottom: 0.5em;
}

#primary.widget-area a, #footer-container a {
	color: #f8b75e;
	text-decoration: none;
}

#primary.widget-area a:link, #footer-container a:link {

}

#primary.widget-area a:visited, #footer-container a:visited {
	color: #f8c887;
}

#primary.widget-area a:hover, #footer-container a:hover {
	color: #ff8;
}

#primary.widget-area a:active, #footer-container a:active {

}


/** Content **/

#main p {
	font-family: Helvetica, Helvetica Neue, Arial;
	font-size: 16px;
	line-height: 1.625;
	text-shadow:none;
}

#main header h2{
	padding-bottom:.9em;
}

article {
	position: relative;
	margin-bottom: 4em;
	clear: both;
	text-overflow: ellipsis;
}

article header{
	clear: left;
	margin-bottom:0;
	padding-bottom:0;
}

article li { font-size: 1.1em; }

article.format-aside {
            width:70%;    
            padding:1em; 
            margin:2em auto 4em; 
            background:#eee;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            -moz-border-radius:4px; 
                 border-radius:4px;
}

article.format-aside::before, article.format-aside::after {
	content:"";
	position:absolute;
	z-index:-2;
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);    
               -moz-transform:rotate(-3deg);   
                -ms-transform:rotate(-3deg);   
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
}

article.format-aside::after {
            right:10px; 
            left:auto;
            -webkit-transform:rotate(3deg);   
               -moz-transform:rotate(3deg);  
                -ms-transform:rotate(3deg);  
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
}


#content article.format-aside p {
	font-size: 1.3em;
	font-style: oblique
}

article.format-status header h2 {
	font-size: 1.5em;
}

article.format-status div.author-avatar img {
	position: absolute;
	left: -60px;
	border: 1px solid #eee;
	-webkit-box-shadow: 4px 4px 16px 2px rgba(0,0,0, 0.4);
	   -moz-box-shadow: 4px 4px 16px 2px rgba(0,0,0, 0.4);
	        box-shadow: 4px 4px 16px 2px rgba(0,0,0, 0.4);
}

#main article.format-status div.entry-content p {
	font-size: 1.6em;
}

article.format-quote,article blockquote {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #eee;
	-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	   -moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	        box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	-webkit-border-radius: 10px;
           -moz-border-radius: 10px;
                border-radius: 10px;
	padding: .9em;
}

article footer {
	margin-top: 1em;
}

article.format-link::before {
	content: url(images/link.png);
	width: 32px;
	height: 32px;
	position: absolute;
	left: -60px;
}

article.format-link header h2 {
	font-size: 1.5em;
}

article.format-quote header h2 {
	font-style: oblique;
	font-size: 1.5em;
}

blockquote, article.format-quote .entry-content {
	font-style: oblique;
	font-size: 1.1em;
	margin: 0.5em 3em;
	position: relative;
}

blockquote::before, article.format-quote .entry-content::before {
	content: "\201c" "\201d";
	font-size: 16em;
	color: #eef;
	position: absolute;
	left: -0.25em;
	top: -0.3em;
	z-index: -1
}

blockquote p {
	margin-bottom: 0.5em;
}

article.format-image, 
article.format-video, 
article.format-gallery,
article.format-standard div.gallery {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	background-color: #333;
	color: #eee;
	padding: 2em;
	text-align: center;
	border: 1px solid #222;
	-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	   -moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	        box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	-webkit-border-radius: 10px;
           -moz-border-radius: 10px;
                border-radius: 10px;
}

#content article img {
	max-width: 100%; 
}

dl.gallery-item {
	text-align: center;
	float: left;
	margin-bottom: 3em;
}

div.gallery-columns-2 dl {
	width: 49%;
}

div.gallery-columns-3 dl {
	width: 33%;
}

div.gallery-columns-4 dl {
	width: 24%;
}

div.gallery-columns-5 dl {
	width: 19%;
}

div.gallery-columns-6 dl {
	width: 16.5%;
}

article.format-video::before {
	content: url(images/film.png);
	width: 32px;
	height: 32px;
	position: absolute;
	left: -60px;
}

article.format-image header a, article.format-video header a {
	text-decoration: none;
	margin: 0 auto;
}

article.format-image a:hover, article.format-video a:hover {
	color: #fff;
}

#main article.format-chat div.entry-content p {
	font-size: 1.4em;
}

article.format-chat::before {
	content: url(images/comments.png);
	width: 32px;
	height: 32px;
	position: absolute;
	left: -60px;
}

article.format-chat span.person {
	font-weight: bold;
}

article.format-audio::before {
	content: url(images/music.png);
	width: 32px;
	height: 32px;
	position: absolute;
	left: -60px;
}


.entry-summary {
	font-style: oblique;
}

/** Comments **/
div.comments {
	margin-top: 2em;
}

.commentlist {
	margin-top: 1em;
	margin-left: 0;
}

.commentlist ul, .commentlist ul li {
	position: relative;
}

li.comment {
	list-style: none;
	padding: 1em;
	margin-top: 1em;
}

li.comment ul {
	margin-left: 60px;
}

li.comment .reply {
	padding-bottom: 2em;
}

.comment-author img.avatar {
	position: absolute;
	left: -40px;
}

li.bypostauthor {
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: 4px 4px 8px 5px #ddd;
	-moz-box-shadow: 4px 4px 8px 5px #ddd;
	-webkit-box-shadow: 4px 4px 8px 5px #ddd;
}

li.bypostauthor>div {
	padding: .9em;	
}

li.bypostauthor comment-author img.avatar {
	left: 50px;
}

/* */
#footer-container {
	float: left;
	clear: both;
	width: 100%;
	background-color:#f16529;
	height:240px;
	border-top:1.25em solid #e44d26;
	margin-top:3em;
}
/* */

#footer-container footer{
	color:white;
}

.post-date {
	display: block;
	position: absolute;
	left: -60px;
	top: 0px;
	font-size: 1.5em;
	border-radius: 0.5em;
	text-align: center;
	border: 1px solid #f16529;
	width: 2em;
	overflow: hidden;
	background-color: #f16529;
	color: #fff;
	-webkit-box-shadow: 8px 8px 6px -6px #AAA;
	   -moz-box-shadow: 8px 8px 6px -6px #AAA;
	        box-shadow: 8px 8px 6px -6px #AAA;
}

div.featured-image {
	display: inline;
	float: right;
	margin: 0 0 0.5em 1em;
}

div.featured-image img{
	background-color: white;
	border: 1px solid #eee;
	-webkit-box-shadow: 4px 4px 8px 4px #AAA;
	   -moz-box-shadow: 4px 4px 8px 4px #AAA;
	        box-shadow: 4px 4px 8px 4px #AAA;
	-webkit-border-radius: 6px;
           -moz-border-radius: 6px;
                border-radius: 6px;
}

.post-date .month {
	display: block;
	font-size: .5em;
	line-height: 1;
	padding: 0.4em 0;
}

.post-date .day {
	display: block;
	font-size: 1em;
	line-height: 1;
	padding: 0.2em 0;
	background-color: #fff;
	color: #f16529
}

.post-date .year {
	display: block;
	font-size: .5em;
	line-height: 1;
	padding: 0.4em 0;
}

div.page-link {
	font-size: 1.25em;
}

div.page-link a {
	margin-left: 0.25em;
}

#entry-author-info {
	padding:1.5em;
	margin: 2em 4em;
	background-color: #333;
	color: #eee;
	border: 1px solid #ccc;
	-webkit-border-radius: 6px;
           -moz-border-radius: 6px;
                border-radius: 6px;
	-webkit-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	   -moz-box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
	        box-shadow: 8px 8px 16px 4px rgba(0,0,0, 0.4);
}

#author-avatar {
	float: right;
	width: 60px;
	margin: 0 0 0.3em 0.3em;
}

#author-avatar img {
	border: 1px solid #eee;
	-webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                border-radius: 4px;
	-webkit-box-shadow: 4px 4px 16px 2px rgba(0,0,0, 0.4);
	   -moz-box-shadow: 4px 4px 16px 2px rgba(0,0,0, 0.4);
	        box-shadow: 4px 4px 16px 2px rgba(0,0,0, 0.4);
}

#author-description {
	margin: 0.5em 0;
	line-height: 1.6;
}

#author-link {
	clear: both;
	margin: 0.5em 0;
	font-size: 1.25em;
}

.comment-form-comment label {
	display: block;
}

#above-header {
	position: relative;
	width: 250px;
	margin: 0;
	padding: 0;
	float: right;
	z-index: 1001;
}

#above-header ul.xoxo {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

article.format-image .sharing a:hover,
article.format-video .sharing a:hover {
	color: black;
}


.alignright { float: right; };
.alignleft { float: left; };
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-width: 480px) {

  /* * / html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } /* */
  #header-container { height: 100px !important; }
  #content-wrap { right: 0 !important; }
  #content { width: 100%; left: 0 !important; }
  #content { clear: both !important; }
  .spacer { margin-left: 40px !important; margin-right: 10px !important;}
  aside#primary { 
      float: none !important; 
      width: 95% !important; 
      clear: both !important; 
      margin: 0.5em auto !important;
      left: 0 !important; 
  }
  #footer li.widget-container {
	float: left !important;
	width: 24% !important;
  }
  img { max-width: 225px !important !important; }
  object { max-width: 225px !important; }
  #above-header { display: none !important; }
  #title h1 { font-size: 2.0em !important; }
  #site-description { font-size: 0.75em !important; }
  #header-container nav { bottom: 4px !important; }
  #header-container nav a { padding: 4px 4px !important; height: 85px !important; }
  #index-top { display: none !important; }
  article h2 { font-size: 1.5em !important; }
  div.post-date { 
      left: -36px !important; 
      font-size: 1.25em !important; 
  }
  div.post-date .year { font-size: 0.7em !important; }
  div.post-date .month { font-size: 0.7em !important; }

  article.format-gallery,
  article.format-image,
  article.format-video
  { 
      padding: 0.5em !important;
      max-width: 90% !important; 
  }

  article.format-link::before { left: -36px !important; }
  article.format-status::before { left: -36px !important; }
  article.format-audio::before { left: -36px !important; }
  article.format-video::before { left: -36px !important; }
  article.format-chat::before { left: -36px !important; }
  div.author-avatar img { left: -36px !important; }

/* Hide a bunch of admin bar stuff */
#wp-admin-bar-wpseo-menu,
#wp-admin-bar-stats,
#wp-admin-bar-w3tc,
#wp-admin-bar-site-name,
#wp-admin-bar-my-account {
	display: none;
}



} /* /@media */


@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
  .skip-link { display: none; }
}