@charset "UTF-8"; /* CSS Document */ /* ===== magazine_v3_sass.scss // Woo, SASS! ===== */ //*:mode=css: */ //* -----------------[ DEBUG ]----------------- */ @mixin border-debug($color: red) { border: 1px solid $color; } //* -----------------[ DEBUG ]----------------- */ //* ------------------[BASE SETTINGS]----------------- */ //* -----[ VARIABLES ]---- */ $rm_css_path: "http://www.udel.edu/researchmagazine/css/"; $header-size-scale: 0.3; $header-size-base: 2.5em; $blue-grey: #30393d; $grey-92: #eaeaea; $grey-84: #d6d6d6; $grey-55: #8c8c8c; $margins-standard: 15px 0; $width-center_column: 950px; $width-page_and_nav_holder: $width-center_column - 20px; $width-page_content: $width-page_and_nav_holder - 300px; $width-article_holder: 615px; //* -----[ MIXINS ]---- */ @mixin font-serif { font-family: "times new roman", serif; } @mixin font-sans-serif { font-family: "arial", "helvetica", sans-serif } @mixin whitespace-none { margin: 0; padding: 0; } //* -----[ FUNCTIONS ]---- */ @function heading-size($n) { @return $header-size-base - ($header-size-scale * ($n - 1)); } /* ------------------[ RESET STYLES ]----------------- */ * { margin: 0px; padding: 0px; border: 0px; } @for $i from 1 through 6 { h#{$i} { font-size: heading-size($i); } } h1, h2, h3, h4, h5, h6 { line-height: 1em; margin: $margins-standard; } ul, ol { margin: $margins-standard; padding: 0 0 0 35px; } p { margin: $margins-standard; } hr { border-top: 3px double #414141; margin: 5px 0; } table { background-color: #f2f2f2; border: 1px solid #CCC; color: #333; margin: $margins-standard; caption { font-weight: bold; padding-bottom: 5px; } thead { background-color: #C8C8C8; color: #4B4B4B; } tfoot { background-color: #DEDEDE; color: #4E4E4E; td { font-style: italic; border: none; } } td, th { color: #333; padding: 7px 17px; text-align: center; } th { font-size: heading-size(5); font-style: normal; line-height: 1.3em; text-align: left; text-shadow: #fff 1px 1px 1px; } td { border-bottom: 1px solid #fff; line-height: 1.2em; } } .clear { clear: both; } .right { float: right; } .left { float: left; } /* ------------------[ BASE STYLES ]----------------- */ body { @include font-sans-serif; background-color: #fff; color: #414141; font-size: 12px; line-height: 18px; min-width: 1000px; img#background { height: 225px; position: absolute; width: 100%; z-index: 50; } } a:link, a:visited { outline: none; &:link, &:visited { text-decoration: none; color:#0066FF; } &:hover { color: #3B3B3B; } } /* ------------------[ MAIN LAYOUT ]----------------- */ /* center_column (:: nav) :: edge_shadow :: page_and_nav_holder :: page_and_sidebar_holder :: page_content */ #center_column { clear: both; width: $width-center_column; margin: 0 auto 10px auto; overflow: hidden; z-index: 100; position: relative; /* -----[ page header ]---- */ #header { margin: 0; padding: 10px 0 20px; a { overflow: hidden; img { display: block; } } p.ISSN { color: #fff; font-size: 13px; font-weight: normal; letter-spacing: 1px; line-height: 18px; margin: 0; padding: 10px 0 0 0; } .subscribetoday { right: 20px; position: absolute; top: 32px; width: 184px; } } /* -----[ edge shadow ]---- */ #edge_shadow { background-image: url($rm_css_path + "../images/shadow-bk9.png"); background-repeat: repeat-y; #page_and_nav_holder { margin: 0 auto; width: $width-page_and_nav_holder; background:$grey-92; #page_and_sidebar_holder, #grey_foot { width: $width-page_and_nav_holder; padding-bottom: 20px; } /* -----[ page and sidebar holder ]---- */ #page_and_sidebar_holder { float: right; background-color: $grey-92; padding-bottom: 20px; /* -----[ page content ]---- */ #page_content { float: left; margin-top: 20px; padding: 0 0 0 20px; width: $width-page_content; } } #grey_foot { background-color: #414141; clear: right; } } } } /* -------------------[ SIDEBAR ]-------------------- */ #sidebar-wrapper { width: 253px; float: left; margin: 20px 0 0 20px; h1,h2,h3,h4 { font-weight: normal; } a.pdf_link { text-align: center; img.cover, p { display: block; margin: 0px auto; padding: 0; } p { margin-bottom: 20px;} } #sidebar { float: left; padding-left: 13px; padding-right: 13px; width: 227px; background-color: #FFF; border: 1px solid #D6D6D6; padding-bottom: 20px; padding-top: 10px; .sidebar-box { padding-top: 5px; margin-bottom: 0px; h2 { border-bottom: 1px solid #D6D6D6; color: #002663; font-size: 1.4em; font-weight: bold; margin: 5px 0 0 0; padding: 4px 0; text-transform: none; } h2.toc_header { letter-spacing:1px; } hr { margin-bottom: 15px; } } a.subscribe { background-color: #ccc; color: #444; display: block; line-height: 20px; font-size: 18px; font-weight: bold; margin-bottom: 20px; padding: 3px 0 4px; text-align: center; text-decoration: none; &:hover { background-color: #999; color: #fff; } } ul#toc_improved { @include whitespace-none; list-style: none; text-decoration: none; li { position:relative; width: 100%; padding: 0; padding: 3px; a { background-image: none; color: $grey-55; display: block; padding: 0; width: 100%; &:link, &:visited, &:active { color: #0066FF; background-color: #fff; } &:hover { color: #000; background-color: $grey-92; } /* The following class may be deprecated */ &.head { display: block; font-size: 1em; line-height: 1em; margin: 20px 0 0 0; text-decoration: none; } } ul.toc_section { line-height: 1.1em; list-style: none; margin: 0 0 .4em 0; padding-left: 10px; } ul.toc_sub_section { list-style-type: circle; padding-left: 20px; margin: .4em 0 1em 0; li { margin-bottom: .2em; } } ul.toc_section li, ul.toc_sub_section li { margin-bottom: 10px; padding: 0; } h3.toc_section_title { @inlcude font-sans-serif; border-bottom: 1px dotted #afafaf; color: #000; font-size: 1.2em; line-height: 1.2em; margin: 20px 0 10px 0; padding: 0 0 3px 0; .mobilearrow { float:left; margin-right: 8px; } } } } // ul#improved } // #sidebar } // #sidebar-wrapper /* ------------------[ ARTICLE BASE STYLES ]----------------- */ @import "_magazine_v3_article_base.scss"; /* ------------------[ DEBUG: Style Demo ]----------------- */ @import "_style_demo.scss";