/* -------------------------------------------------------------------- made by ___ _/ _ _ _ . _ _ |_ _ /__(_|| )/_|| )(_||_(_) [Master Stylesheet] Project: Office of Undergraduate Research Version: 1.4 Last change: 12/16/21 Assigned to: Serge Isaacson (SI) Primary use: Department Web Site -------------------------------------------------------------------- [Table of contents] -------------------------------------------------------------------- 0. Reset 1. Font Embed 2. Body 3. General Content 4. General Wrappers 5. Header 5.1. Logo 5.2. Ancillary Nav 6. Navigation 6.1. Nav Mobile Opener 6.2. Main Navigation 6.3. Social Nav 6.4. Search 6.5. Sticky Nav 7. Secondary Wrappers 8. Slideshow 8.1. Section Heading 8.1. Slides 8.1. Slide Info Box 8.1. Slide Control Box 9. Content Holder 10. Heading Holder 10.1. Breadcrumbs 10.2. Main Heading 11. Page Modules 11.1. Video Holder 11.2. Module Controls 11.3. Featured Modules 12. Section Content 12.1. ? 12.2. ? 13. Profile Slide Boxes 14. Landing Page Grouping 15. Sidebar 15.1. Home Page Tabs - Upcoming List Tab - Research Buzz Tab 15.2. Side Column 15.3. Side Nav 15.4. Side Banner 15.5. Info Carousel 15.6. Find Info Block 16. Twitter Area 17. By the Numbers 18. Global Paging 19. Footer 20. Google Search 21. Response 22. Print -------------------------------------------------------------------- [Colors] -------------------------------------------------------------------- Default Red: #da1f1f rgb(225,45,66) Default Blue: #0093d0 rgb(156,192,43) Default Grey: # rgb(0,0,0) Background Warm Grey: #f9f8f6 rgb(249,248,246) Cornell Red: #b31b1b rgb(179,27,27) Light Grey: #f7f7f7 rgb(247,247,247) Dark Grey: #222222 rgb(34,34,34) Warm Grey: #a2998b rgb(162,153,139) Sea Grey: #9fad9f rgb(159,173,159) Blue: #006699 rgb(0,102,153) #6eb43f // Graphic Elements Only #4b7b2b // Any Text Size #f8981d // Graphic Elements Only #d47500 // Large Text Only #ef4035 // Graphic Elements Only #df1e12 // Any Text Size #073949 -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- 0. Reset -------------------------------------------------------------------- */ /** * https://meyerweb.com/eric/tools/css/reset/ * v2.0 | 20110126 * License: none (public domain) */ 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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* -------------------------------------------------------------------- 1. Font Embed -------------------------------------------------------------------- */ /* Kanit */ /* @font-face { font-family: 'Kanit-BoldSC'; src: url('../fonts/kanit-v11-latin-600.woff2') format('woff2'), url('../fonts/kanit-v11-latin-600.woff') format('woff'); } */ @font-face { font-family: 'Kanit-Bold'; src: url('../fonts/kanit-v11-latin-500.woff2') format('woff2'), url('../fonts/kanit-v11-latin-500.woff') format('woff'); } /* @font-face { font-family: 'Kanit-Medium'; src: url('../fonts/kanit-v11-latin-regular.woff2') format('woff2'), url('../fonts/kanit-v11-latin-regular.woff') format('woff'); } */ @font-face { font-family: 'Kanit-SemiBold'; src: url('../fonts/kanit-v11-latin-regular.woff2') format('woff2'), url('../fonts/kanit-v11-latin-regular.woff') format('woff'); } @font-face { font-family: 'Kanit-RegularItalic'; src: url('../fonts/kanit-v11-latin-300italic.woff2') format('woff2'), url('../fonts/kanit-v11-latin-300italic.woff') format('woff'); } @font-face { font-family: 'Kanit-Regular'; src: url('../fonts/kanit-v11-latin-300.woff2') format('woff2'), url('../fonts/kanit-v11-latin-300.woff') format('woff'); } @font-face { font-family: 'Kanit-Thin'; src: url('../fonts/kanit-v11-latin-100.woff2') format('woff2'), url('../fonts/kanit-v11-latin-100.woff') format("woff"); } /* Droid Serif */ @font-face { font-family: 'DroidSerif-Bold'; src: url('../fonts/droidserif-bold-webfont.ttf') format('truetype'), url('../fonts/droidserif-bold-webfont.woff') format('woff'); } @font-face { font-family: 'DroidSerif-Italic'; src: url('../fonts/droidserif-italic-webfont.ttf') format('truetype'), url('../fonts/droidserif-italic-webfont.woff') format('woff'); } @font-face { font-family: 'DroidSerif-Regular'; src: url('../fonts/droidserif-webfont.ttf') format('truetype'), url('../fonts/droidserif-webfont.woff') format('woff'); } /* CUR Icons */ @font-face { font-family: 'cur-icons'; src: url('../fonts/cur-icons.ttf') format('truetype'), url('../fonts/cur-icons.woff') format('woff'), url('../fonts/cur-icons.svg#cur') format('svg'); } /* -------------------------------------------------------------------- 2. Body -------------------------------------------------------------------- */ * {font-size: 100.01%;} html {font-size: 62.5%;} body { background: #b31b1b; color: #000; font: 1.6em/1.625em Arial, Helvetica, sans-serif; /* CHANGE THIS FONT!!! */ min-width: 320px; -webkit-tap-highlight-color: rgba(85, 85, 85, 0.4); -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } /* Hide */ .skip, .search-holder legend { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Base Links */ a { color: #000; text-decoration: none; } a:hover { color: #df1e12;} a:active { background-color: transparent; } /* Base Images */ img { border-style: none; color: #707070; font-size: 0.733em; font-style: italic; max-width: 100%; vertical-align: top; } /* Base Forms */ input, textarea, select { color: #f7f7f7; font: 20px Arial, Helvetica, sans-serif; /* CHANGE THIS FONT!!! */ vertical-align: middle; } input[type=search], input[type=submit] { -webkit-appearance: none; -webkit-border-radius: 0; } input[type=submit]:hover { cursor: pointer; } input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; } /* Highlight Color */ ::-moz-selection { background: #ebeb00; color: #222; text-shadow: none; } ::selection { background: #ebeb00; color: #222; text-shadow: none; } /* Browser Upgrade Prompt */ .browserupgrade { background: #ebeb00; color: #222; margin: 0.2em 0; padding: 0.2em 0; text-align: center; } /* -------------------------------------------------------------------- 3. General Content -------------------------------------------------------------------- */ h1 { font-size: 1.875em; line-height: 1.1em; margin-bottom: 16px; } h1, h6 { color: #333; } h2 { color: #df1e12; font-size: 1.375em; line-height: 1.182em; margin-bottom: 4px; } h3 { color: #707070; font-size: 1.17em; line-height: 1.15em; margin-bottom: 4px; } h4, h5 { color: #222; font-size: 1em; line-height: 1.188em; } h4 { margin-bottom: 5px; } h5 { color: #006699; margin-bottom: 1px; } h6 { font-size: 1.063em; line-height: 1.412em; margin-bottom: 1px; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #df1e12; } sub, sup { color: #999; font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } /* b, strong { } i, em { } */ sup { top: -0.5em; } sub { bottom: -0.25em; } blockquote { clear: both; color: #555; font-size: 1.75em; line-height: 1.286em; padding: 16px 67px 32px; position: relative; } blockquote:after { color: #ef4035; content: "\201c"; /* ?????? */ font-size: 125px; height: 60px; left: -12px; line-height: 125px; position: absolute; top: -5px; width: 60px; } blockquote p { margin: 0; padding: 0; } blockquote q { display: block; } /* .alignleft { float: left; } .alignright { float: right; } */ /* [11.1. Content Lists] */ .post ul, .post ol { margin: 0 0 20px 37px; padding-top: 4px; } .post ol { counter-reset: section; } .post ol li { counter-increment: section; } .post ol ul li { counter-reset: section; } .post ol > li:before { content: counters(section, ".") "."; float: left; margin: 0 0 0 -21px; vertical-align: top; width: 21px; } .post ul ul, .post ul ol, .post ol ol, .post ol ul { color: #707070; font-size: 14px; line-height: 17px; margin: 0 0 -5px; padding: 11px 15px 0; } .post ul li, .post ol li { padding: 0 0 6px 20px; position: relative; } .post ul ul li, .post ul ol li, .post ol ol li, .post ol ul li { padding: 0 0 9px 11px; } .post ul li:after, .post ul ul li:after { background: #000; border-radius: 3px; content: ''; height: 5px; left: 0; position: absolute; top: 10px; width: 5px; } .post ul ul li:after, .post ol ul li:after { background: none; content: "›"; font-size: 14px; height: 14px; line-height: 17px; top: 0; width: 8px; } .post ul ol > li:after { background: none; content: ""; } .post ul ol > li:before { margin: 0 0 0 -16px; width: 21px; } .post ol ol > li:before { margin: 0 10px 0 -21px; width: 21px; } /* RSS Spotlight */ .post ul#spotlight { margin: 0; padding: 0; } .post #spotlight li:first-child { margin-top: 0; } .post #spotlight li { border-bottom: 1px solid #e0e0e0; /* padding: 0 0 18px; */ margin-top: 24px; padding: 0; } .post #spotlight li:last-child { border-bottom: 0; } .post #spotlight li:after { background: none; } /* .post #spotlight p { margin-left: 105px; } .post #spotlight li img { border: 0; float: left; margin: 2px 20px 4px 0; } */ /* .post #spotlight article:after { content: ''; display: block; clear: both; } */ .post #spotlight .date { color: #707070; font-size: 1em; margin: 0 0 0 4px; } /* .call-out-list ol { counter-reset: section; } .call-out-list ol li { color: #555; counter-increment: section; font-size: 1.375em; height: 1%; line-height: 1.636em; list-style-position: outside; overflow: hidden; padding: 0 0 0 35px; vertical-align: top; } .call-out-list ol li:before { content: counter(section)"."; float: left; margin: 0 0 0 -35px; vertical-align: top; width: 35px; } .call-out-list ol li a { border-color: #006699; color: #006699; } */ /* [11.1. Callout Lists] */ .call-out-list { margin-bottom: 49px; } /* check margin bottom on responsive stuff. notes need */ .call-out-list h2 { background: #006699; color: #fff; display: inline-block; font-size: 1.375em; line-height: 1.136em; margin-bottom: 18px; padding: 9px 15px 9px 11px; text-transform: lowercase; } .call-out-list ol, .call-out-list ul { counter-reset: section; margin: 0; } .call-out-list ol li, .call-out-list ul li { color: #555; counter-increment: section; font-size: 1.375em; height: 1%; line-height: 1.636em; list-style-position: outside; overflow: hidden; padding: 0 0 0 35px; vertical-align: top; } .call-out-list ol li:before { content: counter(section)"."; float: left; margin: 0 0 0 -35px; vertical-align: top; width: 35px; } .call-out-list ul li:after { background: none; content: "›"; font-size: 16px; height: 14px; left: 5px; line-height: 17px; top: 9px; width: 8px; } .call-out-list ol li a, .call-out-list ul li a { border-color: #006699; color: #006699; } /* not sure we even need this? */ /* ol a { border-bottom: 1px solid #006699; position: relative; } ol a:hover { border-color: #000; color: #000; } */ /* .blue {color:#006699;} */ /* -------------------------------------------------------------------- 4. General Wrappers -------------------------------------------------------------------- */ .container { margin: 0 auto; max-width: 1144px; padding: 0 34px 0 36px; } /* .container:after { content: ''; display: block; clear: both; } */ #wrapper { background: #fff; width: 100%; min-height: 75vh; min-height: -webkit-calc(100vh - 196px); min-height: -moz-calc(100vh - 196px); min-height: calc(100vh - 196px); } .container:after, #header .static:after, .search-form fieldset:after, .search-form .row:after, .search-form .radio-holder:after, .main-content .container:after, .post #spotlight article:after { content: ''; display: block; clear: both; } /* -------------------------------------------------------------------- 5. Header -------------------------------------------------------------------- */ #header { position: relative; width: 100%; z-index: 100; } #header .static { background: #f7f7f7; width: 100%; } /* #header .static:after { content: ''; display: block; clear: both; } */ #header .top { padding: 20px 0; /* background: #b81b1b; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4MWIxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjODFkMWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #b81b1b 0%, #c81d1d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b81b1b), color-stop(100%,#c81d1d)); background: -webkit-linear-gradient(top, #b81b1b 0%,#c81d1d 100%); background: linear-gradient(to bottom, #b81b1b 0%,#c81d1d 100%); */ background: #b31b1b; } /* [5.1. Logo] */ .logo { background: url('../images/logo.png') no-repeat; float: left; height: 72px; margin: 0 22px; overflow: hidden; text-indent: -9999px; width: 384px; } .logo a { display: block; height: 100%; } /* [5.2. Ancillary Nav] */ #header .top .add-nav { float: right; padding: 22px 10px; } #header .top .add-nav li { float: left; font-size: 16px; line-height: 26px; padding: 0 12px; text-transform: capitalize; } #header .top .add-nav a { color: #eddede; } #header .top .add-nav a:hover { color: #fff; } /* -------------------------------------------------------------------- 6. Navigation -------------------------------------------------------------------- */ .nav-holder { float: left; position: relative; } .nav-holder .opener, .nav-holder .social, .nav-holder .add-nav { display: none; } /* [6.1. Nav Mobile Opener] */ .nav-holder .opener { color: #df1e12; float: left; /* font-size: 18px; line-height: 21px; */ padding: 18px 64px 15px 8px; position: relative; text-indent: -9999px; /* text-transform: capitalize; */ } .nav-holder.active .opener { background: #fff; } .nav-holder .opener:after { background: url('../images/sprite.png') no-repeat -42px 0; content: ''; height: 14px; position: absolute; right: 24px; top: 22px; width: 26px; } .nav-holder.active .opener:after { background-position: -73px 0; height: 14px; right: 29px; top: 22px; width: 14px; } /* [6.2. Main Navigation] */ .nav-slide, .nav, .nav ul, .nav li { float: left; } /* can we look at eliminating .nav class? */ /* .nav li { text-transform: capitalize; } */ .static .nav li { font-size: 16px; line-height: 19px; position: relative; } .static .nav a { color: #df1e12; float: left; padding: 22px 21px 19px; } .static .nav a:hover, .static .nav .active a, .static .nav .hover > a { background: #fff; } .static .nav ul ul { box-sizing: border-box; display: none; left: 0; padding: 26px 21px 14px; position: absolute; top: 100%; width: 246px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk5Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44OCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.99) 22%, rgba(255,255,255,0.88) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(22%,rgba(255,255,255,0.99)), color-stop(100%,rgba(255,255,255,0.88))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 22%,rgba(255,255,255,0.88) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.99) 22%,rgba(255,255,255,0.88) 100%); } .static .nav .hover ul { display: block; } .static .nav li li { float: none; font-size: 14px; line-height: 17px; padding-bottom: 13px; text-transform: none; } .static .nav li li a { color: #707070; float: none; padding: 0; } .static .nav li li a:hover { color: #df1e12; } .static .nav .hover li a, .static .nav li li a:hover, .static .nav .active ul a { background: none; } /* */ #header .block { float: right; padding-right: 22px; } .fixed .block { padding-right: 22px; } /* unsure we need this */ /* [6.3. Social Nav] */ #header .social { float: left; padding-top: 15px; } #header .social li { float: left; font-size: 17px; line-height: 5px; padding-left: 4px; } #header .social a { color: #df1e12; float: left; padding: 7px; text-indent: -9999px; } #header .social a:hover { color: #ef4035; } #header .social a:after { display: block; text-indent: 0; } #header .social a.twitter { font-size: 15px; } /* I THINK WE CAN DELETE THIS? */ #header .social a.twitter:after { content: "\e003"; } #header .social a.facebook:after { content: "\e002"; } #header .social a.rss:after { content: "\e007"; } /* [6.4. Search] */ .search-holder { float: left; margin-left: 15px; position: relative; } .fixed .search-holder { margin-left: 14px; } .search-holder .opener { color: #707070; float: left; font-size: 14px; height: 60px; line-height: 20px; position: relative; text-indent: -9999px; width: 69px; } .search-holder .opener:hover, .fixed .search-holder .opener:hover { background: #fff; color: #555; } .fixed .search-holder .opener { color: #fff; } .search-holder.active .opener, .fixed .search-holder.active .opener:hover { background: #555; color: #999; font-size: 25px; line-height: 19px; } .search-holder .opener:after { content: "\e001"; display: block; text-align: center; text-indent: 0; } .search-holder.active .opener:after { background: url('../images/sprite.png') no-repeat -92px -32px; content: ''; height: 14px; left: 28px; position: absolute; top: 22px; width: 14px; } .search-holder .slide { background: #555; box-sizing: border-box; position: absolute; right: 0; top: 100%; width: 425px; } .search-form { padding: 14px 29px 12px; } .search-form fieldset { height: 1%; } /* .search-form fieldset:after { content: ''; display: block; clear: both; } */ .search-form .row { border-bottom: 1px solid #888; margin-bottom: 9px; position: relative; width: 100%; } /* .search-form .row:after { content: ''; display: block; clear: both; } */ .search-form .row .input-placeholder-text { /* how to change color of placeholder text? */ font-size: 20px; left: 0; line-height: 23px; top: 4px; } .search-form .row input { color: #ccc; } .search-form .row input.focus { color: #f7f7f7; } .search-form input[type=search] { background: #555; border-style: none; box-sizing: border-box; float: left; height: 31px; margin: 0; padding: 5px 0; width: 342px; } .search-form .submit { cursor: default; float: right; font-size: 14px; height: 16px; margin-top: 3px; padding-left: 1px; position: relative; width: 17px; } .search-form .submit:after { background: none; color: #fff; content: "\e001"; height: 100%; left: 4px; position: absolute; top: -4px; width: 100%; } .search-form input[type=submit] { background: url('../images/transparent.png'); border-style: none; cursor: pointer; height: 16px; line-height: 0; margin: -14px 0 0; overflow: hidden; padding: 0; position: relative; text-indent: -9999px; width: 17px; z-index: 1; } .search-form .radio-holder { color: #ccc; height: 1%; font-size: 12px; line-height: 15px; text-transform: capitalize; } /* .search-form .radio-holder:after { content: ''; display: block; clear: both; } */ .search-form .radio-holder input[type=radio] { cursor: pointer; float: left; height: 16px; margin: 0; padding: 0; width: 16px; } .search-form .radio-holder label { cursor: pointer; float: left; margin: 2px 20px 2px 4px; max-width: 130px; } /* Radio Image Replacement */ .ez-hide { opacity: 0; filter:alpha(opacity=0); } .ez-radio { background: transparent url('../images/sprite.png') -168px 0px no-repeat; float: left; height: 15px; margin: 2px 2px 0 0; padding: 0; width: 15px; } /* .lt-ie8 .ez-radio { zoom: 1; *display: inline; } */ .ez-selected { background-position: -148px 0px; } /* [6.5. Sticky Nav] */ /* See about bringing all fixed class styles under here */ #header .fixed { background: rgba(179, 27, 27, 0.92); display: none; left: 0; position: fixed; top: 0; width: 100%; z-index: 999; } .fixed .logo { background-position: 0 -77px; height: 35px; margin: 13px 10px 0 16px; width: 188px; } .fixed .nav ul { padding-top: 23px; } .fixed .nav li { font-size: 14px; line-height: 17px; padding: 0 18px; } .fixed .nav a { color: #f7f7f7; float: left; } .fixed .nav a:hover, .fixed .nav .active a { color: #fff; } /* -------------------------------------------------------------------- 7. Secondary Wrappers -------------------------------------------------------------------- */ #main, .main-content { width: 100%; } .inner #main { overflow: hidden; position: relative; } .gallery-block { width: 100%; overflow: hidden; position: relative; padding-bottom: 1px; } .inner .gallery-block { padding-bottom: 0; } /* #bg img { cursor: pointer; left: auto !important; max-width: none; position: absolute; right: 0; top: 0; } */ /* -------------------------------------------------------------------- 8. Slideshow -------------------------------------------------------------------- */ .cycle-gallery .gallery-holder { height: 460px; overflow: hidden; position: relative; width: 100%; } .inner .cycle-gallery .gallery-holder { height: 235px; } .gallery-block .container { position: relative; } /* [8.1. Section Heading] */ .cycle-gallery .heading { background: rgba(179, 27, 27, 0.92); bottom: 33px; left: 58px; padding: 8px 16px 12px; position: absolute; z-index: 20; } .cycle-gallery .heading h1 { color: #fff; font-size: 37px; line-height: 43px; margin: 0; } /* [8.2. Slides] */ .cycle-gallery #bg img { max-width: none; position: absolute; right: 0; top: 0; } .cycle-gallery .mask { /* cursor: url('../images/cursor.png'), auto; */ cursor: pointer; height: 100% !important; position: absolute; right: 0; top: 0; width: 17%; } .cycle-gallery .slideset { /* CAN WE DELETE THIS STYLE???? */ height: 460px; list-style: none; margin: 0; padding: 0; width: 999999px; } .cycle-gallery .slide { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 1; } .cycle-gallery .slide.active { cursor: default; z-index: 2; } .cycle-gallery .hidden { display: none; } /* [8.3. Slide Info Box] */ .slideshow { bottom: 46px; position: absolute; right: 258px; width: 400px; z-index: 20; } .slideshow-slideset { overflow: hidden; width: 100%; } .slideshow-slide { bottom: 0; left: 0; position: absolute; width: 100%; z-index: 20; } .slideshow-slide.active { z-index: 21; } .slideshow-slide .text-box { color: #fff; font-size: 16px; line-height: 20px; } .slideshow-slide .text-box h1 { color: #fff; font-size: 72px; line-height: 76px; margin: 0 0 0 -5px; } .slideshow-slide .text-box p { margin: 0; } .slideshow-slide .text-holder, .slideshow-slide .btn-holder { background: rgba(179, 27, 27, 0.92); min-height: 136px; padding: 21px 50px 6px 28px; } .slideshow-slide .btn-holder { margin: 0 100px 0 0; min-height: 0; padding: 14px 28px 17px; } .slideshow-slide .btn-holder a { color: #eddede; font-size: 12px; line-height: 22px; text-transform: uppercase; } .slideshow-slide .btn-holder a:hover { text-decoration: underline; } /* [8.4. Slide Control Box] */ .gallery-block .control-block { bottom: 0; overflow: hidden; position: absolute; right: 0; width: 94px; z-index: 100; } .gallery-block .btn-prev2, .gallery-block .btn-next2 { background: #e0e0e0; float: left; height: 46px; margin: 0 0 0 1px; overflow: hidden; position: relative; text-indent: -9999px; width: 46px; } .gallery-block .btn-prev2:hover, .gallery-block .btn-next2:hover { background: #df1e12; } /* -------------------------------------------------------------------- 9. Content Holder -------------------------------------------------------------------- */ .main-content { background: #f9f8f6; padding-bottom: 49px; } .main-content .container { max-width: 1100px; padding: 0 56px 0 58px; } /* .main-content .container:after { content: ''; display: block; clear: both; } */ .main-content #content { float: left; width: 100%; } .home .main-content #content { width: 65.6%; } #content .content-holder { margin: 0 378px 0 0; padding: 70px 0 10px; } .home #content .content-holder { margin: 0; } .inner #content .content-holder { margin-right: 380px; padding: 0; } /* -------------------------------------------------------------------- 10. Heading Holder -------------------------------------------------------------------- */ /* [10.1. Breadcrumbs] */ .heading-holder { background: #fff; /* margin: 0 -40px 53px -9999px; */ margin: 0 -100px 53px -9999px; /* padding: 25px 18px 10px 9999px; */ padding: 25px 50px 10px 9999px; } .heading-holder .breadcrumbs { height: 1%; overflow: hidden; padding-bottom: 12px; } .heading-holder .breadcrumbs li { color: #ccc; float: left; font-size: 0.875em; line-height: 1.214em; padding: 0 12px 0 4px; position: relative; } .heading-holder .breadcrumbs li:before { content: '›'; /* left: 0; */ right: 0; position: absolute; top: 0; } .heading-holder .breadcrumbs li:first-child { padding: 0 12px 0 0; } /* .heading-holder .breadcrumbs li:first-child:before { display: none; } */ .heading-holder .breadcrumbs li a.home { float: left; height: 14px; overflow: hidden; text-indent: -9999px; width: 16px; } .heading-holder .breadcrumbs li a.home:after { content: "\e004"; font-size: 16px; left: 0; line-height: 14px; position: absolute; text-indent: 0; top: 0; } .heading-holder .breadcrumbs li a { color: #707070; } .heading-holder .breadcrumbs li a:hover { color: #df1e12; } /* [10.2. Main Heading] */ h1.main-heading { font-size: 2.250em; line-height: 1.056em; margin-bottom: 52px; } .heading-holder h1.main-heading { color: #df1e12; font-size: 4.5em; line-height: 1.042em; margin: 0 25px 31px 0; } /* -------------------------------------------------------------------- 11. Page Modules -------------------------------------------------------------------- */ .boxs-holder { display: table; width: 100%; } .boxs-holder .cell { display: table-cell; padding: 0 0 0 2.7%; vertical-align: top; width: 343px; } .boxs-holder .cell:first-child { padding: 0 2.9% 0 0; width: 340px; } /* [11.1. Video Holder] */ .video-holder { background: #fff; position: relative; } .video-holder .video-slide { color: #333; font-size: 0.813em; line-height: 1.692em; padding: 0 29px 58px; position: absolute; } .video-holder .video { cursor: pointer; margin: 0 -29px 20px; position: relative;z-index: 10; } .video-holder .video img { width: 100%; } .video-holder .video .play { background: rgba(223, 30, 18, 0.67); border-radius: 39px; height: 77px; left: 50%; margin: -45px 0 0 -45px; overflow: hidden; position: absolute; text-indent: -9999px; top: 50%; width: 77px; z-index: 10; } .video-holder .video:hover .play, .video-holder .video .play:hover { background: rgba(223, 30, 18, 0.9); } .video-holder .video .play:after { border-color: transparent transparent transparent #fff; border-style: solid; border-width: 14px 0 14px 15px; content: ''; height: 0; left: 34px; position: absolute; top: 25px; width: 0; } .video-holder .heading { color: #df1e12; font-size: 1.308em; line-height: 1.412em; position: relative; text-transform: capitalize; z-index: 10; } .video-holder h2 { font-size: 1.412em; line-height: 1em; margin: -1px 0 4px; text-transform: none; } .video-holder h2 a { color: #333; } .video-holder h2 a:hover { color: #df1e12; } /* [11.2. Module Controls] */ .video-holder .control-block, .info-carousel .paging { background: #f9f8f6; bottom: 0; height: 30px; padding: 7px 1px 0 6px; position: absolute; right: 0; width: 61px; z-index: 2; } .info-carousel .paging { padding: 7px 0 0 7px; } .video-holder .control-block a, .tabs-holder .meta .control-block a, .info-carousel .paging a { background: #e0e0e0; float: left; height: 30px; overflow: hidden; position: relative; text-indent: -9999px; width: 30px; } .video-holder .control-block a:hover, .tabs-holder .meta .control-block a:hover, .info-carousel .paging a:hover { background: #df1e12; } .video-holder .control-block .btn-prev:after, .video-holder .control-block .btn-next:after, .tabs-holder .meta .control-block .btn-prev:after, .tabs-holder .meta .control-block .btn-next:after, .info-carousel .paging .btn-prev:after, .info-carousel .paging .btn-next:after, .gallery-block .btn-prev2:after, .gallery-block .btn-next2:after { background: url('../images/sprite.png') no-repeat; content: ''; height: 17px; position: absolute; top: 6px; width: 10px; } .video-holder .control-block .btn-next, .tabs-holder .meta .control-block .btn-next, .info-carousel .paging .btn-next { margin-left: 1px; } .video-holder .control-block .btn-prev:after, .tabs-holder .meta .control-block .btn-prev:after, .info-carousel .paging .btn-prev:after { left: 10px; } .video-holder .control-block .btn-next:after, .tabs-holder .meta .control-block .btn-next:after, .info-carousel .paging .btn-next:after { background-position: -15px 0; right: 9px; } .gallery-block .btn-prev2:after, .gallery-block .btn-next2:after { background-position: -30px -30px; content: ''; height: 19px; left: 15px; top: 13px; width: 11px; } .gallery-block .btn-next2:after { background-position: -45px -30px; left: 21px; } .gallery-block .btn-prev2:hover:after { background-position: -60px -30px; } .gallery-block .btn-next2:hover:after { background-position: -75px -30px; } /* [11.3. Featured Modules] */ .boxs-holder .box { background-color: #006699; background-image: url('../images/img02.png'); background-blend-mode: soft-light; background-position: 100% 0; background-repeat: no-repeat; margin-top: 33px; min-height: 185px; padding: 22px 28px 24px; position: relative; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; } .boxs-holder .box:first-child { background-color: #707070; background-image: url('../images/img01.png'); background-blend-mode: soft-light; margin-top: 0; min-height: 155px; /* padding: 22px 28px 24px; */ } .boxs-holder .box .heading, .boxs-holder .box ul { position: relative; z-index: 1; } .boxs-holder .box .heading { color: #fff; font-size: 1.375em; line-height: 1.545em; text-transform: capitalize; } .boxs-holder .box h2 { color: #fff; font-size: 1.636em; line-height: 0.944em; margin: -4px 0 20px; text-transform: capitalize; } .boxs-holder .box .more li, .boxs-holder .box .more li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 1px 0; } .boxs-holder .box .more li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .boxs-holder .box li { line-height: 1.395em; text-transform: capitalize; } .boxs-holder .box li a { color: #fff; } .boxs-holder .box .more li a { /* background: url('../images/transparent.png'); */ display: block; padding: 0 20px 0 0; position: relative; } /* .boxs-holder .box .more li a:hover:after { background: url('../images/sprite.png') no-repeat -30px 0; content: ''; height: 12px; position: absolute; right: 1px; top: 5px; width: 17px; } */ .boxs-holder .box li a:hover, .boxs-holder .box .more li a:hover { color: rgba(255, 255, 255, 0.87); } /* .boxs-holder .box img { left: 0; position: absolute; top: 0; } */ /* -------------------------------------------------------------------- 12. Section Content -------------------------------------------------------------------- */ /* [12.1. ????????] */ .post { padding-bottom: 38px; } .post .heading { padding-bottom: 38px; } .post .heading h1, .post .heading h2 { color: #333; font-size: 2.25em; line-height: 1.056em; margin: 0; text-transform: none; } .post h1 { margin: -7px 0 11px; } .post h2, .post h6 { text-transform: capitalize; } .post p { margin-bottom: 26px; } .post p.note { color: #707070; font-size: 0.875em; line-height: 1.429em; margin: -24px 0 11px; } .landing-block a { line-height: 1.47em; } .post a, .landing-block a { border-bottom: 1px solid #df1e12; color: #df1e12; /* font-size: 1.12em; */ position: relative; } .landing-block a { font-size: 1.12em; } .post a:hover, .landing-block a:hover { border-color: #000; color: #000; } .post .block { padding-bottom: 10px; } .post .block h1 { margin-bottom: 13px; } .post .block p { margin-bottom: 27px; } /* CONSOLIDATED TO .post p .note up above .note, .post .note, .post .block .note { color: #999; font-size: 0.875em; line-height: 1.429em; margin: -24px 0 11px; } */ /* [12.2. Content Buttons] */ .btn, .post .btn { background: #b31b1b; border-color: #df1e12; border-style: solid; border-width: 0 49px 0 0; color: #ffc6bd; display: block; font-size: 26px; line-height: 29px; margin: 0 auto; padding: 10px 14px 9px 14px; position: relative; width: 122px; } .btn.video { padding: 10px 5px 9px 17px; width: 142px; } .btn.download { margin: 30px auto; } .btn:active { background: #b31b1b; } .btn:after, .post .btn:after { color: #ffc6bd; left: 100%; position: absolute; } .btn.download:after, .post .btn.download:after { content: "\e008"; font-size: 18px; line-height: 18px; margin-left: 15px; top: 15px; } .btn.video:after, .post .btn.video:after { content: "\e000"; font-size: 34px; line-height: 34px; margin-left: 19px; top: 6px; } .btn:hover, .post .btn:hover, .btn:hover:after, .post .btn:hover:after { border-color: #df1e12; color: #fff; } /* [12.2. ?????] .call-out-list { margin-bottom: 49px; } .call-out-list h2 { background: #006699; color: #fff; display: inline-block; font-size: 1.375em; line-height: 1.136em; margin-bottom: 18px; padding: 9px 15px 9px 11px; text-transform: lowercase; } ol a { border-bottom: 1px solid #006699; position: relative; } ol a:hover { border-color: #000; color: #000; } */ /* [12.3. White Text Block] */ .text-block { background: #fff; color: #333; font-size: 0.813em; line-height: 1.846em; margin: 40px 0; padding: 30px 50px 15px 30px; } .text-block .heading { color: #006699; font-size: 1.308em; line-height: 1.176em; padding: 0; text-transform: capitalize; } .text-block .heading h2 { color: #000; font-size: 0.941em; line-height: 1.5em; margin: 0; padding: 2px 0 0; text-transform: none; } /* [12.4. Inline Image + Caption] */ .figure { margin: 6px 0 0; max-width: 320px; } .figure.alignnone, .figure.alignleft { float: left; margin-right: 22px; } .figure.alignright { float: right; margin-left: 22px; } .figure img { height: auto; margin: 0 0 12px; max-width: 100%; vertical-align: top; width: auto; } .figure figcaption { color: #707070; display: block; font-size: 0.75em; line-height: 1.455em; margin: 0 6px 0 0; } /* -------------------------------------------------------------------- 13. Profile Slide Boxes -------------------------------------------------------------------- */ .slide-boxes { overflow: hidden; padding-bottom: 71px; width: 100%; } .slide-boxes .box { width: 100%; } .slide-boxes .box .opener { background: #b31b1b; color: #fff; display: block; margin-top: 40px; overflow: hidden; position: relative; width: 100%; } .slide-boxes .box .opener .icon { background: #980f0f; border-radius: 26px; height: 52px; position: absolute; right: 18px; top: 16px; width: 52px; -webkit-transition: background 0.3s linear; transition: background 0.3s linear; } .slide-boxes .box .opener .icon em { background: url('../images/sprite.png') no-repeat -233px 0; height: 27px; left: 13px; position: absolute; top: 13px; width: 27px; } .slide-boxes .box .opener:hover .icon { background-color: #f04e42; } .slide-boxes .box.active .opener .icon, .slide-boxes .box.active .opener:hover .icon { background-color: #980f0f; } .slide-boxes .box.active .opener:hover .icon:hover { background-color: #f04e42; } .slide-boxes .box:first-child .opener { margin: 0; } .slide-boxes .box .opener img { float: left; } .slide-boxes .box .opener img.clone { left: 0; position: absolute; top: 0; } .slide-boxes .box .opener .image { float: left; height: 220px; overflow: hidden; position: relative; width: 220px; -webkit-filter: grayscale(100%) !important; filter: grayscale(100%) !important; -webkit-transition: filter 0.3s linear; transition: filter 0.3s linear; } .slide-boxes .box .opener:hover .image, .slide-boxes .box.active .opener .image { -webkit-filter: grayscale(0) !important; filter: grayscale(0) !important; } .slide-boxes .box .opener .image:before { background: #f9f8f6; bottom: 0; content: ''; left: 0; position: absolute; top: 0; width: 2px; } /* .slide-boxes .box .opener .tests { display: table; position: absolute; }*/ /* also stuff in responsive max thing*/ /* og style .slide-boxes .box .opener .holder { overflow: hidden; padding: 53px 42px 13px 46px; } */ /* .slide-boxes .box .opener .holder { overflow: hidden; padding: 0px 42px 0px 46px; height: 220px;vertical-align: middle; display: table-cell; } */ .slide-boxes .box .opener .holder { overflow: hidden; padding: 45px 42px 13px 46px; } .slide-boxes .box .opener .heading { color: #f9c8c8; font-size: 1.375em; line-height: 1.136em; text-transform: capitalize; } .slide-boxes .box .opener .heading h2 { color: #fff; font-size: 1.727em; line-height: 1.079em; margin-bottom: 0; padding: 1px 0 0; text-transform: none; } /* .slide-boxes .box .opener p { margin-bottom: -4px; } */ .slide-boxes .box .opener p { line-height: 1.439em; } .slide-boxes .slide { background: #fff; font-size: 0.938em; line-height: 1.733em; overflow: hidden; width: 100%; } .slide-boxes .slide article { padding: 39px 44px 57px 48px; } .slide-boxes .slide .heading { color: #df1e12; font-size: 1.133em; line-height: 1.176em; padding-bottom: 20px; text-transform: capitalize; } .slide-boxes .slide .heading h3 { color: #333; font-size: 1.412em; line-height: 1.083em; margin-bottom: 3px; text-transform: none; } .slide-boxes .slide .heading em { color: #000; font-size: 0.941em; line-height: 1.625em; text-transform: none; } .slide-boxes .slide p { margin-bottom: 40px; } .slide-boxes .slide .heading .more { color: #999; } /* -------------------------------------------------------------------- 14. Landing Page Grouping -------------------------------------------------------------------- */ .landing-block article { border-top: 1px sol0e0; margin-right: -5px; padding: 20px 0; } .landing-block article:first-child { border-style: none; padding-top: 0; } .landing-block h2 { color: #df1e12; font-size: 1.875em; line-height: 1.1em; margin: 0 0 16px; } .landing-block h2 a { border-bottom: 1px solid #df1e12; color: #df1e12; position: relative; } .landing-block h2 a:hover { border-bottom-color: #000; color: #000; } /* -------------------------------------------------------------------- 15. Sidebar -------------------------------------------------------------------- */ .main-content #sidebar { float: right; min-width: 286px; width: 30.9%; padding-top: 70px; } .inner .main-content #sidebar { border-top: 11px solid #df1e12; margin: 0 -9999px 0 -341px; padding: 47px 9999px 47px 0; position: relative; /* width: 340px; */ max-width: 340px; } .tertiary .main-content #sidebar { /* this the best way to deal with this? */ border-top: 11px solid #fff; } .inner .main-content #sidebar>* { position: relative; z-index: 1; } /* [15.1. Homepage Tabs] */ .tabs-holder { padding: 75px 0 14px; } .tabs-holder .tabset { overflow: hidden; padding-bottom: 12px; width: 100%; } .tabs-holder .tabset li { float: left; font-size: 1.063em; line-height: 1.176em; max-width: 170px; } .tabs-holder .tabset a { background: #eee; color: #6b6b6b; float: left; margin-bottom: -9999px; padding: 14px 26px 9999px; text-transform: capitalize; } .tabs-holder .tabset a:hover { background: #eaeaea; color: #4f4f4f; } .tabs-holder .tabset .active:hover, .tabs-holder .tabset .active { background: #fff; color: #df1e12; } .tabs-holder .tab-content { background: #fff; padding: 30px 27px 7px; /* border:1px dotted blue; */ } .tabs-holder .tab-content .tab-feed { position: relative; /* border: 1px solid red; */ } /* Upcoming List Tab */ .upcoming-list { position: relative; padding-bottom: 16px; } .upcoming-list li { color: #707070; font-size: 0.875em; line-height: 1.357em; padding-top: 19px; position: relative; z-index: 10; } .upcoming-list li:first-child { padding-top: 0; } .upcoming-list .heading { color: #df1e12; } .upcoming-list h2 { color: #333; font-size: 1.143em; line-height: 1.188em; margin: 0; text-transform: none; } .upcoming-list h2 a { color: #333; } .upcoming-list h2 a:hover { color: #df1e12; } /* Research Buzz Tab */ .buzz-list { /* margin-top: -2px; */ padding-bottom: 8px; /* position: absolute; */ } .buzz-list li { color: #333; font-size: 0.813em; line-height: 1.462em; padding-top: 20px; position: relative; z-index: 10; } .buzz-list li:first-child { padding-top: 0; } .buzz-list h2 { color: #333; font-size: 1.231em; line-height: 1.375em; margin: 0 0 -1px; } .buzz-list h2 a { color: #333; } .buzz-list h2 a:hover { color: #df1e12; } .buzz-list .date { color: #707070; font-size: 1em; margin: 0 0 0 4px; } /* Tab Controls */ .tabs-holder .meta { background: #f9f8f6; font-size: 0.813em; line-height: 1.231em; text-align: right; } .tabs-holder .meta a { color: #707070; } .tabs-holder .meta a:hover { color: #df1e12; } .tabs-holder .meta .block { background: #fff; height: 1%; overflow: hidden; margin-bottom: 19px; padding-left: 29px; text-align: left; } .tabs-holder .meta .rss { color: #888; float: left; height: 11px; margin-top: 9px; overflow: hidden; position: relative; text-indent: -9999px; width: 11px; } .tabs-holder .meta .rss:hover { color: #df1e12; } .tabs-holder .meta .rss:after { content: "\e007"; font-size: 12px; height: 15px; left: 0; line-height: 15px; position: absolute; text-indent: 0; top: -1px; width: 12px; } .tabs-holder .meta .control-block { background: #f9f8f6; float: right; padding: 7px 0 0 7px; } /* [15.2. Side Column] */ #sidebar .block-box, .bottom-aside-content .block-box { font-size: 0.875em; line-height: 1.214em; } .inner #sidebar .block-box { padding: 0 30px 57px; } #sidebar .block-box02, .bottom-aside-content .block-box02 { padding: 0 0 54px 30px; } #sidebar .block-box02 { margin: 0 -9999px -158px 0; padding: 0 9999px 212px 30px; position: relative; } #sidebar .block-box02:after { content: ''; height: 100%; left: 0; position: absolute; top: -47px; width: 100%; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPgoJPHN0b3Agb2Zmc2V0PSI1OCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkYiLz4KCTxzdG9wIG9mZnNldD0iODMlIiBzdHlsZT0ic3RvcC1jb2xvcjojRjlGOEY2Ii8+Cgk8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGOUY4RjYiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: #ffffff; background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 58%, #f9f8f6 83%, #f9f8f6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(58%,#ffffff), color-stop(83%,#f9f8f6), color-stop(100%,#f9f8f6)); background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 58%,#f9f8f6 83%,#f9f8f6 100%); background: linear-gradient(to bottom, #ffffff 0%,#ffffff 58%,#f9f8f6 83%,#f9f8f6 100%); } /* [15.3. Side Nav ] */ #sidebar .block-box02 ul { position: relative; z-index: 2; } #sidebar .block-box02 ul li, .bottom-aside-content .block-box02 ul li { border-bottom: 1px solid #e0e0e0; padding: 7px 0 8px; } #sidebar .block-box02 ul li:first-child, .bottom-aside-content .block-box02 ul li:first-child { padding-top: 0; } #sidebar .block-box02 a, .bottom-aside-content .block-box02 a { color: #707070; } #sidebar .block-box02 .active > a, .bottom-aside-content .block-box02 .active > a { color: #222; } #sidebar .block-box02 a:hover, #sidebar .block-box02 .active a:hover, .bottom-aside-content .block-box02 a:hover, .bottom-aside-content .block-box02 .active a:hover { color: #df1e12; } #sidebar .block-box h2, .bottom-aside-content .block-box02 h2 { color: #707070; font-size: 1.214em; line-height: 1.412em; margin: 0 0 6px; position: relative; text-transform: capitalize; z-index: 2; } #sidebar .block-box ul li, .bottom-aside-content .block-box ul li { padding: 0 0 9px 11px; position: relative; } #sidebar .block-box ul li:after, .bottom-aside-content .block-box ul li:after { color: #df1e12; content: '›'; height: 16px; left: 0; position: absolute; top: 0; width: 10px; } #sidebar .block-box02 ul ul { margin-left: 18px; padding: 8px 0 4px; } #sidebar .block-box02 ul li ul li, .bottom-aside-content .block-box02 ul li ul li { border-bottom: none; font-size: 0.775em; line-height: 1.214em; padding: 4px 0; } /* [15.4. Side Banner ] */ .banner { background: #b31b1b; color: #ff968f; font-size: 1.115em; line-height: 1.167em; margin-bottom: 62px; min-height: 100px; position: relative; width: 100%; } .banner a { color: #ff968f; text-transform: uppercase; } .banner strong { color: #fff; display: block; font-size: 1.788em; line-height: 1.002em; margin-top: -2px; text-transform: none; } .banner img { height: 100%; mix-blend-mode: soft-light; position: absolute; right: 0; top: 0; } .banner .box { padding: 23px 75px 29px 29px; position: relative; z-index: 1; } /* [15.5. Info Carousel ] */ .info-carousel { margin-bottom: 57px; position: relative; width: 100%; } .info-carousel .slideset { overflow: hidden; position: relative; width: 100%; } .info-carousel .slide { background: #fff; position: absolute; width: 100%; z-index: 1; } .info-carousel .slide.active { z-index: 2; } .info-carousel .box { color: #333; font-size: 0.813em; height: 1%; line-height: 1.692em; overflow: hidden; padding: 22px 31px 38px; } .info-carousel .box .heading { color: #006699; font-size: 1.308em; line-height: 1.176em; padding: 0 0 1px; text-transform: capitalize; } .info-carousel .box .heading h2, .info-carousel .box .heading h3 { color: #222; font-size: 0.941em; line-height: 1.5em; margin-bottom: 0; padding-top: 4px; text-transform: none; } .info-carousel .box .heading h3 { color: #6b6b6b; padding: 0; } /* [15.6. Find Info Block ] */ .info-block { background: #fff; color: #333; font-size: 0.813em; line-height: 1.846em; padding: 25px 30px; } .info-block h2 { color: #df1e12; font-size: 1.308em; line-height: 1.412em; margin-bottom: 1px; text-transform: capitalize; } .info-block address { font-style: normal; } .info-block strong { display: block; font-size: 16px; line-height: 26px; margin-bottom: -1px; } .info-block address span { display: block; } .info-block dl { color: #707070; font-size: 1.231em; height: 1%; line-height: 1.5em; overflow: hidden; padding: 8px 0 3px; } .info-block dl a { color: #707070; } .info-block dl a:hover, .info-block li a:hover { color: #df1e12; } .info-block dl dt { color: #df1e12; float: left; font-size: 15px; line-height: 16px; overflow: hidden; position: relative; text-indent: -9999px; } .info-block dl .phone { height: 16px; margin: 5px 0 0 1px; width: 17px; } .info-block dl .email { height: 16px; line-height: 12px; margin-top: 7px; width: 17px; } .info-block dl .web { height: 16px; margin-top: 5px; width: 17px; } .info-block dl .phone:after { content: "\e005"; } .info-block dl .email:after { content: "\e006"; } .info-block dl .web:after { content: "\e009"; } .info-block dl .phone:after, .info-block dl .email:after, .info-block dl .web:after { left: 1px; position: absolute; text-indent: 0; top: 1px; } .info-block dl dd { height: 1%; min-height: 24px; overflow: hidden; padding: 0 0 0 12px; word-wrap: break-word; } .info-block li { font-size: 1.231em; line-height: 1.188em; padding: 0 0 5px 12px; position: relative; } .info-block li:before { color: #df1e12; content: '›'; left: 0; position: absolute; top: 0; } .info-block li a { color: #707070; } /* -------------------------------------------------------------------- 16. Twitter Area -------------------------------------------------------------------- */ .twitter-area { padding-top: 51px; } .twitter-area .container { color: #222; font-size: 0.875em; line-height: 1.714em; overflow: hidden; padding-bottom: 28px; position: relative; } .twitter-area .heading { line-height: 1.188em; float: left; font-size: 1.143em; padding: 47px 22px; width: 236px; } .twitter-area h3 { color: #df1e12; font-size: 1.125em; line-height: 1.167em; margin-bottom: 1px; } .twitter-area .heading h3 a { color: #df1e12; } .twitter-area .heading a { color: #707070; } .twitter-area .heading a:hover { color: #df1e12; } .twitter-area .content { height: 1%; margin-right: 122px; overflow: hidden; padding: 46px 0; position: relative; } .twitter-area .content:after { color: #aaa; content: "\e003"; font-size: 23px; height: 30px; left: 37.8%; line-height: 24px; position: absolute; top: 0; width: 30px; } .twitter-area .content a, .twitter-area .content .date { color: #707070; font-size: 0.929em; margin-left: 4px; } .twitter-area .content a:hover { color: #df1e12; } /* -------------------------------------------------------------------- 17. By the Numbers -------------------------------------------------------------------- */ .numbers-block { padding-top: 43px; } .numbers-block h2 { color: #006699; font-size: 1.5em; line-height: 1.125em; margin: 0 22px 55px; } .numbers-block .holder { display: table; padding-bottom: 59px; width: 100%; } .numbers-block .holder .block { color: #222; display: table-cell; font-size: 0.875em; line-height: 1.429em; padding: 0 30px 0 22px; vertical-align: top; width: 25%; } .numbers-block .holder h3 { border-bottom: 1px solid #e0e0e0; color: #df1e12; font-size: 5.857em; line-height: 1.037em; margin: 0 auto 25px; padding-bottom: 16px; text-align: center; width: 100%; } .bottom-aside-content { border-top: 11px solid #f9f8f6; display: none; } /* -------------------------------------------------------------------- 18. Global Paging -------------------------------------------------------------------- */ .global-paging { margin-top: -49px; position: fixed; right: 0; top: 50%; width: 48px; z-index: 100; } .global-paging a { background: #e0e0e0; display: block; height: 48px; margin-top: 1px; overflow: hidden; position: relative; text-indent: -9999px; width: 100%; zoom: 1; filter: alpha(opacity=90); opacity: 0.90; } .global-paging a:hover { background: #df1e12; opacity: 1; } .global-paging a:first-child { margin: 0; } .global-paging a:after { background: url('../images/sprite.png') no-repeat; content: ''; height: 19px; left: 18px; position: absolute; top: 14px; width: 11px; } .global-paging .next:after { background-position: -385px 0; } .global-paging .prev:after { background-position: -369px 0; } /* -------------------------------------------------------------------- 19. Footer -------------------------------------------------------------------- */ #footer { background-color: #b31b1b; /* background-image: url('../images/footer-bg.png'); background-repeat: no-repeat; background-position: 95% 35%; background-size: cover; background-blend-mode: soft-light; */ height: 196px; } #footer .container { color: #ffc6bd; font-size: 0.875em; line-height: 1.221em; overflow: hidden; padding-top: 25px; position: relative; } #footer .holder { display: table; width: 100%; } #footer .holder .cell { display: table-cell; /* vertical-align: middle; width: 190px; */ } #footer .holder .cell:first-child, #footer .holder .last { vertical-align: top; } #footer .holder .cell:first-child { padding: 18px 12px 0 22px; /* width: 466px; */ } #footer .holder .cell img { float: right; padding: 4px 50px 0; } #footer .holder .last { padding: 0 0 0 12px; /* width: 442px; */ } #footer .holder ul { padding: 5px 0 10px; } #footer .holder ul li { display: inline; font-size: 1.25em; padding: 0 7px; text-transform: capitalize; } #footer .holder ul li:first-child { padding-left: 0; } #footer a { color: #eddede; } #footer a:hover { color: #fff; } /* #footer .credit { color: #ff968f; float: right; margin: 12px 23px 12px 0; text-transform: capitalize; } .logo-footer { background-color: #b31b1b; background-image: url('../images/footer-bg1.png'); background-repeat: no-repeat; background-position: 75% bottom; background-size: cover; display: block; background-blend-mode: soft-light; height: 196px; margin: 0 auto; min-width: 100%; margin-top: -19px; overflow: hidden; text-indent: -9999px; width: 188px; opacity: 1; transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; } .logo-footer a { display: block; height: 100%; } */ /* -------------------------------------------------------------------- 20. Google Search -------------------------------------------------------------------- */ #content .gsc-control-cse { font-family: 'DroidSerif-Regular', serif; border-color: #e9e9e9; background-color: #fff; } #content .gsc-control-cse .gsc-table-result { font-family: 'DroidSerif-Regular', serif; margin-left: 0; } #content .gsc-webResult.gsc-result, #content .gsc-results .gsc-imageResult { border-color: #fff; background-color: #fff; padding: 12px 0; } #content .gsc-webResult.gsc-result:hover, #content .gsc-imageResult:hover { border-color: #fff; background-color: #fff; } #content .gs-webResult.gs-result a.gs-title:link, #content .gs-webResult.gs-result a.gs-title:link b, #content .gs-imageResult a.gs-title:link, #content .gs-imageResult a.gs-title:link b { color: #df1e12; } #content .gs-webResult.gs-result a.gs-title:visited, #content .gs-webResult.gs-result a.gs-title:visited b, #content .gs-imageResult a.gs-title:visited, #content .gs-imageResult a.gs-title:visited b { color: #e55251; } #content .gs-webResult.gs-result a.gs-title:hover, #content .gs-webResult.gs-result a.gs-title:hover b, #content .gs-imageResult a.gs-title:hover, #content .gs-imageResult a.gs-title:hover b { color: #b31b1b; } #content .gs-webResult.gs-result a.gs-title:active, #content .gs-webResult.gs-result a.gs-title:active b, #content .gs-imageResult a.gs-title:active, #content .gs-imageResult a.gs-title:active b { color: #006699; } #content .gsc-cursor-page, #content a.gsc-trailing-more-results:link { color: #df1e12; } #content .gs-webResult .gs-snippet, #content .gs-imageResult .gs-snippet, #content .gs-fileFormatType { color: #333; } #content .gs-webResult div.gs-visibleUrl, #content .gs-imageResult div.gs-visibleUrl { color: #000; padding-bottom: 0; } #content .gsc-cursor-box { border-color: #fff; } #content .gsc-results .gsc-cursor-box .gsc-cursor-page { border: #df1e12; background-color: #fff; color: #df1e12; } #content .gsc-results .gsc-cursor-box .gsc-cursor-current-page { border: #df1e12; background-color: #df1e12; color: #fff; } #content .gsc-result .gs-title { height: 1.4em; } #content td.gcsc-branding-img-noclear a { border: none; margin: auto; padding: auto; width: auto; } #content .gcsc-find-more-on-google { display: none; } /* -------------------------------------------------------------------- 21. Response -------------------------------------------------------------------- */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .logo { /* Reference the @2x Sprite */ background-image: url(../images/logo-2x.png); /* Translate the @2x sprite's dimensions back to 1x */ background-size: 384px 113px; } .nav-holder .opener:after, .search-holder.active .opener:after, .ez-radio, .video-holder .control-block .btn-prev:after, .video-holder .control-block .btn-next:after, .tabs-holder .meta .control-block .btn-prev:after, .tabs-holder .meta .control-block .btn-next:after, .info-carousel .paging .btn-prev:after, .info-carousel .paging .btn-next:after, .gallery-block .btn-prev2:after, .gallery-block .btn-next2:after, .slide-boxes .box .opener .icon em, .global-paging a:after { /* Reference the @2x Sprite */ background-image: url(../images/sprite-2x.png); /* Translate the @2x sprite's dimensions back to 1x */ background-size: 445px 49px; } } @media only screen and (max-width: 1125px) { .fixed .nav li { padding: 0 9px; } .static .nav a { padding: 22px 11px 19px 21px; } .slide-boxes .box .opener { margin-top: 20px; } .slide-boxes .box .opener .holder { padding: 20px 23px 13px 23px; } .slide-boxes .box .opener .heading { font-size: 1.175em; } .slide-boxes .box .opener p { font-size: 0.975em; line-height: 1.325em; } .slide-boxes .box .opener .image { height: 160px; width: 160px; } .figure { max-width: 280px; } } @media only screen and (max-width: 1019px) { .cycle-gallery .gallery-holder { height: 370px; } .inner .cycle-gallery .gallery-holder { height: 187px; } .cycle-gallery .heading { bottom: 21px; left: 58px; padding: 6px 13px 6px 12px; } .cycle-gallery .heading h1 { font-size: 32px; line-height: 40px; } .slideshow { bottom: 30px; right: 33px; width: 341px; } .slideshow-slide .text-box { font-size: 15px; line-height: 22px; } .slideshow-slide .text-holder { min-height: 0; padding: 23px 50px 5px 28px; } .slideshow-slide .text-box h1 { font-size: 60px; line-height: 62px; } .gallery-block .control-block { bottom: 1px; } .numbers-block { padding-top: 43px; } } @media only screen and (min-width: 951px) { .nav-slide.js-slide-hidden { left: auto !important; position: static !important; top: auto !important; } } @media only screen and (max-width: 950px) { #header .top { padding: 15px 0; } #header .top .container { padding: 0 14px; } #header .bottom .container { padding: 0 6px 0 18px; } #header .top .add-nav { display: none; } .nav-holder .opener { display: block; } .nav, .nav ul, .nav li { float: none; } .fixed .nav ul { padding: 0; } .nav-holder .nav-slide { left: 0; position: absolute; top: 100%; } .nav-holder .nav { padding: 19px 0; width: 246px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjk4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjg4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44OCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 19%, rgba(255,255,255,0.88) 62%, rgba(255,255,255,0.88) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(19%,rgba(255,255,255,0.98)), color-stop(62%,rgba(255,255,255,0.88)), color-stop(100%,rgba(255,255,255,0.88))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 19%,rgba(255,255,255,0.88) 62%,rgba(255,255,255,0.88) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 19%,rgba(255,255,255,0.88) 62%,rgba(255,255,255,0.88) 100%); } .static .nav .hover ul { display: none; } .static .nav a:hover, .static .nav .active a, .static .nav .hover > a { background: none; } .static .nav-holder .nav li, .fixed .nav li { font-family: 'Kanit-Regular', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } .fixed .nav li { font-size: 16px; line-height: 19px; padding: 0; } .static .nav a, .fixed .nav a { float: none; display: block; padding: 9px 28px 8px; } .fixed .nav a, .fixed .nav a:hover { color: #df1e12; } .fixed .nav a:hover { background: #fff; } .nav-holder .add-nav { display: block; } .nav-holder .add-nav a { color: #707070; } .nav-holder .add-nav a:hover { color: #df1e12; } /* #header .social { padding-top: 17px; } #header .social li { font-size: 15px; padding-left: 5px; } #header .social a.twitter { font-size: 12px; } #header .social a { padding: 5px; } */ .search-holder { margin-left: 12px; } .search-holder .opener { font-size: 14px; height: 54px; width: 61px; } .search-holder.active .opener:after, .fixed .search-holder.active .opener:after, .fixed .search-holder.active .opener:hover:after { left: 25px; } .search-holder .slide { width: 401px; } .search-form { padding: 14px 20px 12px; } .fixed .logo { display: none; } #header .fixed .block { float: none; height: 1%; padding: 0 10px 0 14px; } #header .fixed .block:after { content: ''; display: block; clear: both; } .fixed .nav-holder .opener { color: #fff; padding: 20px 64px 19px 18px; } .fixed .nav-holder .opener:after { background-position: -92px 0; right: 27px; top: 24px; } .fixed .nav-holder.active .opener { color: #df1e12; } .fixed .nav-holder.active .opener:after { background-position: -73px 0; height: 14px; right: 37px; top: 24px; width: 14px; } .fixed .search-holder { float: right; margin: 0; } .fixed .search-holder .opener { height: 65px; width: 69px; } .fixed .search-holder .slide { width: 425px; } .fixed .search-form { padding: 14px 29px 12px; } .main-content { padding-bottom: 32px; } .main-content .container { padding: 0 34px 0 36px; } .inner .main-content { padding-bottom: 29px; } .main-content #content, .home .main-content #content { float: none; margin-right: -3px; width: auto; } .inner .main-content #content { margin: 0 12px 0 14px; } .cycle-gallery .heading { left: 50px; } #content .content-holder { margin: 0; padding: 40px 0 10px; } .inner #content .content-holder { font-size: 0.875em; line-height: 1.714em; margin: 0; padding: 0; } h1.main-heading { font-size: 2em; line-height: 1.125em; margin-bottom: 46px; } .heading-holder { margin: 0 -9999px 31px; padding: 22px 9999px 10px; } .heading-holder .breadcrumbs { padding-bottom: 7px; } .heading-holder .breadcrumbs li { font-size: 1em; } .heading-holder h1.main-heading { font-size: 4.857em; line-height: 1.044em; } .boxs-holder .cell { padding-left: 15px; width: 343px; } .boxs-holder .cell:first-child { padding: 0 15px 0 0; width: 340px; } .video-holder .control-block { padding: 7px 0 0 7px; } .post { padding-bottom: 59px; } .post .heading { padding-bottom: 20px; } .post .heading h1, .post .heading h2 { font-size: 2.286em; line-height: 1.063em; } .post h1 { font-size: 2.143em; line-height: 1.1em; margin: -4px 0 12px; } .post h2 { font-size: 1.571em; line-height: 1.136em; } .post h3 { font-size: 1.419em; line-height: 1.15em; } .post h4, .post h5 { font-size: 1.143em; line-height: 1.188em; } .post h5 { margin-bottom: 3px; } .post h6 { font-size: 1.214em; line-height: 1.176em; margin-bottom: 2px; } blockquote { font-size: 1.857em; line-height: 1.385em; padding: 16px 60px 32px; } blockquote:after { font-size: 110px; left: -12px; line-height: 110px; top: 2px; } .post ul, .post ul ul, .post ul ol, .post ol, .post ol ol, .post ol ul { line-height: 1.143em; } .post ul, .post ol { margin: 0 0 18px 37px; padding-top: 5px; } .post ul ul, .post ul ol, .post ol ol, .post ol ul { /* margin-bottom: -10px; */ padding: 16px 18px 0; } .post ul li, .post ol li { padding: 0 0 12px 17px; } .post ul>li:after { top: 6px; } /* .post ul>li:after { border-radius: 2px; height: 4px; top: 6px; width: 4px; } */ .post ul ul li, .post ul ol li, .post ol ol li, .post ol ul li { padding: 0 0 9px 11px; } /* .call-out-list { margin-bottom: 23px; } */ .call-out-list h2 { font-size: 1.429em; line-height: 1.15em; margin-bottom: 12px; } .call-out-list ol, .call-out-list ul { margin: 0; } .call-out-list ol li, .call-out-list ul li { /* font-size: 1.429em; */ /* line-height: 1.2em; */ padding: 0 0 0 35px; } .post p { margin-bottom: 24px; } .post p.note { font-size: 1em; line-height: 1.429em; margin: -25px 0 27px; } /* .note, .post .note, .post .block .note { font-size: 1em; line-height: 1.429em; margin: -25px 0 27px; } */ .text-block { font-size: 0.929em; line-height: 1.846em; margin-bottom: 57px; padding: 30px 30px 15px; } .text-block .heading { font-size: 1.231em; line-height: 1.188em; padding-bottom: 2px; } .text-block .heading h2 { font-size: 0.938em; line-height: 1.2em; padding-top: 6px; } .slide-boxes { padding-bottom: 69px; } .slide-boxes .box .opener { margin-top: 22px; } .slide-boxes .box .opener .image { height: 205px; width: 205px; } .slide-boxes .box .opener .holder { font-size: 1.071em; line-height: 1.467em; padding: 49px 27px 13px 43px; } .slide-boxes .box .opener .heading { font-size: 1.4em; line-height: 1.143em; padding-bottom: 2px; } .slide-boxes .box .opener .heading h2 { font-size: 1.714em; line-height: 1.083em; padding: 0; } .slide-boxes .box .opener p { margin-bottom: -2px; } .slide-boxes .box .opener .icon { border-radius: 25px; height: 49px; right: 16px; top: 15px; width: 49px; } .slide-boxes .box .opener .icon em { left: 11px; top: 11px; } .slide-boxes .slide { font-size: 1em; line-height: 1.786em; } .slide-boxes .slide article { padding: 37px 35px 45px 45px; } .slide-boxes .slide .heading { font-size: 1.143em; line-height: 1.188em; } .slide-boxes .slide .heading h3 { font-size: 1.375em; line-height: 1.091em; margin-bottom: 6px; } .slide-boxes .slide .heading em { font-size: 0.875em; line-height: 1.214em; } .slide-boxes .slide p { margin-bottom: 35px; } .landing-block { padding-bottom: 69px; } .landing-block article { font-size: 1.143em; line-height: 1.75em; } .landing-block h2 { font-size: 1.875em; line-height: 1.067em; margin-bottom: 16px; } .landing-block article { padding: 19px 0 14px; } .main-content #sidebar, .inner .main-content #sidebar { float: none; margin: 0 0 0 -4px; max-width: 100%; /* */ min-width: 1px; float: none; width: auto; } .inner .main-content #sidebar { border-style: none; font-size: 0.875em; line-height: 1.714em; margin: 0; padding: 0 25px 0 20px; } .inner .main-content #sidebar:after { display: none; } .tabs-holder { padding: 60px 0 5px; } .tabs-holder .tab-content { padding-bottom: 2px; } .tabs-holder .meta .block { margin-bottom: 20px; } #sidebar .block-box { padding-left: 4px; } .banner { font-size: 1.276em; line-height: 1.167em; margin-bottom: 51px; } .banner strong { font-size: 1.778em; line-height: 1.002em; } .info-carousel { margin-bottom: 32px; } .info-carousel .slide img { float: left; margin-right: -149px; } .info-carousel .box { background: #fff; font-size: 0.929em; line-height: 1.692em; /* margin-bottom: -9999px; */ /*padding: 16px 20px 9999px 18px; */ padding: 20px 20px 38px; position: relative; } .info-carousel .box .heading { font-size: 1.308em; line-height: 1.176em; } .info-carousel .box .heading h2, .info-carousel .box .heading h3 { font-size: 0.941em; line-height: 1.5em; } .info-block { font-size: 1.143em; line-height: 1.5em; padding: 27px 30px 23px; } .info-block h2 { font-size: 1.063em; line-height: 1.176em; margin-bottom: 3px; } .info-block dl { padding-bottom: 0; } .info-block dl, .info-block li { font-size: 1em; line-height: 1.5em; } .info-block li { padding-bottom: 0; } .numbers-block { padding: 43px 50px 0; } .numbers-block h2 { margin: 0 0 26px; } .numbers-block .holder { overflow: hidden; margin: 0 auto; padding: 0 0 35px; width: 588px; } .numbers-block .holder .block { display: inline-block; padding: 29px 22px 30px; width: 238px; } .info-block address span { display: block; font-size: 0.813em; line-height: 1.846em; } .block-box-holder { display: none; } .bottom-aside-content { display: block; padding: 39px 0 30px; } .bottom-aside-content .container { padding: 0 66px 0 59px; } .bottom-aside-content .block-box02 { padding: 0 0 32px; } .bottom-aside-content .block-box02 ul ul, .bottom-aside-content .block-box02 ul li { padding: 9px 0 6px; } .bottom-aside-content .block-box h2 { color: #707070; font-size: 1.214em; margin-bottom: 8px; text-transform: lowercase; } .twitter-area { padding-top: 44px; } .twitter-area .container { font-size: 0.813em; line-height: 1.846em; padding-bottom: 22px; } .twitter-area .heading { font-size: 1.154em; line-height: 1.133em; padding: 49px 12px 50px 0; width: 170px; } .twitter-area h3 { font-size: 1.133em; line-height: 1.176em; margin: 0 0 3px; } .twitter-area .content { margin-right: 42px; padding: 46px 0 38px; } .twitter-area .content a, .twitter-area .content .date { font-size: 1em; } .twitter-area .content:after { left: 36.6%; top: 1px; } /* #footer .container { padding-bottom: 14px; } */ #footer .holder .cell { display: none; } #footer .holder .cell:first-child, #footer .holder .last { display: table-cell; width: 30%; } #footer .holder .cell:first-child { padding: 18px 12px 0 0; width: 70%; } /* #footer .credit { margin: 7px 0; } */ .cycle-gallery .mask { width: 20%; } } /* @media only screen and (max-width: 950px) { #footer .logo-footer { opacity: 1; } } */ @media only screen and (max-width: 766px) { .container, .main-content .container { padding: 0 4px; } #header .top { padding: 7px 0 8px; } #header .top .container { padding: 0 12px; } #header .bottom .container, #header .fixed .container { padding: 0; } .logo { background-position: 0 -77px; height: 35px; margin: 3px 0 0 6px; width: 188px; } #header .block { padding: 0; } #header .block .social { display: none; } .nav-holder .opener, .fixed .nav-holder .opener { font-size: 16px; line-height: 19px; padding: 14px 52px 12px 10px; } .nav-holder .opener:after, .fixed .nav-holder .opener:after { /* background-position: -113px 0; height: 10px; right: 26px; top: 18px; width: 13px;*/ right: 18px; top: 15px; } /* .fixed .nav-holder .opener:after { background-position: -131px 0; } */ .nav-holder.active .opener:after, .fixed .nav-holder.active .opener:after { right: 26px; top: 17px; } .nav-holder .nav { background: #fff; padding: 6px 0 18px; width: 320px; } .nav-holder .nav li { border-bottom: 1px solid #eaeaea; } .static .nav a, .fixed .nav a { padding: 11px 16px 9px; } #header .social, #header .fixed .block .social { display: table; float: none; margin: 0 auto -1px; padding: 9px 10px 0 0; } #header .social li, #header .social a { border-style: none; } #header .social li { padding: 0 9px; } .search-holder .opener, .fixed .search-holder .opener { height: 45px; line-height: 16px; width: 45px; } .search-holder.active .opener, .fixed .search-holder.active .opener, .fixed .search-holder.active .opener:hover { line-height: 15px; } .search-holder.active .opener:after, .fixed .search-holder.active .opener:after, .fixed .search-holder.active .opener:hover:after { left: 13px; top: 17px; } .search-holder, .fixed .search-holder { position: static; } .search-holder .slide, .fixed .search-holder .slide { width: 100%; } .search-form, .fixed .search-form { padding: 14px 16px 12px 18px; } .search-form .row .text { float: left; width: 100%; } .search-form .row .text strong { display: block; margin: 0 20px 0 0; } .search-form .row .text strong:after { content: ''; display: block; clear: both; } .search-form input[type=search] { width: 100%; } .search-form .submit { margin: 5px 0 0 -18px; } .search-form .radio-holder { margin-left: -2px; } .cycle-gallery .gallery-holder { height: 174px; } .inner .cycle-gallery .gallery-holder { height: 193px; } /* .cycle-gallery .heading { display: none; } */ .cycle-gallery .heading { bottom: 20px; left: 28px; padding: 6px 13px 6px 12px; } .cycle-gallery .heading h1 { font-size: 24px; line-height: 36px; } .cycle-gallery .mask { width: 100%; } .slideshow { bottom: auto; position: relative; right: auto; width: 100%; } .slideshow-slideset { height: 171px; } .slideshow-slide { bottom: auto; top: 0; } .slideshow-slide .text-box h1 { font-size: 58px; line-height: 62px; } .slideshow-slide .text-holder { min-height: 0; padding: 15px 34px 5px 24px; } .slideshow-slide .text-holder, .slideshow-slide .btn-holder { background: #b31b1b; } .slideshow-slide .btn-holder { margin: 0 91px 0 0; padding: 9px 28px 13px; } .gallery-block .control-block { bottom: 0; right: 4px; width: 84px; } .gallery-block .btn-prev2, .gallery-block .btn-next2 { height: 41px; width: 41px; } .gallery-block .btn-prev2:after, .gallery-block .btn-next2:after { left: 13px; top: 10px; } .gallery-block .btn-next2:after { left: 17px; } .main-content { padding-bottom: 28px; } .inner .main-content { padding-bottom: 5px; } #content .content-holder { padding: 22px 0 0; } #header .fixed .block { padding: 0; } h1.main-heading { font-size: 1.75em; line-height: 1.143em; margin: 0 13px 28px 21px; } .boxs-holder { display: block; margin-bottom: -1px; } .boxs-holder .cell, .boxs-holder .cell:first-child { display: block; padding: 0 3px 6px 0; width: auto; } .video-holder .video-slide { padding: 0 18px 33px 16px; } .video-holder .video { margin: 0 -18px 20px -16px; } .video-holder .video .play { margin: -42px 0 0 -42px; } .video-holder h2 { line-height: 1.091em; margin: -2px 0 1px; } .boxs-holder .box { margin-top: 4px; overflow: hidden; padding: 20px; } .boxs-holder .box h2 { margin-bottom: 22px; } .boxs-holder .box:first-child { padding: 20px; } /* .boxs-holder .box:first-child h2 { margin-bottom: 24px; } .boxs-holder .box img { height: 100%; left: auto; right: -7px; } */ .main-content #sidebar { margin: 0; } .figure { max-width: 320px; } .figure, .figure.alignnone, .figure.alignleft, .figure.alignright { float: none; margin: 0; } .figure figcaption { margin-bottom: 8px; } .tabs-holder { padding: 0 0 10px; } .tabs-holder .tabset a { padding: 14px 19px 9999px 15px; } .tabs-holder .tab-content { padding: 30px 20px 7px 16px; } .tabs-holder .meta a { margin-right: 6px; } .tabs-holder .meta .block { margin-bottom: 19px; padding-left: 18px; } .tabs-holder .meta .block a { margin-right: 0; } .inner #content .content-holder { margin: 0 2px 16px; } .heading-holder { margin-bottom: 24px; padding: 15px 9999px 4px; } .heading-holder .breadcrumbs { padding: 0 11px 11px 4px; } .heading-holder .breadcrumbs li:first-child { padding: 0 11px 0 0; } .heading-holder .breadcrumbs li { font-size: 0.929em; line-height: 1.308em; padding: 0 11px 0 4px; } .heading-holder h1.main-heading { font-size: 4.143em; line-height: 1em; margin-right: 20px; } .global-paging { margin-top: -41px; width: 34px; } .global-paging a { height: 40px; } .global-paging a:after { left: 14px; height: 15px; top: 13px; width: 9px; } .global-paging .next:after { background-position: -422px 0; } .global-paging .prev:after { background-position: -436px 0; } .post { padding-bottom: 52px; } .post .heading { padding-bottom: 19px; } .post .heading h1, .post .heading h2 { font-size: 2em; line-height: 1.214em; } blockquote { padding: 57px 20px 36px 0; } blockquote:after { top: -5px; left: -9px; } .post ul { margin: 0 17px 18px 2px; } .post ol { margin: 0 17px 18px 5px; } .post p.note { font-size: 0.929em; line-height: 1.538em; margin: -23px 0 27px; } /* .note, .post .note, .post .block .note { font-size: 0.929em; line-height: 1.538em; margin: -23px 0 27px; } */ .btn, .post .btn { font-size: 22px; line-height: 25px; } .btn.download, .post .btn.download { border-right-width: 39px; padding: 7px 5px 6px 11px; width: 97px; } .btn.download:after, .post .btn.download:after { font-size: 14px; line-height: 14px; margin-left: 12px; top: 13px; } .call-out-list { margin: 0 6px 38px; } .call-out-list ol li, .call-out-list ul li { padding-left: 27px; } .call-out-list ol li:before { margin: 0 0 0 -27px; width: 27px; } .call-out-list ul li:after { font-size: 14px; left: 5px; top: 7px; } .text-block { font-size: 0.857em; line-height: 2em; margin: 0 -12px 16px -14px; padding: 30px 22px 15px 22px; } .text-block .heading { font-size: 1.25em; line-height: 1.2em; padding-bottom: 1px; } .text-block .heading h2 { font-size: 0.933em; line-height: 1.714em; padding-top: 2px; } .slide-boxes { margin: 0 -13px 0 -15px; padding-bottom: 35px; width: auto; } .slide-boxes .box .opener { margin-top: 5px; } .slide-boxes .box .opener .image { float: none; height: auto; width: auto; } .slide-boxes .box .opener .image canvas { margin-top: -8px; } .slide-boxes .box .opener img { float: none; margin-top: -8px; max-width: 100%; width: 100%; } .slide-boxes .box .opener .holder { background: #b31b1b; font: 0.929em/1.231em 'Kanit-Thin', Arial, Helvetica, sans-serif; margin-top: -94px; padding: 10px 8px 9px 18px; position: relative; } .slide-boxes .box .opener .heading { font-size: 1.154em; line-height: 1.2em; padding-bottom: 0; } .slide-boxes .box .opener .heading h2 { font-size: 1.6em; line-height: 1.125em; margin-top: -3px; } .slide-boxes .box .opener p { margin-bottom: 0; } .slide-boxes .box .opener .icon { border-radius: 16px; width: 31px; height: 31px; right: 9px; top: 8px; } .slide-boxes .box .opener .icon em { background-position: -401px 0; height: 17px; left: 8px; top: 7px; width: 16px; } .slide-boxes .slide { font-size: 0.857em; line-height: 1.667em; } .slide-boxes .slide article { padding: 23px 20px 29px; } .slide-boxes .slide .heading { font-size: 1.25em; line-height: 1.2em; padding-bottom: 21px; } .slide-boxes .slide .heading h3 { font-size: 0.933em; line-height: 1.286em; margin-bottom: 2px; } .slide-boxes .slide .heading em { font-size: 0.8em; line-height: 1.5em; } .slide-boxes .slide p { margin-bottom: 22px; } .btn.video { border-right-width: 39px; padding: 8px 5px 5px 8px; width: 118px; } .btn.video:after, .post .btn.video:after { font-size: 28px; line-height: 28px; margin-left: 15px; top: 6px; } .landing-block { padding: 0 0 0 8px; } .landing-block article { font-size: 1em; line-height: 1.714em; padding: 20px 0 25px; } .landing-block h2 { font-size: 2.143em; line-height: 1.467em; margin-bottom: 16px; } .info-carousel .slide img { float: none; margin: 0; max-width: 100%; width: 100%; } /* .info-block address span { display: block; font-size: 0.813em; line-height: 1.846em; } */ .inner .main-content #sidebar { padding: 0 1px 0 2px; } #sidebar .block-box { padding-left: 16px; } .banner { margin-bottom: 7px; } .banner .box { padding: 23px 75px 20px 20px; } .info-carousel { margin-bottom: 5px; } .info-carousel .box { margin-bottom: 0; padding: 22px 4px 21px 22px; } .info-carousel .box .heading h2 { padding-top: 5px; } .info-block { padding: 27px 21px 28px; } .twitter-area { padding-top: 34px; } .twitter-area .container { padding-bottom: 36px; } .twitter-area .heading { float: none; font-size: 1.154em; line-height: 1.2em; padding: 48px 22px 23px 0; text-align: center; width: auto; } .twitter-area h3 { font-size: 1.133em; line-height: 1.176em; margin-bottom: 2px; } .twitter-area .content { margin: 0; padding: 0 13px 13px; position: static; } .twitter-area .content a, .twitter-area .content .date { margin: 0 10px 0 0; white-space: nowrap; } .twitter-area .content:after { left: 45%; } .numbers-block h2 { margin-left: 13px; } .numbers-block { padding: 43px 19px 0; } .numbers-block .holder { display: block; margin: 0; padding: 0 0 36px; width: auto; } .numbers-block .holder .block { display: block; margin: 0 auto; max-width: 400px; padding-bottom: 4px; width: auto; } .bottom-aside-content { padding: 41px 0 30px; } .bottom-aside-content .container { padding: 0 29px; } .bottom-aside-content .block-box02 ul li { padding: 7px 0 8px; } #footer .container { padding: 16px 20px 0; } #footer .holder ul { padding: 18px 0 12px; } #footer .holder ul li { padding: 0 5px; } #footer .holder .cell img { float: left; padding: 16px 0; width: 112px; } #footer .holder .cell:first-child, #footer .holder .last { display: block; padding: 0; width: auto; } /* #footer .logo-footer { display: none; } #footer .credit { float: none; } */ } body, #wrapper, #spotlight { font-family: DroidSerif-Regular, Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } strong { font-family: DroidSerif-Bold, Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } em, blockquote:after { font-family: DroidSerif-Italic, Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } h1,h3,h4,h5, .post ul strong, ol strong, #footer strong, /* #footer .credit, */ .video-holder h2, .upcoming-list .heading, .upcoming-list .heading .date, .upcoming-list h2, .buzz-list h2, .search-form .radio-holder, /* .text-block .heading h2, */ .text-block header.heading h2, .slide-boxes .box .opener .heading h2, .slide-boxes .slide .heading h3, /* .landing-block h2, */ .info-carousel .box .heading h2, .info-block strong, .numbers-block h2, .numbers-block .holder strong, /* */ h2,h6, .search-holder.active .opener, .video-holder .heading, .boxs-holder .box .heading, .tabs-holder .tabset, .text-block .heading, .slide-boxes .box .opener .heading, .slide-boxes .box .opener:after, .slide-boxes .slide .heading, .banner, .info-carousel .box .heading, .slideshow-slide .btn-holder a { font-family: 'Kanit-Bold', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } /* h2,h6, .search-holder.active .opener, .video-holder .heading, .boxs-holder .box .heading, .tabs-holder .tabset, .text-block .heading, .slide-boxes .box .opener .heading, .slide-boxes .box .opener:after, .slide-boxes .slide .heading, .banner, .info-carousel .box .heading, .slideshow-slide .btn-holder a { font-family: 'Kanit-BoldSC', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } */ /* .nav-holder .opener, .static .nav li, .twitter-area .content a, .boxs-holder .box .more, .upcoming-list, .buzz-list .date, figcaption, .note, #sidebar .block-box, #sidebar .block-box02 ul li, .bottom-aside-content .block-box, .bottom-aside-content .block-box02 { font-family: 'Kanit-Medium', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } */ .landing-block h2 { font-family: 'Kanit-SemiBold', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } input, textarea, select, .input-placeholder-text, blockquote, .post ul em, ol em, #header .top .add-nav li, .numbers-block .holder em { font-family: 'Kanit-RegularItalic', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } .nav-holder .opener, .static .nav li, .nav-holder .opener, .static .nav li, .twitter-area .content a, .boxs-holder .box .more, .upcoming-list, .buzz-list .date, figcaption, .note, #sidebar .block-box, #sidebar .block-box02 ul li, .bottom-aside-content .block-box, .bottom-aside-content .block-box02, /* */ .fixed .nav li, .post ul, ol, .twitter-area .heading, .tabs-holder .meta, #footer, .heading-holder .breadcrumbs li, .slide-boxes .box .opener, .slide-boxes .slide .heading .more, .info-carousel .box .heading h3, .info-block dl, .info-block li, .numbers-block .holder, .slideshow-slide .text-box { font-family: 'Kanit-Regular', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } h1.main-heading, .boxs-holder .box h2, .post .heading h1, .post .heading h2, .btn, .banner strong, .numbers-block .holder h3, .slideshow-slide .text-box h1, .cycle-gallery .heading h1 { font-family: 'Kanit-Thin', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; } .twitter-area .content:after, .tabs-holder .meta .rss:after, #header .social li, .search-holder .opener, .search-form .submit, .heading-holder .breadcrumbs .home:after, .info-block dl dt, .btn:after, .post .btn:after { font-family: 'cur-icons'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; } /* -------------------------------------------------------------------- 22. Print Styles -------------------------------------------------------------------- */ @media print { *, *::before, *::after { background: #fff !important; color: #000 !important; /* Black prints faster */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #707070; page-break-inside: avoid; } /* * Printing Tables: * https://web.archive.org/web/20180815150934/https://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }