website-mehlmx/style.css

/*
Theme Name: Simplicity Extra-Lite
Theme URI: http://mehl.mx
Author: Max Mehl
Author URI: http://mehl.mx
Description: Heavily Modified and shrinked version of Simplicity lite Wordpress theme by D5 Creation
Version: 1.0
Tags: maxmehl
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simplicity
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */


/* BASIC STUFF */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
  border:0;
  font-family:inherit;
  font-size:100%;
  font-style:inherit;
  font-weight:inherit;
  margin:0;
  outline:0;
  padding:0;
  vertical-align:baseline;
}

:focus{
  outline:0;
}

a img{
  border:0;
}

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

div, p, a, li, img{
  transition:all 1s;
  -moz-transition:all 1s;
  -o-transition:all 1s;
  -webkit-transition:all 1s;
  hyphens: auto;
}

#container{
  /* width:930px; */
  margin:40px auto;
}

#header{
  height:70px;
  background:none repeat-x scroll 0 0 #333333;
}

#header-bottom{
  background:none no-repeat scroll center top #0AB4F3;
  height:70px;
  margin:-7px 0 -130px;
}

#header-content {
  margin: auto;
  max-width: 620px;
}

body{
  color:#6a6969;
  font-family:'Anaheim', sans-serif;
  font-size:14px;
  line-height:1.15;
  /*min-width:620px;*/
  word-wrap:break-word;
}


#content{
  float:left;
  width:70%;
}

/* MENU */
#simplicity-main-menu{
  color:#EEEEEE;
  float:left;
  line-height:1;
  width:100%;
}

#simplicity-main-menu ul{
  list-style:none outside none;
}

#simplicity-main-menu li{
  float:left;
  position:relative;
  margin:0 5px;
}

#simplicity-main-menu a{
  color:#AAAAAA;
  display:block;
  font-size:13px;
  min-width:40px;
  padding:25px 10px 15px;
  position:relative;
  text-align:center;
  text-transform:uppercase;
  border-bottom:5px solid transparent;
}

#simplicity-main-menu a:hover,
#simplicity-main-menu .current-menu-item > a,
#simplicity-main-menu .current-menu-ancestor > a,
#simplicity-main-menu .current_page_item > a,
#simplicity-main-menu .current_page_ancestor > a{
  color:#45a9f6;
  border-bottom:5px solid #45a9f6;
}

#simplicity-main-menu li ul{
  float:left;
  position:relative;
  margin:0;
}

#simplicity-main-menu ul ul,
.sub-menu, .sub-menu ul ul{
  display:none;
  float:left;
  left:0;
  position:absolute;
  border-bottom:5px solid #000000;
  border-top:5px solid #000000;
  border-radius:5px;
  background:#F2F2F2;
  background:rgba(242, 242, 242, 0.95);
  padding:5px;
  box-shadow:0px 0px 5px 0px #000000;
  z-index:10000;
}

#simplicity-main-menu ul li ul li{
  margin:0;
}

#simplicity-main-menu ul ul ul{
  left:100%;
  top:0;
  z-index:999;
}

#simplicity-main-menu ul ul a{
  border-bottom:1px solid #BFBFBF;
  border-top:1px solid #FFFFFF;
  color:#242424;
  padding:9px 15px;
  width:140px;
  text-align:left;
  text-transform:none;
}

#simplicity-main-menu ul ul a:hover,
#simplicity-main-menu ul ul .current-menu-item > a,
#simplicity-main-menu ul ul .current-menu-ancestor > a,
#simplicity-main-menu ul ul .current_page_item > a,
#simplicity-main-menu ul ul .current_page_ancestor > a{
  background:#555555;
  color:#EEEEEE;
  border-bottom:1px solid #BFBFBF;
}

#simplicity-main-menu ul li:hover > ul{
  display:block;
}


/* CONTAINER */
h1{
  font-size:30px;
}

h2{
  font-size:23px;
}

h1, h2, h2 a, h2 a:visited, h3, h4, h5, h6{
  font-family:'News Cycle', sans-serif;
  font-weight:bold;
  line-height:1.25;
  margin:0 0 10px;
}

h1,h2,h3,h4,h5,h6{
  clear:both;
}

