/*
Theme Name: Salamonster
Theme URI: http://haseebq.com/wp-content/themes/salamonster
Author: Rachel Basse + Haseeb Qureshi
Author URI: http://haseebq.com
Description: A sidewalk-cracking muthafucka.
Version: XXX
Tags: black, white, two-columns, left-sidebar, responsive-layout
============================================================================= */

/* =============================================================================
  background-clip
============================================================================= */

*
{ -webkit-background-clip: padding-box;
  -moz-background-clip:    padding;
  background-clip:         padding-box; }

/* =============================================================================
  font-family
============================================================================= */

*
{ font-family: inherit; }
body
{ font-family: 'Open Sans', 'Helvetica', 'Tahoma', sans-serif; }
header, h2, h3, h4, .h4, h5, h6, input[type=submit], nav
{ font-family: 'Dosis', 'Merriweather Sans', 'Franklin Gothic Medium', 'Arial Black', 'Helvetica', 'Tahoma', sans-serif; }
h1
{ font-family: 'Cuprum', sans-serif; }
code
{ font-family: monospace; }

/* =============================================================================
  Set the default rules that will apply initially to every element.
============================================================================= */
*|* {
  border-color: inherit;
  border-style: inherit;
  border-width: 0;
  list-style-image: inherit;
  list-style-type: inherit;
  margin: 0;
  outline-style: solid;
  outline-width: 0;
  padding: 0;
  quotes: inherit;
  table-layout: inherit;
  text-decoration: inherit;
  }

/* =============================================================================
  html, body
============================================================================= */
html {
  background-color: rgb(255,255,255);
  color: rgb(0,0,0);
  display: block;
  font-size: 16px;
  font-weight: 400;
  height: 100%;
  line-height: 1.5em;
  list-style-position: outside;
  list-style-type: none;
  overflow: auto;
  position: relative;
  quotes: "\201c" "\201d" "\2018" "\2019";
  text-align: center;
  width: 100%;
  }
body {
  padding: 24px 0 0 0; /* vertical space for fixed navigation bar */
  }

/* =============================================================================
  header + menus
============================================================================= */
header {
  background-color: rgb(255,255,255);
  background-color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgb(40,40,40);
  border-top: 1px solid rgb(40,40,40);
  color: rgb(40,40,40);
  left: 0;
  overflow: visible;
  position: fixed;
  text-align: center;
  text-transform: lowercase;
  top: 8px;
  width: 100%;
  z-index: 999;
}
header img, header a {
  border: none;
  display: inline;
  margin: 0;
  padding: 0;
  text-decoration: none;
  }
#logo {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  margin: 4px 2px 4px 2px;
  }
nav.top {
  float: left;
  margin: 0px;
  padding: 4px 3px 5px 58px; /* left padding for logo img */
  }
.primary-menu, .icon-list {
  display: inline-block;
  font-size: 22px;
  margin: 0 10px 0 5px;
  padding: 0;
  text-align: center;
  width: auto;
  }
.icon-list { font-size: 22px; }
.primary-menu li {
  border: none;
  display: inline;
  line-height: 1.3em;
  list-style-type: none;
  padding: 0px 7px;
  }
.icon-list li {
  border: none;
  display: inline;
  line-height: 1.3em;
  list-style-type: none;
  padding: 0 5px;
  }
nav a:link, nav a:visited {
  color: rgb(70,70,70);
  font-weight: 400;
  text-decoration: none;
  }
h1 > a:link, h1 > a:visited {
  color: rgb(70,70,70);
  font-weight: 600;
  text-decoration: none;
  }
nav a:hover, nav a:focus, h1 a:hover, h1 a:focus {
  color: rgb(0,0,0);
  text-decoration: none;
  }
.icon {
  background: url('images/icon-bg.png') transparent center center no-repeat;
  display: inline;
  height: 25px;
  vertical-align: middle;
  width: 25px;
  }
.icon:hover {
  background: url('images/icon-bg-active.png') transparent center center no-repeat;
  }
.page-menu {
  border-bottom: double 3px rgb(120,120,120);
  border-top: dotted 1px rgb(120,120,120);
  color: rgb(100,100,100);
  display: block;
  font-size: .9em;
  margin: 4px 0 0 0;
  padding: 3px;
  text-align: center;
  width: 100%;
  }
.page-menu a {
  display: inline-block;
  padding: 0 .5em;
  }
.fixed-menu {
  background-color: rgb(255,255,210);
  box-shadow: 8px 10px 6px 2px rgb(60,60,60);
  padding: 7px 10px;
  position: fixed;
  right: 75px;
  top: 425px;
  -ms-transform: rotate(6deg); /* IE 9 */
  -webkit-transform: rotate(6deg); /* Safari and Chrome */
  transform: rotate(6deg);
  width: 11.5em;
  }
.fixed-menu > a { display: block; }
.toc { font-size: .9em; margin: 2em 15%; }
nav.inline {
  border-bottom: dotted 1px rgb(80,80,80);
  border-top: dotted 1px rgb(80,80,80);
  clear: both;
  display: block;
  margin: 1.5em 8%;
  text-align: center;
  width: 84%;
  }
nav.inline > a { padding: .1em .5em; }
a.current:link, a.current:visited { color: rgb(60,60,60); font-weight: 600; }
/* =============================================================================
  main + sidebars
============================================================================= */
.full {
  font-size: 18px;
  margin: 30px 0 0 0;
  padding: 0;
  text-align: center;
  width: 100%;
  }
.main {
  font-size: 18px;
  float: left;
  margin: 40px 2% 10px 4%;
  min-width: 450px;
  max-width: 700px;
  overflow: visible;
  width: 54%;
  }
.side-col { 
  color: rgb(60,60,60);
  float: left;
  font-size: 15px;
  margin: 35px 2% 10px 2%;
  min-width: 250px;
  max-width: 450px;
  overflow: visible;
  width: 35%
}
.sidebar {
  display: block;
  margin-top: 1em;
  width: 100%
  }
.narrow { 
  margin: 0;
  padding: 0 25% 0 25%;
  text-align: center;
  width: 50%;
  }
.page {
  letter-spacing: -.02em;
  line-height: 1.6em;
  text-shadow: 0 1px rgba(0,0,0,.1);
  }
.main > .page {
  border: solid 2px rgb(0,0,0);
  border-top: solid 3px rgb(0,0,0);
  box-shadow: 3px 3px 12px 0px rgba(0,0,0,.16),
              0px 0px 15px 0px rgba(0,0,0,.06);
  padding: 0 0 2em 0;
  }
.sidebar > .page {
  border: solid 3px rgb(80,80,80);
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.14),
              0px 0px 12px 0px rgba(0,0,0,.06);
  padding: 1em 0;
  }
.full > h1 {
  color: rgb(0,0,0);
  font-size: 4em;
  margin: 0 30% -.24em 20%;
  width: 50%;
  }
.main > h1 {
  color: rgb(0,0,0);
  font-size: 4em;
  margin: 0 4% -.24em 4%;
  text-shadow: 1px 0 0px rgba(0,0,0,.3),
               1px 0 4px rgba(0,0,0,.16);
  }
.sidebar > h1 {
  color: rgb(70,70,70);
  font-size: 3.5em;
  margin: 0 4% -.24em 4%;
  text-shadow: 1px 0 0px rgba(0,0,0,.3),
               1px 0 3px rgba(0,0,0,.16);
  }
/* =============================================================================
  forms
============================================================================= */
button, input[type=submit] {
  background-color: rgb(120,120,120);
  color: rgb(255,255,255);
  display: block;
  margin: 4px;
  padding: 4px;
  text-align: center;
  width: auto;
  }
button#search-button {
  background-color: rgb(80,80,80);
  border: 1px solid rgb(90,90,90);
  color: rgb(0,0,0);
  display: table-cell;
  height: 32px;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top;
  width: 32px;
  }
button#search-button:hover, button#search-button:focus {
  background-color: rgb(20,20,20);
  }
button#search-button > img { margin: 0; }
form {
  display: block;
  margin: 1em 8%;
  width: 84%;
  }
form#search-form {
  border-collapse: collapse;
  display: table;
  margin: 1em auto;
  width: 80%;
  }
fieldset {
  border: solid 1px #999;
  display: block;
  margin: 1em 0;
  padding: 1em;
  }
input, textarea, select {
  border: inset 2px rgb(180,180,180);
  display: inline;
  padding: 0 2px;
  }
input#search-input {
  background-color: rgb(255,255,255);
  border: 1px solid rgb(90,90,90);
  display: table-cell;
  height: 30px;
  vertical-align: top;
  width: 80%;
  }
input[type=text], select {
  display: inline;
  height: 1.8em;
  width: 90%;
  }
input[type=checkbox] {
  margin: 6px;
  vertical-align: middle;
  }
label {
  display: inline;
  padding: 0 5px 0 1px;
  }
legend {
  font-size: 18px;
  font-variant: small-caps;
  }
table.form {
  margin: 0;
  text-align: left;
  width: 100%;
  }
table.form td {
  border: none;
  padding: 8px 9px 8px 0;
}
textarea {
  width: 90%;
  }

/* =============================================================================
  inline
============================================================================= */
b { font-weight: 600; }
em { font-style: normal; font-size: 1.5em; }
i { font-style: italic; }
strong {  font-weight: 400; font-variant: small-caps; }
.small { font-size: .85em; }

/* =============================================================================
  images
============================================================================= */
.video-container {
  clear: both;
  height: 0;
  overflow: visible;
  padding-bottom: 35%;
  padding-top: 30px; 
  position: relative;
  }
.video-container > iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  }
p > iframe {
  height: auto;
  width: 100%;
  }
img {
  display: block;
  margin: 1.5em 0;
  vertical-align: middle;
  width: 100%;
  }
.frame {
  border: double 3px rgb(0,0,0);
  }
img.left {
  float: left;
  margin: 15px 15px 15px 10%;
  max-width: 45%;
  }
img.right {
  float: right;
  margin: 15px 10% 15px 15px;
  max-width: 45%;
  }
img.center {
  margin: 15px 20%;
  width: 60%;
  }
img.small {
  float: left;
  margin: 15px;
  width: 35%;
  }
img.about-picture {
  float: right;
  margin: 10px 10% 10px 10px;
  max-width: 30%;
  }
.wp-post-image {
  float: left;
  margin: 15px 15px 15px 10%;
  }
img.attachment-post-thumbnail, img.attachment-thumbnail { height: auto; width: 150px; }
img.attachment-medium { height: auto; width: 35%; }
img.attachment-large { height: auto; width: 30%; }

/* =============================================================================
  links
============================================================================= */
a:link {
  color: rgb(0,110,180);
  /font-weight: 600;
  text-decoration: none;
  }
a:visited {
  color: rgb(120,30,140);
  /font-weight: 600;
  text-decoration: none;
  }
a:hover, a:focus { text-decoration: underline; }
a:active { color: rgb(250,200,0); text-decoration: none; }
a.read-more {
  clear: both;
  display: block;
  margin: .5em 10%;
  text-align: right;
  width: 80%;
  }
/* =============================================================================
  lists
============================================================================= */
ol { list-style-type: decimal; }
ul { list-style-type: disc; }
ol, ul {
  margin: 1em 14%;
  text-align: left;
  width: 72%;
  }
ul.dl {
  list-style-type: none;
  margin: 1em 8%;
  width: 84%;
  }
ul.dl > li { margin: .7em 0; }
li {
  border-left: 1px solid rgb(120,120,120);
  line-height: 1.5em;
  margin: 0;
  padding: 0 0 0 7px;
  }
span.term {
  display: inline;
  font-weight: 600;
  padding-right: .5em;
  }
.comments {
  margin: 2.5em auto;
  padding: 1em 0;
  width: 96%;
  }
.comment-list {
  margin: 1em auto;
  text-align: left;
  width: 92%;
}
.comment-list > li {
  background-color: rgb(240,244,244);
  border: solid rgb(220,220,220) 1px;
  display: block;
  list-style-type: none;
  padding: .3em;
  margin: .4em 0;
  }
.comment-list img { display: inline; margin: .1em 1.5em; width: auto; }
.comment-content p { margin: 1em; }
footer.comment-meta { height: auto; }
.comment-meta * { display: inline; }
ul.children {
  margin: .5em 0 .5em 4%;
  width: 96%;
  }

.links { margin-bottom: 2em; }
.links > li > a {
  font-size: 1.1em;
  line-height: 1.5em;
  padding-right: .8em;
  }
.metadata-title, .metadata-end {
  border-bottom: double 3px rgb(120,120,120);
  border-top: dotted 1px rgb(120,120,120);
  color: rgb(100,100,100);
  font-size: .9em;
  margin: 4px 6% 4px 6%;
  padding: 3px;
  text-align: center;
  width: 88%;
  }
.metadata-title > li, .metadata-end > li {
  border: none;
  display: inline-block;
  list-style-type: none;
  padding: .3em;
  vertical-align: middle;
  }
.metadata-end a { padding: 0 .1em; }
.g-plusone, .fb-like, .fb-like > span, .twitter-share-button {
  display: inline-block;
  height: 20px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  }
.widget ul { list-style-type: none; }
/* =============================================================================
  sectioning
============================================================================= */
blockquote {
  background: url('images/blockquote-bg.png') rgb(240,244,244) 5px 5px no-repeat;
  border: solid rgb(220,220,220) 1px;
  clear: both;
  line-height: 1.4em;
  margin: .5em 10%;
  }
.source {
  display: block;
  font-size: .85em;
  font-style: italic;
  margin: -.5em 15% .5em 15%;
  text-align: right;
  }
.source:before {
  content: '- ' ;
  }
h1 {
  line-height: 1.1em;
  text-align: right;
  width: 92%;
  }
h2 {
  clear: both;
  font-size: 2.6em;
  font-weight: 400;
  line-height: 1.1em;
  margin: 1em 11% .7em 11%;
  text-align: center;
  width: 78%;
  }
.intralink-padding {
  position: relative;
  top: -60px;
}
h3, h4 {
  clear: both;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.1em;
  margin: 1.6em 8% .7em 8%;
  text-align: center;
  width: 84%;
  }
h5, h6 {
  clear: both;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.1em;
  margin: 1em 8% .7em 8%;
  text-align: center;
  width: 84%;
  }
h3, h5 { text-align: left; }
hr {
  border-top: double 3px rgb(80,80,80);
  clear: both;
  display: block;
  margin: 3em 0 2em 0;
  width: 100%;
  }
hr.space { margin-top: 3em; border: none; }
p {
  line-height: 1.8em;
  margin: 1.2em 10%;
  text-align: left;
  width: 80%;
  }
section {
  margin: 1.5em 0;
  }
.shadow-box {
  background: rgb(240,244,244) 5px 5px no-repeat;
  border: solid rgb(220,220,220) 1px;
  clear: both;
  line-height: 1.4em;
  margin: .5em 10%;
  }
p.center, h6.center { text-align: center; }

/* =============================================================================
  tables
============================================================================= */
table {
  border-collapse: collapse;
  margin: 2em auto;
  text-align: right;
  }
tr, .table-row { display: table-row; }
caption {
  color: #ded;
  font-size: 1.2em;
  font-variant: small-caps;
  margin: .5em;
  }
th, td {
  padding: 7px 10px;
  }
th {
  color: #bcb;
  font-size: 11pt;
  font-style: normal;
  font-weight: 400;
  }
td {
  font-size: 11pt;
  border: none;
  }
td[colspan], th[colspan] { text-align: center; }
td.empty { border: none; }

/* =============================================================================
  misc
============================================================================= */
head, title, script, .wormhole { display: none !important; }
.caption {
  font-size: .85em;
  margin: .4em 15% 1.5em 15%;
  text-align: center;
  width: 70%;
  }
.excerpt {
  border-bottom: double 4px rgb(60,60,60);
  margin: .2em 5%;
  padding: 0 .5% .2em .5%;
  width: 89%;
  }
.float-left { float: left; }
.float-right { float: right; }
.quote {
  border-top: #000 solid 1px;
  clear: both;
  display: block;
  font-size: 14px;
  padding: 4px 5%;
  text-align: right;
  width: 90%;
  }
.inline-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  }
.red { color: rgb(245,20,20); }
.signature {
  clear: both;
  color: rgb(30,30,30);
  display: block;
  font-size: 1.1em;
  font-variant: small-caps;
  margin: 2em 10%;
  text-align: right;
  width: 81px;
  }
.widget {
  background: url('images/spade-bg.png') rgb(242,245,244) 6px 8px no-repeat;
  border: solid rgb(220,220,220) 1px;
  margin: 1em 5%;
  padding-bottom: 1em;
  }
.widget-title { margin-top: .5em; }


/* =============================================================================
  twitter pro
============================================================================= */
#twitter-4 { position: relative; }
#twitter-4 h2 { font-size: 16px; }
#twitter-4 ul { margin: 4px 5%; width: 90%; }
#twitter-4 li {
  border: none;
  border-top: solid 1px rgb(60,60,60);
  clear: both;
  margin: 3px 0;
  padding: 2px 0;
  }
#twitter-4 .entry-content, #twitter-4 .entry-meta {
  display: inline;
  padding: 3px;
  }
#twitter-4 .intent-meta {
  display: block;
  margin: 3px;
  text-align: center;
  }
#twitter-4 .intent-meta a:before { content: ' \00bb'; }
#twitter-4 .intent-meta a:after { content: '\00ab '; }
.twitter-avatar {
  display: block;
  margin: 5px;
  position: absolute;
  right: 20px;
  top: -20px;
  width: 48px;
  }

/* =============================================================================
  windows
============================================================================= */
.full-window, #footer:before {
  background-attachment: fixed;
  background-position: top center;
  background-repeat: repeat;
  -webkit-background-size: 1400px auto;
  -moz-background-size: 1400px auto;
  -o-background-size: 1400px auto;
  background-size: 1400px auto;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.9);
  clear: both;
  display: block;
  font-family: 'Dosis', Helvetica, Arial, sans-serif;
  height: 300px;
  margin: 0;
  width: 100%; 
  }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), 
    only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    div:before, div:before {
      background-attachment: scroll; }
  }
.full-window.about { 
  background-image: url('http://haseebq.com/wordpress/wp-content/uploads/2013/12/widescreen1.jpg'); 
  background-position: center 15px;
  }
.full-window.coaching {
  background-image: url('images/chips.jpg');
  background-position: center -40px;
  }
.full-window.book { 
  background-image: url('images/cards.jpg'); 
  background-position: center -20px;
  color: rgb(255,255,255);
  height: 100px;
  font-size: 34px;
  line-height: 1.6em;
  padding: 60px 34% 110px 6%;
  text-align: left;
  width: 60%;
  }
.full-window.connect {
  background-image: url('http://haseebq.com/wordpress/wp-content/uploads/2013/12/steps.jpg');
  background-position: center -65px;
  }
#footer:before {
  background-image: url('http://haseebq.com/wordpress/wp-content/uploads/2013/12/filteredstretch.jpg');
  background-position: center 190px;
  color: #fff;
  content: "“You should put a little quote at the bottom.”";
  height: 50px;
  font-size: 18px;
  line-height: 1.4em;
  margin-top: 40px;
  padding: 110px 8% 80px 8%;
  text-align: right;
  width: 84%;
  }