/** * Giorgi Egriselashvili * * Please, please, PLEASE keep updating this. This isn't a "set it and forget it" document. * This is intended to be a living document that gets updated when the site needs a fresh look. * Area and state regulations do not allow the Living Stylesheet to remain here, alone and companionless. /GLaDOS * * @author Brad Chamness * @copyright The Office Web Design & Support, Southeast Missouri State University * @published Monday, September 26, 2011 10:40 AM * * @note Visual Baseline grid:20 pixels * @note Visual Grid:960 pixels, 12 columns, 20px gutters * @note Code I have compressed things using Aptana's Commands->CSS->Format CSS Single-line. Feel free to format multi-line, work, and format single-line. Watch out for gradients if you compress with CleanCSS. * */ /* ==========================================================================================================================================================*/ /** * Reset CSS * * @link Webpage http://html5doctor.com/html-5-reset-stylesheet/ */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} nav ul,nav ol{list-style:none;} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:none} a{background:transparent;font-size:100%;margin:0;padding:0;vertical-align:baseline} ins,.ins{background-color:#dfd;color:#040;text-decoration:underline} mark,.mark{background-color:#ffd;color:#440;font-style:italic;font-weight:bold} del,.del{background-color:#fdd;color:#400;text-decoration:line-through;} abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} table{border-collapse:collapse;border-spacing:0} hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0} input,select{vertical-align:middle} /** * Typographical, behavioral, and coloric baseline * * @link Webpage http://html5boilerplate.com/ */ body{font:13px/20px sans-serif;font-size:normal} select,input,textarea,button{font:99% sans-serif} p{margin-bottom:20px} pre,code,kbd,samp{font-family:monospace, sans-serif} body,select,input,textarea{color:#222;font-family:Verdana, Geneva, sans-serif} .lol body,.lol select,.lol input,.lol textarea{font-family:"Comic Sans MS","Comic Sans",sans-serif;text-shadow:3px 3px 5px red} html{overflow-y:scroll} a:hover,a:active{outline:none} a,a:active,a:visited{color:#c00} a:hover{color:#800} ul,ol{margin-left:1.8em;list-style-position:outside} ol{list-style-type:decimal} small{font-size:85%} td,td img{vertical-align:top} sub{vertical-align:sub;font-size:smaller} sup{vertical-align:super;font-size:smaller} pre{white-space:pre-line;padding:15px} textarea{overflow:auto} .ie6 legend,.ie7 legend{margin-left:-7px} input[type="checkbox"]{vertical-align:bottom} .ie7 input[type="checkbox"]{vertical-align:baseline} label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer} a:link{-webkit-tap-highlight-color:#FF5E99} button{width:auto;overflow:visible} .ie7 img{-ms-interpolation-mode:bicubic} strong,b,th{font-weight:bold} em,cite,q,i,address,var{font-style:italic} nav ul,nav ol,nav li,button,input,select,textarea{margin:0} input[type="radio"],.ie6 input{vertical-align:text-bottom} ::-moz-selection,::selection{background:#c00;color:#000;text-shadow:none} a:link,a:visited{text-decoration:none} a:hover,a:active,a:focus{text-decoration:underline} a:active{position:relative;top:1px} a[href^="tel:"],a[href^="tel:"]:hover,a[href^="tel:"]:active,a[href^="tel:"]:focus{color:#222;cursor:text;top:0;text-decoration:none;} /** * Non-semantic helper classes * * @class ir Image replacement * @class hidden Hide for both screenreaders and browsers * @class visuallyhidden Hide for browsers, but available for screenreaders * @class invisible Hide for both screenreaders and browsers, but maintain layout * @class clearfix Fixes floats {@link http://j.mp/bestclearfix Clearfix Reloaded} */ .ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;background-position:center;text-align:left;direction:ltr} .hidden{display:none;visibility:hidden} .visuallyhidden{position:absolute !important;clip:rect(1px, 1px, 1px, 1px)} .invisible{visibility:hidden} .clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden} .clearfix:after{clear:both} .clearfix{zoom:1px} /** * Browser Upgrade Notice * * @id browser Show a notice to IE7 and below with options to install better ones */ #browser{z-index:20;} #browser h2{color:#fff;background:#222;font-size:36px;text-align:center;margin:0;padding:5px 10px} /** * Body and Header * * @tag html Red and grey background * @tag body 960px wide, centered, white background * @tag header 120px tall, bright red gradient background * @tag h1 Text-indent trick, Photograph of Academic background * @tag h1 a Text-indent trick, Wordmark background */ html{background:#888 url('../images/bg-home-c00.png') repeat-x scroll top;overflow-x:hidden} html.lol{background:lime url('../images/lol.gif') repeat fixed;} body{-moz-border-radius:0 0 5px 5px;-moz-box-shadow:0 0 5px #000;-webkit-border-radius:0 0 5px 5px;-webkit-box-shadow:0 0 5px #000;background:#FFF;border-radius:0 0 5px 5px;box-shadow:0 0 5px #000;margin:0 auto 15px;width:960px} .lol body{background:yellow} header{-moz-box-shadow:0 2px 2px rgba(32,32,32,.6);-webkit-box-shadow:0 2px 2px rgba(32,32,32,.6);background:#AF0000 url('../images/gradient-brightred.png') repeat-x top;background-size:100% 100%;background-origin:border;background:-moz-linear-gradient(top, #E90000 0%, #AF0000 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#E90000), color-stop(100%,#AF0000));border-bottom:1px solid maroon;box-shadow:0 2px 2px rgba(32,32,32,.6);height:120px;margin:0 auto 20px;position:relative;width:100%;z-index:20} header h1{background:url('../images/flag_bg.jpg') no-repeat top right;float:left;height:120px;margin:0 20px 0 0;text-indent:-9999px;width:710px} header h1 a{background:url('../images/wordmark.png') no-repeat center left;display:block;height:88px;margin:16px 429px 16px 10px;width:311px} .ie6 header h1 a{margin:16px 380px 16px 10px} /** * Secondary Index * * This page has a few specific tweaks, mainly to the MainPhoto and the page title * * @class secondaryindex This class is on the and tags, to indicate it is a secondary index page * @id mainphoto This acts as a "banner" for the secondary index * @tag h2 I've stretched out the border to go across the whole width */ #mainphoto{border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;margin:0 0 13px;} .secondaryindex h2{margin:0!important;padding:0 7px 3px!important;} /** * Actions Menu * * This holds the site search, the MySoutheast link, and the Kent Library link * * @link File /PSDs/mysoutheast.psd * @link File /PSDs/kentlibrary.psd * @link File /PSDs/search.psd * * @id actions Holds the rest of the stuff * @id mysoutheast Text-indent trick, mysoutheast.png background, CSS triangle * @id kentlibrary Text-indent trick, kentlibrary.png background */ #actions{float:right;height:120px;width:230px} .ie6 #actions{margin:0 5px 0 0} #actions form{height:26px;margin:15px 0 0} #actions input[type='text'],#actions input[type='search']{-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;background:#e7d9d9;border:1px solid #222;border-radius:4px 0 0 4px;color:#333;float:left;height:18px;padding:4px;width:182px} #actions input[type='image']{-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;border:1px solid #222;border-radius:0 4px 4px 0;float:left;height:26px;padding:0} #actions ::-webkit-input-placeholder { color:#222; } #actions input:-moz-placeholder { color:#222; } #actions #kentlibrary{-moz-border-radius:5px;-moz-box-shadow:-3px 2px 5px rgba(32,32,32,.6);-webkit-border-radius:5px;-webkit-box-shadow:-3px 2px 5px rgba(32,32,32,.6);background:url('../images/kentlibrary.png') no-repeat;border-radius:5px;box-shadow:-3px 2px 5px rgba(32,32,32,.6);float:left;height:44px;margin:20px -10px 20px 0;text-indent:-9999px;width:56px} #actions #mysoutheast{-moz-border-radius:5px 5px 0;-moz-box-shadow:-3px 2px 5px rgba(32,32,32,.6);-webkit-border-radius:5px 5px 0 5px;-webkit-box-shadow:-3px 2px 5px rgba(32,32,32,.6);background:url('../images/mysoutheast.png') no-repeat;border-radius:5px 5px 0 5px;box-shadow:-3px 2px 5px rgba(32,32,32,.6);float:left;height:44px;left:24px;margin:20px 0;overflow:visible;position:relative;text-indent:-9999px;width:180px} #actions #mysoutheast::after{border-bottom:20px solid transparent;border-left:20px solid #222;border-right:20px solid transparent;content:' ';display:block;height:0;position:absolute;right:-20px;top:44px;width:0;z-index:-1} .ie6 #actions #mysoutheast{margin:10px 0} /** * Floating Bar * * This holds a bunch of useful stuff in a static toolbar (which hides under the header until you scroll) * * @id floatingbar Holds the toolbar items in a UL * @attr href Specifies the icon based on the href. Defaults to a globe. To customize, specify here. */ #floatingbar{-moz-border-radius:0 0 5px 5px;-moz-box-shadow:0 2px 2px rgba(32,32,32,.6);-webkit-border-radius:0 0 5px 5px;-webkit-box-shadow:0 2px 2px rgba(32,32,32,.6);background:#333 url('../images/tab-hover-bg.png') repeat-x top;background-size:100% 100%;background-origin:border;background-image:-moz-linear-gradient(top,#555,#333);background-image:-webkit-gradient(linear,left top, left bottom,from(#555),to(#333));border-radius:0 0 5px 5px;box-shadow:0 2px 2px rgba(32,32,32,.6);height:40px;line-height:40px;position:fixed;top:0;width:960px;z-index:15} #floatingbar form{height:26px;margin:6px 0 0} #floatingbar input[type='text'],#floatingbar input[type='search']{-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;background:#eee;border:1px solid #222;border-radius:4px 0 0 4px;color:#333;float:left;height:18px;padding:4px;width:100px} #floatingbar input[type='image']{-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;border:1px solid #222;border-radius:0 4px 4px 0;float:left;height:26px;padding:0} #floatingbar li{float:left;font-size:10px;list-style:none;margin:0 10px;width:140px} #floatingbar a{background:url('../images/floatingbar-sprite.png') 0px -78px no-repeat;color:#e2e2e2;display:block;font-weight:bold;height:100%;padding-left:40px;text-shadow:0 -1px 0 rgba(0,0,0,.6);width:100%} #floatingbar a[href="/"]{background-position: 0px -120px;} #floatingbar a[href="#top"]{background-position: 0px 2px;color:white;} #floatingbar a[href*="portal.semo.edu"]{background-position: 0px -200px;} #floatingbar a[href*="calendar.semo.edu"]{background-position: 0px -38px;} #floatingbar a[href*="library.semo.edu"]{background-position: 0px -242px;} #floatingbar a[href*="atoz"]{background-position: 0px -319px;} #pageIdLink {position: fixed; top: 1px; right: 1px; width: 4px; height: 4px; display: block; background: black; border: 1px solid white; overflow: hidden; text-indent: 10px;} @media only screen and (max-device-width: 900px) { #floatingbar { display: none; } } /** * Alert Box * * This shows upon the home page when the page_alert element is filled in. It could also be used elsewhere. * * @class alert Div that holds the alert * @tag h3 Headline for the alert */ .alert,.info{border: 2px solid #c00;border-radius: 3px;box-shadow:0 0 10px rgba(0,0,0,.6);-moz-box-shadow:0 0 10px rgba(0,0,0,.6);-webkit-box-shadow:0 0 10px rgba(0,0,0,.6);margin: 0 10px 20px;background: url('../images/css_icon_alerttriangle.gif') 16px 50% no-repeat;padding: 10px 10px 0 96px;} .alert h3,.info h3{font:24px/40px Georgia, Times, serif;margin:0;} .info{border-color:#ccc;background-image:url(../images/css_icon_infocircle.png);box-shadow:none;} /** * Page Information * * This includes the page title and the breadcrumbs * * @tag h2 Restrained to children of #primarycontent * @class breadcrumb This nav holds an
    , red background with incremental brightness * @class top The top-level crumb, CSS triangle * @class level-# The individual levels after top, CSS triangle * @class current Use this in conjunction with the final level-#, white background */ #primarycontent h2,#content h2{border:3px solid transparent;border-bottom:3px solid #c00;font:36px/39px Georgia, Times, serif;margin:0 7px 17px;padding:0 0 3px} .breadcrumb{margin:-10px 10px 20px;} .breadcrumb ol{list-style:none;margin:0;overflow:hidden;padding:0;background:#ddd;padding-right:25px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #888;height: 28px;white-space:nowrap;text-overflow:ellipsis} .breadcrumb ol li{display:inline-block} .breadcrumb ol li a{background:#c00;color:#FFF;display:block;float:left;height:18px;line-height:18px;padding:5px 0 5px 50px;position:relative;text-decoration:none;text-transform:capitalize;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;} .breadcrumb ol li a:after{border-bottom:50px solid transparent;border-left:30px solid #c00;border-top:50px solid transparent;content:" ";display:block;height:0;left:100%;margin-top:-50px;position:absolute;top:50%;width:0;z-index:5} .breadcrumb ol li a:before{border-bottom:50px solid transparent;border-left:30px solid #FFF;border-top:50px solid transparent;content:" ";display:block;height:0;left:100%;margin-left:2px;margin-top:-50px;position:absolute;top:50%;width:0;z-index:1} .breadcrumb ol li:first-child a{padding-left:25px;z-index:5} .breadcrumb ol li:nth-child(2) a, .breadcrumb ol li.nth-child(2) a:after{z-index:4} .breadcrumb ol li.nth-child(3) a, .breadcrumb ol li.nth-child(3) a:after{z-index:3} .breadcrumb ol li.nth-child(4) a, .breadcrumb ol li.nth-child(4) a:after{z-index:2} .breadcrumb ol li.nth-child(5) a, .breadcrumb ol li.nth-child(5) a:after{z-index:1} .breadcrumb ol li:last-child a{background:transparent !important;color:#000;cursor:default;pointer-events:none} .breadcrumb ol li:last-child a:after{border:0 !important;} .breadcrumb ol li:last-child a:before{border:0 !important;} .breadcrumb ol li a:hover{background:#ddd;color:#222;} .breadcrumb ol li a:hover:after{border-left-color:#ddd !important} /** * Content Section * * This is the main section of the page. * Usually, it will have code generated by RedDot/OpenText. If so, we use .notourfault to let us know. It does nothing to styles. * The markup is not our fault, but we must anticipate it as best we can. * * @tag h1, h2 Giant fuchsia message saying not to use this. Users should start with

    to comply with the document outline. * @tag h3, h4, h5, h6 Visually distinct and hierarchical heading levels.

    &

    have a bottom border. * @tag section All the stuff that applies to .notourfault should also apply to the section tag. */ section{margin:0 10px;padding:0 0 20px} /*section h1::after{color:#F0F;content:' PLEASE DO NOT USE H1 TAGS. CHANGE IT TO AN H3 OR BELOW TAG. H3 IS THE HIGHEST LEVEL TAG ALLOWED FOR CONTENT EDITORS.';font-size:200%} section h2::after{color:#F0F;content:' PLEASE DO NOT USE H2 TAGS. CHANGE IT TO AN H3 OR BELOW TAG. H3 IS THE HIGHEST LEVEL TAG ALLOWED FOR CONTENT EDITORS.';font-size:200%} section .subHeadRed::after{color:#F0F;content:' PLEASE DO NOT USE SPAN TAGS WITH A CLASS OF SUBHEADRED. CHANGE IT TO A HEADER TAG. H3, H4, H5, AND H6 ARE ACCEPTABLE, BASED ON IMPORTANCE.';font-size:200%} */ section h3,section h4,section h5,section h6{margin:20px 0 0;clear:both;font-family:Georgia, Times, serif;font-weight:normal;} section h3{border-bottom:1px solid #c00;font-size:24px;line-height:40px} section h3:first-child{margin-top:0px} section h4{font-size:20px} section h5{font-size:16px} section h6{font-size:12px;} section ul,section ol{list-style-position:outside;margin:0 0 20px 3em} section ul.universal,section ol.universal {list-style-position:outside;margin:3em 0 20px 0} section p,section dl,section table,section dd{margin:0 0 20px;clear:both;} section img{float:left;margin:0 10px 10px 0;} section img[id^="RD__"]{float:none;margin:0;position: relative;top: 3px;} section dt{font-weight:bold} section dd{padding:0 0 0 20px} section table{border:1px solid #ccc;border-collapse:separate;border-spacing:2px;width:100%} section caption{color:#888;font:18px/40px Georgia, Times, serif} section th{font-weight:bold;text-align:left;background:#eee;font:14px/20px Georgia, Times, serif} section tbody th[rowspan], section thead th[colspan]{background:#ddd} section thead th{text-align:center;} section td,section th{border:1px solid #ccc;padding:6px;vertical-align:middle;} section code,section pre{background:#eee;border:1px dashed #aaa;font:14px/20px "Courier New", "Anonymous Pro", Courier, monospace;padding:3px 5px;white-space:pre-wrap} section pre{margin:9px 0;overflow-x:auto;overflow-y:hidden;padding:5px 10px;white-space:pre} section pre code{background:transparent;border:none;padding:0;white-space:pre} section small{font-size:11px;color:#555} section figure,section .figure{padding:10px;margin: 0 0 20px;display:block;float:none;width:600px;} section figure img,section .figure img{display:block;float:none;margin:0 auto;} section figure figcaption,section .figure .figcaption{padding-top:10px;text-align:center;} /** * Filetype Icons * * This adds filetype icons for pdf, doc(x), ppt(x), xls(x), and zip files. * * @tag a Automatically style any anchor based on its href */ section a[href$='.pdf']:not(.no-icon),section a[href$='zip']:not(.no-icon),section a[href$='doc']:not(.no-icon),section a[href$='docx']:not(.no-icon),section a[href$='xls']:not(.no-icon),section a[href$='xlsx']:not(.no-icon),section a[href$='ppt']:not(.no-icon),section a[href$='pptx']:not(.no-icon),section a[href^='http://www.facebook.com/']:not(.no-icon){background:transparent url('../images/css_sprites_filetypes_16px.png') right -9px no-repeat;padding-right:18px;} section a[href$='.pdf']:not(.no-icon){background-position: right -39px;} section a[href$='.doc']:not(.no-icon),section a[href$='.docx']:not(.no-icon){background-position: right -69px;} section a[href$='.zip']:not(.no-icon){background-position: right -99px;} section a[href$='.ppt']:not(.no-icon),section a[href$='.pptx']:not(.no-icon){background-position: right -127px;} section a[href$='.xls']:not(.no-icon),section a[href$='.xlsx']:not(.no-icon){background-position: right -157px;} section a[href^='http://www.facebook.com/']:not(.no-icon){background-position: left -187px;padding-left:18px;padding-right:0} section h4 a[href$='.pdf']:not(.no-icon){background-position: right -34px;} section h4 a[href$='.doc']:not(.no-icon),section h4 a[href$='.docx']:not(.no-icon){background-position: right -64px;} section h4 a[href$='.zip']:not(.no-icon){background-position: right -94px;} section h4 a[href$='.ppt']:not(.no-icon),section h4 a[href$='.pptx']:not(.no-icon){background-position: right -122px;} section h4 a[href$='.xls']:not(.no-icon),section h4 a:[href$='.xlsx']:not(.no-icon){background-position: right -152px;} /** * Social Buttons * * This is for the social and print icons that show up before the content * @tag a Each icon is an anchor, and is being selected via its href attribute. */ #social-buttons{height:35px;margin-bottom:5px;} #social-buttons a{display:inline-block;height:20px;background:#393939 url(../images/home-tab-sprite.png) no-repeat 2px 0px;color:white;padding:3px 5px 3px 28px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0 5px;line-height:20px;} #social-buttons a:first-child{margin-left:0;} #social-buttons a[href*="facebook"]{background-position:2px -90px;} #social-buttons a[href*="twitter"]{background-position:2px -135px;} #social-buttons a[href^="mailto"]{background-position:2px -312px;} #social-buttons a[href^="javascript:window.print"]{background-position:2px -267px;} #social-buttons a[href^="sms"]{background-position:2px -224px;} /** * Pretty Forms * * Make sure there is no whitespace between the input and the label tags, or things won't line up. Use