Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header role="banner" id="header" style="background-image:url(http://localhost/melissa-wp-0816/in-class/wp-content/uploads/2012/07/cropped-manhattansummer.jpg)">
  <div class="header-bar">
    <a href="http://localhost/melissa-wp-0816/in-class/" class="custom-logo-link" rel="home" itemprop="url"><img width="200" height="80" src="http://localhost/melissa-wp-0816/in-class/wp-content/uploads/2016/08/cropped-logo.png" class="custom-logo" alt="cropped-logo.png" itemprop="logo" /></a>
   
    <h2>Change this to something appropriate for your site</h2>

    <nav>
      <ul class="nav">
        <li class="page_item page-item-703"><a href="http://localhost/melissa-wp-0816/in-class/blog/">Blog</a></li>
        <li class="page_item page-item-701"><a href="http://localhost/melissa-wp-0816/in-class/">Front Page</a></li>
        <li class="page_item page-item-2"><a href="http://localhost/melissa-wp-0816/in-class/sample-page/">Sample Page</a></li>
        <li class="page_item page-item-13 page_item_has_children current_page_item"><a href="http://localhost/melissa-wp-0816/in-class/about/">About The Tests</a></li>
        <li class="page_item page-item-146"><a href="http://localhost/melissa-wp-0816/in-class/lorem-ipsum/">Lorem Ipsum</a></li>
        <li class="page_item page-item-733"><a href="http://localhost/melissa-wp-0816/in-class/page-a/">Page A</a></li>
      </ul>
    </nav>

    <form role="search" method="get" class="search-form" action="http://localhost/melissa-wp-0816/in-class/">
      <label>
					<span class="screen-reader-text">Search for:</span>
					<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
				</label>
      <input type="submit" class="search-submit" value="Search" />
    </form>
  </div>
</header>

  <div class="wrapper">
    <main id="content">
      <article id="post-13" class="post-13 page type-page status-publish hentry">
        <h2 class="entry-title"> 
				<a href="http://localhost/melissa-wp-0816/in-class/about/"> 
					About The Tests				</a>
			</h2>
        <div class="entry-content">

          <p>This site is using the standard WordPress Theme Unit Test Data for content. The Theme Unit Test is a series of posts and pages that match up with a checklist on the WordPress codex. You can use the data and checklist together to test your theme.</p>
          <h2>WordPress Theme Development Resources</h2>
          <ol>
            <li>See <a href="http://codex.wordpress.org/Theme_Development">Theme Development</a> for <a href="http://codex.wordpress.org/Theme_Development#Code_Standards">code standards</a>, examples of best practices, and <a href="http://codex.wordpress.org/Theme_Development#Resources_and_References">resources for Theme development</a>.</li>
            <li>See <a href="http://codex.wordpress.org/Theme_Unit_Test">Theme Unit Test</a> for a robust test suite for your Theme and get the latest version of the test data you see here.</li>
            <li>See <a href="http://codex.wordpress.org/Theme_Review">Theme Review</a> for a guide to submitting your Theme to the <a href="http://wordpress.org/extend/themes/">Themes Directory</a>.</li>
          </ol>
        </div>

      </article>
      <!-- end post -->


    </main>
    <!-- end #content -->


    <aside id="sidebar">
      <section id="categories" class="widget">
        <h3 class="widget-title"> Categories </h3>
        <ul>
          <li class="cat-item cat-item-38"><a href="http://localhost/melissa-wp-0816/in-class/category/post-formats/" title="Posts in this category test post formats.">Post Formats</a> (16)
          </li>
          <li class="cat-item cat-item-1"><a href="http://localhost/melissa-wp-0816/in-class/category/uncategorized/">Uncategorized</a> (13)
          </li>
          <li class="cat-item cat-item-49"><a href="http://localhost/melissa-wp-0816/in-class/category/template-2/" title="Posts with template-related tests">Template</a> (10)
          </li>
          <li class="cat-item cat-item-19"><a href="http://localhost/melissa-wp-0816/in-class/category/edge-case-2/" title="Posts that have edge-case related tests">Edge Case</a> (6)
          </li>
          <li class="cat-item cat-item-29"><a href="http://localhost/melissa-wp-0816/in-class/category/markup/" title="Posts in this category test markup tags and styles.">Markup</a> (6)
          </li>
          <li class="cat-item cat-item-30"><a href="http://localhost/melissa-wp-0816/in-class/category/media-2/" title="Posts that have media-related tests">Media</a> (2)
          </li>
          <li class="cat-item cat-item-2"><a href="http://localhost/melissa-wp-0816/in-class/category/aciform/">aciform</a> (1)
          </li>
          <li class="cat-item cat-item-3"><a href="http://localhost/melissa-wp-0816/in-class/category/antiquarianism/">antiquarianism</a> (1)
          </li>
          <li class="cat-item cat-item-4"><a href="http://localhost/melissa-wp-0816/in-class/category/arrangement/">arrangement</a> (1)
          </li>
          <li class="cat-item cat-item-5"><a href="http://localhost/melissa-wp-0816/in-class/category/asmodeus/">asmodeus</a> (1)
          </li>
          <li class="cat-item cat-item-7"><a href="http://localhost/melissa-wp-0816/in-class/category/broder/">broder</a> (1)
          </li>
          <li class="cat-item cat-item-8"><a href="http://localhost/melissa-wp-0816/in-class/category/buying/">buying</a> (1)
          </li>
          <li class="cat-item cat-item-9"><a href="http://localhost/melissa-wp-0816/in-class/category/cat-a/">Cat A</a> (1)
          </li>
          <li class="cat-item cat-item-10"><a href="http://localhost/melissa-wp-0816/in-class/category/cat-b/">Cat B</a> (1)
          </li>
          <li class="cat-item cat-item-11"><a href="http://localhost/melissa-wp-0816/in-class/category/cat-c/">Cat C</a> (1)
          </li>
        </ul>
      </section>
      <section id="archives" class="widget">
        <h3 class="widget-title"> Archives </h3>
        <ul>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2016/'>2016</a>&nbsp;(2)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2013/'>2013</a>&nbsp;(5)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2012/'>2012</a>&nbsp;(11)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2011/'>2011</a>&nbsp;(1)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2010/'>2010</a>&nbsp;(15)</li>
          <li><a href='http://localhost/melissa-wp-0816/in-class/2009/'>2009</a>&nbsp;(6)</li>
        </ul>
      </section>
      <section id="tags" class="widget">
        <h3 class="widget-title"> Tags </h3>
        <ul>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/8bit/' class='tag-link-66 tag-link-position-1' title='1 topic' style='font-size: 1em;'>8BIT</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/alignment-2/' class='tag-link-67 tag-link-position-2' title='3 topics' style='font-size: 1em;'>alignment</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/articles/' class='tag-link-68 tag-link-position-3' title='1 topic' style='font-size: 1em;'>Articles</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/aside/' class='tag-link-69 tag-link-position-4' title='1 topic' style='font-size: 1em;'>aside</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/audio/' class='tag-link-70 tag-link-position-5' title='1 topic' style='font-size: 1em;'>audio</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/captions-2/' class='tag-link-71 tag-link-position-6' title='2 topics' style='font-size: 1em;'>captions</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/categories/' class='tag-link-72 tag-link-position-7' title='2 topics' style='font-size: 1em;'>categories</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/chat/' class='tag-link-73 tag-link-position-8' title='2 topics' style='font-size: 1em;'>chat</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/codex/' class='tag-link-77 tag-link-position-9' title='3 topics' style='font-size: 1em;'>Codex</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/comments-2/' class='tag-link-78 tag-link-position-10' title='4 topics' style='font-size: 1em;'>comments</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/content-2/' class='tag-link-79 tag-link-position-11' title='12 topics' style='font-size: 1em;'>content</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/css/' class='tag-link-81 tag-link-position-12' title='7 topics' style='font-size: 1em;'>css</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/dowork/' class='tag-link-85 tag-link-position-13' title='1 topic' style='font-size: 1em;'>dowork</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/edge-case/' class='tag-link-86 tag-link-position-14' title='8 topics' style='font-size: 1em;'>edge case</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/embeds-2/' class='tag-link-87 tag-link-position-15' title='4 topics' style='font-size: 1em;'>embeds</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/excerpt-2/' class='tag-link-91 tag-link-position-16' title='3 topics' style='font-size: 1em;'>excerpt</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/fail/' class='tag-link-92 tag-link-position-17' title='1 topic' style='font-size: 1em;'>Fail</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/featured-image/' class='tag-link-93 tag-link-position-18' title='3 topics' style='font-size: 1em;'>featured image</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/formatting-2/' class='tag-link-96 tag-link-position-19' title='1 topic' style='font-size: 1em;'>formatting</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/ftw/' class='tag-link-97 tag-link-position-20' title='1 topic' style='font-size: 1em;'>FTW</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/fun/' class='tag-link-98 tag-link-position-21' title='1 topic' style='font-size: 1em;'>Fun</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/gallery/' class='tag-link-99 tag-link-position-22' title='3 topics' style='font-size: 1em;'>gallery</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/html/' class='tag-link-105 tag-link-position-23' title='5 topics' style='font-size: 1em;'>html</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/image/' class='tag-link-106 tag-link-position-24' title='7 topics' style='font-size: 1em;'>image</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/jetpack-2/' class='tag-link-109 tag-link-position-25' title='3 topics' style='font-size: 1em;'>jetpack</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/layout/' class='tag-link-111 tag-link-position-26' title='4 topics' style='font-size: 1em;'>layout</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/link/' class='tag-link-112 tag-link-position-27' title='2 topics' style='font-size: 1em;'>link</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/lists-2/' class='tag-link-113 tag-link-position-28' title='1 topic' style='font-size: 1em;'>lists</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/love/' class='tag-link-115 tag-link-position-29' title='1 topic' style='font-size: 1em;'>Love</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/markup-2/' class='tag-link-116 tag-link-position-30' title='6 topics' style='font-size: 1em;'>markup</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/media/' class='tag-link-117 tag-link-position-31' title='1 topic' style='font-size: 1em;'>media</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/mothership/' class='tag-link-122 tag-link-position-32' title='1 topic' style='font-size: 1em;'>Mothership</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/mustread/' class='tag-link-123 tag-link-position-33' title='1 topic' style='font-size: 1em;'>Must Read</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/nailedit/' class='tag-link-124 tag-link-position-34' title='1 topic' style='font-size: 1em;'>Nailed It</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/pagination/' class='tag-link-126 tag-link-position-35' title='1 topic' style='font-size: 1em;'>pagination</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/post-formats/' class='tag-link-134 tag-link-position-36' title='16 topics' style='font-size: 1em;'>Post Formats</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/quote/' class='tag-link-140 tag-link-position-37' title='2 topics' style='font-size: 1em;'>quote</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/shortcode/' class='tag-link-146 tag-link-position-38' title='6 topics' style='font-size: 1em;'>shortcode</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/standard-2/' class='tag-link-148 tag-link-position-39' title='2 topics' style='font-size: 1em;'>standard</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/template/' class='tag-link-160 tag-link-position-40' title='12 topics' style='font-size: 1em;'>template</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/title/' class='tag-link-165 tag-link-position-41' title='5 topics' style='font-size: 1em;'>title</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/twitter-2/' class='tag-link-167 tag-link-position-42' title='2 topics' style='font-size: 1em;'>twitter</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/video/' class='tag-link-170 tag-link-position-43' title='3 topics' style='font-size: 1em;'>video</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/videopress/' class='tag-link-171 tag-link-position-44' title='2 topics' style='font-size: 1em;'>videopress</a>
          <a href='http://localhost/melissa-wp-0816/in-class/tag/wordpress-tv/' class='tag-link-174 tag-link-position-45' title='2 topics' style='font-size: 1em;'>wordpress.tv</a> </ul>
      </section>
      <section id="meta" class="widget">
        <h3 class="widget-title"> Meta </h3>
        <ul>
          <li><a href="http://localhost/melissa-wp-0816/in-class/wp-admin/">Site Admin</a></li>

          <li><a href="http://localhost/melissa-wp-0816/in-class/wp-login.php?action=logout&#038;redirect_to=http%3A%2F%2Flocalhost%2Fmelissa-wp-0816%2Fin-class&#038;_wpnonce=7436bb67d0">Log out</a> </li>
        </ul>

      </section>
    </aside>
    <!-- end #sidebar -->
  </div>
  <!-- end wrapper -->



