/* 
    Theme Name: Westmont Magazine 2013
    Description: Westmont College's Magazine Theme
    Version: 1.0
    Author: Outside Open
*/

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

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 {/* remember to define focus styles! */
    outline: 0;
}
body {
    background: #fff;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
a img {
    border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


/* Basic Structure
------------------------------------------------------------ */

body {
    font-family: "Georgia", Cambria, Times New Roman, Times, serif;
    width: 100%;
    margin:0;
    background-color: #f2f2f2;
    -webkit-font-smoothing: antialiased;
}

#header {
    width: 100%;
    background-color: #990000;
    padding: 20px 0 0 0;
}

#main {
    width: 100%;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

#footer {
    width: 100%;
    background-color: #990000;
    border-top: 1px solid #c5c5c5;
}

.wrap {
    width: 980px;
    margin: 0 auto;
}

/* Typography
------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: bold;
}

h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.3em;
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1em;
}
h5 {
    font-size: .8em;
}
h6 {
    font-size: .7em;
}

h1 a, h2 a, h3 a {
    color: #222;
    text-decoration: none;
}

a {
    color: #990000;
    text-decoration: none;
}
a:hover {
    opacity: .8;
    opacity: 1;
    text-decoration: underline;
}

p {
    color: #222;
    font-size: 16px;
    text-align: left;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

b, strong { 
	font-weight: bold;
}

/* Header Structure
------------------------------------------------------------ */
#logo {
    background-image: url('images/Westmont-Magazine-800x45.png');
    height: 45px;
    width: 800px;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    text-indent:-9999px;
    display: block;
}

#logo:hover {
    opacity: 1;
}

ul.navigation {
    font-family: times;
    display: inline-block;
    font-size: 16px;
    padding: 5px 8px;
    text-transform: uppercase;
    font-weight: 100;
    color: #fff;
    float: none;
    text-align: right;
}

ul.navigation > li {
    float: left;
    margin: 10px;
    position: relative;
}

ul.navigation li a {
    white-space: nowrap;
    color: #fff;
}

ul.navigation li ul {
    padding-top: 10px;
    position: absolute;
    left: -9999px;
    z-index: 100;
}

ul.navigation li:hover ul {
    left: -200px;
    padding-top: 18px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

ul.navigation li:hover ul li {
    background-color: #fff;
}
ul.navigation li:hover ul a {
    color: #990000;
    display: block;
    padding: 10px;
    border-right: 2px solid rgba(0, 0, 0, 0.08);
    border-left: 2px solid rgba(0, 0, 0, 0.08);
}
ul.navigation li ul li:hover {
    color: #fff;
    background-color: #990000;
}
ul.navigation li ul li:hover a{
    color: #fff;
}

.menu-header-container {
    text-align: center;
}

/* Slider Structure
------------------------------------------------------------ */
#slider img {
    width: 100%;
    height: auto;
}

/* Content Area
------------------------------------------------------------ */
#content {
    width: 940px;
    padding: 20px;
    margin: 0 auto;
    color: #555453;
    background-color: #fff;  
    line-height: 24px;
    position: relative;
    z-index: 3;    
}

#content h1 {
    padding: 10px 35px;
}

#content a.top {
    display: block;
    text-align: center;
}

#content .post-content {
    float: right;
    width: 740px;
}

.post-navigation {
    text-align: center;
    padding: 20px 0;
}

.post-navigation a {
    margin: 20px 50px;
    color: #990000;
}

#content ul {
    list-style-type: disc;
    margin: 15px;
}

#content ol {
    list-style-type: decimal;
    margin: 15px;
}

#content ul li,
#content ol li {
    margin-left: 2em;
    margin-bottom: .2em;
}

#content blockquote {
    font-style: italic;
    margin: 1em 2em; 
}

#content img.alignright,
#content a img.alignright {
    float: right;
    margin: 6px 0 10px 15px;
}

#content img.alignleft,
#content a img.alignleft {
    float: left;
    margin: 6px 15px 10px 0;
}

#content img.aligncenter,
#content a img.aligncenter {
    display: block;
    margin: 0 auto 20px auto;
}

.pubdate,
.pubdate a {
    font-size: 12px;
    line-height: 12px;
}
.pubdate a {
    font-style: italic;
    margin: 0 0 5px;
    padding: 0 0 5px 0;
    display: inline-block;
}

/* Homepage
------------------------------------------------------------ */

div.homepage {
    margin-top: -15%;    
}

.home #content {
    width: 980px;
    padding: 0;
}

.home p {
    padding: 0 30px 0 5px;
}

.home img {
    margin: 0 !important;
}

.home h2 {
    padding: 10px 30px 0 5px;

}
.home h2,
.home h2 a {
    line-height: 28px;
    vertical-align: middle;
}

.home .category-box {
    background-color: #990000;
    margin: 25px 10px 20px 10px;
    padding: 5px 10px;
    position: absolute;
    text-align: center;    
}

.home .faculty .category-box,
.home .students .category-box,
.home .alumni .category-box {
    background-color: #990000;
    margin: 15px 10px 20px 10px;   
}

.home .category-box a {
    color: #fff;
}

.home .large-thumbnail {
    float:left;
    height: 180px;
    margin: 18px 15px 5px;
    width:180px;
}

.home .small-thumbnail {
    float:left;
    height: 90px;
    margin: 10px 20px 10px;
    width:180px;    
}

.home .section {
    padding: 8px;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

.home .section p {
    margin: 10px 0;
}

.section .post-meta,
.section .post-meta a {
    display: none;
}

.section-title {
    width: 100%;
    background-color: #990000;
    border-top: 1px solid #e2e2e2;
}

.issue-title {
    color: #fff;
    text-align: center;
    padding: 5px 0;
    margin-top: 0;
    border: none;
}

.home .home-thumbnail {
    display: none;
}

.showmore,
.showmore-faculty,
.showmore-students,
.showmore-alumni {
    color: #890000;
    background-color: #fff;
    float: left;
    cursor: pointer;
    width: 100%;
}

.showmore span,
.showmore-faculty span,
.showmore-students span,
.showmore-alumni span {
    margin-left: 20px;
}

.showmore:hover,
.showmore-faculty:hover,
.showmore-alumni:hover,
.showmore-students:hover {
    text-decoration: underline;
}

.hidden-story,
.hidden-faculty-story,
.hidden-alumni-story,
.hidden-students-story {
    display: none;
}

.section.alumni {
    border-bottom: solid 2px #990000;
}

.section ul {
    vertical-align: middle;
    margin: 0 !important;
}

.section ul li {
    color: #890000;
    vertical-align: middle;
    line-height: 20px;
}

.section.faculty .small-thumbnail,
.section.students  .small-thumbnail,
.section.alumni  .small-thumbnail {
    padding-right: 15px !important;
    margin: 10px 5px 10px 15px;
}

.section.faculty li,
.section.students li,
.section.alumni li {    
    list-style: none;
    margin: 0 !important;
    display: inline-block;
}

.section.faculty li:before,
.section.students li:before,
.section.alumni li:before {
    font-family: 'FontAwesome';
    content: '\f111';
    margin: 16px 5px 0 0;
    color: #990000;
    font-size: 6px;
    float: left;
}

.section.faculty li h2,
.section.students li h2,
.section.alumni li h2 {
    float: left;
    max-width: 720px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 10px;
}

.section.faculty .story,
.section.students .story,
.section.alumni .story {
    margin: 0 20px;
}

.section.features {
    display: none;
}

.featured-container {
    width: 980px;
    margin: 0 auto;
    position: relative;    
}

.featured-story {
    padding: 10px 20px 20px;
    width: 380px;
    background-color: #fff;
    position: absolute;
    right: 0;      
    color: #555453;
    margin-top: -400px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -webkit-box-shadow: 0px 8px 10px -1px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 8px 10px -1px rgba(0, 0, 0, 0.6);
    box-shadow:         0px 8px 10px -1px rgba(0, 0, 0, 0.6);
    border-radius: 3px;
}

.featured-story h2 {
    padding: 0 0 5px 0;
}

.featured-story .post-meta {
    text-align: left;
    float: left;
    margin: 5px 10px 5px 0;
    font-size: 16px;
}

.featured-story .post-meta a {
    margin: 0;
    background-color: #990000;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    text-align: center;
}

/* Archives & App Call To Action 
/* Found on index.php and single.php
------------------------------------------------------------ */

#app-promotion {
    font-family: "Georgia", Cambria, Times New Roman, Times, serif;
    width: 980px;
    background-color: #f2f2f2;
    padding: 60px 0;
}

#app-promotion img {
    float: left;
    margin: 0;
}