p{
  color:#6A6969;
  margin-bottom:15px;
}

a{
  color:#0387BF;
  text-decoration:none;
}

a:visited{
  color:#0387BF;
  text-decoration:none;
}

#container,
#content,
#content-full{
  font-size:16px;
  text-align:justify;
}

#content img,
#content-full img{
  height:auto;
  max-width:100%;
  vertical-align:middle;
}



#heading{
  color:#ffffff;
  font-size:35px;
  margin:40px auto;
  text-align:center;
  /* width:700px; */
  font-weight:100;
  padding:20px 20px 0px 20px;
}

.heading-desc{
  color:#ffffff;
  font-size:14px;
  margin:-40px auto 10px;
  padding:0 20px;
  text-align:left;
  width:620px;
}

/* BOXES */
#featured-boxs{
  padding:0 0 10px;
  display:block; 
  margin: 0; 
  text-align:center;
  line-height:1.5;
}

.featured-box{
  width:350px;
  margin:0 15px 10px; 
  display:inline-block; 
  text-align:justify; 
  vertical-align:top;
}

.featured-box-big{
  max-width:620px;
  margin:0 15px 10px; 
  display:inline-block; 
  text-align:justify; 
  vertical-align:top;
  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.35);
  border-left:8px solid #ccc;
  margin-bottom:15px;
  padding-left:10px;
}

.textonly {
  border-left: none;
}

.textonly ul {
  padding-left:15px;
  margin-bottom:15px;
}

.featured-box a {
  color: #6A6969;
}

#featured-boxs h1{
  font-family:Verdana, Geneva, sans-serif;
  font-weight:100;
  font-size:30px;
  color:#555555;
}

#featured-boxs h2{
  font-family:Verdana, Geneva, sans-serif;
  font-weight:100;
  font-size:19px;
  color:#555555;
}

.featured-box-first{
  padding:20px 0;
  width:210px;
  margin:0;
}

#featured-boxs img.box-image {
  border: 3px solid #eeeeee;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 350px;
  width: 98%;
}

#featured-boxs img.box-image:hover{
  box-shadow:0 0 11px 0px #555555;
}

h3.featured-box2{
  min-width:140px;
  float:left;
}


/* INFO IN HEADER */
.info{
  position:absolute;
  top:7px;
  right:20px;
  text-align:right;
}

.info p a{
  color:#AAAAAA;
}

/* EMAIL PROTECTION */
.zzz {
  color:transparent;
  display:none;
  float:right;
  font-size:.001px;
  width: 0px;
}

/* BLOCKQUOTE */
blockquote, q {
  background:#DDDDDD;
  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.35);
  border-left:5px solid #ccc;
  margin:20px 10px;
  padding:10px;
  quotes:'<<' '>>';
  border-right:10px solid #ccc;
}

blockquote:before, q:before {
  color:#ccc;
  content:'\201C';
  font-size:4em;
  line-height:.1em;
  margin-right:.20em;
  vertical-align:-.4em;
}

blockquote:after, q:after {
  color:#ccc;
  content:'\201D';
  font-size:4em;
  line-height:.1em;
  margin-left:.20em;
  vertical-align:-.4em;
}

blockquote p, q p {
  display:inline;
}

/* HIGHLIGHTING ACTIVE ANCHOR ITEMS */
:target {
  background: #F5DEB3; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(245,222,179,1),rgba(245,222,179,0)); /*Safari 5.1-6*/
  background: -o-linear-gradient(right,rgba(245,222,179,1),rgba(245,222,179,0)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(right,rgba(245,222,179,1),rgba(245,222,179,0)); /*Fx 3.6-15*/
  background: linear-gradient(to right, rgba(245,222,179,1), rgba(245,222,179,0)); /*Standard*/
}

@media only screen and (max-device-width: 400px) {
  .featured-box {
    max-width: 90%;
  }

}

@media only screen and (max-device-width: 350px) {
  .info {
    display: flex;
    right: 0;
    top:50px;
    background: #333;
    padding: 5px;
  }
  
  .info p {
    margin-left: 15px;
    margin-bottom: 0px;
  }

  #simplicity-main-menu li {
    margin: 0;
  }
}