Template:Nevada Browser CSS

From 2011.igem.org

(Difference between revisions)
m
m
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
body {
-
<style type="text/css">
+
background: transparent !important;
 +
/* background-image: url(https://static.igem.org/mediawiki/2011/1/12/UNR_Background1.JPG); */
 +
background-repeat: repeat;
 +
background-position: 90% 75%;
 +
}
-
body{
+
#absHeader{
-
background-color: #fff !important;
+
  position: absolute;
 +
  top: 0px;
 +
  left: 0px;
 +
  height: 210px;
 +
  width: 955px;
 +
  display: block;
 +
    /* Box Categories */
 +
  -moz-border-radius-topright: 35px;
 +
  -moz-border-radius-topleft: 35px;
 +
  -webkit-border-top-right-radius: 35px;
 +
  -webkit-border-top-left-radius: 35px;
 +
  border-top-right-radius: 35px;
 +
  border-top-left-radius: 35px;
 +
  /* Box Shadows */
 +
  border-top: rgba(0,0,0,1) groove 4px;
 +
  border-left: rgba(0,0,0,1) groove 4px;
 +
  border-right: rgba(0,0,0,1) ridge 4px;
}
}
-
#Nevada-MainContent{
+
#banner-box{
-
   background-color: #000 !important;
+
  position: absolute;
 +
  top: 0px;
 +
  left: -2px;
 +
  height: 210px;
 +
  width: 957px;
 +
  display: block;
 +
  /* Box Categories */
 +
  -moz-border-radius-topright: 35px;
 +
  -moz-border-radius-topleft: 35px;
 +
  -webkit-border-top-right-radius: 35px;
 +
  -webkit-border-top-left-radius: 35px;
 +
  border-top-right-radius: 35px;
 +
  border-top-left-radius: 35px;
 +
  -moz-border-radius-bottomright: 45px;
 +
  -moz-border-radius-bottomleft: 45px;
 +
  -webkit-border-bottom-right-radius: 45px;
 +
  -webkit-border-bottom-left-radius: 45px;
 +
  border-bottom-right-radius: 45px;
 +
  border-bottom-left-radius: 45px;
 +
  /* Box Shadows */
 +
  /* None */
 +
  /* Color Background */
 +
   background-color: rgba(194,194,194,0.7);
 +
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#858585', endColorstr='#25324e');*/
 +
  /*background: -webkit-linear-gradient(top, rgba(133,133,133,1) 70%, rgba(0,0,26,1), #25324e);*/
 +
  /*background: -moz-linear-gradient(top, #858585 70%,rgba(0,0,26,1), #25324e);*/
 +
  /*background: -webkit-gradient(linear, 0 75%,0 100%, from(rgba(133,133,133,1)), to(#25324e));*/
 +
  /*background: -o-linear-gradient(top, rgba(133,133,133,1) 70%, rgba(0,0,26,1), #25324e);*/
 +
  z-index: 100;
}
}
-
</style>
+
#banner-title-box{
-
</html>
+
    position: relative;
 +
    left: 25px;
 +
    top: 25px;
 +
    width: 650px;
 +
    display: block;
 +
    background-color: transparent;
 +
    color: rgba(255,255,255,1);
 +
}
 +
 
 +
.banner-text-title{
 +
    font-family: "Times New Roman", serif;
 +
    font-size: 50px;
 +
    font-weight: bold;
 +
    line-height: 22px;
 +
    text-align: center;
 +
    color: #003300;
 +
}
 +
 
 +
.banner-subtext{
 +
    font-family: "Times New Roman", serif;
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
    line-height: 22px;
 +
    text-align: center;
 +
    color: #003300;
 +
}
 +
 
 +
#banner-logo{
 +
    position: relative;
 +
    display: block;
 +
    top: 5px;
 +
    left: -15px;
 +
    width: 150px;
 +
    height: 150px;
 +
    z-index: 10;
 +
}
 +
 
 +
#banner-logo2{
 +
  position: relative;
 +
  display: block;
 +
  top: 15px;
 +
  left: 0px;
 +
  width: 50px;
 +
  height: 50px;
 +
  z-index: 10;
 +
}
 +
 
 +
#banner-buttons{
 +
  position: relative;
 +
  float: left;
 +
  display: block;
 +
  top: 20px;
 +
  left: 25px;
 +
  height: 35px;
 +
  width: 900px;
 +
  cursor: pointer;
 +
  text-align: center;
 +
  background-color: rgba(0,51,0,0.8);
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 15px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 15px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 15px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 15px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 15px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 15px;
 +
  /* Border Thickness */
 +
  border: rgba(0,0,0,0.8) solid 3px;
 +
  z-index: 15;
 +
}
 +
 
 +
.buttons-text{
 +
    color: #C20074;
 +
    font-family: "Times New Roman";
 +
    font-size: 22px;
 +
    font-weight: bold;
 +
    line-height: 35px;
 +
    text-align: center;
 +
}
 +
 
 +
#banner-buttons a{
 +
  color: #C20074;
 +
  //color: #FF3DB1;
 +
}
 +
 
 +
/* Navigation */
 +
ul {
 +
  list-style: none;
 +
  padding-top: -1px;
 +
  margin-top: -1px;
 +
}
 +
ul.top-level li{
 +
    float: left;
 +
    text-decoration: none;
 +
}
 +
 
 +
ul.sub-level {
 +
    display: none;
 +
}
 +
li:hover{
 +
    position: relative;
 +
}
 +
 
 +
li:hover .sub-level {
 +
    //background: #C20074;
 +
    background: #FF3DB1;
 +
    border: #000 solid;
 +
    border-width: 3px;
 +
    display: block;
 +
    position: absolute;
 +
    left: -20px;
 +
    top: 33px;
 +
    padding-left: 5px;
 +
    text-align: left;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}
 +
ul.sub-level li {
 +
    border: none;
 +
    float: left;
 +
    width: 175px;
 +
    cursor: pointer;
 +
}
 +
 
 +
 
 +
ul.sub-level a{
 +
    color: rgba(0,51,0,1) !important;
 +
}
 +
 
 +
ul.sub-level a:hover, ul.sub-level li:hover{
 +
    background: rgba(0,51,0,1) !important;
 +
    color: #C20074 !important;
 +
  /* Border Styling */
 +
  -moz-border-radius-topright: 15px;
 +
  -moz-border-radius-topleft: 0px;
 +
  -webkit-border-top-right-radius: 15px;
 +
  -webkit-border-top-left-radius: 0px;
 +
  border-top-right-radius: 15px;
 +
  border-top-left-radius: 0px;
 +
  -moz-border-radius-bottomright: 15px;
 +
  -moz-border-radius-bottomleft: 0px;
 +
  -webkit-border-bottom-right-radius: 15px;
 +
  -webkit-border-bottom-left-radius: 0px;
 +
  border-bottom-right-radius: 15px;
 +
  border-bottom-left-radius: 0px;
 +
}

Latest revision as of 07:37, 28 September 2011