#app-promotion a img.app-store {
    float: none !important;
    margin: 0 auto !important;
    width: 107px;
}

#app-promotion h3 {
    margin: 10px 10px 10px;
    float: left;
    width: 230px;
    text-align: left;
    padding: 0;
}

#app-promotion p {
    padding: 0 0 10px 0 !important;
    float: left;
    text-align: left !important;
    width: 230px;
    margin: 0 10px !important;
    line-height: 24px;
}

#app-promotion .half {
    width: 44%;
    padding: 0 3%;
    float: left;
}

#content.app-promotion {
    background-color: #f2f2f2;
    padding: 0;
    border: none !important;
}

/* Single Post Styles
------------------------------------------------------------ */
.single #content {
    border: 1px solid #e2e2e2;
}
.single-post h1 {
    padding: 30px 10px !important;
}

.single-post h1,
.single-post h1 a {
    line-height: 42px;
    text-align: center;
}

.single-post .story {
    padding: 0 140px 40px 140px;
}

.single-post .story p {
    margin: 0 0 20px;
}

.single-post .wp-caption.alignright {
    margin-right: 100px;
    margin-left: 20px;
}

.single-post .wp-caption.alignleft {
    margin-left: 100px;
    margin-right: 20px;
    float: left;
}

.single-post .wp-caption.aligncenter,
.single-post .wp-caption.alignnone {
    margin: 0 auto;
}

.single-post p.wp-caption-text {
    font-size: 15px;
    padding: 10px;
    margin-top: -20px;
    max-width: 300px;
}

.donate-button {
    width: 100%;
    text-align: center;
}
.donate-button a {
    color: #fff;
    text-align: center;
    font-size: 24px;
    background-color: #990000;
    border: 2px solid #fff;
    padding: 20px;
    margin: 15px 0 0 0;
    display: inline-block;
    border-radius: 5px;
}

.donate-button a:hover {
    text-decoration: underline;
    opacity: 1;
}


/* Archives Page
------------------------------------------------------------ */
.post-archive {
    padding: 25px 35px !important;
}

.post-archive h2 {
    margin-bottom: 10px;
}

.archive .issue-cover {
    float: right;
    display: inline-block;
    background-color: #fff;
    padding: 20px 30px;
}

.archive #content .issue-cover  img {
    margin: 5px 15px;
    border: 2px solid #f2f2f2;
}

.post-archive .archive-thumbnail img {
    float: left;
    border: 1px solid #e2e2e2;
    margin: 5px 15px 15px 0 !important;
}



/* Breadcrumbs
------------------------------------------------------------ */

#breadcrumbs{
    list-style:none;
    margin:20px 0 20px 10px;
    font-size: 12px;
    line-height: 13px;
    overflow:hidden;
}

#breadcrumbs li{
    float:left;
    margin-right:5px;
}

#breadcrumbs .separator{
    font-weight:700;
    font-size:20px;
    color:#999;
}


/* Issues
------------------------------------------------------------ */

.issues {
    margin: 20px auto !important;
    padding: 25px 0 !important;
}

.issues h1 {
    font-size: 1.5em;
    line-height: 1.4em;
    margin: 0 25px 10px;
}
.issues h2 {
    margin: 0 35px 10px;
}

.issues li {
    display: inline-block;
    margin-left: 28px;
}

.issues img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 !important;
}

.issues h2.underline {
    padding-top: 15px;
}


/* 404
------------------------------------------------------------ */
.error404 #content {
    margin: 30px auto;
    padding: 25px 0 !important;
}

.error404 #content h2 {
    margin: 0 35px 10px;
}

.error404 #content p {
    margin: 0 35px;
}

/* Attachment Page
------------------------------------------------------------ */
.attachment p.attachment-size {
    padding: 20px;
}

/* Footer Structure
------------------------------------------------------------ */

#footer .wrap {
    width: 980px;
    margin: 0 auto;
    padding: 40px 0;
}

#footer .seal {
    background-image: url('images/seal_footer.png');
    background-repeat: no-repeat;
    background-size: 80px 78px;
    width: 80px;
    height: 78px;
    float: left;
    margin-left: 30px;
    position: absolute;
}

#footer .menu-footer-container {
    padding-top: 0px;
}

.footer-widget {
    color: #fff;
    height: 30px;
}
.footer-widget-sub{
    color: #fff;
    height: 30px;
}

