Difference between revisions of "Team:SPSingapore/CSS/menu"

(Created page with ".logo { width: 100%; background-color: black; background-image: url("https://2015.igem.org/File:SPSingapore_TrialHeader.jpg"); background-size: 100%; background-position:...")
 
Line 1: Line 1:
−
.logo {
+
#logo {
 
width: 100%;
 
width: 100%;
 
background-color: black;  
 
background-color: black;  
Line 10: Line 10:
 
}
 
}
  
−
.logo span{
+
#logo span{
 
font-family: Verdana;
 
font-family: Verdana;
 
font-variant: small-caps;
 
font-variant: small-caps;
Line 25: Line 25:
 
}
 
}
  
−
.wrapper {
+
#wrapper {
 
     width: 100%;
 
     width: 100%;
 
     height: 90px;
 
     height: 90px;
Line 175: Line 175:
 
color: #ff7f00;
 
color: #ff7f00;
 
text-decoration: none;
 
text-decoration: none;
−
}
 
−
img{border:0;}
 
−
div#paddingerror{
 
−
padding:12px 12px 0 12px;
 
 
}
 
}

Revision as of 20:22, 11 September 2015

  1. logo {

width: 100%; background-color: black; background-image: url("https://2015.igem.org/File:SPSingapore_TrialHeader.jpg"); background-size: 100%; background-position: center; background-repeat: no-repeat; height: 140px; border-bottom: 2px solid red; }

  1. logo span{

font-family: Verdana; font-variant: small-caps; font-size: 50px; color:white; text-shadow:#fff 0px 1px 0, #000 0 -1px 0; margin-left: 15%; margin-top: 30px; float: left; user-select: none; -moz-user-select: -moz-none; 

   -webkit-user-select: none;

cursor: default; }

  1. wrapper {
   width: 100%;
   height: 90px;
   /*background : #464646;
   background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
   background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));*/
   border-top: 2px solid #939393;
   position: relative;
   margin-bottom: 0px;

/*box-shadow: 0 0 10px black;*/ overflow:hidden; }


/*CSS MENU*/

  1. cssmenu {
 background: MidnightBlue ;
 width: auto;

}

  1. cssmenu ul {
 list-style: none;
 margin: 0;
 padding: 0;
 line-height: 1;
 display: block;
 zoom: 1;

}

  1. cssmenu ul:after {
 content: " ";
 display: block;
 font-size: 0;
 height: 0;
 clear: both;
 visibility: hidden;

}

  1. cssmenu ul li {
 display: inline-block;
 padding: 0;
 margin: 0;

}

  1. cssmenu.align-right ul li {
 float: right;

}

  1. cssmenu.align-center ul {
 text-align: center;

}

  1. cssmenu ul li a {
 color: #ffffff;
 text-decoration: none;
 display: block;
 padding: 15px 25px;
 font-family: 'Open Sans', sans-serif;
 font-weight: 700;
 text-transform: uppercase;
 font-size: 14px;
 position: relative;
 -webkit-transition: color .25s;
 -moz-transition: color .25s;
 -ms-transition: color .25s;
 -o-transition: color .25s;
 transition: color .25s;

}

  1. cssmenu ul li a:hover {
 color: red;

}

  1. cssmenu ul li a:hover:before {
 width: 100%;

}

  1. cssmenu ul li a:after {
 content: "";
 display: block;
 position: absolute;
 right: -3px;
 top: 19px;
 height: 6px;
 width: 6px;
 background: #ffffff;
 opacity: .5;

}

  1. cssmenu ul li a:before {
 content: "";
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 height: 3px;
 width: 0;
 background: red;
 -webkit-transition: width .25s;
 -moz-transition: width .25s;
 -ms-transition: width .25s;
 -o-transition: width .25s;
 transition: width .25s;

}

  1. cssmenu ul li.last > a:after,
  2. cssmenu ul li:last-child > a:after {
 display: none;

}

  1. cssmenu ul li.active a {
 color: red;

}

  1. cssmenu ul li.active a:before {
 width: 100%;

}

  1. cssmenu.align-right li.last > a:after,
  2. cssmenu.align-right li:last-child > a:after {
 display: block;

}

  1. cssmenu.align-right li:first-child a:after {
 display: none;

} @media screen and (max-width: 768px) { 

 #cssmenu ul li {
   float: none;
   display: block;
 }
 #cssmenu ul li a {
   width: 100%;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-bottom: 1px solid #fb998c;
 }
 #cssmenu ul li.last > a,
 #cssmenu ul li:last-child > a {
   border: 0;
 }
 #cssmenu ul li a:after {
   display: none;
 }
 #cssmenu ul li a:before {
   display: none;
 }

}

body { margin: 24px 0; padding: 0; text-align: center; font: 0.8em/1.3 Verdana, Arial, Helvetica, Sans-serif; }

a { background-color: inherit; color: #ff7f00; text-decoration: none; }