<footer id="footer" role="contentinfo">
  &copy; 2015 by My Incredible Website. All Rights Reserved.
</footer>
              
            
!

CSS

              
                /* todo: remove this later */
@import 'https://fonts.googleapis.com/css?family=Lato:400,400i,700|Playfair+Display:400,900';
/* Source SCSS is at https://codepen.io/melissacabral/pen/xOaYgq */
$text-color:    black;
$link-color:    darkslategray;
$accent-color:  dodgerblue;
$secondary-color:rgba(black, .1);

$tablet-width:  700px;
$desktop-width: 1000px;

$max-width:75em;

@mixin tablet {
	@media (min-width: #{$tablet-width}) {
		@content;
	}
}

@mixin desktop {
	@media (min-width: #{$desktop-width}) {
		@content;
	}
}

@mixin clearfix() {
	&:after {
		display: block;
		content: '';
		clear: both;
	}
}

@mixin admin-sticky-fix( $offset: 0 ) {
	$narrow-offset: 46px;
	$wide-offset: 32px;
	@if $offset != 0 and type-of($offset) == 'number' {
		$narrow-offset: $narrow-offset + $offset;
		$wide-offset: $wide-offset + $offset;
	}
	.admin-bar & {
		top: $narrow-offset;
		@media screen and (min-width: 783px) {
			top: $wide-offset;
		}
	}
}
@mixin stretchy-grid($item, $caption, $width:200px){
	&{
		padding: .5vw;
		font-size: 0;
		display: -ms-flexbox;
		-ms-flex-wrap: wrap;
		-ms-flex-direction: column;
		-webkit-flex-flow: row wrap; 
		flex-flow: row wrap; 
		display: -webkit-box;
		display: flex;

		#{$item}{
			position: relative;
			-webkit-box-flex: auto;
			-ms-flex: auto;
			flex: auto; 
			width: $width; 
			margin: .5vw; 
			img { 
				width: 100%; 
				height: auto; 
			}
		}
		#{$caption}{
			font-size:16px;
			font-size: 1rem;
			padding:.5em;
			background: rgba(black, .1);
			z-index: 1000;
			width:100%;
			display:block;
			h1, h2, h3, p{
				margin:0 0 .5em 0;
			}
		}
	}
}
@mixin hovering-box($padding:2%){
	padding: $padding;
	background: white;
	@include tablet {
		box-shadow: 4px 4px 15px rgba(black, .2);
	}
}
body {
	margin: 0;
	font-family: sans-serif;
	font-family: Lato, arial, sans-serif;
	color: $text-color;
	background: #eee;
}

.wrapper {
	max-width: $max-width;
	margin: 0 auto;
	@include tablet{
		padding:2%;
	}
}

* {
	box-sizing: border-box;
}
img{
	max-width:100%;
	height: auto;
}

#header {
	text-align: center;
	color: white;
	background-image: url('http://lorempixel.com/output/abstract-q-c-1200-400-9.jpg');
	background-size: cover;
	@include tablet {
		min-height: 40vh;
		text-align: left;
		border-bottom: solid 3px $accent-color;
	}
	h2 {
		display: none;
		@include tablet {
			display: block;
		}
	}
	a {
		color: white;
	}
	.custom-logo-link {
		display: block;
		background-color:$accent-color;
		overflow:hidden;
		@include tablet {

			width:180px;
			height:50px;

		}
		img{
			max-width:100%;
			height:auto;
		}
	}
	h1 {
		background: #000;
		margin: 0;
		line-height: 50px;
		font-size: 16px;
		@include clearfix();
	}
	.search-form{
		input{
			color:$text-color;
		}
		@include tablet{
			z-index:50;
			position:absolute;
			top:60px;
			right:1em;
		}
	}

	/* == menu */
	.header-bar {
		background: rgba(0, 0, 0, .6);
		@include clearfix;
		@include tablet {
			background: black;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
			@include admin-sticky-fix;
		}
		nav{
			@include tablet {
				position: absolute;
				top: 0;
				right: 0;
				background: #000;
				margin-left:180px; /* space for logo */
			}
		}
		ul {
			margin: 0;
			padding: 0;
			list-style-type: none;      
		}
		li {
			width: 100%;
// float: left;
border-bottom: solid 1px gray;
border-right: solid 1px gray;
position: relative;
&.current{

}
&:hover > a{
	background: $accent-color;
}

@include tablet {
	display: inline-block;
	float: none;
	width: auto;
	border: none;
}
a {
	padding: 2.5%;
	display: block;
	&:hover,
	&:focus {
		background: $accent-color;
	}
	@include tablet {
		padding: 0 1em;
		line-height: 50px;
	}
}
//TODO: submenus
ul{
	display: none;
	background: rgba($accent-color, .6);
	@include tablet{
		position:absolute;
		top:100%;
		left:0;
		z-index: 100;
	}        
	min-width:320px;

	li{
		display: block;
		float:none;
	}
}
&:hover ul{
	display: block;
}
}
}
}

#content {
	@include hovering-box;
	@include tablet {
		width: 68%;
		float: left;
		position: relative;
		top: -6em;   

	}
	.hentry {
		margin: 2em 0;
		line-height: 1.5;
		font-size: 1.1em;
		.postmeta {
			background: $secondary-color;
			padding: 2%;
			font-size: .8em;
			clear: both;
			span {
				padding-right: 1.4em;
				opacity: .7;
			}
		}
	}
	.hentry .wp-post-image.size-thumbnail{
		float:right;
		margin-left:1em;
	}
	/* full width main content*/
	.page-template-template-no-sidebar &,
	.home.page &{
		width:98%;
		float:none; 
		left:0;
	}
}