body { background: transparent !important; /* background-image: url(UNR_Background1.JPG); */ background-repeat: repeat; background-position: 90% 75%; }

  1. absHeader{ 
  position: absolute;
  top: 0px;
  left: 0px;
  height: 210px;
  width: 955px;
  display: block;
    /* Box Categories */
  -moz-border-radius-topright: 35px;
  -moz-border-radius-topleft: 35px;
  -webkit-border-top-right-radius: 35px;
  -webkit-border-top-left-radius: 35px;
  border-top-right-radius: 35px;
  border-top-left-radius: 35px;
  /* Box Shadows */
  border-top: rgba(0,0,0,1) groove 4px;
  border-left: rgba(0,0,0,1) groove 4px;
  border-right: rgba(0,0,0,1) ridge 4px;

}

  1. banner-box{ 
  position: absolute;
  top: 0px;
  left: -2px;
  height: 210px;
  width: 957px;
  display: block;
  /* Box Categories */
  -moz-border-radius-topright: 35px;
  -moz-border-radius-topleft: 35px;
  -webkit-border-top-right-radius: 35px;
  -webkit-border-top-left-radius: 35px;
  border-top-right-radius: 35px;
  border-top-left-radius: 35px;
  -moz-border-radius-bottomright: 45px;
  -moz-border-radius-bottomleft: 45px;
  -webkit-border-bottom-right-radius: 45px;
  -webkit-border-bottom-left-radius: 45px;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 45px;
  /* Box Shadows */
  /* None */
  /* Color Background */
  background-color: rgba(194,194,194,0.7);
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#858585', endColorstr='#25324e');*/
  /*background: -webkit-linear-gradient(top, rgba(133,133,133,1) 70%, rgba(0,0,26,1), #25324e);*/
  /*background: -moz-linear-gradient(top, #858585 70%,rgba(0,0,26,1), #25324e);*/
  /*background: -webkit-gradient(linear, 0 75%,0 100%, from(rgba(133,133,133,1)), to(#25324e));*/
  /*background: -o-linear-gradient(top, rgba(133,133,133,1) 70%, rgba(0,0,26,1), #25324e);*/
  z-index: 100;

}

  1. banner-title-box{ 
   position: relative;
   left: 25px;
   top: 25px;
   width: 650px;
   display: block;
   background-color: transparent;
   color: rgba(255,255,255,1);

}

.banner-text-title{ 

   font-family: "Times New Roman", serif;
   font-size: 50px;
   font-weight: bold;
   line-height: 22px;
   text-align: center;
   color: #003300;

}

.banner-subtext{ 

   font-family: "Times New Roman", serif;
   font-size: 22px;
   font-weight: bold;
   line-height: 22px;
   text-align: center;
   color: #003300;

}

  1. banner-logo{ 
   position: relative;
   display: block;
   top: 5px;
   left: -15px;
   width: 150px;
   height: 150px;
   z-index: 10;

}

  1. banner-logo2{ 
  position: relative;
  display: block;
  top: 15px;
  left: 0px;
  width: 50px;
  height: 50px;
  z-index: 10;

}

  1. banner-buttons{ 
  position: relative;
  float: left;
  display: block;
  top: 20px;
  left: 25px;
  height: 35px;
  width: 900px;
  cursor: pointer;
  text-align: center;
  background-color: rgba(0,51,0,0.8);
  /* Border Styling */
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;
  -webkit-border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-bottom-right-radius: 15px;
  -webkit-border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  /* Border Thickness */
  border: rgba(0,0,0,0.8) solid 3px;
  z-index: 15;

}

.buttons-text{ 

   color: #C20074;
   font-family: "Times New Roman";
   font-size: 22px;
   font-weight: bold;
   line-height: 35px;
   text-align: center;

}

  1. banner-buttons a{ 
  color: #C20074;
  //color: #FF3DB1;

}

/* Navigation */ ul { 

 list-style: none;
 padding-top: -1px;
 margin-top: -1px;

} ul.top-level li{ 

   float: left;
   text-decoration: none;

}

ul.sub-level { 

   display: none;

} li:hover{ 

   position: relative;

}

li:hover .sub-level { 

   //background: #C20074;
   background: #FF3DB1;
   border: #000 solid;
   border-width: 3px;
   display: block;
   position: absolute;
   left: -20px;
   top: 33px;
   padding-left: 5px;
   text-align: left;
  /* Border Styling */
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 15px;
  border-top-left-radius: 0px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-right-radius: 15px;
  -webkit-border-bottom-left-radius: 0px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0px;

} ul.sub-level li { 

   border: none;
   float: left;
   width: 175px;
   cursor: pointer;

}


ul.sub-level a{ 

   color: rgba(0,51,0,1) !important;

}

ul.sub-level a:hover, ul.sub-level li:hover{ 

   background: rgba(0,51,0,1) !important;
   color: #C20074 !important;
  /* Border Styling */
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 0px;
  -webkit-border-top-right-radius: 15px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 15px;
  border-top-left-radius: 0px;
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-bottom-right-radius: 15px;
  -webkit-border-bottom-left-radius: 0px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0px;

}

Retrieved from "http://2011.igem.org/Template:Nevada_Browser_CSS"