style.css

/*
	Theme Name: Volatyl Framework
	Theme URI: http://volatylthemes.com/
	Author: Volatyl Themes
	Author URI: http://volatylthemes.com/
	Description: Volatyl is a lightweight theme framework WordPress. The focus of Volatyl is leverage. Simple checkboxes perform complex tasks without breaking a sweat. Add content to any area of your website built-in hooks while controlling the columns layout on every single page or post. In other words, Volatyl creates unique websites with ease... period.
	Version: 1.4.7
	License: GNU General Public License Version 2
	License URI: license.txt
	Tags: white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	background: #fff;
}

body,
input,
textarea,
.cancel-reply {
	font-size: 15px;
	line-height: 1.6em;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0;
}


/* =Shared Commonly Used Styles
-------------------------------------------------------------- */

h6,
cite.fn,
input,
textarea,
#comment { 
	font-size: 1em; 
	line-height: 1.6em;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6,
.site-title,
.entry-title a,
.comments-title,
cite.fn { 
	font-weight: normal;
	margin: 0 0 1em;  
}

h1, 
h2 {
	margin: 0 0 .8em;  
}

.site-description,
.entry-meta,
.site-content h5, 
.site-content h6,
blockquote p,
.comment-date,
.comment-date a { 
	color: #666; 
}

pre,
.entry-meta,
.comment-date,
.comment-reply-link,
.wp-caption p,
.form-allowed-tags, 
.form-allowed-tags code {
	font-size: .86667em; 
	line-height: 1.6em; 
}

#header-area,
.site-footer,
#container > .site-header,
#menu-area-standard,
.header-navigation .menu li ul a,
.secondary-navigation .menu li ul li a,
.comments-content > ol > li.comment,
.comments-content > ol > li.pingback,
.children > li > .comment,
.comment-avatar,
.wp-caption,
abbr, 
acronym,
pre,
.form-allowed-tags,
.default-widget,
.paging-navigation,
.note,
input,
textarea,
#comment,
.cancel-reply {
	border: 1px solid rgba(0,0,0,.1);
}

#header-area,
#container > .site-header,
.comments-content > ol > li.comment,
.comments-content > ol > li.pingback,
.wp-caption,
.form-allowed-tags,
.default-widget {
	background: rgba(0,0,0,.05);
}

#menu-area-standard,
#fat-footer .default-widget {
	background: rgba(0,0,0,.02);
}

.nav-previous,
.nav-next {
	padding: 1.33334em 0;
}

pre,
.entry-header,
.entry-content #searchform,
.wp-caption.aligncenter,
.wp-caption.alignleft,
.wp-caption.alignright,
.site-content .gallery,
#content .form-allowed-tags { 
	margin-bottom: 1.33334em; 
}

abbr, 
acronym,
#header-area,
#menu-area-standard {
	border-width: 0 0 1px;
}

.entry-header h1, 
.entry-header h2, 
.entry-title {
	margin: 0 0 .33334em;
}

.site-content ul ul, 
.site-content ul ol,
.site-content ol ul, 
.site-content ol ol,
.post.pingback,
.post.pingback p,
.site-footer p:last-of-type,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	margin-bottom: 0;
}

.aligncenter,
.clearfix:after,
.inner:after,
.post:after,
.header-navigation .menu > li:hover > ul,
.secondary-navigation .menu li:hover > ul,
.secondary-navigation .menu li:hover ul li a,
.header-navigation .menu li ul a,
.secondary-navigation .menu li ul li a,
.post-nav-title,
.pagination span, 
.pagination a,
#fat-footer,
.wp-caption img,
.comments-title {
	display: block;
}


/* =Format
-------------------------------------------------------------- */

p,
address,
.site-footer .widget p { 
	margin: 0 0 1.46667em; 
}

.note {
	background: lightyellow;
	padding: 1em;
}

a {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

a,
.site-title a:hover,
.menu a:hover,
#content .entry-header a:hover {
	color: #367D98;
}

.entry-header h1 a, 
.entry-header h2 a,
.entry-title a { 
	color: #000;
	text-decoration: none; 
}

.assistive-text {
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
}

.alignleft {
	display: inline;
	float: left;
	margin: 0 1.46667em 1.46667em 0;
}

.alignright {
	display: inline;
	float: right;
	margin: 0 0 1.46667em 1.46667em;
}

.aligncenter {
	clear: both;
	margin: 0 auto;
}

#main-content,
#sidebars {
	word-break: break-word;
}

#main-content pre {
	word-break: normal;
}

.border-box,
#main-content .main,
input,
#comment,
textarea,
.site-header img,
.entry-content img,
.featured-img,
.comment-content img,
.widget img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}

.clearfix:after,
.inner:after,
.post:after {
	content: ".";
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

dd {
	margin: .33334em .66667em .66667em;
}

dt, 
b, 
strong {
	font-weight: bold;
}

dfn, 
cite, 
em, 
i, 
blockquote p, 
.site-content h6,
address {
	font-style: italic;
}

blockquote {
	margin: 0 1.33334em;
}

pre {
	background: rgba(0,0,0,.1);
	font-family: "Courier 10 Pitch", Courier, monospace;
	padding: 1em;
	overflow: auto;
	max-width: 100%;
}

code, 
kbd, 
tt, 
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr, 
acronym {
	cursor: help;
}

mark, 
ins {
	background: #fff9c0;
	text-decoration: none;
}

sup,
sub {
	font-size: 75%;
	height: 0;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

figure {
	margin: 0;
}

table {
	margin: 0 0 1.33334em;
	width: 100%;
}

th {
	font-weight: bold;
}

td {
	padding: .53335em;
}


/* =Main Site Elements
-------------------------------------------------------------- */

.full {
	width: 100%;
}

.main,
#container {
	width: 960px;
	margin: 0 auto;
}

.inner {
	position: relative; 
	padding: .66667em 1.33334em; 
}

#main-content {
	padding: 1.33334em 0;
}

#container > .site-header { 
	border-width: 0 1px 1px;
}

.site-footer { 
	padding: .66667em 1.33334em; 
	border-width: 1px 0 0;
}


/* =Header Elements
-------------------------------------------------------------- */

.site-title { 
	font-size: 2.66667em;
	line-height: 1.2em;
	margin: 0 0 .2em;
}

.site-title a { 
	color: #000;
	text-decoration: none; 
}

.site-description { 
	font-size: 1em;
	line-height: 1.6em;
	font-weight: normal;
	margin: 0; 
}

.header-navigation { 
	position: absolute; 
	top: 1.46667em; 
	right: 0; 
}


/* =Menus
-------------------------------------------------------------- */

.header-menu-toggle,
.secondary-menu-toggle {
	display: none;
	cursor: pointer;
}

.secondary-menu-toggle {
	padding: 1em .66667em;
}

#menu-area-footer {
	border-width: 1px 0 0;
}

.header-navigation,
.secondary-navigation {
	padding: 0 .66667em;
}

.menu {
	padding: 0;
	margin: 0;
}

.menu .current-menu-item > a:hover {
	color: #000; 
	cursor: text;
}

.menu li { 
	position: relative;
	display: inline-block; 
	list-style: none;
	padding: 1em .66667em; 
}

.header-navigation .menu li {
	z-index: 99999;
}

.menu a { 
	color: #000; 
	text-decoration: none;
}

.site-navigation {
	clear: both;
}


/* =Drop-down Menu
-------------------------------------------------------------- */

.menu ul {
	display: none;
}

.header-navigation .menu li ul,
.secondary-navigation .menu li ul {
	position: absolute;
	padding-left: 0;
	top: 100%;
	left: 0;
	z-index: 999;
}

.secondary-navigation .menu li ul li ul {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.secondary-navigation .menu li:hover ul li:hover ul {
	left: 201px;
}

.menu li:hover ul li {
	padding: 0;
}

.menu ul,
.sub-menu ul {
	margin-left: 0;
}

.menu li + li {
	margin-top: -1px;
}

.header-navigation .menu li ul a,
.secondary-navigation .menu li ul li a {
	background: #fafafa;
	padding: .66667em;
	width: 180px;
}

.header-navigation .menu li ul a {
	width: 120px;
}


/* =Content
-------------------------------------------------------------- */

.post,
.page.hentry {
	padding: 1.3334em 0;
}

.post:last-of-type,
.page.hentry:last-of-type {
	border-bottom: 0;
}

.post.top,
.page.top,
.post.no-results { 
	padding-top: 0;
}

.sticky { 
}

.post > .entry-summary > p:last-of-type {
	margin-bottom: 0;
}

.entry-summary p:empty { 
	display: none; 
}

.entry-meta { 
	margin: 0; 
}

.entry-meta.tags,
.page-links {
	padding: 1.33334em 0 0;
}

.post-meta-footer {
	clear: both;
}

h1, 
h2 { 
	font-size: 2em; 
	line-height: 1.4em; 
}

h3 { 
	font-size: 1.6em; 
	line-height: 1.41667em; 
}

h4,
h5, 
.widget h4.widget-title { 
	font-size: 1.2em; 
	line-height: 1.5em; 
}

.site-content ul, 
.site-content ol,
#comments ol,
#comments ul { 
	padding-left: 0; 
	margin: 0 0 2em 2em; 
}

#main-content ul ul,
#main-content ol ol,
#main-content ol ul,
#main-content ul ol {
	padding-bottom: 0;
	margin-bottom: 0;
}

.site-content li {  
	padding: .53335em 0; 
}

.site-content li:last-child { 
	border: none; 
}

.paging-navigation {
	border-width: 1px 0 0;
	border-style: solid;
}
	
.pagination {
	position: relative;
	padding: 1.33334em 0;
}
 
.pagination span, 
.pagination a {
	float: left;
	text-decoration: none;
	padding: 0 .66667em;
	margin: 2px 2px 2px 0;
	width: auto;
}

.pagination a:hover {
	text-decoration: underline;
}

.pagination > span:first-child {
	padding-left: 0;
}

.nav-previous,
.nav-next {
	display: block;
}

.nav-previous, 
.nav-next {
	float: none;
	width: 50%;
}

.nav-previous {
	float: left;
	padding-right: .66667em;
}
 
.nav-next {
	float: right;
	padding-left: .66667em;
}

.paging-navigation .nav-next,
.comment-navigation .nav-next,
.image-navigation .nav-next {
	text-align: right;
}


/* =Comments & Pings
-------------------------------------------------------------- */

.comments-content > ol > li,
.form-allowed-tags {
	padding: 1em;
	margin: 1em 0;
}

#content .form-allowed-tags {
	margin-bottom: 2em;
}

#comments > ol,
.comments-content > ol li.comment,
.comments-content > ol li.pingback {
	list-style: none;
}

.comments-title {
	font-size: 1.2em;
	margin-bottom: 1em;
}

#comments .commentlist {
	margin-left: 0;
}

#comments .children {
	margin: 2em 0 0 1.33334em;
	padding-left: 0;
}

.children .comment + .comment {
	margin-top: 1.33334em;
}

#comments .children > li > .comment {
	border-width: 0 0 0 1px;
	padding-left: 1em;
}

.comment-avatar {
	float: right;
	background: white;
	line-height: 0;
	padding: 6px;
	margin: 0 0 .66667em .66667em;
}

.comment-date {
	display: inline;
	margin: 0 0 0 1em; 
}

cite.fn {
	font-weight: bold;
	font-style: normal;
}

.comment-form-comment textarea {
	max-width: 100%;
}

.comment-reply-link {
	text-transform: uppercase;
}

#cancel-comment-reply-link {
	text-decoration: none;
}

.cancel-reply {
	font-weight: 400;
	background: #f00;
	padding: .4em;
	color: #fff;
}

#comment {
	width: 100%;
}

.bypostauthor {
}


/* =Sidebars & Widgets
-------------------------------------------------------------- */

#sidebars,
.footer-widget {
	word-wrap: break-word;
}

.widget {
	margin: 0 0 2.66667em;
}

.footer-widget .widget {
	margin-bottom: 2em;
}

.widget,
.attribution {
	font-size: .86667em;
	line-height: 1.6em;
}

.widget h4 {
	font-weight: normal;
}

.widget li {
	margin-bottom: .66667em;
}

.default-widget {
	padding: 1em;
}


/* =Footer
-------------------------------------------------------------- */

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

#fat-footer {
	margin-top: 15px;
}

.one-footer-col .footer-widget {
	width: 100%;
}

.two-footer-col .footer-widget {
	float: left;
	margin-right: 4%;
	width: 48%;
}

.three-footer-col .footer-widget {
	float: left;
	margin-right: 3%;
	width: 31.33334%;
}

.footer-widget:last-of-type {
	margin-right: 0;
}


/* =Input Elements
-------------------------------------------------------------- */

input {
	font-size: 1em;
	line-height: 1.6em;
}

input,
textarea,
#comment { 
	padding: .4em; 
	margin: 0 .66667em 0 0; 
}

#comments textarea {
	margin-right: 0;
}

input[type="submit"] { 
	background: #367D98; 
	color: #fff; 
	margin: 0;
	cursor: pointer; 
}

input[type="submit"]:hover,
.cancel-reply:hover { 
	background: #999; 
}

#searchsubmit {
	display: none;
}


/* =Media
-------------------------------------------------------------- */

img,
.comment-content img,
.widget img,
.featured-img {
	max-width: 100%;
}

img,
.site-header img,
.entry-content img,
.featured-img,
img[class*="align"],
img[class*="wp-image-"] {
	height: auto; 
}

.site-header img,
.entry-content img,
img.size-full {
	max-width: 100%;
}

.featured-img {
	margin-bottom: 1em;
}

.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-top: 0;
	padding: 0;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption img {
	margin: .33334em auto 0;
	max-width: 98%;
	height: auto;
}

.wp-caption-text,
#wp-calendar td {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: .8em 0;
}

.gallery-caption {
}

.site-content .gallery a img {
	border: none;
	height: auto;
	max-width: 90%;
}

.site-content .gallery dd {
	margin: 0;
}

.site-content .gallery-columns-4 .gallery-item {
}

.site-content .gallery-columns-4 .gallery-item img {
}

embed,
iframe,
object {
	max-width: 100%;
}

select {
	max-width: 100%;
}


/* =Column Layouts
-------------------------------------------------------------- */

.scs #wrap, 
.cs #content, 
.css #content, 
.sc #sidebars, 
.c2 .sidebar-1, 
.three-col .sidebar-1,
.css .sidebar-2, 
.ssc .sidebar-2 {
	float: left;
	padding: 1.33334em;
}

.c2 .sidebar-2, 
.cs #sidebars, 
.sc #content, 
.scs #content, 
.scs .sidebar-2, 
.ssc #content {
	float: right;
	padding: 1.33334em;
} 

.ssc .pagination, 
.sc .pagination {
	padding: 1.33334em 0;
}

.one-col #content { 
	width: 100%; 
	padding: 1.33334em;
}

.c2 .sidebar-1, 
.c2 .sidebar-2 { 
	width: 50%; 
}

.two-col #content { 
	width: 620px; 
}

.two-col #sidebars { 
	width: 340px; 
}

.css #content, 
.ssc #content { 
	width: 528px; 
}

.three-col #sidebars { 
	width: 216px; 
}

.scs #sidebars { 
	width: 235px;
}

.scs #wrap { 
	width: 725px; 
	padding: 0; 
}

.scs #content { 
	width: 490px;
}

#main-content #content {
	padding-top: 0;
	padding-bottom: 1.33334em;
}

#main-content #sidebars {
	padding-top: .66667em;
}


/* =Custom Page Templates
-------------------------------------------------------------- */

.landing .site-header,
.landing .site-footer,
.landing #content .entry-header,
.squeeze #content .entry-header  { 
	text-align: center; 
}

.landing .site-title { 
	margin-bottom: 0; 
}

.landing #main-content .main,
.landing #container #main-content { 
	width: 650px; 
	margin: 0 auto; 
}

.squeeze #main-content .main,
.squeeze #main-content { 
	width: 850px; 
	margin: 0 auto; 
}

.landing #content,
.squeeze #content { 
	width: 100%; 
	padding-bottom: 0; 
}


/* =Lightweight Responsiveness
The responsive CSS is located in the /responsive.css file ---- */