/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* Site Styles ================================================== */ h1, h2, h3, h4, h5, h6, p {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} p {} a {color: #0e4e8e; text-decoration:none;} a:hover {text-decoration: underline;} .left {float:left;} .right {float:left;} img.left {float:left; margin: 0 1.5em 1.5em 0;} img.right {float:left; margin: 0 1.5em 0 1.5em;} blockquote { border-left: 1px solid #ffbe73; background-color: #fff; background-image: url(images/fallback-gradient.png); background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fcf0e2), to(#fff)); background-image: -webkit-linear-gradient(left, #fcf0e2, #fff); background-image: -moz-linear-gradient(left, #fcf0e2, #fff); background-image: -ms-linear-gradient(left, #fcf0e2, #fff); background-image: -o-linear-gradient(left, #fcf0e2, #fff); } blockquote p {font-size:14px; padding-bottom:.6em; line-height:21px;} body {background: #fff url(../images/bg-page.jpg) 0 0 repeat;} /* Page Styles ================================================== */ /* Global masthead */ #header {background:#2f2f2f url(../images/bg-footer.jpg) 0 0 repeat-x; padding: 0px 0 0px 0;} #header .osu_logo {float:left; margin-right:20px;} #header h1 {font-size:32px; font-weight:bold; color:#fff;} #header h3 {font-size:16px; font-weight:normal; color:#fff; font-weight:bold;} #header h4 {font-size:16px; font-weight:normal; color:#fff; border-bottom: 4px solid #b00;} #header ul {margin-top:1em;} /* #header {background:#2f2f2f url(../images/bg-footer.jpg) 0 0 repeat-x; padding:5px 0 5px 0;} #header #identity {} #header #identity img {margin-top:-12px;} #header #identity h1#cph_logo {background: url(../images/logo-cph.png) 0 0 no-repeat; width:234px; height:51px; text-indent:-9999px; margin: 24px 0 0 85px; overflow:hidden;} #header #identity h1#neyman_logo {background: url(../images/logo-neyman.png) 0 0 no-repeat; width:660; height:60px; text-indent:-9999px; margin: 24px 0 0 85px; overflow:hidden;} #header #search {float:right; margin-top:-60px; text-align:right;} #header #search form * {float:left;} #header #search input[type="text"] {background: #fff url(../images/icon-mag_glass.png) 95% 50% no-repeat; border-radius:4px; font-style:italic;} #header #search button {width:28px; height:28px; padding:0; line-height:1; margin-left:5px;} #header #facebook_like { width:80px; float:right !important; margin: -20px 0 0 0; overflow:hidden;} #header #identity span.college_name a {width:232px; height:11px; overflow:hidden; background:url(../images/logo-center-cph.png) 0 0 no-repeat; text-indent:-9999px; display:block; margin-top:22px;} span.tagline {font-size:16px; font-style:italic; float:left; margin:-16px 0 0 250px;} */ /* Global navigation */ #global_nav {} #global_nav ul.nav { margin:0; padding:0;} #global_nav ul.nav li {position:relative; margin:0 1px 0 0; padding:0; list-style:none; float:left; /* z-index:1; */} #global_nav ul.nav li a {display:block; background:#333 url(../images/bg-nav.jpg) 0 0 repeat-x; padding:10px 15px; color:#fff; font-size:14px; font-weight:bold; text-decoration:none;} #global_nav ul.nav li.active a {color:#fff; background:#222;} #global_nav ul.nav li a:hover, #global_nav ul.nav li.active a:hover {background:#fff; color:#333;} #global_nav ul.nav li.active li a {color:#0e4e8e;} /*Reset dropdown link color for active section*/ /*Second level dropdown */ #global_nav ul.nav li .submenu {position: absolute; left:0; z-index:9999999 !important; display:none; width:200px; background:#fff; /*drop shadows for capable browsers*/ -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,.5); -moz-box-shadow: 0px 2px 3px rgba(0,0,0,.5); box-shadow: 0px 2px 3px rgba(0,0,0,.5); /*rounded corners for capable browsers*/ -webkit-border-radius:0 0 4px 4px; -moz-border-radius:0 0 4px 4px; border-radius: 0 0 4px 4px; /*border for less-capable browsers*/ border:1px solid #ccc\9; border-top:none\9; } #global_nav ul.nav li .submenu ul {margin:0 0 0 10px; padding:0;} #global_nav ul.nav li .submenu li {width:95%; margin-bottom:.5em;} #global_nav ul.nav li .submenu li, #global_nav ul.nav li.active .submenu li {background:transparent;} #global_nav ul.nav li .submenu li a, #global_nav ul.nav li.active .submenu li a {background:transparent; color:#0e4e8e; text-decoration:none; font-weight:400; font-size:12px; padding:0;} #global_nav ul.nav li .submenu li a:hover, #global_nav ul.nav li.active .submenu li a:hover {color:#900; background:transparent;} #global_nav ul.nav li .submenu {padding:10px 0 0 0;} #global_nav ul.nav li:hover .submenu {color:#900;} /* Large banner on home page */ #banner {margin-bottom:20px; position:relative;} #banner #banner_wrapper img {width:100%;} #banner #caption_wrapper {position:absolute; bottom:6px; right:0; overflow:hidden;} #banner #caption {float:right; width:50%; background: rgba(50,50,50,0.7); color:#fff; font-size:32px; font-family:"HelveticaNeue-Light", Helvetica, Arial, sans-serif; font-weight:lighter; border-top:5px solid #b00; padding:15px 10px 15px 20px; } #banner #subcaption {float:right; width:50%; background:rgba(255,255,255,0.9); padding:10px;} /* Sliding feature area on home page */ #slider {clear:both;} .bx-wrapper {width:912px !important; /* overflow:hidden; */ margin:0 auto;} .bx-window {width:912px !important; margin: 0; overflow:hidden;} a.bx-prev {position: absolute; top:0; left:-25px; z-index:10000; width:24px; height:250px; background:url(../images/page-prev.png) 0 0 no-repeat; display:block; text-indent:-9999px; overflow:hidden;} a.bx-next {position: absolute; top:0; right:-25px; z-index:10000; width:24px; height:250px; background:url(../images/page-next.png) 0 0 no-repeat; display:block; text-indent:-9999px; overflow:hidden;} ul#feature_list {overflow:hidden;} ul#feature_list li {list-style:none; margin:0; width:222px; padding:0 3px; overflow:hidden;} ul#feature_list .feature_summary {text-align:left; } ul#feature_list .feature_image {width:222px; height:140px; overflow:hidden;} ul#feature_list .feature_image img {width:100%;} ul#feature_list .feature_intro {background: #333; height:79px; overflow:hidden;} ul#feature_list .feature_intro p {margin:5px 10px 0; color:#ccc; font-size:12px; line-height:18px;} ul#feature_list .feature_intro a {color:#53a0e7;} ul#feature_list .feature_section {background: #222; height:20px; text-align:right; border-top:1px solid #b00;} ul#feature_list .feature_section a {font-size:10px; text-transform: uppercase; color:#999; text-decoration: none; margin-right:10px;} /* Styles for each subsection */ ul#feature_list .feature_section.cph {border-top:1px solid #b00;} ul#feature_list .feature_section.cphp {border-top:1px solid #00af9f;} ul#feature_list .feature_section.chopes {border-top:1px solid #53a0e7;} ul#feature_list .feature_section.cprc {border-top:1px solid #f89829;} /* Content - main column */ #main_column {background:rgba(255,255,255,0.9); overflow:hidden; box-shadow:0 3px 5px rgba(0,0,0,0.3); padding-bottom:0px;} #main_column h2 {color:#b00;} #main_column h3 {font-size:22px; line-height:28px; color:#444;} #main_column h4, #main_column h5, #main_column h6 {font-weight:bold;} #main_column h4 a {color:#333; text-decoration:none;} #main_column h4 a:hover {color:#0e4e8e; text-decoration:underline;} #main_column #breadcrumbs {background:#666; border-top:5px solid #b00; margin-bottom:30px; overflow:hidden;} #main_column #breadcrumbs ul {margin:0; padding:0 0 0 20px;} #main_column #breadcrumbs ul li {margin:0 0 0 3px; padding:8px 0; list-style:none; float:left; color:#aaa; font-size:11px;} #main_column #breadcrumbs ul li a {color:#fff; text-decoration:none;} #main_column #breadcrumbs ul li a:hover {text-decoration:underline;} #main_column #breadcrumbs ul li a:after {content: "\0020\00BB";} /* May be removed if CMS can put separator between items */ #share_this {padding:20px 0;} p.post_data {font-style:italic; font-size:12px;} span.more {font-weight:bold; float:right;} #pagination {width:100%; text-align:center;} #pagination a {margin:0 3px; padding:3px;} #pagination span.prev_page {margin-right:20px;} #pagination span.next_page {margin-left:20px;} /*---------------------------------- Slideshow ----------------------------------*/ #slideshow {background:transparent url(../images/bg-slideshow_glow.png) bottom center no-repeat; margin:0; padding:0; /* min-height:233px; */ /*border-bottom:solid 10px #dadada;*/ overflow:hidden; clear:both;} ul#imageList {margin:0; padding:0;} ul#imageList li {margin:0; padding:0;} ul#imageList li a {} div.bx-wrapper {width:100% !important; height:200px !important; overflow:hidden;margin:0 auto; box-shadow:0 0px 0px rgba(0,0,0,0.5);} div.bx-window { width:950px !important; height:200px !important; } li.pager {width:950px !important; height:200px !important;} a.bx-next {position:absolute; bottom:0; right:0; z-index:1000; height:30px; width:30px; background:url(../images/button-next.png) 0 0 no-repeat; display:block; text-indent:-9999px;} a.bx-prev {position:absolute; bottom:0; left:0; z-index:1000; height:30px; width:30px; background:url(../images/button-prev.png) 0 0 no-repeat; display:block; text-indent:-9999px;} .bx-pager{position:absolute; bottom:0; left:50%; z-index:1000;} .pager-link {} .pager-active {} #secondlevel_feature {background:transparent url(../images/bg-slideshow_glow.png) bottom center no-repeat; margin:0; padding:0; height:238px; border-bottom:solid 1px #dadada; overflow:hidden; clear:both; } #secondlevel_feature .container {box-shadow:0 10px 10px rgba(0,0,0,0.5);} #secondlevel_feature img {width:950px; height:200px;} #secondlevel_feature a { margin:0; padding:0; } div#content_end {width:100%; height:0px;} /* Content - sidebar */ #sidebar {} #sidebar h3 {background:#444; border-top:5px solid #b00; color:#fff; font-size:14px; font-weight:bold; margin-left:-20px; padding-left:20px;} #sidebar p, #sidebar ul, #sidebar ol {margin-top:15px; margin-left:0;} #sidebar li {} #sidebar li a {} #sidebar ul#popular_categories {margin:20px 0; padding:0; overflow:hidden;} #sidebar ul#popular_categories li {float:left; margin-right:10px;} #sidebar ul#popular_categories li a {padding:3px;} /* Global footer */ #footer {background:#2f2f2f url(../images/bg-footer.jpg) 0 0 repeat-x; padding: 20px 0;} #footer .osu_logo {float:left; margin-right:20px;} #footer h3 {font-size:16px; font-weight:normal; color:#fff; font-weight:bold;} #footer h4 {font-size:16px; font-weight:normal; color:#fff; border-bottom: 1px solid #b00;} #footer ul {margin-top:1em;} #footer p, #footer li, #footer a, #footer strong {color:#fff; font-size:12px; line-height:1.3em; margin-bottom:.5em;} #footer #social_icons {text-align:right; margin-top:1em;} #footer #social_icons a {margin-left:5px;} #footer #footer_links {margin-top:20px;} #footer #footer_links ul.event_listing {margin-bottom:1em;} #footer #footer_links ul.event_listing li {line-height:1.5em; margin-bottom:.5em;} #footer #footer_links ul.event_listing li a {color:#53a0e7;} #subfooter {padding:10px 0; background: #fff url(../images/bg-page.jpg) 0 0 repeat;} #subfooter img {margin-left:10px;} /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ /* Non-mobile browsers will not resize beyond this point */ @media only screen and (min-device-width: 768px) and (max-width: 959px) { /* Resize it */ #global_nav ul.nav li a {padding:.5em 1em; font-size:12px;} .bx-wrapper {width:95% !important; /* overflow:hidden; */ margin:0 auto;} .bx-window {width:100% !important; margin: 0; overflow:hidden;} /* Make it disappear... */ #header span.tagline {display:none; visibility:hidden;} #footer div.contact_info h3 {font-size:14px; padding-bottom:0; font-weight:bold; line-height:18px;} }/* END 768 - 959 */ /* All Mobile Sizes (devices and browser) */ @media only screen and (max-device-width: 767px) { /* Resize it */ #header {padding-top:0;} #header #identity {width:100%;} #header #identity img {width:50px; margin-right:5px; margin-top:-2px;} #header #identity h1#cph_logo {width:180px; height:50px; background-size: contain; margin-left:70px; } #header #search {width:100%; clear:both; margin-top:5px;} #header #search input[type="text"] {width:87%;} #global_nav ul.nav {width:100%;} #global_nav ul.nav li {width:49%;} #global_nav ul.nav li a {padding:.5em 0 .5em .8em; font-size:12px; width:100%; } #banner #banner_wrapper, #banner #caption_wrapper {width:100%; overflow:hidden;} #banner #caption {width:50%; font-size:13px; padding:5px; font-family:"HelveticaNeue","Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:bold; border-top:2px solid #b00;} #slider .bx-wrapper, #slider .bx-window {width:100% !important; height:420px; margin-bottom:30px;} ul#feature_list {width:420px !important; left:0 !important;} ul#feature_list li {float:none; height:100px; margin-bottom:5px;} ul#feature_list li, ul#feature_list .feature_summary {width:100%; } ul#feature_list .feature_image {float:left; width:122px;} ul#feature_list .feature_image img { width:122px; height:79px;} #footer, #footer .osu_logo, #footer .contact_info, #footer #social_icons {float:none; width:100%; text-align:center;} #footer .contact_info {margin-bottom:20px;} /* Make it disappear... */ #header span.tagline, #header #facebook_like, #banner #subcaption, #slider .bx-prev, #slider .bx-next, #footer #footer_links {display:none; visibility:hidden;} }/* END 767 */ /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-device-width: 480px) and (max-device-width: 767px) { } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-device-width: 479px) { /* Resize it */ #header #search {margin:0; width:100%;} #header #search input[type="text"] {width:85%;} #global_nav ul.nav li {width:48.5%;} ul#feature_list .feature_summary {width:298px; } #header #identity, #slider #feature_summary, #slider #feature_image, #slider #feature_intro, #slider #feature_section {width:100%;} #main_column p, #main_column h3, #main_column h4, #main_column h5, #main_column h6, #main_column li {margin-right:40px;} #main_column p img, #main_column #pagination {width:90%;} #sidebar p, #sidebar ul {margin: 1em 10px;} #sidebar h3 {margin-left:0; padding-left:10px;} span.more {float:none;} /* Make it disappear... */ #header #facebook_like, #slider .bx-prev, #slider .bx-next, #share_this {display:none; visibility:hidden;} } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */