/*
Theme Name: CultureRamp
Theme URI: http://cultureramp.com/
Description: Proprietary stylesheet for CultureRamp.
Author: L. Rhodes
Author URI: http://cultureramp.com/
Version: 2.0
Tags: one-column, fluid
*/

/* -------------------- RESPONSIVE ELEMENTS */

/* Smartphone */
@import url(mobile.css) screen and (max-width: 767px);

/* iPad */
@import url(tablet.css) only screen and (min-width: 768px);

/* Desktop and laptop */
@import url(standard.css) screen and (min-width: 960px);

/* Large screens */
@media only screen and (min-width : 960px);

/* -------------------- FONTS */

@font-face {
    font-family: Metrophobic;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Metrophobic-webfont.eot?#iefix') format('embedded-opentype'), 
        url('fonts/Metrophobic-webfont.woff') format('woff'), 
        url('fonts/Metrophobic-webfont.ttf')  format('truetype'),
        url('fonts/Metrophobic-webfont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: Quicksand Book;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'), 
        url('fonts/Quicksand_Book-webfont.woff') format('woff'), 
        url('fonts/Quicksand_Book-webfont.ttf')  format('truetype'),
        url('fonts/Quicksand_Book-webfont.svg#svgFontName') format('svg');
}
@font-face {
    font-family: RockSalt;
    font-style: normal;
    font-weight: normal;
    src: url('fonts/RockSalt-webfont.eot?#iefix') format('embedded-opentype'), 
        url('fonts/RockSalt-webfont.woff') format('woff'), 
        url('fonts/RockSalt-webfont.ttf')  format('truetype'),
        url('fonts/RockSalt-webfont.svg#svgFontName') format('svg');
}

/* -------------------- BODY */

html {
    font: normal 100% Helvetica, Arial, sans-serif;
    height: 100%;
    margin-top: 0 !important;
}

body {
    background-color: #CCC;
    color: #000000;
    font-family: Metrophobic, sans-serif;
    font-size: 16px;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    text-align: center;
}
body a {
    color: #336699;
    text-decoration: none;
}

.primary {
    background-color: #FFFFFF;
    display: block;
    margin-bottom: -1em;
    overflow: hidden;
    text-align: center;
    width: inherit;
}
.art {
    width: inherit;
    height: auto;
}

/* -------------------- HEADER */

#header {
    background-color: #FFFFFF;
    overflow: hidden;
    padding-bottom: 1em;
}
.masthead {
    margin: 0;
    padding: 0;
}
.masthead li {
    list-style-position: inside;
    list-style-type: none;
    margin-left: .5em;
    margin-right: .5em;
    vertical-align: middle;
}
.masthead .mag-title {
    background-color: #000000;
    display: block !important;
    height: 2.5em;
    margin-bottom: 1.5em;
    margin-left: 0;
    margin-right: 0;
    padding-right: 2em;
    text-align: right;
}
.mag-title h1 {
    background-color: #4D0028;
    display: inline-block;
    font-family: RockSalt, cursive;
    font-size: 1.6em;
    padding-left: .625em;
    padding-right: .625em;
    margin: 0px;
}
#header .mag-title h1 {
    -moz-box-shadow: -3px 3px 4px #000;
    -webkit-box-shadow: -3px 3px 4px #000;
    box-shadow: -3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=225, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=225, Color='#000000');
}
.mag-title h1 a {
    color: #FFFFFF;
}
.masthead .feeds {
    color: #333;
}
.masthead .feeds ul {
    margin: 0;
    padding: 0;
}
.masthead .feeds li {
    display: inline-block;
    list-style-position: inside;
    list-style-type: none;
}
.dateline {
    font-family: Quicksand Book;
}
.masthead .directory {
    font-size: 1.25em;
}
.masthead .directory ul {
    margin: 0;
    padding: 0;
}
.masthead .directory li {
    display: block;
}
.masthead .directory .nav-link a {
   color: #333;
}
.masthead .search {
    text-align: center;
}
.masthead .departments {
    border-bottom: 2px solid #000;
    border-top: 2px solid #000;
    text-align: center;
}
.masthead .departments a {
    color: #336699;
    display: inline-block;
    font-family: Quicksand Book;
    font-weight: bold;
}
.masthead .departments a:hover {
    background-color: #336699;
    color: #FFFFFF;
}

/* -------------------- FRONTPAGE */

