CSS theme to study

#css - #design

/* #######################################################################

	Theme Name: MeanThemes
	Theme URI: http://meanthemes.com
	Description: MeanThemes... theme :)
	Author: MeanThemes
	Author URI: http://www.meanthemes.com
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Version: 1.1.2
	Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images

########################################################################

	0.  CSS Reset, Font setup and Plugins
	1.	WordPress defaults
	2.	General Layout
	3.	Home Template
	4.	Standard Default & Full Width Template
	5.	Single (Blog Article)
	6.	Buttons
	7.	Archive
	8.	Contact
	9.	Typography & Text Colours
	10.	Shortcodes
	11.	Pesky Internet Explorer Fixes
	12.	Responsive Layer
	13.	Print

/* #######################################################################

	0.  CSS Reset, Font setup and Plugins

####################################################################### */

@import url(//fonts.googleapis.com/css?family=Lato:100,300,400);

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
body{font:13px/1.231 sans-serif;}
select,input,textarea,button{font:99% sans-serif;}
pre,code,kbd,samp{font-family:monospace, sans-serif;}
html{overflow-y:scroll;}
a:hover,a:active{outline:none;}
ul,ol{margin-left:2em;}
ol{list-style-type:decimal;}
nav ul,nav li{list-style:none;list-style-image:none;margin:0;}
small{font-size:85%;}
strong,th{font-weight:700;}
td{vertical-align:top;}
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-.5em;}
sub{bottom:-.25em;}
pre{white-space:pre-wrap;word-wrap:break-word;padding:1em;}
textarea{overflow:auto;}
.ie6 legend,.ie7 legend{margin-left:-7px;}
input[type="checkbox"]{vertical-align:bottom;}
.ie7 input[type="checkbox"]{vertical-align:baseline;}
label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer;}
button,input,select,textarea{margin:0;}
input:invalid,textarea:invalid{border-radius:none;-moz-box-shadow: none;-webkit-box-shadow:none;box-shadow:none;}
.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd;}
button{width:auto;overflow:visible;}
.ie7 img{-ms-interpolation-mode:bicubic;}
input[type="radio"],.ie6 input{vertical-align:text-bottom;}

.bugme { z-index: 99999999; }

/* #######################################################################

	0.1 Plugin - meanMenu

####################################################################### */

/* hide the link until viewport size is reached */
a.meanmenu-reveal {
display: none;
}
/* when under viewport size, .mean-container is added to body */
.mean-container .mean-bar { 
float: left;
width: 100%;
position: absolute;
padding: 10px 0;
min-height: 33px;
z-index: 1;
}
.mean-container a.meanmenu-reveal {
width: 22px;
height: 22px;
padding: 14px 10px 8px 10px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
font-size: 16px;
text-indent: -9999em;
line-height: 22px;
font-size: 1px;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
}
.mean-container a.meanmenu-reveal span {
display: block;
background: #fff;
height: 3px;
margin-top: 3px;
}
.mean-container .mean-nav { 
float: left;
width: 100%;
background: #3f4242;
margin-top: 33px;
}
.mean-container .mean-nav ul {
width: 100%;
} 
.mean-container .mean-nav ul li {
text-align: left;
}
.mean-container .mean-nav ul li a {
display: block;
float: left;
width: 96%;
padding: 1em 2%;
color: #fff;
border-top: 1px solid #ccc;
border-top: 1px solid rgba(255,255,255,0.5);
text-decoration: none;
/* padding-left: 1em; */
}
.mean-container .mean-nav ul li:first-child a { 
border: none; 
}
.mean-container .mean-nav ul li li a, .mean-container .mean-nav ul li:first-child li a {
border-top: 1px solid #efefef !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
padding-left: 3em;
}
.mean-container .mean-nav ul li a:hover { 
background: #252525;
background: rgba(255,255,255,0.1); 
}
.mean-container .mean-push { 
float: left;
width: 100%;
padding: 0;
margin: 0;
clear: both; 
}

/* #######################################################################

	1.	WordPress defaults

####################################################################### */

