/* Theme Name: CatholicPhilly-2016 Theme URI: http://catholicphilly.com/ Description: CatholicPhilly theme for 2016 Author: Larry Gilbert Version: 2.0.16 */ /* -------------------------------------------------- :: Normalize -------------------------------------------------- */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline;zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}html,button,input,select,textarea{font-family:sans-serif}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:middle}button,input{line-height:normal}button,html input[type="button"], input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;height:13px;width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* -------------------------------------------------- :: Typography -------------------------------------------------- */ body{font-family:Georgia,Times,Times New Roman,serif;font-size:1em;line-height:1.6;margin:0;text-align:left;color:#333;background:#FFF;display:block;width:100%;} @media screen and (min-width: 62em) {body{line-height:1.8;}} .sans, .wp-caption .wp-caption-text, #comments a {font-family: 'Open Sans',Helvetica Neue,Helvetica,Arial,Verdana,sans-serif;} .serif{font-family: Georgia,Times,Times New Roman,serif;} h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4; margin-bottom: 1em; font-family: 'Open Sans', sans-serif;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: inherit;} h1{font-size:2em;line-height:1.3;}h2{font-size:1.8em;line-height:1.2;}h3{font-size:1.5em;line-height:1.3;}h4{font-size:1.2em;line-height:1.2;}h5{font-size:1em;line-height:1.2;}h6{font-size:.7em;line-height:1.2;} p { margin: 0 0 1em; } em, i { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 80%; line-height: inherit; } blockquote{ width: auto;float: none;margin: 1em auto;padding: 15px 0;} hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; } @media screen and (min-width: 62em) { h1 { font-size: 300%; line-height: 1.4;}h2 { font-size: 220%; }h3 { font-size: 130%; } h4 { font-size: 0.95em; font-weight: bold;} h5 { font-size: 0.9em; } h6 { font-size: .8em; font-weight: bold;} blockquote{width: 33%;font-size: inherit;font-weight: 400;text-align: center;line-height: 1.7em;margin: 0.5em 25px;padding: 15px;border-style: solid;border-width: 3px 0px 1px;font-weight: 800;line-height: 1.8;color:#999;float:right;} blockquote p:last-child{margin-bottom:0} blockquote cite { display: block; font-size: 12px; } blockquote cite:before { content: "\2014 \0020"; } } /* -------------------------------------------------- :: Links -------------------------------------------------- */ a { color: #03F; text-decoration: none; line-height: inherit; } a:hover { color: #11639d; } a:focus { outline: 1px solid #03F; } p a, p a:visited { line-height: inherit; } /* -------------------------------------------------- :: Lists -------------------------------------------------- */ ul, ol { margin-bottom: 18px; padding: 0 0 0 15px;} ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.circle, ul.disc { margin-left: 30px; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } li { margin-bottom: 12px; } /* -------------------------------------------------- :: Tables -------------------------------------------------- */ table { background: #fff; margin: 0 0 1em; border: 1px solid #ddd; } table thead, table tfoot { background: #f5f5f5; } table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td {} table thead tr th, table tfoot tr td { padding: 10px; font-weight: bold; } table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; } table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; } table tbody tr.even, table tbody tr.alt { background: #f9f9f9; } table tbody tr:nth-child(even) { background: #f9f9f9; } table tbody tr td { color: #333; padding: 10px; vertical-align: top; border: none; } table tbody tr td { padding: 0px;} /* -------------------------------------------------- :: Images -------------------------------------------------- */ img, object, embed { max-width: 100%; height: auto !important; } iframe{display:block; margin:0 auto; max-width: 100%;} @media only screen and (max-width: 62em) {iframe {max-width: 100%;} .single .single_story_content img{width:100% !important;}} /*firefox images will stretch past screen*/ img[class*="align"], img[class*="wp-image-"] {height: auto; } img[class*="align"], img[class*="wp-image-"] { border: 0 none; } img.size-full { max-width: 100%; width: auto; } p img { margin: 0; } p img, .wp-caption { margin-top: 0.4em;} img.alignleft, img.alignright, img.aligncenter { margin:0 auto 1.6em;float:none;display:block;} .wp-caption { padding: 10px 0; text-align: center; margin-right:auto;margin-left:auto;} /*.wp-caption img { display:block; margin:0 auto; border:0 none; width:100%;}100% for phones*/ .wp-caption .wp-caption-text { margin-bottom:0.6em; padding:10px 0 20px; position:relative; font-size:.8em;font-weight: bold;line-height: 1.6; text-align: left;border-bottom:2px solid;} .wp-caption:first-child{margin-top:0; padding-top:0;} @media only screen and (min-width: 1030px) { .alignleft, img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } .alignright, img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } } /* IMAGE REPLACEMENT */ .screen-reader-text-hidden{ visibility: hidden; line-height: 0; height: 0; } .ir { font: 0/0 a; text-shadow: none; color: transparent;background-color: transparent; border: 0; overflow: hidden; } .lteie10 .ir { text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 100%; } .ir p, .ir a {display: inline-block; line-height: 0; padding: 0; margin: 0;} a.assistive-text, #page .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; } a.assistive-text:hover, a.assistive-text:active, a.assistive-text:focus { background:#FFF; border:2px solid #333; clip:auto !important; color:#000; display:block; font-size:12px; padding:12px; position:absolute; top:5px; left:5px; margin:auto; overflow:visible; height:auto; width:auto; z-index:200; } /* -------------------------------------------------- :: Grid -------------------------------------------------- */ .container { min-width:0; margin:0; padding:0 20px;} .row { width:100%; max-width:1300px; min-width:0; margin:0; box-sizing: border-box;} .column, .columns { position:relative; width:auto; float:none; margin:0; } @media only screen and (min-width: 62em) { .row { margin:0 auto; display:table; border-collapse: collapse;} .column, .columns { display:table-cell; } .row .one { width: 8.333333%; }.row .two { width: 16.666667%; }.row .three { width: 25%; }.row .four { width: 33.333333%; }.row .five { width: 41.666667%; }.row .six { width: 50%; }.row .seven { width: 58.333333%; }.row .eight { width: 66.666667%; }.row .nine { width: 75%; }.row .ten { width: 83.333333%; }.row .eleven { width: 91.666667%; } .row .twelve{width:100%}} /*.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } interferes with table layout */ @media screen and (max-width: 62em) {#multistory.container{padding:0;}} /* -------------------------------------------------- Pagination -------------------------------------------------- */ .nav-links{display:table;table-layout:fixed;border-collapse:collapse;width:100%;table-layout: fixed;box-sizing:border-box;} a.page-numbers{color:#333;} .page-numbers{background-color:#DDD;border-left:1px solid #FFF;border-right:1px solid #FFF;padding:15px 0;text-align:center;display:block;display:table-cell;} .page-numbers.current{background-color: #03F; color:#FFF;} @media screen and (min-width: 62em) {.pagebar{margin-top: 50px; margin-bottom: 50px;}} /* -------------------------------------------------- :: Comments & Forms ---------------------------------------------------*/ input[type=text], input[type=password], input[type=email], textarea { background: #fafafa; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); border: 1px solid #ddd; color: #888; width: 98%; padding: 7px; } form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; } form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; } textarea {display: block; font-size:1em; } @media only screen and (min-width: 62em) { textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; max-width: 100%; font-size: 13px; padding: 4px 3px 2px; background: #fff; } textarea, select { display: block; margin-bottom: 9px; padding: 7px; background: #FAFAFA;} } #comments{clear:both} #comments a,#comments a:visited{color: #999;} #comments a:hover, #comments a:active{color:#ff4b33} .commentlist{list-style:none;margin:0;padding: 0;} .commentlist li.comment{margin:0 0 24px;padding: 15px;position:relative;border: 1px solid #ccc;} #comments .comment-body ul,#comments .comment-body ol{margin-bottom:1em} #comments .comment-body p:last-child{margin-bottom:6px} #comments .comment-body blockquote p:last-child{margin-bottom:24px} .comment-author cite{font-style:normal;font-weight: bold;} .comment-meta{font-size: 0.7em;margin:0 0 1em} .commentlist li.comment.bypostauthor{border-left:5px solid #03F;} .reply{font-size:0.7em;} .reply a:after{content:" to this comment";} .commentlist .children{list-style:none outside none;margin:0;padding: 0;} .commentlist .children li{margin:20px 0} #commentform{display:table; width:100%} #commentform input[type=text], #commentform textarea{border:1px solid #CCC;box-shadow:none; background:#FFF;} #commentform input[type=text]{padding:2%; width: 96%;} .commentnameemail{display:table;width:100%} #commentform input#email{border-left:1px solid #CCC;} #commentform input[type=submit]{border: 1px outset #CCC; color: #333; background: #FFF; padding: 10px 0; width: 100%;} textarea#comment{margin:0;} #quiz input{margin:10px 0} @media screen and (min-width: 62em) { .commentname,.commentemail{display:table-cell;} } form.searchrow {width:100%; display:table;} .searchrow input {display:block; box-sizing:border-box; text-align:center; padding: 10px 0; width: 100%; height: auto; border: 1px solid #CCC; background-color: #FFF; box-shadow: none;} .searchrow input[type="submit"] {border: 1px outset #CCC;} @media screen and (min-width: 625px) { .searchrow input {display:table-cell; padding:10px; } .searchrow input[type="text"] {text-align:left; width:75%} .searchrow input[type="submit"] {border: 1px solid #CCC; border-left:none; width:25%;} } .menusearch input {background-color:#444; color:#FFF; border-color:#999; border-left:0;} /* -------------------------------------------------- :: MAIN ---------------------------------------------------*/ body{padding-top:105px;} .is-phone #footer{padding-bottom:50px;} /*mobile ads; can't add to body because' it's set to height:100% */ #page {margin: 0 auto;} /*FOOTER*/ #footer {margin-top: 0; overflow:hidden;} #footer a{color:#333; font-size:.9em; } #footer ul{padding:0; list-style: disc inside;} #footer li{margin-bottom:5px} #footer hr {border-color:#AAA;} .copyrightline{text-align: center; background-color: #eee; display: block; padding: 5px 0; line-height: 1.4;} @media only screen and (min-width: 625px){ #footer ul{list-style: none;} #bottomlinks{ display: table; margin: 0 auto; text-align: center; border-collapse: collapse; } #bottomlinks li{ border: 1px solid #999; font-size: 14px; display: table-cell; padding: 5px 15px; vertical-align: middle; max-width: 190px; border-width: 0 1px; line-height: 1.4;} } /*WIDGET*/ .widgettitle{border-bottom: 2px solid;padding-bottom: 5px;} @media screen and (min-width: 62em) {.widgettitle:first-child{margin-top:0;}} /* STICKY filamentgroup/fixed-sticky */ .fixedsticky {position: -webkit-sticky;position: -moz-sticky;position: -ms-sticky;position: -o-sticky;position: sticky;} .fixedsticky-withoutfixedfixed .fixedsticky-off,.fixed-supported .fixedsticky-off {position: static;} .fixedsticky-dummy {display: none;} @media only screen and (min-width: 62em){ /* only sticky if in columns */ .fixedsticky-withoutfixedfixed .fixedsticky-on,.fixed-supported .fixedsticky-on {position: fixed;} .fixedsticky-on + .fixedsticky-dummy {display: block;} .fixedsticky { top: 107px; } } /* when turning a tablet from landscape to portrait, the sidebar will overlay */ @media only screen and (max-width: 62em) and (orientation: portrait){ .is-touch .fixedsticky-on{display:none;} .isnottouch{} } /* -------------------------------------------------- :: TOP MASTHEAD ---------------------------------------------------*/ #masthead{background:#FFF; background: rgba(255,255,255,0.98); border-bottom:1px solid #CCC; position:fixed; top:0; left:0; z-index:100; width:100%; padding:0 20px; box-sizing:border-box;} #masthead h1{margin: 0} #topstripe{display:table;table-layout:fixed; width:100%;max-width:1300px;margin:0 auto;padding:0;} #buttonmenu{display:table-cell; vertical-align: middle;} #buttonmenu div, #buttontools div {display: table; border-spacing: 8px;} #buttonmenu svg, #buttontools svg {display: table-cell; vertical-align: middle;} #buttonmenu span, #buttontools span {display: table-cell; vertical-align: middle;} #bannerlogo{display:table-cell; vertical-align: middle;} #bannerlogo div {text-align:center;width:100%;padding: 0 10px;box-sizing: border-box;} #bannerlogo a{display: block;}/*prevent weird focus*/ #bannerlogo img {display: block; margin: 5px auto; padding: 0 10px;} #buttontools {display:table-cell; vertical-align: middle;} /*either button tools or links depending on screen size*/ #buttonlinks{display: none;vertical-align: middle;width:200px;} #buttonlinks ul{padding:0;margin:0;text-align:right;} #buttonlinks li{margin:0;font-size:14px;} .headerbutton{color:#1e528e;display:table-cell;background-color:#EFEFEF;border-radius:3px;line-height:1;} .headerbutton:focus{background-color:#CCC;} .headerbuttoncontainer {width: 100px;} @media screen and (min-width: 62em) {#buttontools {display:none;} #buttonlinks{display: table-cell;} } @media screen and (max-width: 625px) {.headerbuttoncontainer {width: 38px; padding: 0 5px;} .headerbutton span{display:none !important;} #masthead{padding:0;}} @media screen and (min-width: 625px) { /*#masthead{padding:0;}*/ .headerbutton div{width:100px;} /*match social media buttons*/ } @media screen and (max-height: 300px){body{padding-top:0px;}#masthead{position:relative;}} /* on landscape phones, stick the masthead to top of page */ #toolsarea {width:100%; max-width: 1300px; margin:10px auto; overflow:hidden;} /*overflow fixes slidetoggle jump*/ #header-sub-links{display: table; margin: 15px auto; text-align: center; border-collapse: collapse;} #header-sub-links li{border: 1px solid #999;font-size: 14px;display: table-cell;padding: 0 15px;vertical-align: middle;max-width: 220px;border-width: 0 1px;line-height: 1.4;} #header-sub-links li a{color: #03F;} @media screen and (min-width: 62em) {#header-sub-links{display:none;}} /* adding a desktop search */ #topleftcolumn{display:table-cell; width:100px; vertical-align:middle;} form#desksearch{display:none;} @media screen and (max-width: 625px) {#topleftcolumn{width: 38px;}} @media screen and (min-width: 62em) { form#desksearch{position:relative; background-color:#EEE; display:block; height: 38px; width: 100px; border-radius:3px; margin-top:10px;} form#desksearch input{box-shadow:none;display: inline-block;} #desksearch input[type="text"] {height: 38px;width: 50px;border: none;outline: none;padding: 0 10px 0 40px;position: absolute; top: 0; left: 0; background:none; color: #000; z-index: 3; transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000); cursor: pointer;} #desksearch input[type="text"]:focus:hover {border-bottom: none;} #desksearch input[type="text"]:focus {width: 300px; z-index: 1; cursor: text; background-color: #EEE; border-bottom: none;} #desksearch input[type="submit"] { height: 38px; width: 38px; float: left; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) 3px center no-repeat; text-indent: 30px; border: none; position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; opacity: 0.9; cursor: pointer; transition: opacity .3s ease; background-size: 32px;} #desksearch input[type="submit"]:hover, #desksearch input[type="submit"]:focus {opacity:1; z-index:4; background-color:#CCC;} /*overrides*/ #topleftcolumn, #buttonlinks{width: 350px;} #buttonmenu{display: block;} #topleftcolumn ::-webkit-input-placeholder {opacity:1; color:#1e528e;} #topleftcolumn ::-moz-placeholder { opacity:1; color:#1e528e;} #topleftcolumn :-ms-input-placeholder { opacity:1; color:#1e528e;} } /* -------------------------------------------------- :: NAV BAR ---------------------------------------------------*/ html,body,#page {min-height: 100%; margin:0; position: relative;} body.is-touch.st-menu-open{overflow: hidden;} /* lock page scrolling so only menu can scroll, works on most phones, annoying scrollbar jutter on desktop */ .is-not-touch .st-menu { visibility: hidden;} /*android chokes on animating 'visibility', needed on desktop to hide menu from tab navigation */ .is-not-touch.st-menu-open .st-menu { visibility: visible; } .st-menu {overflow-y:scroll; -webkit-overflow-scrolling:touch; position:fixed; height:100%; top:0; left:0; z-index:101; /* masthead 100, bottom mobile stripe 99 */-webkit-transition:all 0.5s; transition:all 0.5s; } .st-menu {width:30%; margin-left:-30%;} @media (max-width:480px){.st-menu {width:70%;margin-left:-70%;}}@media(min-width:481px){.st-menu{width:55%;margin-left:-55%;}}@media (min-width:768px){.st-menu{width:40%;margin-left:-40%;}}@media(min-width:992px){.st-menu{width:30%;margin-left:-30%;}}@media(min-width:1200px){.st-menu{width:16%;margin-left:-16%;}} .st-menu-open .st-menu {margin-left:0px;} @media all and (-webkit-transform-3d) { /*if capable of translate, override with smoother function*/ .st-menu {margin-left:0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-menu-open .st-menu {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} } /* content style */ .st-menu {background: #222;} .st-menu ul{padding:0; margin:0; font-weight:bold;font-size:1.2em} .st-menu li{margin:0} .st-menu ul ul {background-color:#444; font-weight:normal; font-size:.8em;} .st-menu a{color:#FAFAFA;display:block; padding:10px; margin:0; border-bottom:1px solid #777;} #navclose{color:#FFF;display:block;padding:10px;margin:0;border-bottom:1px solid #A5A5A5;background-color:#888;font-size:.8em;text-align:right;cursor:pointer;font-weight: bold; text-transform: uppercase;} /* -------------------------------------------------- :: FRONT/INSIDE COLUMNS ---------------------------------------------------*/ /* COLUMN LAYOUT table gives equal column hight, but doesn't extend content for sticky polyfill; flex override */ #sidebar{margin:50px auto; width:305px;} /*space when stacked, width to center*/ #socialbar{display:none;} /* no socialmedia if small desktop */ @media screen and (min-width: 62em) { #socialbar{display: table-cell; width: 150px;} #socialbar .sidebarinner {width: 100px;} #mainbar{ display: table-cell; vertical-align: top;} #sidebar{display: table-cell; vertical-align: top; width: 355px; margin:0;} #sidebar .sidebarinner{width:355px;} .bars{display:table; table-layout:fixed;} /*prevent resize when switching sticky on-off*/ #socialbar .stickypadding{width:100px;} #sidebar .stickypadding{width:355px;} /* 2) flex override, to fix ios bug where sticky doesn't run in display:table */ .nff .bars{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} /* don't make flex if firefox - large pics will stretch */ #socialbar{-webkit-box-flex:0; -webkit-flex:0 0 150px; -ms-flex:0 0 150px; flex:0 0 150px;} #mainbar{-webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1;} #sidebar{ -webkit-box-flex:0; -webkit-flex:0 0 355px; -ms-flex:0 0 355px; flex:0 0 355px;} } /* -------------------------------------------------- :: FRONT/ARCHIVE FEATURE BOX ---------------------------------------------------*/ .cpwidget:first-child .featurebox {margin-top:0} @media screen and (max-width: 62em) {.box-excerpt{display:none;}} .featurebox{display:block; color:inherit; border-top:5px solid; margin:5px 0; position:relative; overflow:hidden; background-repeat:no-repeat; background-size:100% auto; background-size:cover; background-position:center center;} .featurebox .box-info{padding:20px; min-height: 90px;} .featurebox .box-category{color:#FFF;font-weight:bold;display:inline-block; padding:2px 10px; margin:0; font-size:0.8em; position:absolute; top:0px; box-sizing:border-box; border-radius:0 0 11px 11px;} .featurebox .box-head{margin:15px 0; font-size:1.2em; font-weight:bold;} /*headshots, light-dark*/ .featurebox.headshot {background-size:20% auto; background-position:right 55%;} .featurebox.headshot .box-info {padding: 40px 21% 40px 20px;}/*allow 20% space for headshot overlay*/ .feature-dark {background-color:#000; color:#FFF;font-weight:bold; text-shadow:1px 1px 0px #000; } a.feature-dark:hover{color:#CCC} .feature-dark .box-info {background: rgba(0,0,0,0.3);} .feature-dark.headshot .box-info {box-sizing:border-box;padding-right:90px;background:transparent;} .feature-light:hover{background-color:#EEE;} /*img/video*/ .featurebox.photoimg .box-info{padding: 5px 20px;} .featurebox.photoimg img{margin:0 auto} .featureboxvideo {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;} .boxvideo{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none; -webkit-align-self:center; -ms-flex-item-align:center; align-self:center; margin:-20px 0 15px 0; overflow:hidden;} .boxvideo iframe{max-width:100% !important;} @media screen and (min-width: 62em) { .featurebox{background-size:50% auto;background-position:right center;border-top:none;margin:0 0 5px;border-left:5px solid;} .widget_lcgmm_stories a.featurebox:last-child{margin-bottom: 10px} /* if stories set to 0, keep consistent spacing */ .featurebox .box-category{font-size:1em;position:absolute;top:0;left:0;border-radius:0 0 11px;padding: 2px 20px;} .featurebox .box-head{font-size: 2em;} .featurebox .box-info{padding:40px 20px; margin:0;} /* dark-light, vertical, img */ .featurebox.feature-dark .box-info{width:65%; background:-webkit-linear-gradient(left, #000 75%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%); background:linear-gradient(to right, #000 75%, rgba(0,0,0,0.1) 95%, rgba(0,0,0,0) 100%);} .featurebox.vertical {background-size:33% auto;} .featurebox.vertical.feature-dark .box-info {min-height:250px;width:85%;} .featurebox.vertical.feature-light .box-info {padding-right: 33%;} .featurebox.photoimg {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column;} .featurebox.photoimg img{-webkit-box-flex: 0;-webkit-flex: none;-ms-flex: none;flex: none; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; margin:-20px 0 15px 0;} .featurebox.photoimg .box-info {padding: 40px 20px;} .featurebox.watermark {background-position: 120% center; background-size: auto 100%; background-color:#FFF;} } @media screen and (min-width: 1200px) {.featurebox.photoimg, .featureboxvideo{flex-direction:row;} .featurebox.photoimg img, .boxvideo{padding:0;margin:0;}}/* still a bit cramped at 62em */ @media only screen and (min-width:425px) and (max-width:62em) { .feature-light{background-color:#EEE;} /* offset stripe for portrait tablets */ } /* -------------------------------------------------- :: FRONT/ARCHIVE SUB BOX ---------------------------------------------------*/ .subbox{color:inherit; width:100%; padding:5px 0; min-height:90px; display:table; display:flex; align-items:center;} .subbox:hover{background-color:#EEE;} .subbox .box-image{width:140px;height:82px;background-size:100% auto;background-size:cover;background-repeat: no-repeat;background-position:center;flex:none;} .subbox.headshot .box-image, .subbox.vertical .box-image{background-size: auto 100%;}/* different proportions */ .subbox .box-info{display:table-cell;vertical-align:middle; flex:1;align-self:flex-start;display:flex;flex-direction:column; /* otherwise imgs squished on chrome; flex keeps img from pushing text out of box in IE */} .subbox .box-head{font-size:1em; font-weight:normal; margin:0 10px; } @media screen and (min-width: 62em) { .subbox.list-last {padding: 5px 0 10px;} .subbox .box-image{border-left: 5px solid; width:240px; height:140px; margin-right:15px;} .subbox .box-head{font-size: 1.2em; font-weight: bold; margin: 0 0 0.5em;} .subbox .box-excerpt{margin-bottom:0; line-height:1.6;} } @media screen and (max-width: 200px) {.subbox{flex-direction: column;text-align: center;}.subbox .box-image {margin:0; width:100%;}} /* ultrasmall screen*/ .lteie10 .subbox{display:block; overflow:hidden;} .lteie10 .subbox .box-image{display:inline; float:left;} .morecatstories{text-align: center; display:block; margin-bottom: 10px; margin-top:5px; padding:5px; border-top:1px solid; border-bottom:1px solid;} .morecatstories:hover {background-color: #EEE;} @media screen and (min-width: 62em) {.morecatstories{font-size:.8em; padding:3px 0; text-align: right; border-bottom:1px solid; border-top:0;}} /* -------------------------------------------------- :: SINGLE.PHP ---------------------------------------------------*/ #storyhead{margin:20px 0} .featurephoto {margin:0 auto; display:block;} /*stretch feature image to demo */ @media screen and (min-width: 62em) {.featurephoto {box-sizing:border-box;width: 100%}} .story-info-caption{padding:10px 0; font-size:.8em; font-weight:bold; line-height:1.2; text-align:left; border-bottom:2px solid;} .story-top-byline{color: #999;} .headshot-photo{float:left;margin:0 20px 5px 0; text-align:center; max-width:250px; max-width: 33vw;}/*IE override*/ .headshot-caption{font-weight:bold;font-size:.8em;margin:0 0 5px;border-bottom:2px solid;} h2.story_title{font-size: 1.5em;font-weight: 800;line-height: 1.2em;margin:15px 0;padding: 0px;} .single_story_content {overflow:hidden;}/*don't let anything with floats extend into bottom widgets*/ .pageinsert{width: 300px; margin: 20px auto;} @media screen and (min-width: 62em) { h2.story_title{font-size: 2em;} .featurephoto {margin:0 auto} .story-info-caption{line-height:1.6;} .headshot-photo{max-width:250px;} .pageinsert{float: left;margin: 10px 40px 10px 0;} /*hblock*/ .single .dtop{margin-top:10px !important;} /*spacing under category stories*/ } @media only screen and (min-width: 62em) {.single_story_content [id*="onlyphone"], .single_story_content [class*="onlyphone"]{display:none;}} @media only screen and (max-width: 62em) {.single_story_content [id*="nophone"], .single_story_content [class*="nophone"]{display:none;}} /* some opening images take too long to scroll past? */ /* TWITTER POPUP */ a#tweetit-btn{box-sizing:border-box;position:absolute;z-index:9;padding:7px;background-color:#00aced; border-radius:4px;width:42px;height:34px;text-align:center;transition:.2s ease-out;-webkit-transition:.2s ease-out;-webkit-transform:translate(-10px,0);-ms-transform:translate(-10px,0);transform:translate(-10px,0)} .svg-bird{position:relative;top:-20px;left:-20px;width:30px;height:30px;fill:#55acee} .svg-icon{width:20px;height:20px} .svg-icon path,.svg-icon polygon,.svg-icon rect{fill:#fff} .svg-icon circle{stroke:#fff;stroke-width:1} /* SOCIAL SHARE SIDEBAR & FOOTER */ #story-social {display: table; table-layout: fixed; width: 100%; text-align:center} #story-social a {display:table-cell;color:#FFF;fill:#FFF;padding:10px 0;text-align:center;vertical-align:middle;line-height:0; text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} #story-social .svgprint{display:none;} #story-social a.svgt{background: #00aced;}#story-social a.svgfb{background: #3b5998;}#story-social a.svggp{background: #dd4b39;}#story-social a.svgpt{background: #cb2027;} #story-social a.svgli{background: #007bb5;}#story-social a.svgem{background: orange;}#story-social a.svgprint{background: #09AF79;}/* colors */ @media screen and (min-width: 62em) { #story-social .svgprint{display:block;} #story-social a{display:block;position:relative;margin:10px 0;padding:5px;border:1px solid #ccc;border-radius:3px;fill:#999; font-size:0.8em;color:#999;background:none !important;overflow:hidden;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;} #story-social a:after{content:'';position:absolute;z-index:-1;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;width:0;height:103%;top:50%;left:50%;opacity:0; -webkit-transform:translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);} #story-social a:hover {color:#FFF;fill:#FFF;border-color:#FFF;} #story-social a:hover:after {width:100%;opacity:1;} #story-social a.svgt:after{background: #00aced} #story-social a.svgfb:after{background: #3b5998}#story-social a.svggp:after{background: #dd4b39}#story-social a.svgpt:after{background: #cb2027} #story-social a.svgli:after{background: #007bb5}#story-social a.svgem:after{background: orange}#story-social a.svgprint:after{background: #09AF79}/* colors */ } /* STORYLISTS - POPULAR, NEXT-PREV, RELATED */ .story-list{display:table;width:100%;table-layout:fixed;} .story-list-item{display:block;background-color:#EEE;padding:1px 10px 1px 1px; overflow: hidden; color:inherit;} .story-list-item div{float:left;width:70px;height:70px;margin-right:10px;background-repeat: no-repeat;background-position: center center;background-size:100% auto;background-size:cover;} .story-list-item p{margin:0} .prev-next{margin: 30px 0 0} #story-popular{margin: 30px 0;} .story-popular-title p{margin:0; background:#EEE; border-bottom:1px solid #FFF; padding:0 5px; border-radius:0 11px 0 0; font-weight:bold; text-transform:uppercase;} .top-related .story-list-item div{width:65px;height:55px;} .top-related .story-list-item{font-size:.8em;} @media screen and (min-width: 425px) {.story-list-item{display:table-cell;}} /* FLEX OVERRIDES FOR WHEN HEADLINES RUN LONG */ .story-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column} .story-list-item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; border-bottom:1px solid #FFF; line-height:1.4; color:inherit;} .story-list-item div{-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;} @media screen and (min-width: 425px) {.story-list{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}} @media screen and (max-width: 62em) {.top-related{display:none;}} /* -------------------------------------------------- :: PAGE.PHP OVERRIDES SINGLE ---------------------------------------------------*/ @media screen and (min-width: 62em) { body.page #footer{margin-top:100px} } .attachment #imageattachment{ display:block; margin:0 auto 50px;}