.footer-widget a,
.footer-widget-sub a {
    color: #fff;
}

ul#menu-footer,
ul#menu-sub-footer {
    font-family: times;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    float: right;
    text-align: center;
}

ul#menu-footer > li,
ul#menu-sub-footer > li {
    float: left;
    margin: 5px;
    position: relative;
}

ul#menu-footer li a {
    white-space: nowrap;
    color: #fff;
}

ul#menu-sub-footer {
    font-size: 16px;
}

#footer li.menu-divider:last-child {
    display: none;
}

#footer p.rights {
    color: #fff;
    float: right;
    font-size: 16px;
    padding: 0;
    margin-right: 5px;
}

#footer .footer-clear {
    clear: both;
}

/* Carousel
------------------------------------------------------------ */

.carousel {
    position: relative;
    margin-bottom: 20px;
    line-height: 1;
    max-width: 1300px;
    margin: 0 auto 20px auto;
}

.carousel img {
    max-width: 1300px;
    height: auto;
    margin: 0 auto;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    display: block;
    line-height: 1;
}

.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
    display: block;
}

.carousel-inner > .active {
    left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
    position: absolute;
    top: 0;
    width: 100%;
}

.carousel-inner > .next {
    left: 100%;
}

.carousel-inner > .prev {
    left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
    left: 0;
}

.carousel-inner > .active.left {
    left: -100%;
}

.carousel-inner > .active.right {
    left: 100%;
}

.carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 60px;
    font-weight: 100;
    line-height: 30px;
    color: #ffffff;
    text-align: center;
    background: #222222;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.carousel-control.right {
    right: 15px;
    left: auto;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

.carousel-indicators {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    margin: 0;
    list-style: none;
}

.carousel-indicators li {
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    text-indent: -999px;
    background-color: #ccc;
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 5px;
}

.carousel-indicators .active {
    background-color: #fff;
}

.carousel-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: #333333;
    background: rgba(0, 0, 0, 0.75);
}

.carousel-caption h4,
.carousel-caption p {
    line-height: 20px;
    color: #ffffff;
}

.carousel-caption h4 {
    margin: 0 0 5px;
}

.carousel-caption p {
    margin-bottom: 0;
}

.carousel-fade .carousel-inner .item {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}

/* =Comments
-------------------------------------------------------------- */
/* Reset list styles for display within comments (because comments are within in lists) */

.commentwrap {
    width: 760px;
    margin: 0 auto;
}

#comments .comment-body ul,
#comments .comment-body ol { 
    margin-bottom:1em; 
}

#comments .comment-body ul ul,
#comments .comment-body ol ol, 
#comments .comment-body ul ol, 
#comments .comment-body ol ul { 
    margin-bottom: 0; 
}

/* comment layout */
#comments li.comment {
    list-style:none!important; 
}
#comments .comments-link {

}
#comments { 
    clear:both; 
    font-size:14px; 
    margin-top:25px; 
    overflow:hidden; 
}
#comments .navigation {
    padding:0 0 18px 0;
}
#comments h3#comments-title,
h3#reply-title {
    display: inline;
    color:#333; 
    font-size:125%; 
    font-weight:bold; 
    margin: 0 0 20px !important; 
    padding:8px 0;
}

#comments .commentlist { 
    list-style:none; 
    margin: 20px 0 0; 
    padding:0; 
}

#comments .commentlist li.comment { 
    margin:0 0 12px 0;
    padding:0 0 0 56px;
    position:relative;
    -webkit-font-smoothing: antialiased;
}

#comments .commentlist li:last-child { 
    border-bottom:none;
    margin-bottom:0; 
}

#comments .commentlist ol { 
    list-style:decimal;
}

#comments .commentlist .avatar { 
    position:absolute;top:3px;left:0; margin:0;
}

#comments .comment-author { }
#comments .comment-author cite { 
    color:#000;
    font-style:normal;
    font-weight:bold;
    font-size: 18px;
}

#comments .comment-author .says { 
    font-style:italic;
}
#comments .comment-meta { 
    font-size:.833em; 
    margin:0 0 12px 0;
}

#comments .commentlist .even { }
#comments .commentlist .bypostauthor { }

#comments .reply { 
    background-color:#ddd; 
    border:1px solid #aaa; 
    display:inline-block; 
    font-size:10px; 
    margin:20px 0; 
}

#comments .reply:hover { 
    border-color:#666;
}