.alignnone {
margin:5px 0 20px;
}
a img.alignnone {
margin:5px 20px 20px 0;
}
a img.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
.aligncenter,
 div.aligncenter,
 .aligncenter {
display:block;
margin:5px auto;
}
.alignright,
 a img.alignright {
float:right;
margin:5px 0 20px 20px;
}
.alignleft,
 a img.alignleft {
float:left;
margin:5px 20px 20px 0;
}
.sticky {}
.gallery-caption { 
font-style: oblique;
}
.bypostauthor .avatar { 
border-color: #ccc; 
}

/* #######################################################################

	2.	General Layout

####################################################################### */

body {
background: #fff;
}
a {
text-decoration: underline;
-o-transition: color 0.25s ease-in;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.25s ease-in;
}
a:hover {
text-decoration: underline;
-o-transition: color 0.25s ease-in;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.25s ease-in;
}
a img {
border: none;
}
input, textarea {
border: 1px solid #d0cfc6;
border-radius: 4px;
background: none;
padding: 4px;
-webkit-appearance: none;
}
input:hover, textarea:hover, input:focus, textarea:focus {
background: #fff;
border: 1px solid #939a9a;
box-shadow: none;
outline: none;
-webkit-appearance: none;
color: #3f4242;
}
.wrapper {
margin: 0 auto;
width: 940px;
text-align: center;
}
header, footer {
float: left;
width: 100%;
}
label, input, textarea {
float: left;
width: 96%;
}
textarea {
height: 300px;
}
header {
position: relative;
width: 96%;
padding: 10px 2% 12px 2%;
background: #3f4242;
z-index: 99;
}
header nav {
float: right;
text-align: right;
}
header nav ul li {
display: inline;
padding: 0;
margin: 0 0 0 -3px;
}
header nav ul li a {
padding: 17px 26px;
-o-transition: background 0.25s ease-in;
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in;
transition: background 0.25s ease-in;
}
header nav ul li a:hover, li.current-menu-item a, li.current-post-ancestor a, li.current-menu-parent a, li.current-post-parent a, li.current-cat a, li.active_page a {
background: #272929;
-o-transition: background 0.25s ease-in;
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in;
transition: background 0.25s ease-in;
}
header img {
float: left;
padding-top: 4px;
opacity: 0.2;
filter: alpha(opacity=20);
-o-transition: opacity 0.25s ease-in;
-webkit-transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
transition: opacity 0.25s ease-in;
}
header a img:hover {
opacity: 0.75;
filter: alpha(opacity=50);
-o-transition: opacity 0.25s ease-in;
-webkit-transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
transition: opacity 0.25s ease-in;
}
.divide-surround {
float: left;
width: 100%;
padding: 0;
margin: 0;
}
.divide {
margin: 3.5em auto;
width: 382px;
border-top: 1px solid #e0e1e1;
}
.newsletter {
width: 660px;
}
.newsletter input, .newsletter button { 
font-size: 24px;
font-family: "Lato", Arial, Helvetica, Geneva, sans-serif;
font-weight: 300;
color: #636868;
background: #fafafa;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 0 20px;
height: 45px;
}
.newsletter input { 
width: 488px; 
-webkit-appearance: textfield;
outline: none;
line-height: 26px;
-o-transition: background 0.25s ease-in; 
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in; 
transition: background 0.25s ease-in;
-o-transition: color 0.25s ease-in; 
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in; 
transition: color 0.25s ease-in;
}
.newsletter input:required { 
box-shadow: none; 
}
.newsletter input:hover { 
color: #3f4242;
border: 1px solid #d5d5d5; 
-o-transition: background 0.25s ease-in; 
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in; 
transition: background 0.25s ease-in;
-o-transition: color 0.25s ease-in; 
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in; 
transition: color 0.25s ease-in;
}
.newsletter button { 
float: left;
margin-left: -1em; 
background: #ebebeb;
border: 1px solid #d4d4d4;
color: #636868;
padding: 6px 30px;
height: 47px;
line-height: 18px;
cursor: pointer;
-o-transition: background 0.25s ease-in; 
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in; 
transition: background 0.25s ease-in;
-o-transition: color 0.25s ease-in; 
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in; 
transition: color 0.25s ease-in;
}
.newsletter button:hover { 
-o-transition: background 0.25s ease-in; 
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in; 
transition: background 0.25s ease-in;
-o-transition: color 0.25s ease-in; 
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in; 
transition: color 0.25s ease-in;
background: #eaeaea;
color: #333;
border: 1px solid #d5d5d5;
}
footer {
margin-top: 8.5em;
border-top: 1px solid #f4f4f4;
background: #f9f9f9;
padding: 3.5em 0 1.5em 0;
}
footer .wrapper {
text-align: left;
}
footer p.left {
float: left;
width: 45%;
}
footer p.right {
float: right;
width: 45%;
text-align: right;
}

/* #######################################################################

	3.	Home Template

####################################################################### */

.preview {
position: relative;
margin-bottom: 6.5em;
}
.preview img,
.attachment-archive-thumb {
border: 1px solid #eee;
}
.preview a.peek {
position: absolute;
bottom: 0;
left: 0;
width: 100.25%;
text-decoration: none;
padding: 0.75em 0;
background: #bb411b;
-o-transition: background 0.25s ease-in;
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in;
transition: background 0.25s ease-in;
}
.preview a:hover.peek {
background-color: #272929;
text-decoration: none;
-o-transition: background 0.25s ease-in;
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in;
transition: background 0.25s ease-in;
}


/* #######################################################################

	4.	Standard Default & Full Width Template

####################################################################### */

article .article h2 {
text-align: center;
margin: 0 0 1em 0;
}
article .article {
text-align: left;
}
.page article ol {
margin-bottom: 1em;
}
.page article ul {
padding: 0;
margin: 2em 0 1em 0;
width: 85%;
}
.page article ul li {
padding: 0 0 0 30px;
margin: 0 0 1em 0;
list-style-type: none;
background: url(assets/img/tick.png) 0 6px no-repeat;
}
.center {
float: left;
width: 100%;
padding: 1em 0;
text-align: center;
}
.one_half ul {
float: right;
}
.one_half.last ul {
float: left;
}
.page-template-page-signup-php section {
min-height: 650px;
}

/* #######################################################################

	5.	Single (Blog Article)

####################################################################### */

.single article ul {
margin-bottom: 1em;
}
.single article img {
margin-bottom: 2em;
}
.single article a.btn {
float: left;
margin-top: 0.5em;
}
.contact-form aside {
float: left;
width: 100%;
margin-top: 1em;
}
.contact-form aside label {
text-align: left;
}
.contact-form textarea {
height: 150px;
}
.form-submit input {
float: left;
width: auto;
}
.page-template-page-support-php .contact-form textarea {
height: 350px;
}
ol.commentlist { 
padding: 0;
margin: 0;
width: 100%;
float: left;
text-align: left;
}
ol.commentlist li { 
list-style-type: none; 
padding: 0 0 10px 0;
margin: 28px 0 50px 0;
position: relative;
float: left;
width: 100%;
border-bottom: 1px solid #c2c2be;
}
ol.commentlist li li { 
 padding-left: 1em;
 padding-top: 28px;
 border-top: 1px solid #c2c2be; 
 border-bottom: none; 
}
.comment-author img { 
float: left;
margin-right: 16px; 
margin-top: 6px;
}
a.comment-reply-link { 
text-decoration: none;
}
ol.commentlist li li a.comment-reply-link { 
margin-top: 28px;
}
.comment-body {
padding: 10px 0 0 0;
}

.comment-body em { 
float: left;
width: 100%;
padding: 4px 0 12px 0;
display: block; 
}
.comment-body em:before,
.comment-body em:after { 
content: " - "; 
}


/* #######################################################################

	6.	Buttons

####################################################################### */

a.btn, button, .form-submit input, a.comment-reply-link {
background: #bb411b;
border-radius: 2px;
text-decoration: none;
padding: 0.25em 1.75em 0.45em 1.75em;
-o-transition: background 0.25s ease-in;
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in;
transition: background 0.25s ease-in;
border: none;
}
a.btn.twitter {
background: #00aced;
}
a:hover.btn, button:hover, form-submit input:hover, a:hover.comment-reply-link {
background: #272929;
-o-transition: background 0.25s ease-in;
-webkit-transition: background 0.25s ease-in;
-moz-transition: background 0.25s ease-in;
transition: background 0.25s ease-in;
}
.preview a.btn {
position: absolute;
top: -1em;
left: 31%;
width: 80px;
display: block;
}
.preview a.btn.buy {
left: auto;
right: 31%;
}
.navigation {
float: left;
width: 100%;
margin: 1em 0 0 0;
}