#sidebar {
	@include tablet {
		width: 30%;
		float: right;
	}
	ul li{
		padding-left:1rem;
	}
	.home &{
		width:100%;
		float: none;
	}
}

#footer {

	clear: both;
	padding: 2%;
	border-top:solid 1px rgba(black, .15)
}


/* ==typography */

h1,
h2,
h3,
h4 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 900;
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a {
	text-decoration: none;
	color: $link-color;
}

/* ==pagination */
.pagination{
	text-align: center;
	clear:both;
	a, span{
		background: $secondary-color;
		padding:.5em 3%;
		display: inline-block;
		margin:.1em;
	}
	.current{
		background: $accent-color;
		color:white;
	}
	.dots{
		background: transparent;
	}
}

/* ==galleries */
.gallery{
	@include stretchy-grid('.gallery-item', '.gallery-caption');
}

/*  ==widgets */

.widget {
	padding: 1em;

	&.widget_calendar table{
		table-layout: fixed;
		width:100%;

		td, th{
			background: white;
			padding:4% 3%;
			text-align: center;
			vertical-align: center;
		}
		th{
			background-color:$accent-color;   
		}

		#today{
			background: rgba($accent-color, .2);
		}
	}
	#footer &{
		font-size:.8em;
		width:50%;
		float:left;

		&:nth-child(2n+1){
			clear:both;
		}
		@include tablet{
			width:33%;
			float:left;
			&:nth-child(2n+1){
				clear:none;
			}
			&:nth-child(3n+1){
				clear:both;
			}
		}
		@include desktop{
			width:25%;
			&:nth-child(3n+1){
				clear:none;
			}
			&:nth-child(4n+1){
				clear:both;
			}
		}
	}
	.home #sidebar &{
		width:48%;
		margin-right:2%;
		margin-bottom:10%;
		float:left;
		@include hovering-box();    
		&:nth-child(2n+1){
			clear:both;
		}
		@include tablet{
			width:31.333%;
			float:left;
			&:nth-child(2n+1){
				clear:none;
			}
			&:nth-child(3n+1){
				clear:both;
			}
		}

	}
}

/* == products */
.home{
	.featured-products ul{
		@include stretchy-grid(li, '.caption');
	}
}
.post-type-archive-product .product-grid{
	@include stretchy-grid(article, '.caption', 300px);

}
.price{
	color:$accent-color;
	;}

	/* ==wordpress core */

	.alignnone {
		margin: 5px 20px 20px 0;
	}

	.aligncenter,
	div.aligncenter {
		display: block;
		margin: 5px auto 5px auto;
	}

	.alignright {
		float: right;
		margin: 5px 0 20px 20px;
	}

	.alignleft {
		float: left;
		margin: 5px 20px 20px 0;
	}

	a img.alignright {
		float: right;
		margin: 5px 0 20px 20px;
	}

	a img.alignnone {
		margin: 5px 20px 20px 0;
	}

	a img.alignleft {
		float: left;
		margin: 5px 20px 20px 0;
	}

	a img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto
	}

	.wp-caption {
		background: #fff;
		border: 1px solid #f0f0f0;
		max-width: 96%;
		/* Image does not overflow the content area */
		padding: 5px 3px 10px;
		text-align: center;
	}

	.wp-caption.alignnone {
		margin: 5px 20px 20px 0;
	}

	.wp-caption.alignleft {
		margin: 5px 20px 20px 0;
	}

	.wp-caption.alignright {
		margin: 5px 0 20px 20px;
	}

	.wp-caption img {
		border: 0 none;
		height: auto;
		margin: 0;
		max-width: 98.5%;
		padding: 0;
		width: auto;
	}

	.wp-caption p.wp-caption-text {
		font-size: 11px;
		line-height: 17px;
		margin: 0;
		padding: 0 4px 5px;
	}


	/* Text meant only for screen readers. */

	.screen-reader-text,
	header h2 {
		clip: rect(1px, 1px, 1px, 1px);
		position: absolute !important;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}

	.screen-reader-text:focus {
		background-color: #f1f1f1;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		color: #21759b;
		display: block;
		font-size: 14px;
		font-size: 0.875rem;
		font-weight: bold;
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
		/* Above WP toolbar. */
	}

	.commentlist li{
		padding-left:1em;
	}

	.sticky, .gallery-caption,  .bypostauthor{
		text-decoration: none;
	}




              
            
!

JS

              
                /*
__          _______  
\ \        / /  __ \ 
 \ \  /\  / /| |__) |
  \ \/  \/ / |  ___/ 
   \  /\  /  | |     
    \/  \/   |_|   
*/
              
            
!
999px

Console