#comments .reply a { 
    color:#666; 
    display:inline-block; 
    line-height:12px; 
    padding: 2px 8px 3px; 
    text-decoration:none; 
}
#comments .reply a:hover { 
    color:#333; 
}

#comments .comment-edit-link { 
    color:#888;
}

#comments .commentlist .children { 
    list-style:none;margin:0;
}

#comments .commentlist .children li { 
    border:none;
    margin:0;
}

#comments .nopassword,
.nocomments { 
    display:none;
}

#comments .pingback {
    border-bottom:1px solid #ccc;
    margin-bottom:18px; 
    padding: 6px 0 12px; 
}

#comments .commentlist li.comment+li.pingback { 
    margin-top:-6px;
}

#comments .pingback p {
    margin:0;
}

#comments .pingback .url { 
    font-size:13px;
    font-style:italic;
}

/* Comments form */
#comments input[type=submit] { color:#333;}
#respond { margin:12px 0; overflow:hidden; position:relative;}
#respond p { margin:0;}
#respond .comment-notes { margin-bottom:1em;}
.form-allowed-tags { display:none; }
.children #respond { margin:0 48px 0 0;}
#comments-list #respond { margin:0 0 18px 0;}
#comments-list ul #respond { margin:0;}
#cancel-comment-reply-link { font-size:12px;font-weight:normal;line-height:18px;}
#respond .required { color:#ff4b33;font-weight:bold;}
#respond label { color:#888;font-size:12px;}
#respond input { margin:0 0 9px;width:98%;}
#respond textarea { width:98%;}
#respond .form-allowed-tags { color:#888;font-size:12px;line-height:18px;}
#respond .form-allowed-tags code { font-size:11px;}
#respond .form-submit { margin:0;}
#respond .form-submit input { width:auto; }

form#commentform {
    margin: 20px 0 0;
}

/* Dropdown Menu
------------------------------------------------------------ */

#dedicated-mobile {
    font-family: times;
    font-size: 20px;
    display:none;
    clear:both;
    width:43px;
    margin:auto;
    position:relative;
    float: right;
}
#dedicated-mobile a.trigger {
    border:1px solid #CFCFCF;
    clear:both;
    display:block;
    margin:20px 25px 0 0;
    padding:6px 12px;
    position:relative;
    font-size:18px;
    font-weight:bold;
    background:#efefef;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,0.8) inset;
    box-shadow:0 1px 0 rgba(255,255,255,0.8) inset;
    text-shadow:0 1px 0 rgba(255,255,255,0.8);
    float: right;
}

#dedicated-mobile a.trigger:hover {
    text-decoration: none;
}

#dedicated-mobile ul#dedicated-mobilemenu {
    background:#FFFFFF;
    list-style:none outside none;
    margin:22px 0 0;
    padding:0;
    position:absolute;
    top:100%;
    right: 0;
    text-align: center;
    z-index:9;
    width:480px;
    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.15);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.15);
    box-shadow:0 2px 4px rgba(0,0,0,0.15);
}

#dedicated-mobilemenu {
    display: none;
}

/*#dedicated-mobile:hover #dedicated-mobilemenu {
    display: block;
} */

#dedicated-mobilemenu ul {
    border-left:1px solid #EFEFEF;
    margin:-1px 0 10px 20px;
    padding:0 0 0 10px;
}
#dedicated-mobilemenu li {
    display:block;
}
#dedicated-mobilemenu li:first-child a {
    border-top:1px solid #efefef;
}
#dedicated-mobilemenu li a {
    display:block;
    padding:16px 4px;
    font-size:20px;
    line-height:1;
    border-bottom:1px solid #efefef;
}
#nav-search {
    position:relative;
    float: right;
    margin: 10px;
}
#nav-search a.trigger-search {
    display:inline-block;
    float: right;
    color: #fff;
}

#nav-search ul#nav-search-mobilemenu {
    background:#FFFFFF;
    list-style:none outside none;
    margin:18px 0 0;
    padding:10px;
    position:absolute;
    top:100%;
    right: 0;
    text-align: center;
    z-index:9;
    width:200px;
    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.15);
    -moz-box-shadow:0 2px 4px rgba(0,0,0,0.15);
    box-shadow:0 2px 4px rgba(0,0,0,0.15);
}

#nav-search-mobilemenu {
    display: none;
    background-color: #fff;
}

/*#dedicated-mobile:hover #dedicated-mobilemenu {
    display: block;
} */

#nav-search-mobilemenu ul {
    border-left:1px solid #EFEFEF;
    margin:-11px 0 10px 20px;
    padding:0 0 0 10px;
}
#nav-search-mobilemenu li {
    display:block;
}
#nav-search-mobilemenu li:first-child a {
    border-top:1px solid #efefef;
}
#nav-search-mobilemenu li a {
    display:block;
    padding:10px 4px;
    font-size:20px;
    line-height:1;
    border-bottom:1px solid #efefef;
}




/* Responsive Design
------------------------------------------------------------ */

@media only screen and (max-width:979px) {

    .wrap {
        width: 760px;
        margin: 0 auto;
    }

    #logo {
        background-image: url('images/Westmont-Magazine-680x38.png');
        width: 680px;
        height: 38px;
        margin: 0;
        padding: 0;
    }

    .featured-container {
        width: 760px;
    }

    #content {
        width: 760px;
        padding: 20px;
    }

    .home #content {
        width: 760px;
    } 

    #content div.homepage {
        margin-top: -10%;
    }

    .featured-story {
        width: 325px;
        padding: 15px;
        margin-top: -300px;
        right: 40px;
    }

    .featured-story p {
        /*display: none;*/
    }

    .featured-story h2.post-title a {
        font-size: 22px;
    }

    #content .post-content {
        width: 520px;
    }

    ul.navigation {
        display: none;
    }

    #dedicated-mobile,
    #dedicated-mobile-menu {
        display: block;
    }

    #dedicated-mobilemenu {
        margin: 13px 0 0 !important;
    }

    #dedicated-mobile a.trigger {
        margin: 3px 10px 0 0px;
    }

    #header {
        padding: 10px 0 10px 0;
    }

    .commentwrap {
        width: 640px;
        margin: 0 auto;
        padding: 10px 60px;
    }

    #footer .wrap {
        width: 760px;
    }
    #app-promotion {
        width: 760px;
    }

    #app-promotion h3 {
        width: 200px;
        margin: 0 10px 5px;
    }

    #app-promotion p {
        width: 200px;
    }

    #app-promotion img {
        width: 100px;
    }

    .section.faculty li h2, 
    .section.students li h2, 
    .section.alumni li h2 {
        max-width: 410px;
    }

    .mobile-search-item {
        display: block;
        padding: 4px;
        font-size: 20px;
        line-height: 1;
        border-bottom: 1px solid #e2e2e2;
    }

    .mobile-search-item input[type="text"] {
        border: 1px solid #e2e2e2;
        border-radius: 50px;
        height: 40px;
        padding: 5px 20px;
        font-size: 20px;
        line-height: 20px;
        width: 420px;
        color: #444;
    }

    .mobile-search-item input[type="submit"] {
        display: none;
    }

}

@media only screen and (max-width:759px) {

    .wrap {
        width : 480px;
        margin: 0 auto;
    }

    #content,
    .home #content {
        width: 480px;
    }

    #app-promotion {
        width: 480px;
        margin: 0 auto;
    }

    #logo {
        background-image: url('images/wm_logo_800.png');
        background-size: 400px 43px;
        width: 400px;
        height: 43px;
        margin-left: 10px;
    }

    #myCarousel {
        display: none;
    }

    .home #main {
        margin: 75px 0 0;
    }

    .home p {
        padding: 0 17px 0 17px;
    }

    #main {
        margin: 10px 0 0;
    }

    .single-post #content {
        margin-top: 5px;
    }

    .archive #main {
        margin: 30px 0 0;
    }

    #content .home p {
        padding: 10px 15px;
    }
    #content .home h2,
    #content .home h2 a {
        font-size: 24px;
        line-height: 26px;
    } 

    #content .post-content {
        width: 460px;
        float: none;
        margin: 0;
    }

    #content .home .large-thumbnail {
        margin: 10px 20px;
    }

    .home a.read-more {
        padding: 0;
    }

    #content div.home {
        margin-top: -65px;
    }


    #content img.alignleft,
    #content img.aligncenter,
    #content img.alignright {
        float: none;
        display: block;
        margin: 20px auto;
        max-width: 320px;
        height: auto;
    }

    #footer .wrap {
        width: 480px;
    }
    .section.features {
        display: block;
    }

    .showmore-faculty,
    .showmore-students,
    .showmore-alumni {
        display: none;
    }

    .hidden-faculty-story,
    .hidden-alumni-story,
    .hidden-student-story {
        display: block;
    }

    .home p.readmore {
        padding: 0 15px 20px !important;
    }

    #content .post-content p {
        font-size: 17px;
    }

    .showmore span,
    .showmore-faculty span,
    .showmore-students span,
    .showmore-alumni span {
        margin-left: 15px;
    }

    .commentwrap {
        width: 360px;
        padding: 0;
    }

    #breadcrumbs {
        display: none;
    }

    .pubdate,
    .pubdate a {
        display: inline-block;
    }

    .pubdate {
        margin: 0 0 0 20px;
    }

    .archive h1 {
        font-size: 1.5em;
        line-height: 1.4em;
        margin: 0 25px 10px;
    }

    .archive h2 {
        font-size: 1.2em;
        line-height: 1.2em;
    }

    .single-post h1,
    .single-post h1 a {
        font-size: 1.2em;
        line-height: 1.1em;
        padding: 10px;
    }

    .single-post #content .story {
        padding: 0 50px 40px 50px;
    }

    .single-post #content p {
        margin: 10px 0 20px;
        font-size: 15px;
    }

    #dedicated-mobilemenu {
        margin: 21px 0 0 !important;
    }

    #dedicated-mobile a.trigger {
        margin: 7px 15px 0 0;
    }
    .home #footer p.rights {
        padding: 25px 0 0;
        font-size: 11px;
        text-align: center !important;
    }

    #footer p.rights {
        color: #fff;
        padding-top: 25px;
        float: none;
        text-align: center;
        width: 100%;
    }

    ul#menu-footer {
        width: 40%;
        float: left;
        margin: 0 0 0 10px;
        text-align: left !important;
    }
    ul#menu-sub-footer {
        width: 40%;
        float: right;
        margin: 0 10px 0 0;
        text-align: right !important;
    }

    ul#menu-footer li,
    ul#menu-sub-footer li {
        float: none;
    }
    #footer .seal {
        margin: -25px 0 0;
        width: 480px;
        background-position-x: center;
    }
    #footer .menu-divider {
        display: none;
    }

    #footer .footer-clear {
        clear: none;
    }

    .archive .issue-cover {
        display: none;
    }

    .story .wp-caption.alignleft img,
    .story .wp-caption.alignright img,
    .story .wp-caption.aligncenter img {
        max-width: 380px !important;
        height: auto;
    }

    .story .wp-caption.alignleft,
    .story .wp-caption.alignright,
    .story .wp-caption.aligncenter {
        max-width: 380px !important;
        height: auto;
    }
}

@media only screen and (max-width:479px) {

    .wrap {
        width : 100%;
/*         margin: 0 auto; */
    }

    #content,
    .home #content {
        width: 100%;
    }

    #app-promotion {
        width: 320px;
        padding: 30px 0 0;
    }

    #app-promotion .half {
        width: 300px;
        margin: 10px 0;
    }

    #app-promotion h3 {
        float: left;
        width: 200px;
        margin: 0 10px 5px;
    }

    #app-promotion p {
        float: left;
        width: 200px;
    }

    #app-promotion img {
        float: left;
        width: 80px;
        margin: 10px 0 !important;
    }


    #logo {
        background-image: url('images/westmont_logo_520.png');
        background-size: 260px 34px;
        width: 260px;
        height: 34px;
        float: left;
        margin-left: 5px;
    }

    #main {
        margin: 0px;
    }

    #content {
        margin-top: 20px;
/*         padding: 20px 0; */
    }

    .home #main {
        margin: 45px 0 0;
    }

    #dedicated-mobile {
        width: 43px !important;
    }

    #dedicated-mobile a.trigger {
        margin: 0 5px 0 0;
    }

    #dedicated-mobile ul#dedicated-mobilemenu {
        width: 320px !important;
        margin: 12px 0 0 -110px !important;
    }

    #content .category-box {
        margin: 10px auto;
        position: relative;
        display: none;
    }

    #content .category-box a {
        color: #fff;
        background-color: #990000;
        display: none;
        padding: 5px 10px;
    }

    #content .large-thumbnail {
        display: none;
        float: none;
        margin: 20px 20px 0 35px;
    }

    #content .large-thumbnail img {
        float: none;
    }

    #content .small-thumbnail {
        display: none;
        float: none;
        margin: 20px 20px 0 35px;
    }

    #content .small-thumbnail img {
        float: none;
    }

    .home .home-thumbnail {
        display: block;
        float: left;
        margin: 15px 10px 0px 0px;
    }

    .home p {
        padding: 0 5px 0 5px;
    }
    
    .home h2 {
        padding: 10px 0 0;
    }

    .pubdate {
        display: none;
    }

    .archives-app .half {
        width: 94%;
    }
    .archives-app .half:first-of-type {
        margin-bottom: 20px;
    }

    .single #content {
        border: 0;
    }

    .single-post #content .story {
		padding: 0 40px 40px 0px;
    }

    .single-post #content .story img,
    .single-post #content .story .p img {
        width: 100%;
        max-width: 280px;
        height: auto;
        margin: 0 auto 10px;
    }

    #content .post-content {
        width: 300px;
    }

    #content .post-content p {
        font-size: 17px;
    }

    #content .home h2.post-title {
        padding: 5px;
    }

    #content .home .large-thumbnail {
        margin: 10px auto;
    }

    .single-post #content .wp-caption.alignleft,
    .single-post #content .wp-caption.alignright,
    .single-post #content .wp-caption.aligncenter {
        margin: 0 auto;
    }

    .story .wp-caption.alignleft img,
    .story .wp-caption.alignright img,
    .story .wp-caption.aligncenter img {
        max-width: 270px !important;
        height: auto;
    }

    .story .wp-caption.alignleft,
    .story .wp-caption.alignright,
    .story .wp-caption.aligncenter {
        max-width: 270px !important;
        height: auto;
    }

    #content .navigation a {
        margin: 20px 0px;
    }

    #footer .wrap {
        width: 320px;
    }

    .archive #main {
        margin: 10px 0 0;
    }

    .archive #content {
        margin: 10px auto;
    }

    .archive #content p {
        font-size: 16px;
        line-height: 20px;
        margin: 0 0 20px;
    }

    .post-archive {
        padding: 10px 25px !important;
    }

    .section .post-meta {
        text-align: left;
        float: left;
        margin: 15px 15px 5px 15px;
        display: block;
    }

    .section .post-meta a {
        background-color: #990000;
        margin: 0;
        color: #fff;
        text-align: center;
        padding: 5px 10px;
        display: inline-block;
    }

    .section .post-meta {
        margin: 5px 15px 5px 15px;
        float: none;
        text-align: center;
    }

    #content .home h2,
    #content .home h2 a {
        font-size: 24px;
        line-height: 26px;
    } 

    #content .home h2 {
        padding: 0;
        margin: 10px 15px 0;
    }

    #content .post-content {
        width: 272px;
    }

    .home p {
        padding: 0;
    }

    .home .section {
        padding: 8px 23px;
    }

    .section.faculty li h2,
    .section.alumni li h2,
    .section.students li h2 {
        text-align: left !important;
        padding: 0 0 20px 0 !important;
        max-width: 250px;
    }

    .section.faculty .story,
    .section.alumni .story,
    .section.students .story {
        margin: 0;
    }

    .home p.readmore {
        padding: 0 0 20px !important;
    }

    .showmore span, 
    .showmore-faculty span, 
    .showmore-students span, 
    .showmore-alumni span {
        margin-left: 0px;
    }

    .commentwrap {
        width: 260px;
        padding: 0;
    }

    #content img.alignleft,
    #content img.aligncenter,
    #content img.alignright {
        float: none;
        display: block;
        margin: 20px auto;
        max-width: 260px;
        height: auto;
    }

    ul#menu-footer {
        float: left;
        width: 40%;
        margin: 30px 0 0;
    }
    ul#menu-sub-footer {
        float: right;
        width: 40%;
        margin: 30px 0 0;
    }

    #footer .seal {
        margin: -25px 0 0 0;
        width: 320px;
        background-position-x: center;

    }

    .issues img {
        width: 100px;
        height: auto;
    }

    .single-post #content {
        margin-top: 0px !important;
    }

    p {
        text-align: left !important;
    }

    .single-post h1,
    .single-post h1 a {
        padding: 0px !important;
        text-align: left;
    }

    .section.faculty li:before,
    .section.students li:before,
    .section.alumni li:before {
        margin: 7px 5px 0 0;
    }

    .mobile-search-item input[type="text"] {
        width: 270px;
    }
}