/* #######################################################################

	7.	Archive

####################################################################### */

.article-archive {
float: left;
}
.article-archive img {
border: 1px solid #eee;
padding: 0;
margin: 0;
}
.entry-summary {
float: left;
text-align: left;
width: 66%;
margin-top: 2em;
}
.entry-link {
float: right;
text-align: right;
width: 30%;
margin-top: 2.5em;
}
.article-archive hgroup {
padding-bottom: 3em;
}

/* #######################################################################

	8.	Contact

####################################################################### */
.contact-form {
padding: 1em 0;
float: left;
width: 100%;
}
.contact-form p {
margin-bottom: 1em;
float: left;
width: 100%;
}
.contact-form p.form-submit {
text-align: center;
}
.contact-form label span {
color: #bb411b;
}
.status {
float: left;
width: 96%;
padding: 10px 2% 0 2%;
border-radius: 4px;
margin: 0.5em 0 1em 0;
}
.status.oops {
padding: 10px 2%;
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #e13131;
}
.status.less-oops {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}
.status.ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}
.contact-form .error {
color: #e13131;
} 
.contact-form input.error, .contact-form textarea.error {
border: 1px solid #e13131;
}

/* #######################################################################

	9.	Typography & Text Colours

####################################################################### */

body, input, textarea, button, .form-submit input {
font: 18px/1.5em "Lato", Arial, sans-serif;
color: #636868;
font-weight: 300;
}
a {
color: #bb411b;
}
a:hover {
color: #252525;
}
p {
margin-bottom: 20px;
}
header nav a, header nav a:hover {
color: #d2d3d3;
text-decoration: none;
font-size: 14px;
font-weight: 300;
}
hgroup h1 {
padding: 2.5em 0 0 0;
font-size: 48px;
line-height: 1.3em;
}
.home.page h1 {
padding: 3em 0 1em 0;
}
.home.page h2, .footer h2 {
color: #4c5050;
font-size: 42px;
}
.home.page h3, .footer h3, .page h2, .archive h2, .single h2, .single h3 {
color: #636868;
padding: 0.5em 0 3.5em 0;
font-size: 28px;
line-height: 1.1em;
}
.page h2, .archive h2, .single h3 {
padding-bottom: 0;
}
.single h2 {
padding-bottom: 0.5em;
}
.page h3, .archive h3 {
color: #4c5050;
padding: 0.5em 0 0 0;
font-size: 24px;
line-height: 1.3em;
text-align: center;
}
.page h3 {
padding-bottom: 20px;
}
a.btn, button, .preview a.peek, .form-submit input, a.comment-reply-link {
color: #fff;
font-size: 24px;
}
a.btn.twitter {
font-size: 18px;
}
a.comment-reply-link {
font-size: 16px;
}
.preview a.peek {
font-size: 18px;
}
footer, footer a {
font-size: 11px;
color: #b1b3b4;
font-weight: 300;
text-decoration: none;
}
.page article ul li {
line-height: 1.3em;
}
.article-archive {
font-size: 16px;
}
.article-archive h3 {
font-size: 36px;
}
.article-archive h4 {
color: #636868;
font-size: 28px;
padding-bottom: 0.5em;
line-height: 1.3em;
}
.article-archive h3 a {
color: #4c5050;
text-decoration: none;
}

ul.post-sharer {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
ul.post-sharer li {
	background: none !important;
	display: inline;
	margin-right: 20px;
	margin-left: 0 !important;
	padding: 0 !important;
}
ul.post-sharer li a {
	margin-left: 10px;
	display: inline-block;
	padding: 4px 14px 6px 14px;
	border-radius: 5px;
	background: #272929;
	color: #fff;
	text-decoration: none;
	-o-transition: background 0.25s ease-in;
	-webkit-transition: background 0.25s ease-in;
	-moz-transition: background 0.25s ease-in;
	transition: background 0.25s ease-in;
}
ul.post-sharer li a:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
	-o-transition: background 0.25s ease-in;
	-webkit-transition: background 0.25s ease-in;
	-moz-transition: background 0.25s ease-in;
	transition: background 0.25s ease-in;
}


/* #######################################################################

	10.	Shortcodes

####################################################################### */

.one_half {
width:48%;
}
.one_third {
width:30.66%;
}
.two_third {
width:65.33%;
}
.one_fourth {
width:22%;
}
.three_fourth {
width:74%;
}
.one_fifth {
width:16.8%;
}
.two_fifth {
width:37.6%;
}
.three_fifth {
width:58.4%;
}
.four_fifth {
width:67.2%;
}
.one_sixth {
width:13.33%;
}
.five_sixth {
width:82.67%;
}
.one_half,
 .one_third,
 .two_third,
 .three_fourth,
 .one_fourth,
 .one_fifth,
 .two_fifth,
 .three_fifth,
 .four_fifth,
 .one_sixth,
 .five_sixth {
position:relative;
margin-right:4%;
float:left;
}
.last {
margin-right:0 !important;
clear:right;
}
.clearboth {
clear:both;
display:block;
font-size:0;
height:0;
line-height:0;
width:100%;
}

/* #######################################################################

	11.	Pesky Internet Explorer Fixes

####################################################################### */

.oldie body, .oldie header {
min-width: 940px;
}
.oldie input, .ie9 input {
line-height: 1em;
}
.oldie .newsletter input {
line-height: 45px;
}

/* #######################################################################

	12.	Responsive Layer

####################################################################### */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

.page article ul li {
background: url(assets/img/tick-@2x.png) 0 14px no-repeat;
background-size: 16px 13px;
}
}
@media screen and (max-width: 940px) {
.wrapper {
width: 96%;
padding-left: 2%;
padding-right: 2%;
}
.entry-summary, .entry-link{
width: 100%;
float: left;
text-align: left;
}
}
@media screen and (max-width: 780px) {
.peek {
width: 96.25% !important;
margin-left: 2%;
}
.preview a.btn {
left: 27%;
}
.preview a.btn.buy {
left: auto;
right: 27%;
}
.newsletter input {
width: 83%;
padding-left: 0;
padding-right: 0;
text-indent: 20px;
}
}
@media screen and (max-width: 770px) {
body {
background: url(assets/img/menu.png) 0 0 repeat-x;
}
img.wp-post-image {
max-width: 100%;
width: 100%;
}
header {
position: absolute;
left: 0;
top: 0;
background: none;
z-index: 99 !important;
width: 50%;
}
header nav {
position: absolute;
left: -9999em;
}
}
@media screen and (max-width: 700px) {
a.btn, button, .form-submit input {
padding-left: 10px;
padding-right: 10px;
}
.newsletter input {
width: 98.75%;
padding-left: 0;
padding-right: 0;
text-align: center;
text-indent: 0;
}
.newsletter button, .newsletter button:hover {
margin: 0;
padding: 0;
width: 99.15%;
border-top: none;
}
}
@media screen and (max-width: 480px) {
.page-template-page-signup-php section {
min-height: 0;
}
.preview {
width: 90%;
margin-left: 2%;
}
.preview a.btn {
left: 1em;
}
.preview a.btn.buy {
left: auto;
right: 1em;
}
.preview a.peek {
padding-top: 0.25em;
padding-bottom: 0.25em;
}
.one_half {
width: 94%;
margin-left: 2%;
}
.one_half ul {
float: left;
width: 100%;
}
.one_half.last ul {
margin-top: -1em;
}
footer p.left, footer p.right {
width: 100%;
text-align: left;
}
}
@media screen and (max-width: 320px) {
.divide {
width: 90%;
}
a.btn, button, .form-submit input, .newsletter input, .newsletter button {
font-size: 18px;
}
}

/* #######################################################################

	13.	Print

####################################################################### */

@media print {
 @import "print.css";
}
From JR's : articles
2345 words - 22334 chars - 13 min read
created on Aug 29, 2013 at 04:20:50 pm - #
source - versions