.frontpage ul {
    margin: 0em;
    padding: 0em;
}
.frontpage li {
    list-style-position: inside;
    list-style-type: none;
}
.catbox {
    display: block;
    width: 100%;
}
.catbox-listing {
    border: solid 2px #4D0028;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 95%;
}
.catbox-title {
    background-color: #4D0028;
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.catbox-title h2 {
    display: inline;
}
.catbox-desc {
    font-size: .75em;
    padding-left: 1em;
    padding-right: 1em;
    text-align: left;
}
.catbox-more {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.card {
    color: #000;
    margin-bottom: .25em;
    margin-top: .25em;
    overflow: hidden;
    text-align: left;
}
.card a {
    color: #000;
}
.catbox .card li {
    padding-left: 1em;
    padding-right: 1em;
}
.catbox .dateline {
    margin-top: .5em;
    text-align: right;
}
.catbox .older {
    font-size: .75em;
}


/* -------------------- SINGLE PAGE */

.content {
    margin-left: auto;
    margin-right: auto;
    min-height: 95%;
    text-align: left;
}
.content .banner {
   margin-bottom: 2em;
   margin-top: 2em;
}
.content .dateline {
    display: inline;
    text-align: right;
}
.content .hed h2 {
    font-size: 2em;
    margin: 0em;
}
.content .teaser {
    font-weight: bold;
}
.content .byline {
    display: inline;
    font-variant: small-caps;
}
.content .byline a {
    font-size: 1em;
    text-decoration: none;
}
.content #post-copy {
    text-align: justify;
}
.content #post-copy p {
    font-family: lucida grande, geneva, sans serif;
    font-size: .875em;
}
.content #post-copy li {
    list-style-position: inside;
}
blockquote {
    font-size: .9em;
    padding: .5em;
}
blockquote p {
    margin: 0;
    text-indent: 0em !important;
}
.content sup {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
.content .author {
    font-weight: bold;
}
.content .author hr {
    margin-bottom: 2em;
    margin-top: 2em;
}
.content .reply-to {
    clear: both;
    display: block;
    font-face: Quicksand Book;
    font-size: small;
    margin-top: 4em;
    text-align: right;
}
.sharing {
    border: 1px solid #CCC;
    display: block;
    float: right;
    margin-left: .5em;
    overflow: hidden;
    padding: .25em;
    text-align: center;
    width: 4em;
}
.sharing li {
    list-style-position: inside;
    list-style-type: none;
    font-variant: small-caps;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.sharing li img {
    padding: 0em;
}
.caption {
    font-size: .75em;
    margin: 0px;
    padding: 0px;
    text-align: right;
}
hr {
   color: #CCC;
   width: 85%;
}
.content ol li {
    list-style-position: outside !important;
}

/* -------------------- ADS */
.body-ad {
    background-image: url(/images/ad-background.png);
    display: block;
    float: left;
    margin-left: -9.375em;
    margin-right: .5em;
}

/* -------------------- SIDEBAR */

#sidebar {
    display: block;
    font-size: 1em;
    padding: 1em;
    text-align: center;
}
#sidebar h3,
#sidebar h4 {
    margin: .25em;
}
#sidebar li {
    list-style-position: inside;
    list-style-type: none;
}
#sidebar li ul {
    margin: 0;
    padding: 0;
    text-align: left;
}
#sidebar .related {
}
#sidebar .card {
    padding: .25em;
    margin-left: 1em;
}
#sidebar .card a {
    color: #369;
}
#sidebar h3 a {
    color: #000;
}

/* -------------------- CONTACT */

.email-address {
    display: inline-block;
    font-face: Quicksand Book;
    font-size: 1.25em;
    font-weight: bold;
    vertical-align: bottom;
}

/* -------------------- CATEGORY */

.category ul,
.feature-listing ul,
.search ul {
    margin: 0em;
    padding: 0em;
}
.category li,
.feature-listing li,
.search li {
    list-style-position: inside;
    list-style-type: none;
}
.category .card,
.feature-listing .card,
.search .card {
    font-size: .875em;
}
.navigation {
    margin: 1em;
    text-align: center;
}
.alignleft {
    margin-right: 5em;
}
.alignright {
    margin-left: 5em;
}

/* -------------------- SUBSCRIPTIONS */

.subscribe {
}
.subscribe ul {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 20em;
}
.subscribe a {
    font-weight: bold;
}
.subscribe a:hover {
    text-decoration: underline;
}
.subscribe li {
    list-style-type: none;
    list-style-position: inside;
    margin: .5em;
    text-align: right;
}
.subscribe img {
    margin-left: 2em;
    margin-right: 2em;
    vertical-align: middle;
}
.subscribe h3 {
    font-size: 1.75em;
}

/* -------------------- FOOTER */

footer {
    background-color: #FFF;
    border-top: solid 1px #CCC;
    display: table;
    margin: 0px;
    padding: 0px;
    text-align: center;
    width: inherit;
}
#colophon {
    list-style-position: inside;
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#colophon li {
    padding: 1em;
}
#colophon .management ul {
    list-style-position: inside;
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
#colophon .management .nav-link {
    margin: 0;
    padding: 0;
}
#colophon .management .nav-link a {
    color: #333;
}
#colophon .mag-title {
    text-align: center;
    vertical-align: bottom;
}
#colophon .copyright {
    font-size: .875em;
    vertical-align: middle;
}
#colophon .copyright img {
    vertical-align: bottom;
}