Difference between revisions of "Team:UC Davis/AresTestPage"

Line 45: Line 45:
  
 
/* Begin Nav CSS */
 
/* Begin Nav CSS */
 +
 +
 +
              /* The top navigation menu */
 +
              .nav {
 +
              /* Layout & positioning */
 +
              display: block;
 +
              position: relative;
 +
              width: 967px; /*1000px*/
 +
              height: 43px;
 +
                      border-radius:4px;
 +
 +
              /* Background & effects */
 +
              background: rgba(129, 142, 94, .95); /* Background for Internet Explorer 9 and older browsers */
 +
 +
              }
 +
 +
              /* The link containers */
 +
              .nav>li {
 +
              display: block;
 +
              float:left;
 +
              position: relative;
 +
              margin: 0;
 +
              padding: 0;
 +
 +
              }
 +
 +
              /* The main navigation links */
 +
              .nav>li>a, .nav>li>p {
 +
              /* Layout & positioning */
 +
              display: block;
 +
              width: 159.1px; /* 198 */
 +
                      padding: 15px 0px;
 +
 +
              /* Typography */
 +
              font-family: Arial, san-serif;
 +
              font-size: 20px;
 +
                    font-weight: normal;
 +
              text-decoration: none;
 +
              color: rgba(255, 255, 255, .9);
 +
              text-shadow: 0 1px 0 #2a2a2a;
 +
              text-align: center;
 +
 +
              /* Chaning the background on hover with a smooth transition */
 +
              -webkit-transition: background .35s linear;
 +
              -moz-transition: background .35s linear;
 +
              -ms-transition: background .35s linear;
 +
              -o-transition: background .35s linear;
 +
              transition: background .35s linear;
 +
              }
 +
 +
              /* Centering dotted line dividers */
 +
              .leftbookend {
 +
                      border-right: 1px dotted #393939;
 +
              }
 +
 +
              .rightbookend {
 +
                      border-left: 1px dotted #595959;
 +
              }
 +
 +
              /* Chaning the background on hover */
 +
              .nav>li>a:hover, .nav>li>p:hover .nav>li:hover>a {
 +
              background: rgba(255, 255, 255, .9);
 +
              color: #000;
 +
              }
 +
 +
              .nav>li:first-child a, .nav>li:first-child p  {
 +
              border-top-left-radius: 3px;
 +
              }
 +
 +
 +
 +
              .arrow:hover {
 +
                  -moz-transition-duration: 3000s;
 +
                  -ms-transition-duration: 3000s;
 +
                  -o-transition-duration: 3000s;
 +
                  -webkit-transition-duration: 3000s;
 +
                  transition-duration: 3000s;
 +
              }
 +
 +
 +
              /* General styling for the submenus */
 +
              .nav ul {
 +
              display: block;
 +
              position: absolute;
 +
              left: -9999px;
 +
              text-align: center;
 +
              box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
 +
 +
              }
 +
 +
              /* Level 1 submenus */
 +
              .nav>li>ul {
 +
              cursor: pointer;
 +
              padding-top: 0px;
 +
              z-index: 200;
 +
              top: 43px;
 +
              }
 +
 +
              /* Making the level 1 submenu to appear on hover */
 +
              .nav>li:hover>ul {
 +
              left: 0px;
 +
              }
 +
 +
 +
              /* The submenu link containers */
 +
              .nav ul li {
 +
              position: relative;
 +
              display: block;
 +
 +
              /* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
 +
              height: 0px;
 +
              -webkit-transition: height .2s;
 +
              -moz-transition: height .2s;
 +
              -o-transition: height .2s;
 +
              -ms-transition: height .2s;
 +
              }
 +
 +
              /* Expanding the list elements which contain the links */
 +
              .nav li:hover>ul>li {
 +
              height: 24px;
 +
              }
 +
 +
              .nav>li:hover>ul>li:first-child {
 +
              height: 27px;
 +
              }
 +
 +
              .nav>li>ul>li:first-child>a {
 +
              border-top: 3px solid #fff;
 +
              }
 +
 +
              .nav>li>ul>li.dropdown:first-child>ul {
 +
                    top: 3px;
 +
              }
 +
 +
              /* The links of the submenus */
 +
              .nav ul li a {
 +
              /* Layout */
 +
              display: block;
 +
              width: 127px; /* 169 */
 +
              padding: 6px 12px 6px 20px;
 +
 +
              /* Typography */
 +
              font-size: 13px;
 +
              color: #01406e;
 +
              font-family: Arial, san-serif;
 +
              text-decoration: none;
 +
              background: #f0f0f0;
 +
 +
              /* Every change to the links (background, color etc) will be made with a smooth transition */
 +
              -webkit-transition: all .2s;
 +
              -moz-transition: all .2s;
 +
              -ms-transition: all .2s;
 +
              -o-transition: all .2s;
 +
              transition: all .2s;
 +
              }
 +
 +
              .nav>li>ul>li:first-child>a::before {
 +
              content: "";
 +
              display: block;
 +
              position: absolute;
 +
              text-align: center;
 +
              width: 100%;
 +
              height: 12px;
 +
              background: transparent;
 +
              top: -8px;
 +
              left: 0;
 +
              z-index: 9999;
 +
              }
 +
 +
              /* The hover state of the links */
 +
              .nav ul li:hover>a, .nav ul li>a:hover, .nav ul li:hover>p, .nav ul li>p:hover  {
 +
              background: #c8c8c8; /*e7e7e7 */
 +
              color: #000000;
 +
              }
 +
 +
              /* Changing the color of the arrow on hover */
 +
              .nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
 +
              border-left-color: #fff;
 +
              }
 +
 +
              .nav>li>ul>li
 +
              {
 +
                      margin-bottom: 0
 +
              }
 +
 +
 +
              .nav>li:first-child:hover>ul
 +
              {
 +
                      left:0px;
 +
              }
 +
 +
              .nav>li:last-child:hover>ul
 +
              {
 +
                    left: 0px;
 +
              }
 +
 +
              .tableCSS
 +
              {
 +
                    background-color:#ffffff;
 +
                    width:1000px;
 +
              }
  
 
/* END Nav CSS */
 
/* END Nav CSS */

Revision as of 21:05, 24 July 2018

UC Davis iGEM 2014