diff --git a/includes/index.css b/includes/index.css index 923ba33..7cf661a 100644 --- a/includes/index.css +++ b/includes/index.css @@ -1,267 +1,51 @@ -/* NavBar */ -div#nav { - font-size: 0.8em; - float: right; - margin-top: 74px; +html { + font-size: 62.5%; + background: #FFF; } -div#nav ul { - margin: 0; - padding: 0; -} - -div#nav li { - position: relative; - list-style: none; - margin: 0 10px; +/* reset */ +body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, p, th, td, article, section, figure, img { + margin: 0; padding: 0; - float: left; - line-height: 1em; - text-align: center; } -div#nav li:hover { - border-bottom: 2px solid #F00; -} - -div#nav li a { - display: block; - padding: 0.25em 0; - text-decoration: none; -} - -div#nav>ul a { - width: auto; -} - -/* Main */ body { - margin: 10px; - font-family: "Verdana"; - color: #000; + font-size: 1.5rem; + line-height: 2rem; } -div.subtitle, div.notifications { - border-bottom: 1px solid #DEDEDE; - margin-right: 10px; - font-size: 1.5em; -} - -div.notifications { - text-align: center; - color: #F00; +header[role="banner"] { + background: url("../images/background.jpg") 0 0 no-repeat; + width: 100%; + height: 100px; } a { - color: #00F; text-decoration: none; } a:hover { - border-bottom: 3px solid #F00; + text-decoration: underline; } -a.subject:hover { - border-bottom: 0; +a:active { + text-decoration: none; } -div.header, div.header-class { - width: 100%; - height: 100px; - float: left; - margin: 0; - vertical-align: middle; - background: #BBD9EE url("../images/background.jpg") 0 0 no-repeat; - font-size: 20px; - color: #F00; +a:visited { + text-decoration: none; } -div.header-class { - background: #BBD9EE url("../images/background-repeat.jpg") 0 0 repeat-x; -} -div.content { - margin: 0 200px 0 0; -} - -div.intro { - width: 75%; - border: 0px solid #F00; -} - -div.quotes { +nav[role="navigation"] ul { float: right; - border: 3px solid #ab801a; - border-left: 0; - border-right: 0; - margin-top: 5px; - padding: 2px 0; - width: 20%; - margin-right: 10px; text-align: right; - font-family: "Verdana, Georgia, Arial"; - font-size: 0.9em; -} - -div.date { - position: absolute; - right: 20px; - top: 15px; - color: #000; - font-size: 15px; -} - -div.sidebar { - float: right; - width: 200px; - margin: 5px 0 0 0; -} - -div.subjects, div.news { - margin: 0 10px 0 0; - border-top: 0; -} - -div.news { - margin-top: 4em; -} - -div.subjects h1, div.news h1 { - border-bottom: 1px solid #999; - text-align: center; -} - -div.subjects img { - margin: 10px 10px 10px 0; - border: 0; -} - -div.update-title { - text-align: center; - font-weight: bold; + margin: 0; + margin-top:65px; + margin-right: 10px; } -p.even { - background: #E0EECF; - padding: 2px; +nav[role="navigation"] li { + display: inline; } - -p.odd { - background: #fdddaa; - padding: 2px; -} - -span.subjectTitle { - float: left; - font-size: 1.5em; - color: #000; - margin-left: 0; - margin-top: 65px; -} - -div.footer { - height:10px; - border-top:1px solid #B1B1B1; - margin-right: 1em; - text-align:center; - font-family:"Verdana, Sans-Serif"; - font-size:0.8em; - font-weight:normal; - padding:5px; -} - -/* -CSS Text Boxes -Copyright : MikeCherim.com (http://green-beast.com/) -*/ - -body > #class-information { - margin : auto; - float: right; -} - -div#class-information { - float:right; -} -/* - Now I'm resetting the paragraph padding (it was zeroed). I'm also clearing - the p, but I don't really need this for the top one, only the bottom. The - top has no effect (it'll clear the heading by default), but it is needed - for the bottom (depending on the shell width versus the ul width). It may - not be needed at all. Your situation will determine. -*/ -#class-information p { - padding : 0px; - clear : both; -} - -/* - I define the width of the ul, set the height (in ems!) align the text and - remove list styles. The last may not be needed on most browsers -*/ -ul.cinfo { - height : 9em; - text-align : center; - list-style-type : none; -} - -/* - Now I style the individual boxes (li) -*/ -ul.cinfo li { - margin : 0 2px 10px; - border : 1px solid #666; - width : 160px; - height : auto; - background : #f6f6ff; - float : left; - display : block; -} - -/* - Style the li links -*/ -#class-information a { - color : #A01300; -} - -#class-information a:hover, #class-information a:focus, #class-information a:active { - text-decoration : none; - color: #FFF; - background-color: #A01300; -} - -#class-information a:focus, #class-information a:active { - color: #FFF; - background-color: #A01300; -} - -/* - Style the h3 links -*/ -#class-information ul.cinfo h3 { - color : #FFF; - display : block; - width : 160px; - padding : 2px 0; - background : #5280bc; - border-bottom : 1px solid #666; - text-decoration : none; - margin: 0; -} - -#class-information ul.cinfo h3 a:hover, #class-information ul.cinfo h3 a:focus, #class-information ul.cinfo h3 a:active { - background : #957412; - color : #fff; -} - -/* - This tyles the text p content within the li separately. The most important - thing here is to re-kill the padding and add the margin to create good gutters -*/ -ul.cinfo p { - font-size : 0.9em; - padding : 0; - margin : 10px; -} \ No newline at end of file diff --git a/includes/navbar.html b/includes/navbar.html index 5f1d728..4774c90 100755 --- a/includes/navbar.html +++ b/includes/navbar.html @@ -1,9 +1,13 @@ -