I love my styles. Go see...
authorBiyeun Buczyk <biyeun@mit.edu>
Tue, 27 Jan 2009 07:02:23 +0000 (02:02 -0500)
committerBiyeun Buczyk <biyeun@mit.edu>
Tue, 27 Jan 2009 07:02:23 +0000 (02:02 -0500)
style.css

index d205d1ab9c7597609e6c77d867ef3460f1d99c45..8f26a61f82366a0a05e4e039fde67de9fcadcc04 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,4 +1,3 @@
-/* Layout CSS */
 html{ height:100%; }
 body{
        height:100%;
@@ -6,21 +5,36 @@ body{
        font-size: 12px;
        color: #333333;
        line-height: 1.2em;
-       background-color: #333333;
+       background: url('images/gradientbg.jpg') no-repeat center top #333333;
        padding:0;
        margin:0;
 }
+a{
+       text-decoration: none;
+       color:#0066CC;
+}
+a:hover{
+       text-decoration:underline;
+}
 #content-block{
-       width: 951px;
+       width: 867px;
        min-height:100%;
-       background: url('images/gradient.png') no-repeat 0 0 #A8A9AD;
-       margin:0 auto;
+       margin:0 auto;  
+       background: url('images/gradient.jpg') no-repeat center top #EEEEEE; 
 }
-#featured-block img{
-       float: right;
+#content-block h1{
+       float:right;
+       color:#ffffff;
+       font-size:2em;
+       font-family: "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
+       font-weight: normal;
+       margin-top:-1em;
+       margin-bottom:0;
+       text-transform: uppercase;
+       padding:0;
 }
 #logo{
-       padding-left: 47px;
+       padding-left: 0px;
        padding-top:18px;
        }
 #logo img{
@@ -32,11 +46,14 @@ img#sipb-logo{
        padding-top:23px;
        padding-left:23px;
 }
+a img{
+       border:none;
+}
 ul#navigation{
        list-style: none;
        position:absolute;
-       top:121px;
-       margin-left:298px;
+       top:48px;
+       margin-left:423px;
 }
 ul#navigation li{
        display:block;
@@ -50,6 +67,7 @@ ul#navigation li a{
        color:#ffffff;
        text-decoration: none;
        text-transform: uppercase;
+       font-size:1.2em;
        display:block;
        width:94px;
        height:47px;
@@ -63,28 +81,28 @@ ul#navigation li a:hover{
        background: url('images/nav-white.png') 0 0 no-repeat;
        color:#000000;
 }
-ul#navigation .blue{
+ul#navigation .first-navbox{
        background: transparent url('images/nav-blue.png') 0 0 no-repeat;
 }
-ul#navigation .blue a:hover{
+ul#navigation .first-navbox a:hover{
        color:#1171D2;
 }
-ul#navigation .green{
+ul#navigation .second-navbox{
        background: transparent url('images/nav-green.png') 0 0 no-repeat;
 }
-ul#navigation .green a:hover{
+ul#navigation .second-navbox a:hover{
        color:#62B200;
 }
-ul#navigation .orange{
+ul#navigation .third-navbox{
        background: transparent url('images/nav-orange.png') 0 0 no-repeat;
 }
-ul#navigation .orange a:hover{
+ul#navigation .third-navbox a:hover{
        color:#FE6D06;
 }
-ul#navigation .yellow{
+ul#navigation .fourth-navbox{
        background: transparent url('images/nav-yellow.png') 0 0 no-repeat;
 }
-ul#navigation .yellow a:hover{
+ul#navigation .fourth-navbox a:hover{
        color:#FFA207;
 }
 
@@ -93,110 +111,56 @@ ul#navigation li a span{
        bottom:8px;
        padding-left:8px;
 }
-
-#featured-block{
-       width:376px;
-       background-color:#EEEEEE;
-       margin-left:277px;
-       padding: 27px;
-}
-
-.generic{
-       width: 590px !important;
-}
-
-#hidden-title{
-       display:none;
-}
-#prefooter{
-       height: 120px;
+#breadcrumbs{
+       min-height:1em;
        clear:both;
+       margin:0;
 }
-#footer{
-       font-size:.9em;
-       clear:both;
-       width:951px;
-       margin: 0 auto;
-       margin-top:-65px;
-       text-align:center;
-       color: #545557;
-}
-.actions ul{
+#breadcrumbs ul{
+       margin:0 1em;
+       float:right;
+       padding:0;
        list-style: none;
-       background-color:#696969;
-       padding:.5em 0;
-}
-.actions ul li{
-       display: inline;
-       padding: 0 .5em;
-}
-.actions ul li a{
-       text-decoration: none;
-       color: #ffffff;
-}
-.actions ul li a:hover{
-       text-decoration:underline;
-}
-
-.breadcrumbs{
-       text-align:right;
-}
-
-
-/* Sublayout CSS */
-.cols:after{
-       content: "";
-       display: block;
-       height: 0;
-       clear: both;
 }
-.col1{
-       position: relative;
-       float: left;
-       width: 50%;
-}
-.col2{
-       position: relative;
-       float: right;
-       align: left;
-       width: 50%;
+#breadcrumbs ul li{
+       float:left;
+       line-height:2em;
+       font-size: 1.2em;
+       font-weight: bold;
+       margin-left:0.8em;
+       color: #15447D;
 }
+#breadcrumbs ul li a{
+       color: inherit;
+       font-weight: normal;
+       margin-left:0.8em;
+}
+.first-pagetype #breadcrumbs{ background-color: #4793E4; } 
+.first-pagetype #breadcrumbs ul li { color:#15447D; }
+.second-pagetype #breadcrumbs{ background-color: #60D61E; } 
+.second-pagetype #breadcrumbs ul li { color:#263B08; }
+.third-pagetype #breadcrumbs{ background-color: #F89129; } 
+.third-pagetype #breadcrumbs ul li { color:#6F3F21; }
+.fourth-pagetype #breadcrumbs{ background-color: #FECC28; } 
+.fourth-pagetype #breadcrumbs ul li { color:#6F3F21; }
 
-/* Global Textual CSS */
-a{
-       text-decoration: none;
-       color:#0066CC;
-}
-a:hover{
-       text-decoration:underline;
-}
-a img{
-       border:none;
+#featured-block{
+       margin: 2em 0 1em 2.5em;
+       width:51em;
 }
 
-/* Featured Block Textual CSS */
-#featured-block h1{
-       font-size:2em;
-       line-height:1.2em;
-       font-family: "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
-       padding-bottom:10px;
-       border-bottom: 1px solid #A8A9AD;
-       margin-bottom:1em;
-       text-transform: uppercase;
-}
 #featured-block h2{
        font-size:1.3em;
        font-weight: bold;
-       margin-bottom: 1em;
+       margin: 1em 0;
        font-family: "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
 }
 #featured-block p{
-       margin-bottom: 1em;
-       line-height: 1.5em;
+       margin: 1em 0;
+       line-height: 1.9em;
 }
-
-/* Page Specific CSS (for now, Mainpage) */
 dl.services{
+       margin:0 33px;
        padding:0;
        list-style: none;
        line-height: 1.5em;
@@ -211,6 +175,11 @@ dl.services dd{
        width:170px;
 }
 
+.generic{
+       width: 644px !important;
+}
+
+
 #events-block{
        width:212px;
        float:left;
@@ -256,14 +225,14 @@ dl.services dd{
        font-weight: bold;
        font-size:1.2em;
 }
-#highlights-block div, #events-block > br {
+#highlights-block div{
        margin-bottom: 8px;
 }
 .extra-large{
        font-size:2em;
        line-height:1em;
 }
-#highlights-block .solid-item, #events-block .solid-item{
+#highlights-block .solid-item{
        background-color: #EEEEEE;
        color: #666666;
        text-transform: uppercase;
@@ -335,3 +304,64 @@ dl.services dd{
        font-size: 1.4em;
 }
 
+#hidden-title{
+       display:none;
+}
+#prefooter{
+       height: 140px;
+       clear:both;
+}
+#footer{
+       font-size:.8em;
+       clear:both;
+       margin: 0 auto;
+       margin-top:-130px;
+       text-align:center;
+       color: #666666; 
+       width:867px;
+       height:130px;
+       background-color:#1F1F1F;
+       
+}
+#footer p{
+       width:800px;
+       margin:0 auto;
+       padding:1em 0;
+       line-height:1.4em;
+       text-align:left;
+}
+.actions ul{
+       list-style: none;
+       background-color:#696969;
+       padding:0;
+       margin:0;
+}
+.actions ul li{
+       display: inline;
+       padding: 0 .5em;
+       line-height:3em;
+}
+.actions ul li a{
+       text-decoration: none;
+       color: #ffffff;
+}
+.actions ul li a:hover{
+       text-decoration:underline;
+}
+.cols:after{
+       content: "";
+       display: block;
+       height: 0;
+       clear: both;
+}
+.col1{
+       position: relative;
+       float: left;
+       width: 50%;
+}
+.col2{
+       position: relative;
+       float: right;
+       align: left;
+       width: 50%;
+}
\ No newline at end of file