Skip to content

Instantly share code, notes, and snippets.

@simplethemes

simplethemes/SassMeister-input-HTML.html

Created December 10, 2013 07:39
Show Gist options
  • Save simplethemes/7887006 to your computer and use it in GitHub Desktop.
Save simplethemes/7887006 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en-US"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Mobius WordPress Theme | Just another WordPress site</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!--[if lte IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
html button,
html .gallery .gallery-item img,
html .gallery .gallery-item img.thumbnail,
html ul.tabs li a.active,
html input[type="submit"],
html input[type="reset"],
html input[type="button"],
html .cta,
html a.button,
html a.more-link,
html #teaser,
html #breadcrumbs,
html #menu .columns,
html #menu.wide,
html .latest-img,
html .widget-container.S1,
html .widget-container.S2,
html .widget-container.S3,
html #author-info,
html ul.advanced-recent-posts li img,
html .instapress img,
html .st-callout,
html .wp-post-image {behavior: url("http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/PIE.php") !important;position: relative;}
</style>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/favicon.ico">
<link rel="apple-touch-icon" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/apple-touch-icon-114x114.png" />
<link rel="pingback" href="http://themes.simplethemes.com/mobius/xmlrpc.php" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="alternate" type="application/rss+xml" title="Mobius WordPress Theme &raquo; Feed" href="http://themes.simplethemes.com/mobius/feed/" />
<link rel="alternate" type="application/rss+xml" title="Mobius WordPress Theme &raquo; Comments Feed" href="http://themes.simplethemes.com/mobius/comments/feed/" />
<link rel='stylesheet' id='thickbox-css' href='http://themes.simplethemes.com/mobius/wp-includes/js/thickbox/thickbox.css?ver=20121105' type='text/css' media='all' />
<link rel='stylesheet' id='theme-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/style.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='skeleton-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/css/skeleton-960.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='style-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/style1.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='animate-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/css/animate-custom.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='prettyphoto-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/css/prettyphoto.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='open_sans-css' href='http://fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C600italic%2C400%2C300%2C600%2C700%2C800&#038;ver=3.7.1' type='text/css' media='all' />
<script type='text/javascript' src='http://themes.simplethemes.com/mobius/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/javascripts/custom.js?ver=1.1'></script>
<script type='text/javascript' src='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/javascripts/superfish.js?ver=1.1'></script>
<style type="text/css">
body {color:#383838;font-size:14px;font-family:"Open Sans", sans-serif;font-weight:normal;font-style:normal;background-color:#FFFFFF;}
h1.entry-title,h2.entry-title {color:#000000;font-size:38px;font-family:"Open Sans", sans-serif;font-weight:700;}
h1 {color:#111111;font-size:36px;font-family:"Open Sans", sans-serif;font-weight:700;}
h2 {color:#008bd1;font-size:32px;font-family:"Open Sans", sans-serif;font-weight:600;}
h3 {color:#333333;font-size:26px;font-family:"Open Sans", sans-serif;font-weight:400;}
h4 {color:#ea4e06;font-size:20px;font-family:"Open Sans", sans-serif;font-weight:300;}
h5,h6 {color:#008fd6;font-size:20px;font-family:"Open Sans", sans-serif;font-weight:300;}
h3.widget-title,h4.widget-title {color:#ea4e06;font-size:20px;font-family:"Open Sans", sans-serif;font-weight:300;}
#header #site-title,#site-title a {color:#ec5006;font-size:40px;font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal;}
.site-desc.text {color:#c1cfd3;font-size:24px;font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal;}
#st_topbar { background-color:#008fd6;}
#header {background-color:#00699e;background-position: top center;background-repeat: repeat-x;background-attachment: fixed;}
@media only screen and (max-width: 767px) {#header {background-color:#00699e;}}
a,a:link,a:visited,a:active {color: #00699e;}
a:hover {color: #00476b;}
#menu ul li a {padding: 0px 18px;}
#menu.right {left:250px;top:30px;}
#wrap #content {float:left;}
#wrap #sidebar {float:right;}
#wrap #sidebar .widget-container {margin-left: 20px;margin-right: 0px;}</style>
<style type="text/css">
#header #site-title.graphic a {background-image: url(http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/style1/logo.png);width: 180px;height: 70px;margin:20px 0px}
</style>
</head>
<body class="home page page-id-2 style1 dropdown-menu">
<div id="wrap">
<div id="st_topbar"><div class="container"><div class="sixteen columns"><div class="widget-extras nav_menu-2"><h3 class="widget-title">Menu</h3><div class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-4" class="menu-item-first menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="#">Home</a></li>
<li id="menu-item-737" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-737"><a href="#">Theme Features</a></li>
<li id="menu-item-13" class="menu-item-last menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Blog</a></li>
</ul></div></div><div class="widget-extras socialwidget-3"><h3 class="widget-title">Connect</h3><div class="widget social"><ul id="stpl_social"><li class="stpl_flickr"><a rel="external" href="#">Follow on Flickr!</a></li><li class="stpl_gplus"><a rel="external" href="#">Follow on Google+</a></li><li class="stpl_pinterest"><a rel="external" href="#">Follow on Pinterest!</a></li><li class="stpl_facebook"><a rel="external" href="#">Follow on Facebook!</a></li><li class="stpl_twitter"><a rel="external" href="#">Follow on Twitter!</a></li><li class="stpl_linkedin"><a rel="external" href="#">Follow on LinkedIn!</a></li></ul></div></div><div class="widget-extras text-2"><h3 class="widget-title">Contact Us</h3> <div class="textwidget"><p><strong>1.800.555.1212</strong></p>
</div>
</div></div></div></div><div id="header" class="graphic">
<div class="container">
<div class="sixteen columns">
<h1 id="site-title" class="graphic"><a href="#" title="Mobius WordPress Theme">Mobius WordPress Theme</a></h1>
<span class="site-desc graphic">Just another WordPress site</span>
<div id="menu" class="right"><div class="menu-header"><ul id="nav" class="menu"><li id="menu-item-20" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-20"><a href="#">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19"><a href="#">Features</a>
<ul class="sub-menu">
<li id="menu-item-380" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-380"><a href="#">View All Features</a></li>
<li id="menu-item-373" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373"><a href="#">Widget Locations</a></li>
<li id="menu-item-378" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Special Features</a></li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="#">Contact Form</a></li>
<li id="menu-item-379" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379"><a href="#">Button Styles</a></li>
</ul>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Sample Blog</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="#">Typography</a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"><a href="#">Shortcodes</a></li>
<li id="menu-item-662" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-662"><a href="#">Color Styles</a></li>
</ul></div><div class="clear"></div></div><!--/#menu--></div><!--/.container--></div><!--/.columns--></div><!--/#header-->
<div id="content-wrapper" class="standard"><div class="container main"><a id="top"></a><div id="content"><div class="sixteen columns">
<div id="post-2" class="post-2 page type-page status-publish hentry">
<div class="entry-content">
<div class="three_fourths remove-bottom">
<div class="subheading"><img class="alignleft size-thumbnail wp-image-95 featured scale-with-grid show-on desktop" alt="3273696052_8f525440df_o2" src="http://themes.simplethemes.com/mobius/wp-content/uploads/2013/09/3273696052_8f525440df_o2-150x150.jpg" />
<h3 class="dim90">Mobius WordPress Theme</h3>
<h4 class="lighter dim40">A Better Web Experience</h4>
</div>
<p class="largetext serif italic dim40">“Mobius is a simple WordPress theme aimed at users seeking an attractive, professional look with complete control over customization.”</p>
</div>
<div class="one_fourth remove-bottom last">
<h4 class="loose normal caps small brand-accent">Responsiveness</h4>
<p class="small">Mobius works flawlessly with all the latest handheld and mobile devices as well as popular desktop browsers down to IE7.</p>
<p class="small">It has lots of built-in goodies empowering you to build beautiful websites while focusing on content instead of code.</p>
</div>
<div class="clear"></div>
<div class="two_thirds">
<div class="aligncenter marginv20"><img class="scale-with-grid" src="http://themes.simplethemes.com/mobius/wp-content/uploads/2013/09/mobius-screens-layout6.png" alt="Mobius WordPress Theme"/></div>
</div>
<div class="one_third last">
<h3 class="dim90">Beautiful Color Presets!</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="clear"></div>
<div class="one_third">
<h3 class="dim90">Column</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="one_third">
<h3 class="dim90">Column</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="one_third last">
<h3 class="dim90">Column</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="clear"></div>
<div class="pagination"></div>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<!-- You can start editing here. -->
<div id="comments">
</div>
</div><!-- /.columns -->
</div><!-- /#content -->
<div class="clear"></div> </div><!-- /.container (#content) -->
</div><!-- /#content-wrapper -->
<div id="footer" class="normal"><div class="container"><div class="sixteen columns">
<div class="one_third">
<div class="text-4"><h3 class="widget-title">Footer Widget One</h3> <div class="textwidget"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div></div>
<div class="one_third">
<div class="text-6"><h3 class="widget-title">Footer Widget Two</h3> <div class="textwidget"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div></div>
<div class="one_third last">
<div class="text-5"><h3 class="widget-title">Footer Widget Three</h3> <div class="textwidget"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div></div>
<div class="clear"></div>
<div id="footermenu" class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-817" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-817"><a href="#">Home</a><span> | </span></li>
<li id="menu-item-820" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-820"><a title="Learn more about the Mobius Theme" href="#">Mobius WordPress Theme</a><span> | </span></li>
<li id="menu-item-818" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-818"><a title="Simple WordPress Themes" href="#">WordPress Themes</a><span> | </span></li>
<li id="menu-item-819" class="menu-item-last menu-item menu-item-type-custom menu-item-object-custom menu-item-819"><a title="Valid HXTML 5" href="#">Valid HXTML 5</a><span> | </span></li>
</ul></div><div class="clear"></div><div id="credits"><br /><a class="themeauthor" href="#" title="Simple WordPress Themes">WordPress Theme by Simple Themes</a></div></div><!--/.columns-->
</div><!--/.container-->
</div><!--/#footer-->
</div><!--/#footer-wrap-->
</div><!--/#wrap-->
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "compass";
// green-black-ish
$brand: hsl(100, 58%, 36%);
$brand-alt: hsl(100, 58%, 28%);
$brand-accent: #EC5006;
// Utilities for Color Approximation
// Primary
$brand-hue: hue($brand);
$brand-sat: saturation($brand);
$brand-lightness: lightness($brand);
$brand-complimentary: tint($brand,45%);
@if $brand-lightness > 20% {
$brand-complimentary: darken($brand,10%);
}
@if $brand-lightness > 40% {
$brand-complimentary: darken($brand,30%);
}
@if $brand-lightness > 50% {
$brand-complimentary: darken($brand,40%);
}
@if $brand-lightness > 60% {
$brand-complimentary: darken($brand,50%);
}
// Secondary
$brand-alt-hue: hue($brand-alt);
$brand-alt-sat: saturation($brand-alt);
$brand-alt-lightness: lightness($brand-alt);
$brand-alt-complimentary: tint($brand-alt,50%);
@if $brand-alt-lightness >= 20% {
$brand-alt-complimentary: tint($brand-alt,80%);
}
@if $brand-alt-lightness >= 40% {
$brand-alt-complimentary: tint($brand-alt,60%);
}
@if $brand-alt-lightness >= 50% {
$brand-alt-complimentary: shade($brand-alt,40%);
}
$themestyle: "style1";
$themestylenum: "1";
$pie-behavior: url("../css/PIE.htc");
/* @group Header */
#header {background-color: $brand !important;}
#st_topbar {background-color: $brand-alt !important;}
//links
a {color: $brand;
&:hover {
color: darken($brand,10%);
}
}
/*! Header Text */
#header div#site-title a,
#header h1#site-title a {
text-shadow: shade($brand,30%) 0 1px 0;
}
/*! Header Tagline */
#header span.site-desc {
text-shadow: shade($brand,30%) 0 1px 0;
}
#st_topbar {
color: $brand-alt-complimentary;
text-shadow:0px 1px 0px shade($brand,5%) !important;
h3 {
display: none;
visibility: hidden;
}
.textwidget,p {
color: lighten($brand-alt-complimentary,20%) !important;
text-shadow:0px 1px 0px shade($brand-alt,5%) !important;
line-height: 38px;
margin:0;
padding: 0;
float: right;
}
}
#st_topbar ul.menu {
list-style: none;
margin:0;
padding: 0;
line-height: 28px;
float: left;
li {
float: left;
padding: 0px 10px;
margin:0;
ul {
display: none;
}
a {
color:$brand-alt-complimentary !important;
text-decoration: none;
line-height: 38px;
display: inline-block;
padding: 0px 10px;
&:hover {
color: lighten($brand-alt,50%) !important;
}
}
}
li.menu-item-first {
padding-left: 0;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#st_topbar {
text-align: center;
.textwidget,p {
float: none;
text-align: center;
width: 100%;
display: block;
}
ul.menu {
/*! Remove this to display top menu on mobile */
display: none;
margin:0 auto;
padding:0;
li {
font-size: .85em;
padding:0;
float: none;
a {
padding: 0px 5px 5px 0px;
line-height: 1em;
}
}
}
}
}
/* @end */
/* @group Main Menu */
/* Main Menu Background */
#menu,body.select-menu #menu .columns {
position: relative;
}
#menu.right {
position: absolute;
float: left;
li {
a {
font-size: 16px;
}
li {
a {
font-size: 16px;
}
}
}
li a,li.active a {
text-shadow:none;
&:hover {
text-shadow:none;
}
}
}
/* Top Level Links */
#header #menu ul li a {
color: #fff !important;
text-shadow: shade($brand,10%) 0px 1px 1px !important;
font-size: 17px !important;
font-weight: 300;
line-height: 46px;
}
/* Top Level Hover Links */
#menu ul li a:hover,
#menu ul li.active:hover a,
#menu ul li:hover a {
color: lighten($brand,50%) !important;
text-shadow: darken($brand,10%) 0px 1px 0px;
}
/* Top Level Active Links */
#menu ul li.active a {
color: lighten($brand,50%);
text-shadow: darken($brand-alt,10%) 0px -1px 1px;
}
/* Sublevel Indicator */
span.sub-indicator {
background: url('./images/#{$themestyle}/sub_indicator.png');
position: absolute;
top: -9px;
left: 20%;
height: 10px;
width: 19px;
}
#menu ul li ul li span.sub-indicator {
display: none;
}
/* Sublevel Links */
#menu ul ul.sub-menu li a,
#menu li.active:hover ul a {
font-size: 1.1em;
color: $brand;
text-shadow: none !important;
}
/* Sublevel Background */
#menu ul ul.sub-menu {
background-color: #fff;
}
#menu ul ul.sub-menu li a,
#menu li.active:hover ul a {
font-weight: normal;
border-bottom: 1px solid hsl(0, 0%, 95%);
}
/* Nav Sublevel Shadow */
#menu ul.sub-menu {
@include box-shadow (0px 1px 1px rgba(0, 0, 0, 0.25));
}
/* Nav Sublevel Links */
#menu ul.sub-menu li a {
padding: 10px 8px 10px 10px;
min-width: 200px;
border-bottom: none;
}
/* Sublevel Link Hover Color */
#menu ul ul.sub-menu li a:hover {
color: $brand;
text-shadow: none;
background-color: hsl(0, 0%, 95%);
background-image: none;
border-bottom: 1px solid hsl(0, 0%, 95%);
}
#menu li.appended {
display: none;
}
@media only screen and (max-width: 767px) {
/* Responsive Dropdown Toggle Button */
#shownav {
width: 28px;
top: 10px;
right: 10px;
span {
display: block;
background: shade($brand,10%);
height: 3px;
margin-bottom: 4px;
width: 100%;
@include border-radius(2px);
}
}
body.admin-bar #shownav {
top: 38px;
}
#shownav.active {
span {
background:#fff;
}
}
#wrap #menu li.appended {
display: inline;
}
#wrap #menu li a {
border-bottom: 1px solid darken($brand,2%);
}
#wrap #menu ul ul.sub-menu li a {
color: lighten($brand-alt,65%);
}
#wrap #menu ul ul.sub-menu li a:hover {
color: #fff;
}
#menu.right {
position: relative !important;
top: 0 !important;
left: 0 !important;
float: none;
}
span.sub-indicator {
display: none;
}
}
/* @end */
/* @group Typography */
/* Links */
a, a:visited {text-decoration: underline; outline: 0; }
a:hover, a:focus {text-decoration: none;}
p a, p a:visited { line-height: inherit; }
/* Headings */
h1 {line-height: 140%; margin: .75em 0;}
h2 {line-height: 130%; margin: .75em 0;}
h3 {line-height: 130%; margin: .75em 0;}
h4 {line-height: 125%; margin: .75em 0;}
h5 {line-height: 120%; margin: .75em 0;}
h6 {line-height: 110%; margin: .75em 0;color: #333 !important;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit;
text-decoration: none;
}
p { margin: 10px 0 20px 0; }
.brand {color: $brand !important;}
.brand-alt {color: $brand-alt !important;}
.brand-accent {color: $brand-accent !important;}
p.lead { font-size: 21px; line-height: 27px; color: #777; }
.subtext {
text-transform: uppercase;
font-weight: normal;
font-weight: 300;
letter-spacing: 2px;
margin: 1em 0;
padding: 0;
line-height: 125%;
}
h1.sub {
@extend .subtext;
font-size: 2em;
font-weight: bold;
font-weight: 600;
letter-spacing: 4px;
}
h2.sub {
@extend .subtext;
font-size: 1.5em;
font-weight: bold;
font-weight: 600;
letter-spacing: 3px;
}
h3.sub {
@extend .subtext;
font-size: 1.25em;
font-weight: bold;
font-weight: 600;
letter-spacing: 3px;
}
h4.sub {
@extend .subtext;
font-size: 1em;
font-weight: normal;
font-weight: 400;
letter-spacing: 2px;
}
h5.sub {
@extend .subtext;
font-size: .85em;
font-weight: normal;
font-weight: 400;
letter-spacing: 2px;
}
/* Read More links */
a.more-link:link,
a.more-link:visited {
font-size: 1em;
margin: 30px 0 0 0;
color: #fff !important;
background: $brand-alt;
text-shadow: shade($brand-alt,10%) 1px 1px 0;
padding: 10px 20px;
display: inline-block;
line-height: 100%;
text-decoration: none;
float: right;
@include border-radius(2px);
behavior: $pie-behavior;
position: relative;
&:hover {
background-color: lighten($brand-alt,10%);
text-shadow:none;
}
}
/* Default Button Style */
$brand-alt-hue: hue($brand-alt);
$brand-alt-sat: saturation($brand-alt);
$brand-alt-light: lightness($brand-alt);
@mixin skeleton-linear-gradient($start-gradient, $stop-gradient) {
background: $stop-gradient;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-gradient), color-stop(100%,$stop-gradient));
background: -webkit-linear-gradient(top, $start-gradient 0%,$stop-gradient 100%);
background: -o-linear-gradient(top, $start-gradient 0%,$stop-gradient 100%);
background: -ms-linear-gradient(top, $start-gradient 0%,$stop-gradient 100%);
background: -moz-linear-gradient(top, $start-gradient 0%,$stop-gradient 100%);
background: linear-gradient(top bottom, $start-gradient 0%,$stop-gradient 100%);
background-clip: border-box;
-pie-background: linear-gradient(top, $start-gradient, $stop-gradient);
behavior: $pie-behavior;
position: relative;
}
@mixin simple-button ($base-hue, $base-saturation, $base-lightness, $color) {
$start-gradient: tint(hsl($base-hue, $base-saturation, $base-lightness), 5%);
$stop-gradient: shade(hsl($base-hue, $base-saturation, $base-lightness), 5%);
$border: shade(hsl($base-hue, $base-saturation, $base-lightness), 10%);
$inset-shadow: tint(hsl($base-hue, $base-saturation, $base-lightness), 15%);
$text-shadow: shade(hsl($base-hue, $base-saturation, $base-lightness), 20%);
$text-shadow-h-offset: 0;
$text-shadow-v-offset: 1px;
$text-shadow-blur: 0px;
// for light buttons
@if $base-lightness > 70% {
// lighten the text shadow and offset light direction
$border: darken(hsl($base-hue, $base-saturation, $base-lightness), 10%);
$inset-shadow: lighten(hsl($base-hue, $base-saturation, $base-lightness), 11%);
$text-shadow: lighten(hsl($base-hue, $base-saturation, $base-lightness), 10%);
$start-gradient: lighten(hsl($base-hue, $base-saturation, $base-lightness), 10%);
$stop-gradient: darken(hsl($base-hue, $base-saturation, $base-lightness), 5%);
$text-shadow-v-offset: 1px;
@include transition-property(all);
@include transition-duration(.5s);
@include transition-timing-function(linear);
}
color: $color !important;
line-height: 1.5em;
text-align: center;
text-decoration:none;
display: inline-block;
vertical-align: middle;
//border: 1px solid $border;
border: none;
@include single-text-shadow($text-shadow-h-offset, $text-shadow-v-offset, $text-shadow-blur, $color: $text-shadow);
@include border-radius (2px);
//@include box-shadow (inset 0 1px 0 0 $inset-shadow,0 1px 1px 0 #fff);
@include skeleton-linear-gradient($start-gradient, $stop-gradient);
background-repeat: repeat-x;
&:hover {
$border: scale-saturation(darken(hsl($base-hue, $base-saturation, $base-lightness), 5%), 15%);
$inset-shadow: scale-saturation(lighten(hsl($base-hue, $base-saturation, $base-lightness), 5%), -7%);
$start-gradient: scale-saturation(hsl($base-hue, $base-saturation, $base-lightness), 30%);
$stop-gradient: scale-saturation(hsl($base-hue, $base-saturation, $base-lightness), 30%);
// for light buttons
@if $base-saturation < 20% {
$start-gradient: lighten(hsl($base-hue, $base-saturation, $base-lightness), 10%);
$stop-gradient: darken(hsl($base-hue, $base-saturation, $base-lightness), 15%);
$border: desaturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 5%), 20%);
}
@if $base-lightness > 70% {
$text-shadow-v-offset: 1px;
}
//border: 1px solid $border;
@include skeleton-linear-gradient($start-gradient, $stop-gradient);
//@include box-shadow (inset 0 1px 0 0 $inset-shadow);
cursor: pointer;
}
&:active {
$border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
$inset-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 17%), 7%);
@if $base-saturation < 11% {
$inset-shadow: desaturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 17%), 7%);
$border: desaturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 24%), 9%);
}
@include box-shadow (inset 0 2px 6px 0 $inset-shadow,inset 0 0 0 0 $inset-shadow,0 1px 1px 0 #eee);
//border: 1px solid $border;
}
}
button,
input[type="reset"],
input[type="submit"],
input[type="button"],
a.button {
font-family: inherit;
@include simple-button($brand-alt-hue, $brand-alt-sat, $brand-alt-light, #fff);
}
a.button span.btn_caption {
color: lighten($brand-alt,50%);
text-shadow: 0 1px 0 darken($brand,20%);
}
/* @end */
/* @group Tables */
table th {
border: 1px solid #cbcbcb;
background: #ddd url(images/gradient_small_trans.png) repeat-x 0 top;
}
table td {
background-color: #fafafa;
border: 1px solid #CCC;
}
table th,
table td {
border-top: 1px solid #dddddd;
}
table tbody + tbody {
border-top: 2px solid #dddddd;
}
table.striped tbody tr:nth-child(odd) td {
background-color: #f4f4f4;
}
table.hover tbody tr:hover td {
background-color: #fff;
}
table tbody tr.success td {
background-color: #dff0d8;
}
table tbody tr.error td {
background-color: #f2dede;
}
table tbody tr.warning td {
background-color: #fcf8e3;
}
table tbody tr.info td {
background-color: #d9edf7;
}
table.hover tbody tr.success:hover td {
background-color: #d0e9c6;
}
table.hover tbody tr.error:hover td {
background-color: #ebcccc;
}
table.hover tbody tr.warning:hover td {
background-color: #faf2cc;
}
table.hover tbody tr.info:hover td {
background-color: #c4e3f3;
}
/* @end */
/* @group Teaser */
#showcase {
color: hsl(0, 0%, 80%);
text-shadow: darken($brand,30%) 0px 1px 0px;
background: darken($brand,20%);
font-weight: normal;
line-height: 1.45em;
font-size: 1.35em;
font-weight: normal;
font-weight: 300;
behavior: $pie-behavior;
position: relative;
}
body.darkteaser #showcase {
background: hsl(0, 0%, 10%);
}
#showcase h2,#showcase h3 {
color: lighten($brand,50%);
margin: 0 0 .25em 0;
padding: 0;
line-height: 110%;
font-weight: bold;
font-weight: 400;
letter-spacing: -1px;
}
#showcase.widget_text .inside {
padding: 30px 0px;
overflow: hidden;
}
#showcase li p,
#showcase p {
margin-bottom: 0px;
line-height: 1.25em;
}
#showcase p strong {
font-weight: bold;
}
#showcase .inside a {
color: #fff;
text-decoration:none;
text-shadow: none;
&:hover {
color: tint($brand,10%);
}
}
#showcase .button a {
color: #fff !important;
text-shadow: 1px 1px 0 darken($brand,2%);
border: none;
font-size: 1.25em !important;
background: none $brand;
text-decoration: none;
margin-bottom: 20px;
margin-top: 10px;
@include border-radius(2px);
@include box-shadow(none);
}
#showcase .button a:hover {
color: #fff;
background: lighten($brand,10%);
text-shadow: 1px 1px 0 darken($brand,20%);
text-decoration: none;
}
/* @end */
/* @group Breadcrumbs */
#breadcrumbs {
background: #f9f9f9;
border: 1px solid #ebebeb;
}
#breadcrumbs .sep {
color: #8c8d87;
text-shadow: #fff 1px 0px 1px;
}
p#breadcrumbs a,p#breadcrumbs strong {
color: #6b6b6b;
}
/* @end */
/* @group Tabs */
ul.tabs {
border-bottom: 1px solid #d4d4d4;
}
ul.tabs li a {
border: 1px solid #cacaca;
background: #f6f6f6;
}
ul.tabs li a {
border-width: 1px 0 0 1px;
}
ul.tabs li a.active {
background: #fff;
border-color: #cacaca;
}
/* @end */
/* @group Toggles */
.toggle_container {
background-color: #fff;
}
ul.tabs a,p.trigger,p.trigger a {
-webkit-user-select:none;
-moz-user-select:-moz-none;
-moz-user-select:none;
-o-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
user-select:none;
}
p.trigger a:hover,
p.trigger.active a:hover,
p.trigger:hover a {
color: #666;
text-shadow: #fafafa -1px 1px 0;
}
/* Active Toggle State */
p.trigger.active a {
text-shadow: #fff 1px 1px 0;
}
/* @end */
/* @group Testimonials */
.testimonials {
margin: 20px 0px;
}
.testimonials p {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 16px;
color: #666;
}
.testimonials cite {
float: right;
padding: 10px;
font-weight: bold;
font-style: normal;
font-family: Sans-Serif;
}
/* @end */
/* @group Latest Posts (shortcode) */
.latestposts .latest-item {
padding-bottom: 15px;
margin-bottom: 15px;
}
.one_third .latestposts .latest-item {
margin-bottom: 0;
padding-bottom: 0;
}
.latestposts .latest-excerpt p {
font-size: 12px;
margin: 0;
}
.latestposts .latest-title a {
font-size: 16px;
text-decoration: none;
font-weight: bold;
}
.latestposts a.more-link,
.latestposts a.button {
padding: 6px 10px 6px 10px;
background-image: none;
font-size: 12px;
}
.latest-img {
border: 1px solid #fff;
background-color: #f4f4f4;
padding: 4px;
margin: 5px 12px 4px 0px;
@include box-shadow(1px 1px 0px #CCC);
behavior: $pie-behavior;
position: relative;
}
/* @end */
/* @group Pagination */
/* Page and Post Navigation */
.pagination span,.pagination a:link {
color: #fff;
background: #0679d3;
text-shadow: #fff 0 1px 0;
@include box-shadow(0px 1px 0px #fff);
behavior: $pie-behavior;
position: relative;
}
.pagination a:hover,
.pagination .current{
color:#fff;
background: #7ba722;
text-shadow: #71991f 0 1px 0;
}
/* @end */
/* @group Widgets */
.widget-container {
margin-bottom: 20px;
}
/*! Widget Headings */
.widget-container h3,
.widget-container h4 {
line-height: 120%;
padding-bottom: 5px;
border-bottom: 4px solid #eee;
}
.widget-container a:hover {
text-decoration: underline;
}
/*! Widget Menus */
#sidebar .widget-container li.page_item a,
#sidebar .widget-container li.menu-item a {
border-bottom:none;
text-decoration: none;
font-weight: bold;
font-weight: 600;
}
#sidebar .widget-container li.page_item ul,
#sidebar .widget-container li.menu-item ul {
border-left: 1px solid #eee;
margin:5px 0px 5px 15px;
}
#sidebar .widget-container li.page_item ul ul,
#sidebar .widget-container li.menu-item ul ul {
font-size: .85em;
}
/*
Add Bullets to the core widgets
Uncomment the first rule below
to apply bullets to all widgets
*/
.widget-container ul li,
.widget-container.widget_meta ul li,
.widget-container.widget_archive ul li,
.widget-container.widget_categories ul li,
.widget-container.widget_recent_entries ul li,
.widget-container ul.blogroll li {
padding-left: 20px;
background: url(./images/#{$themestyle}/bullet.png) no-repeat 0 .25em;
}
.widget-container ul.square li,
.widget-container ul li li {
background: none;
padding-left: 0;
}
/* Custom Menu Widget Images (arrows) */
#sidebar li.page_item a,
#sidebar li.menu-item a {
background: url(images/#{$themestyle}/arrow_bullet.png) no-repeat 8px 8px;
text-decoration: none;
}
#sidebar li.page_item a:hover,
#sidebar li.menu-item a:hover {
background: url(images/#{$themestyle}/arrow_bullet.png) no-repeat 8px -24px;
}
/* Flickr Widget */
.flickr img {
border: 1px solid #d8d8d8;
background-color: #f9f9f9;
padding: 4px
}
.flickr img:hover {
border-color: #dcdcdc;
}
#footer .flickr img {
border: 1px solid #d4d4d4;
background-color: #f4f4f4;
padding: 4px
}
#footer .flickr img:hover {
border: 1px solid #c1c1c1;
background-color: #fff;
position: relative;
}
/* Social Networks Widget */
ul#stpl_social li a {
font-weight: 400;
}
/* @end */
/* Author Bio */
#author-info img.avatar {
border: 1px solid #d8d8d8;
background-color: #f9f9f9;
padding: 4px
}
/* @group WP Overrides */
span.post_written,
span.post_categories {
font-family: DroidSerif, Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
.postmeta a:link {
color: #535353;
text-decoration: none;
border-bottom: 1px dotted #bbb;
padding-bottom: 2px;
}
.postmeta a:hover {
text-decoration: none;
border-bottom: 1px dotted #bbb;
padding-bottom: 2px;
color: #3b3b3b;
}
.postmeta .post-comments a:link {
text-decoration: none;
border-bottom: none;
padding-bottom: 0px;
}
/* Post Images */
ul.advanced-recent-posts li img,
.instapress img,
.wp-post-image {
margin-top: 5px;
border: 1px solid #fff;
background-color: #f4f4f4;
padding: 5px;
-webkit-box-shadow: 1px 1px 0px #CCC;
-moz-box-shadow: 1px 1px 0px #CCC;
box-shadow: 1px 1px 0px #CCC;
position: relative;
}
/* Staff Directory */
ul.staff_social {
border-color: #CCC;
}
/* all 1px border accents */
hr,
.entry-utility,
.entry-meta,
.post,
.postmeta.small,
.st_relatedposts h4,
#sidebar li.page_item a,
#sidebar li.menu-item a {
border-bottom: 1px solid #eaeaea;
}
hr {
background-color: #fefefe;
}
body.single .entry-utility {
border-bottom: none;
}
/* @end */
/* @group Footer */
#footer {
background: $brand !important;
color: tint($brand,70%) !important;
text-shadow:0px -1px 0px darken($brand,10%) !important;
border-top: 10px solid $brand-alt !important;
}
#footer h3 {
color: lighten($brand,60%) !important;
font-size: 1.25em;
line-height: 1.5em;
font-weight: 300;
letter-spacing: normal;
margin-top: 1.25em;
}
#footer a {
color: tint($brand,75%) !important;
text-shadow:none !important;
&:hover {
color: tint($brand,85%) !important;
}
}
#footermenu li {
color: tint($brand,10%) !important;
}
#footermenu li a {
color: tint($brand,50%) !important;
text-decoration: none;
}
#footermenu li a:hover {
color: #fff !important;
}
#credits {
color: tint($brand,50%) !important;
text-shadow:none;
}
/* @end */
/* @group Slider Customization */
.flex-container {
@include border-radius(none);
@include box-shadow(none);
border: none;
}
#showcase li.slide,
#showcase .flexslider {
background: transparent;
}
#showcase .flex-direction-nav li a.next {right: -40px;}
#showcase .flex-direction-nav li a.prev {left: -40px;}
.flex-control-nav li a {
background: url(./images/#{$themestyle}/bg_control_nav.png) no-repeat 0px 0px;
width: 15px;
height: 15px;
}
#showcase .flex-control-nav li a {
background: url(./images/#{$themestyle}/bg_control_nav.png) no-repeat 0px 0px;
width: 15px;
height: 15px;
}
#showcase .flex-control-nav li a:hover,
.flex-control-nav li a:hover {background-position: 0 -14px;}
#showcase .flex-control-nav li a.active,
.flex-control-nav li a.active {background-position: 0 -28px; cursor: default;}
.flex-control-nav li {margin: 0 0 0 2px;}
/* @end */
/* Smaller Headings for Mobile Devices */
@media only screen and (min-width: 768px) and (max-width: 991px) {
#wrap h1 {
font-size: 2.25em;
}
#wrap h2 {
font-size: 1.85em;
}
#wrap h3 {
font-size: 1.5em;
}
#wrap h4,#wrap h5,#wrap h6 {
font-size: 1em;
}
}
@media only screen and (max-width: 767px) {
#wrap h1 {
font-size: 1.75em;
}
#wrap h2 {
font-size: 1.50em;
}
#wrap h3 {
font-size: 1.25em;
}
#wrap h4,#wrap h5 {
font-size: 1.15em;
}
#wrap h6 {
font-size: 1em;
}
img.alignleft,
img.alignright {
float: none;
margin: 0 auto;
width: auto;
}
.latestposts img.alignleft {float: left;}
#content-wrapper.landing #content {background: none;}
/* Centers the Logo in mobile layouts */
#wrap #header div#site-title a,
#wrap #header h1#site-title a,
#wrap .site-desc {margin:0px auto;display:block;text-align:center;}
}
#st_gmap {
border-top: 10px solid #DBD5CA;
width:100%;
height:400px;
}
/* @group Backstretch Slider */
#st_backstretch {
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.backstretch-caption {
position: absolute;
font-weight: 400;
display: block;
width: auto;
max-width: 75%;
bottom: 0;
right: 0;
background: hsla(0, 0%, 0%, 0.5);
padding: 10px;
font-size: 2em;
line-height: 115%;
color: #fff;
display: none;
@include border-radius(2px 2px 0px 0px);
a {
color: #fff !important;
text-decoration: none;
}
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
#st_backstretch {height: 150px !important;}
.backstretch-caption {font-size: 1em;}
}
#backstretch-controls {
position: absolute;
bottom: 10px;
left: 10px;
padding: 5px 8px;
background: hsla(0, 0%, 0%, 0.5);
border-radius:4px;
a {
width: 11px;
height: 19px;
display: block;
text-indent: -9999em;
float: left;
background: url('./images/icons/backstretch-nav.png') no-repeat;
}
a.backstretch-slide-prev {
background-position: 0px -20px;
margin: 0px 4px 0px 0px;
&:hover {
background-position: 0px 0px;
}
}
a.backstretch-slide-pause {
width: 9px;
background-position: -22px -20px;
margin: 0px 4px 0px 4px;
&:hover {
background-position: -22px 0px;
}
}
a.backstretch-slide-next {
background-position: -41px -20px;
margin: 0px 0px 0px 4px;
&:hover {
background-position: -41px 0px;
}
}
}
/* @end */
Raw
SassMeister-output.css
/* @group Header */
#header { background-color: #4a9127 !important; }
#st_topbar { background-color: #3a711e !important; }
a { color: #4a9127; }
a:hover { color: #35691c; }
/*! Header Text */
#header div#site-title a, #header h1#site-title a { text-shadow: #33651b 0 1px 0; }
/*! Header Tagline */
#header span.site-desc { text-shadow: #33651b 0 1px 0; }
#st_topbar { color: #d7e2d2; text-shadow: 0px 1px 0px #468925 !important; }
#st_topbar h3 { display: none; visibility: hidden; }
#st_topbar .textwidget, #st_topbar p { color: white !important; text-shadow: 0px 1px 0px #376b1c !important; line-height: 38px; margin: 0; padding: 0; float: right; }
#st_topbar ul.menu { list-style: none; margin: 0; padding: 0; line-height: 28px; float: left; }
#st_topbar ul.menu li { float: left; padding: 0px 10px; margin: 0; }
#st_topbar ul.menu li ul { display: none; }
#st_topbar ul.menu li a { color: #d7e2d2 !important; text-decoration: none; line-height: 38px; display: inline-block; padding: 0px 10px; }
#st_topbar ul.menu li a:hover { color: #bce7a6 !important; }
#st_topbar ul.menu li.menu-item-first { padding-left: 0; }
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { #st_topbar { text-align: center; }
#st_topbar .textwidget, #st_topbar p { float: none; text-align: center; width: 100%; display: block; }
#st_topbar ul.menu { /*! Remove this to display top menu on mobile */ display: none; margin: 0 auto; padding: 0; }
#st_topbar ul.menu li { font-size: .85em; padding: 0; float: none; }
#st_topbar ul.menu li a { padding: 0px 5px 5px 0px; line-height: 1em; } }
/* @end */
/* @group Main Menu */
/* Main Menu Background */
#menu, body.select-menu #menu .columns { position: relative; }
#menu.right { position: absolute; float: left; }
#menu.right li a { font-size: 16px; }
#menu.right li li a { font-size: 16px; }
#menu.right li a, #menu.right li.active a { text-shadow: none; }
#menu.right li a:hover, #menu.right li.active a:hover { text-shadow: none; }
/* Top Level Links */
#header #menu ul li a { color: #fff !important; text-shadow: #428223 0px 1px 1px !important; font-size: 17px !important; font-weight: 300; line-height: 46px; }
/* Top Level Hover Links */
#menu ul li a:hover, #menu ul li.active:hover a, #menu ul li:hover a { color: #d4f0c7 !important; text-shadow: #35691c 0px 1px 0px; }
/* Top Level Active Links */
#menu ul li.active a { color: #d4f0c7; text-shadow: #254913 0px -1px 1px; }
/* Sublevel Indicator */
span.sub-indicator { background: url("./images/style1/sub_indicator.png"); position: absolute; top: -9px; left: 20%; height: 10px; width: 19px; }
#menu ul li ul li span.sub-indicator { display: none; }
/* Sublevel Links */
#menu ul ul.sub-menu li a, #menu li.active:hover ul a { font-size: 1.1em; color: #4a9127; text-shadow: none !important; }
/* Sublevel Background */
#menu ul ul.sub-menu { background-color: #fff; }
#menu ul ul.sub-menu li a, #menu li.active:hover ul a { font-weight: normal; border-bottom: 1px solid #f2f2f2; }
/* Nav Sublevel Shadow */
#menu ul.sub-menu { -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25); }
/* Nav Sublevel Links */
#menu ul.sub-menu li a { padding: 10px 8px 10px 10px; min-width: 200px; border-bottom: none; }
/* Sublevel Link Hover Color */
#menu ul ul.sub-menu li a:hover { color: #4a9127; text-shadow: none; background-color: #f2f2f2; background-image: none; border-bottom: 1px solid #f2f2f2; }
#menu li.appended { display: none; }
@media only screen and (max-width: 767px) { /* Responsive Dropdown Toggle Button */
#shownav { width: 28px; top: 10px; right: 10px; }
#shownav span { display: block; background: #428223; height: 3px; margin-bottom: 4px; width: 100%; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
body.admin-bar #shownav { top: 38px; }
#shownav.active span { background: #fff; }
#wrap #menu li.appended { display: inline; }
#wrap #menu li a { border-bottom: 1px solid #468924; }
#wrap #menu ul ul.sub-menu li a { color: #eaf8e3; }
#wrap #menu ul ul.sub-menu li a:hover { color: #fff; }
#menu.right { position: relative !important; top: 0 !important; left: 0 !important; float: none; }
span.sub-indicator { display: none; } }
/* @end */
/* @group Typography */
/* Links */
a, a:visited { text-decoration: underline; outline: 0; }
a:hover, a:focus { text-decoration: none; }
p a, p a:visited { line-height: inherit; }
/* Headings */
h1 { line-height: 140%; margin: .75em 0; }
h2 { line-height: 130%; margin: .75em 0; }
h3 { line-height: 130%; margin: .75em 0; }
h4 { line-height: 125%; margin: .75em 0; }
h5 { line-height: 120%; margin: .75em 0; }
h6 { line-height: 110%; margin: .75em 0; color: #333 !important; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; text-decoration: none; }
p { margin: 10px 0 20px 0; }
.brand { color: #4a9127 !important; }
.brand-alt { color: #3a711e !important; }
.brand-accent { color: #ec5006 !important; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }
.subtext, h1.sub, h2.sub, h3.sub, h4.sub, h5.sub { text-transform: uppercase; font-weight: normal; font-weight: 300; letter-spacing: 2px; margin: 1em 0; padding: 0; line-height: 125%; }
h1.sub { font-size: 2em; font-weight: bold; font-weight: 600; letter-spacing: 4px; }
h2.sub { font-size: 1.5em; font-weight: bold; font-weight: 600; letter-spacing: 3px; }
h3.sub { font-size: 1.25em; font-weight: bold; font-weight: 600; letter-spacing: 3px; }
h4.sub { font-size: 1em; font-weight: normal; font-weight: 400; letter-spacing: 2px; }
h5.sub { font-size: .85em; font-weight: normal; font-weight: 400; letter-spacing: 2px; }
/* Read More links */
a.more-link:link, a.more-link:visited { font-size: 1em; margin: 30px 0 0 0; color: #fff !important; background: #3a711e; text-shadow: #34651b 1px 1px 0; padding: 10px 20px; display: inline-block; line-height: 100%; text-decoration: none; float: right; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; behavior: url("../css/PIE.htc"); position: relative; }
a.more-link:link:hover, a.more-link:visited:hover { background-color: #4e9929; text-shadow: none; }
/* Default Button Style */
button, input[type="reset"], input[type="submit"], input[type="button"], a.button { font-family: inherit; color: white !important; line-height: 1.5em; text-align: center; text-decoration: none; display: inline-block; vertical-align: middle; border: none; text-shadow: 0 1px 0px #2e5a18; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background: #376b1c; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #437829), color-stop(100%, #376b1c)); background: -webkit-linear-gradient(top, #437829 0%, #376b1c 100%); background: -o-linear-gradient(top, #437829 0%, #376b1c 100%); background: -ms-linear-gradient(top, #437829 0%, #376b1c 100%); background: -moz-linear-gradient(top, #437829 0%, #376b1c 100%); background: linear-gradient(to bottom top, #437829 0%, #376b1c 100%); background-clip: border-box; -pie-background: linear-gradient(to bottom, #437829, #376b1c); behavior: url("../css/PIE.htc"); position: relative; background-repeat: repeat-x; }
button:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover { background: #377a15; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #377a15), color-stop(100%, #377a15)); background: -webkit-linear-gradient(top, #377a15 0%, #377a15 100%); background: -o-linear-gradient(top, #377a15 0%, #377a15 100%); background: -ms-linear-gradient(top, #377a15 0%, #377a15 100%); background: -moz-linear-gradient(top, #377a15 0%, #377a15 100%); background: linear-gradient(to bottom top, #377a15 0%, #377a15 100%); background-clip: border-box; -pie-background: linear-gradient(to bottom, #377a15, #377a15); behavior: url("../css/PIE.htc"); position: relative; cursor: pointer; }
button:active, input[type="reset"]:active, input[type="submit"]:active, input[type="button"]:active, a.button:active { -moz-box-shadow: inset 0 2px 6px 0 #162e0a, inset 0 0 0 0 #162e0a, 0 1px 1px 0 #eeeeee; -webkit-box-shadow: inset 0 2px 6px 0 #162e0a, inset 0 0 0 0 #162e0a, 0 1px 1px 0 #eeeeee; box-shadow: inset 0 2px 6px 0 #162e0a, inset 0 0 0 0 #162e0a, 0 1px 1px 0 #eeeeee; }
a.button span.btn_caption { color: #bce7a6; text-shadow: 0 1px 0 #214011; }
/* @end */
/* @group Tables */
table th { border: 1px solid #cbcbcb; background: #dddddd url(images/gradient_small_trans.png) repeat-x 0 top; }
table td { background-color: #fafafa; border: 1px solid #CCC; }
table th, table td { border-top: 1px solid #dddddd; }
table tbody + tbody { border-top: 2px solid #dddddd; }
table.striped tbody tr:nth-child(odd) td { background-color: #f4f4f4; }
table.hover tbody tr:hover td { background-color: #fff; }
table tbody tr.success td { background-color: #dff0d8; }
table tbody tr.error td { background-color: #f2dede; }
table tbody tr.warning td { background-color: #fcf8e3; }
table tbody tr.info td { background-color: #d9edf7; }
table.hover tbody tr.success:hover td { background-color: #d0e9c6; }
table.hover tbody tr.error:hover td { background-color: #ebcccc; }
table.hover tbody tr.warning:hover td { background-color: #faf2cc; }
table.hover tbody tr.info:hover td { background-color: #c4e3f3; }
/* @end */
/* @group Teaser */
#showcase { color: #cccccc; text-shadow: #0c1806 0px 1px 0px; background: #214011; font-weight: normal; line-height: 1.45em; font-size: 1.35em; font-weight: normal; font-weight: 300; behavior: url("../css/PIE.htc"); position: relative; }
body.darkteaser #showcase { background: #1a1a1a; }
#showcase h2, #showcase h3 { color: #d4f0c7; margin: 0 0 .25em 0; padding: 0; line-height: 110%; font-weight: bold; font-weight: 400; letter-spacing: -1px; }
#showcase.widget_text .inside { padding: 30px 0px; overflow: hidden; }
#showcase li p, #showcase p { margin-bottom: 0px; line-height: 1.25em; }
#showcase p strong { font-weight: bold; }
#showcase .inside a { color: #fff; text-decoration: none; text-shadow: none; }
#showcase .inside a:hover { color: #5c9c3c; }
#showcase .button a { color: #fff !important; text-shadow: 1px 1px 0 #468924; border: none; font-size: 1.25em !important; background: none #4a9127; text-decoration: none; margin-bottom: 20px; margin-top: 10px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#showcase .button a:hover { color: #fff; background: #5fb931; text-shadow: 1px 1px 0 #214011; text-decoration: none; }
/* @end */
/* @group Breadcrumbs */
#breadcrumbs { background: #f9f9f9; border: 1px solid #ebebeb; }
#breadcrumbs .sep { color: #8c8d87; text-shadow: #fff 1px 0px 1px; }
p#breadcrumbs a, p#breadcrumbs strong { color: #6b6b6b; }
/* @end */
/* @group Tabs */
ul.tabs { border-bottom: 1px solid #d4d4d4; }
ul.tabs li a { border: 1px solid #cacaca; background: #f6f6f6; }
ul.tabs li a { border-width: 1px 0 0 1px; }
ul.tabs li a.active { background: #fff; border-color: #cacaca; }
/* @end */
/* @group Toggles */
.toggle_container { background-color: #fff; }
ul.tabs a, p.trigger, p.trigger a { -webkit-user-select: none; -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none; }
p.trigger a:hover, p.trigger.active a:hover, p.trigger:hover a { color: #666; text-shadow: #fafafa -1px 1px 0; }
/* Active Toggle State */
p.trigger.active a { text-shadow: #fff 1px 1px 0; }
/* @end */
/* @group Testimonials */
.testimonials { margin: 20px 0px; }
.testimonials p { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 16px; color: #666; }
.testimonials cite { float: right; padding: 10px; font-weight: bold; font-style: normal; font-family: Sans-Serif; }
/* @end */
/* @group Latest Posts (shortcode) */
.latestposts .latest-item { padding-bottom: 15px; margin-bottom: 15px; }
.one_third .latestposts .latest-item { margin-bottom: 0; padding-bottom: 0; }
.latestposts .latest-excerpt p { font-size: 12px; margin: 0; }
.latestposts .latest-title a { font-size: 16px; text-decoration: none; font-weight: bold; }
.latestposts a.more-link, .latestposts a.button { padding: 6px 10px 6px 10px; background-image: none; font-size: 12px; }
.latest-img { border: 1px solid #fff; background-color: #f4f4f4; padding: 4px; margin: 5px 12px 4px 0px; -moz-box-shadow: 1px 1px 0px #cccccc; -webkit-box-shadow: 1px 1px 0px #cccccc; box-shadow: 1px 1px 0px #cccccc; behavior: url("../css/PIE.htc"); position: relative; }
/* @end */
/* @group Pagination */
/* Page and Post Navigation */
.pagination span, .pagination a:link { color: #fff; background: #0679d3; text-shadow: #fff 0 1px 0; -moz-box-shadow: 0px 1px 0px white; -webkit-box-shadow: 0px 1px 0px white; box-shadow: 0px 1px 0px white; behavior: url("../css/PIE.htc"); position: relative; }
.pagination a:hover, .pagination .current { color: #fff; background: #7ba722; text-shadow: #71991f 0 1px 0; }
/* @end */
/* @group Widgets */
.widget-container { margin-bottom: 20px; }
/*! Widget Headings */
.widget-container h3, .widget-container h4 { line-height: 120%; padding-bottom: 5px; border-bottom: 4px solid #eee; }
.widget-container a:hover { text-decoration: underline; }
/*! Widget Menus */
#sidebar .widget-container li.page_item a, #sidebar .widget-container li.menu-item a { border-bottom: none; text-decoration: none; font-weight: bold; font-weight: 600; }
#sidebar .widget-container li.page_item ul, #sidebar .widget-container li.menu-item ul { border-left: 1px solid #eee; margin: 5px 0px 5px 15px; }
#sidebar .widget-container li.page_item ul ul, #sidebar .widget-container li.menu-item ul ul { font-size: .85em; }
/*
Add Bullets to the core widgets
Uncomment the first rule below
to apply bullets to all widgets
*/
.widget-container ul li, .widget-container.widget_meta ul li, .widget-container.widget_archive ul li, .widget-container.widget_categories ul li, .widget-container.widget_recent_entries ul li, .widget-container ul.blogroll li { padding-left: 20px; background: url(./images/style1/bullet.png) no-repeat 0 0.25em; }
.widget-container ul.square li, .widget-container ul li li { background: none; padding-left: 0; }
/* Custom Menu Widget Images (arrows) */
#sidebar li.page_item a, #sidebar li.menu-item a { background: url(images/style1/arrow_bullet.png) no-repeat 8px 8px; text-decoration: none; }
#sidebar li.page_item a:hover, #sidebar li.menu-item a:hover { background: url(images/style1/arrow_bullet.png) no-repeat 8px -24px; }
/* Flickr Widget */
.flickr img { border: 1px solid #d8d8d8; background-color: #f9f9f9; padding: 4px; }
.flickr img:hover { border-color: #dcdcdc; }
#footer .flickr img { border: 1px solid #d4d4d4; background-color: #f4f4f4; padding: 4px; }
#footer .flickr img:hover { border: 1px solid #c1c1c1; background-color: #fff; position: relative; }
/* Social Networks Widget */
ul#stpl_social li a { font-weight: 400; }
/* @end */
/* Author Bio */
#author-info img.avatar { border: 1px solid #d8d8d8; background-color: #f9f9f9; padding: 4px; }
/* @group WP Overrides */
span.post_written, span.post_categories { font-family: DroidSerif, Georgia, "Times New Roman", Times, serif; font-style: italic; }
.postmeta a:link { color: #535353; text-decoration: none; border-bottom: 1px dotted #bbb; padding-bottom: 2px; }
.postmeta a:hover { text-decoration: none; border-bottom: 1px dotted #bbb; padding-bottom: 2px; color: #3b3b3b; }
.postmeta .post-comments a:link { text-decoration: none; border-bottom: none; padding-bottom: 0px; }
/* Post Images */
ul.advanced-recent-posts li img, .instapress img, .wp-post-image { margin-top: 5px; border: 1px solid #fff; background-color: #f4f4f4; padding: 5px; -webkit-box-shadow: 1px 1px 0px #CCC; -moz-box-shadow: 1px 1px 0px #CCC; box-shadow: 1px 1px 0px #CCC; position: relative; }
/* Staff Directory */
ul.staff_social { border-color: #CCC; }
/* all 1px border accents */
hr, .entry-utility, .entry-meta, .post, .postmeta.small, .st_relatedposts h4, #sidebar li.page_item a, #sidebar li.menu-item a { border-bottom: 1px solid #eaeaea; }
hr { background-color: #fefefe; }
body.single .entry-utility { border-bottom: none; }
/* @end */
/* @group Footer */
#footer { background: #4a9127 !important; color: #c8debe !important; text-shadow: 0px -1px 0px #35691c !important; border-top: 10px solid #3a711e !important; }
#footer h3 { color: #f3fbef !important; font-size: 1.25em; line-height: 1.5em; font-weight: 300; letter-spacing: normal; margin-top: 1.25em; }
#footer a { color: #d1e3c9 !important; text-shadow: none !important; }
#footer a:hover { color: #e3eede !important; }
#footermenu li { color: #5c9c3c !important; }
#footermenu li a { color: #a4c893 !important; text-decoration: none; }
#footermenu li a:hover { color: #fff !important; }
#credits { color: #a4c893 !important; text-shadow: none; }
/* @end */
/* @group Slider Customization */
.flex-container { -moz-border-radius: none; -webkit-border-radius: none; border-radius: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none; }
#showcase li.slide, #showcase .flexslider { background: transparent; }
#showcase .flex-direction-nav li a.next { right: -40px; }
#showcase .flex-direction-nav li a.prev { left: -40px; }
.flex-control-nav li a { background: url(./images/style1/bg_control_nav.png) no-repeat 0px 0px; width: 15px; height: 15px; }
#showcase .flex-control-nav li a { background: url(./images/style1/bg_control_nav.png) no-repeat 0px 0px; width: 15px; height: 15px; }
#showcase .flex-control-nav li a:hover, .flex-control-nav li a:hover { background-position: 0 -14px; }
#showcase .flex-control-nav li a.active, .flex-control-nav li a.active { background-position: 0 -28px; cursor: default; }
.flex-control-nav li { margin: 0 0 0 2px; }
/* @end */
/* Smaller Headings for Mobile Devices */
@media only screen and (min-width: 768px) and (max-width: 991px) { #wrap h1 { font-size: 2.25em; }
#wrap h2 { font-size: 1.85em; }
#wrap h3 { font-size: 1.5em; }
#wrap h4, #wrap h5, #wrap h6 { font-size: 1em; } }
@media only screen and (max-width: 767px) { #wrap h1 { font-size: 1.75em; }
#wrap h2 { font-size: 1.50em; }
#wrap h3 { font-size: 1.25em; }
#wrap h4, #wrap h5 { font-size: 1.15em; }
#wrap h6 { font-size: 1em; }
img.alignleft, img.alignright { float: none; margin: 0 auto; width: auto; }
.latestposts img.alignleft { float: left; }
#content-wrapper.landing #content { background: none; }
/* Centers the Logo in mobile layouts */
#wrap #header div#site-title a, #wrap #header h1#site-title a, #wrap .site-desc { margin: 0px auto; display: block; text-align: center; } }
#st_gmap { border-top: 10px solid #DBD5CA; width: 100%; height: 400px; }
/* @group Backstretch Slider */
#st_backstretch { height: 200px; width: 100%; position: relative; overflow: hidden; }
.backstretch-caption { position: absolute; font-weight: 400; display: block; width: auto; max-width: 75%; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); padding: 10px; font-size: 2em; line-height: 115%; color: #fff; display: none; -moz-border-radius: 2px 2px 0px 0px; -webkit-border-radius: 2px; border-radius: 2px 2px 0px 0px; }
.backstretch-caption a { color: #fff !important; text-decoration: none; }
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) { #st_backstretch { height: 150px !important; }
.backstretch-caption { font-size: 1em; } }
#backstretch-controls { position: absolute; bottom: 10px; left: 10px; padding: 5px 8px; background: rgba(0, 0, 0, 0.5); border-radius: 4px; }
#backstretch-controls a { width: 11px; height: 19px; display: block; text-indent: -9999em; float: left; background: url("./images/icons/backstretch-nav.png") no-repeat; }
#backstretch-controls a.backstretch-slide-prev { background-position: 0px -20px; margin: 0px 4px 0px 0px; }
#backstretch-controls a.backstretch-slide-prev:hover { background-position: 0px 0px; }
#backstretch-controls a.backstretch-slide-pause { width: 9px; background-position: -22px -20px; margin: 0px 4px 0px 4px; }
#backstretch-controls a.backstretch-slide-pause:hover { background-position: -22px 0px; }
#backstretch-controls a.backstretch-slide-next { background-position: -41px -20px; margin: 0px 0px 0px 4px; }
#backstretch-controls a.backstretch-slide-next:hover { background-position: -41px 0px; }
/* @end */
Raw
SassMeister-rendered.html
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en-US"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Mobius WordPress Theme | Just another WordPress site</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<!--[if lte IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<style type="text/css">
html button,
html .gallery .gallery-item img,
html .gallery .gallery-item img.thumbnail,
html ul.tabs li a.active,
html input[type="submit"],
html input[type="reset"],
html input[type="button"],
html .cta,
html a.button,
html a.more-link,
html #teaser,
html #breadcrumbs,
html #menu .columns,
html #menu.wide,
html .latest-img,
html .widget-container.S1,
html .widget-container.S2,
html .widget-container.S3,
html #author-info,
html ul.advanced-recent-posts li img,
html .instapress img,
html .st-callout,
html .wp-post-image {behavior: url("http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/PIE.php") !important;position: relative;}
</style>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/favicon.ico">
<link rel="apple-touch-icon" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/apple-touch-icon-114x114.png" />
<link rel="pingback" href="http://themes.simplethemes.com/mobius/xmlrpc.php" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="alternate" type="application/rss+xml" title="Mobius WordPress Theme &raquo; Feed" href="http://themes.simplethemes.com/mobius/feed/" />
<link rel="alternate" type="application/rss+xml" title="Mobius WordPress Theme &raquo; Comments Feed" href="http://themes.simplethemes.com/mobius/comments/feed/" />
<link rel='stylesheet' id='thickbox-css' href='http://themes.simplethemes.com/mobius/wp-includes/js/thickbox/thickbox.css?ver=20121105' type='text/css' media='all' />
<link rel='stylesheet' id='theme-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/style.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='skeleton-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/css/skeleton-960.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='style-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/style1.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='animate-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/css/animate-custom.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='prettyphoto-css' href='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/css/prettyphoto.css?ver=1.1' type='text/css' media='screen, projection' />
<link rel='stylesheet' id='open_sans-css' href='http://fonts.googleapis.com/css?family=Open+Sans%3A400italic%2C600italic%2C400%2C300%2C600%2C700%2C800&#038;ver=3.7.1' type='text/css' media='all' />
<script type='text/javascript' src='http://themes.simplethemes.com/mobius/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/javascripts/custom.js?ver=1.1'></script>
<script type='text/javascript' src='http://themes.simplethemes.com/mobius/wp-content/themes/mobius/mobius/javascripts/superfish.js?ver=1.1'></script>
<style type="text/css">
body {color:#383838;font-size:14px;font-family:"Open Sans", sans-serif;font-weight:normal;font-style:normal;background-color:#FFFFFF;}
h1.entry-title,h2.entry-title {color:#000000;font-size:38px;font-family:"Open Sans", sans-serif;font-weight:700;}
h1 {color:#111111;font-size:36px;font-family:"Open Sans", sans-serif;font-weight:700;}
h2 {color:#008bd1;font-size:32px;font-family:"Open Sans", sans-serif;font-weight:600;}
h3 {color:#333333;font-size:26px;font-family:"Open Sans", sans-serif;font-weight:400;}
h4 {color:#ea4e06;font-size:20px;font-family:"Open Sans", sans-serif;font-weight:300;}
h5,h6 {color:#008fd6;font-size:20px;font-family:"Open Sans", sans-serif;font-weight:300;}
h3.widget-title,h4.widget-title {color:#ea4e06;font-size:20px;font-family:"Open Sans", sans-serif;font-weight:300;}
#header #site-title,#site-title a {color:#ec5006;font-size:40px;font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal;}
.site-desc.text {color:#c1cfd3;font-size:24px;font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:normal;}
#st_topbar { background-color:#008fd6;}
#header {background-color:#00699e;background-position: top center;background-repeat: repeat-x;background-attachment: fixed;}
@media only screen and (max-width: 767px) {#header {background-color:#00699e;}}
a,a:link,a:visited,a:active {color: #00699e;}
a:hover {color: #00476b;}
#menu ul li a {padding: 0px 18px;}
#menu.right {left:250px;top:30px;}
#wrap #content {float:left;}
#wrap #sidebar {float:right;}
#wrap #sidebar .widget-container {margin-left: 20px;margin-right: 0px;}</style>
<style type="text/css">
#header #site-title.graphic a {background-image: url(http://themes.simplethemes.com/mobius/wp-content/themes/st-mobius-child/images/style1/logo.png);width: 180px;height: 70px;margin:20px 0px}
</style>
</head>
<body class="home page page-id-2 style1 dropdown-menu">
<div id="wrap">
<div id="st_topbar"><div class="container"><div class="sixteen columns"><div class="widget-extras nav_menu-2"><h3 class="widget-title">Menu</h3><div class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-4" class="menu-item-first menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="#">Home</a></li>
<li id="menu-item-737" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-737"><a href="#">Theme Features</a></li>
<li id="menu-item-13" class="menu-item-last menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="#">Blog</a></li>
</ul></div></div><div class="widget-extras socialwidget-3"><h3 class="widget-title">Connect</h3><div class="widget social"><ul id="stpl_social"><li class="stpl_flickr"><a rel="external" href="#">Follow on Flickr!</a></li><li class="stpl_gplus"><a rel="external" href="#">Follow on Google+</a></li><li class="stpl_pinterest"><a rel="external" href="#">Follow on Pinterest!</a></li><li class="stpl_facebook"><a rel="external" href="#">Follow on Facebook!</a></li><li class="stpl_twitter"><a rel="external" href="#">Follow on Twitter!</a></li><li class="stpl_linkedin"><a rel="external" href="#">Follow on LinkedIn!</a></li></ul></div></div><div class="widget-extras text-2"><h3 class="widget-title">Contact Us</h3> <div class="textwidget"><p><strong>1.800.555.1212</strong></p>
</div>
</div></div></div></div><div id="header" class="graphic">
<div class="container">
<div class="sixteen columns">
<h1 id="site-title" class="graphic"><a href="#" title="Mobius WordPress Theme">Mobius WordPress Theme</a></h1>
<span class="site-desc graphic">Just another WordPress site</span>
<div id="menu" class="right"><div class="menu-header"><ul id="nav" class="menu"><li id="menu-item-20" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-20"><a href="#">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19"><a href="#">Features</a>
<ul class="sub-menu">
<li id="menu-item-380" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-380"><a href="#">View All Features</a></li>
<li id="menu-item-373" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-373"><a href="#">Widget Locations</a></li>
<li id="menu-item-378" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Special Features</a></li>
<li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="#">Contact Form</a></li>
<li id="menu-item-379" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379"><a href="#">Button Styles</a></li>
</ul>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">Sample Blog</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="#">Typography</a></li>
<li id="menu-item-410" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-410"><a href="#">Shortcodes</a></li>
<li id="menu-item-662" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-662"><a href="#">Color Styles</a></li>
</ul></div><div class="clear"></div></div><!--/#menu--></div><!--/.container--></div><!--/.columns--></div><!--/#header-->
<div id="content-wrapper" class="standard"><div class="container main"><a id="top"></a><div id="content"><div class="sixteen columns">
<div id="post-2" class="post-2 page type-page status-publish hentry">
<div class="entry-content">
<div class="three_fourths remove-bottom">
<div class="subheading"><img class="alignleft size-thumbnail wp-image-95 featured scale-with-grid show-on desktop" alt="3273696052_8f525440df_o2" src="http://themes.simplethemes.com/mobius/wp-content/uploads/2013/09/3273696052_8f525440df_o2-150x150.jpg" />
<h3 class="dim90">Mobius WordPress Theme</h3>
<h4 class="lighter dim40">A Better Web Experience</h4>
</div>
<p class="largetext serif italic dim40">“Mobius is a simple WordPress theme aimed at users seeking an attractive, professional look with complete control over customization.”</p>
</div>
<div class="one_fourth remove-bottom last">
<h4 class="loose normal caps small brand-accent">Responsiveness</h4>
<p class="small">Mobius works flawlessly with all the latest handheld and mobile devices as well as popular desktop browsers down to IE7.</p>
<p class="small">It has lots of built-in goodies empowering you to build beautiful websites while focusing on content instead of code.</p>
</div>
<div class="clear"></div>
<div class="two_thirds">
<div class="aligncenter marginv20"><img class="scale-with-grid" src="http://themes.simplethemes.com/mobius/wp-content/uploads/2013/09/mobius-screens-layout6.png" alt="Mobius WordPress Theme"/></div>
</div>
<div class="one_third last">
<h3 class="dim90">Beautiful Color Presets!</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="clear"></div>
<div class="one_third">
<h3 class="dim90">Column</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="one_third">
<h3 class="dim90">Column</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="one_third last">
<h3 class="dim90">Column</h3>
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from &#8220;de Finibus Bonorum et Malorum&#8221; by Cicero are also reproduced in their exact original form.
</div>
<div class="clear"></div>
<div class="pagination"></div>
</div><!-- .entry-content -->
</div><!-- #post-## -->
<!-- You can start editing here. -->
<div id="comments">
</div>
</div><!-- /.columns -->
</div><!-- /#content -->
<div class="clear"></div> </div><!-- /.container (#content) -->
</div><!-- /#content-wrapper -->
<div id="footer" class="normal"><div class="container"><div class="sixteen columns">
<div class="one_third">
<div class="text-4"><h3 class="widget-title">Footer Widget One</h3> <div class="textwidget"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div></div>
<div class="one_third">
<div class="text-6"><h3 class="widget-title">Footer Widget Two</h3> <div class="textwidget"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div></div>
<div class="one_third last">
<div class="text-5"><h3 class="widget-title">Footer Widget Three</h3> <div class="textwidget"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div></div>
<div class="clear"></div>
<div id="footermenu" class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-817" class="menu-item-first menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-817"><a href="#">Home</a><span> | </span></li>
<li id="menu-item-820" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-820"><a title="Learn more about the Mobius Theme" href="#">Mobius WordPress Theme</a><span> | </span></li>
<li id="menu-item-818" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-818"><a title="Simple WordPress Themes" href="#">WordPress Themes</a><span> | </span></li>
<li id="menu-item-819" class="menu-item-last menu-item menu-item-type-custom menu-item-object-custom menu-item-819"><a title="Valid HXTML 5" href="#">Valid HXTML 5</a><span> | </span></li>
</ul></div><div class="clear"></div><div id="credits"><br /><a class="themeauthor" href="#" title="Simple WordPress Themes">WordPress Theme by Simple Themes</a></div></div><!--/.columns-->
</div><!--/.container-->
</div><!--/#footer-->
</div><!--/#footer-wrap-->
</div><!--/#wrap-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment