Template:North America 2013 Page CSS

From 2013.igem.org

(Difference between revisions)
 
(128 intermediate revisions not shown)
Line 38: Line 38:
body,input {
body,input {
-
font-family: Lucida Sans Unicode;sans-serif
+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 +
  font-weight: 300;
}
}
Line 68: Line 69:
h2 {
h2 {
-
font-size: 1.5em;
+
font-size: 2em;
}
}
Line 146: Line 147:
 +
.verticalLine {
 +
    border-left: thick solid #E8E8E8;
 +
}
 +
 +
.verticalLineRight {
 +
    border-right: thick solid #E8E8E8;
 +
}
/*/////////////////////////////////
/*/////////////////////////////////
Line 154: Line 162:
border: none;
border: none;
}
}
-
 
-
 
-
 
-
/* ///////////////////////////////////////////////////////////////////////////
 
-
// Nav bar
 
-
/////////////////////////////////////////////////////////////////////////// */
 
-
 
-
/*--Menu Bar CSS--*/
 
-
#navbarcontainer {
 
-
width: 100%;
 
-
height: 35px;
 
-
background: #003366;
 
-
margin-top:0px;
 
-
font-size: 11px;
 
-
}
 
-
 
-
#navbarsocial { float:right;
 
-
padding-top: 4px;
 
-
}
 
-
#greyhover {
 
-
float: left;
 
-
border: 0px solid #fff;
 
-
color: #535353 ; /* #F37321; */
 
-
text-shadow: #000 1px 1px 1px;
 
-
padding:0px; line-height: 100%;
 
-
text-align: center;
 
-
font-weight: bold;
 
-
font-size: .8em;
 
-
-webkit-border-radius: 3px;
 
-
-moz-border-radius: 3px;
 
-
border-radius: 3px;
 
-
margin-left: 10px;
 
-
}
 
-
#flashylink a:hover { color: #fff;
 
-
}
 
-
 
-
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/
 
-
ul#topnav {
 
-
margin: 0;
 
-
padding: 0 0 0 37px;
 
-
font-size: 1em;
 
-
position: relative;
 
-
}
 
-
ul#topnav li {
 
-
display: inline-block;
 
-
height: 35px;
 
-
margin-left: -4px;
 
-
position: relative;
 
-
/*border-right: 1px solid #ccc; /*--Divider for each parent level links--*/
 
-
}
 
-
 
-
ul#topnav li.navHome {
 
-
background: black;
 
-
width: 175px;
 
-
margin-left: -38px;
 
-
text-align: right;
 
-
}
 
-
 
-
ul#topnav li.navHome a {
 
-
border: none;
 
-
}
 
-
 
-
ul#topnav li a {
 
-
height: 16px;
 
-
padding: 0px 15px;
 
-
display: block;
 
-
color: #fff;
 
-
text-decoration: none;
 
-
border-right: 1px solid #ccc;
 
-
margin: 10px 0 0px;
 
-
}
 
-
/*--ul#topnav li.last-child {
 
-
display: inline-block;
 
-
height: 35px;
 
-
width: 212px;
 
-
}--*/
 
-
 
-
ul#topnav li.last-child a {
 
-
border: none;
 
-
}
 
-
ul#topnav li:hover{
 
-
    background: #535353;
 
-
}
 
-
ul#topnav li.navHome:hover{
 
-
    background: black;
 
-
}
 
-
ul#topnav li:hover a {
 
-
border: none;
 
-
}
 
-
 
-
ul#topnav li div {
 
-
height: 10px;
 
-
padding: 6px 0 14px;
 
-
position: absolute;
 
-
z-index:10;
 
-
top:35px;
 
-
display: none; /*--Hide by default--*/
 
-
background: #535353  /*#F37321*/;
 
-
color: #fff;
 
-
/*--Bottom right rounded corner--*/
 
-
-moz-border-radius-bottomright: 10px;
 
-
-khtml-border-radius-bottomright: 10px;
 
-
-webkit-border-bottom-right-radius: 10px;
 
-
border-bottom-right-radius: 10px;
 
-
/*--Bottom left rounded corner--*/
 
-
-moz-border-radius-bottomleft: 10px;
 
-
-khtml-border-radius-bottomleft: 10px;
 
-
-webkit-border-bottom-left-radius: 10px;
 
-
border-bottom-left-radius: 10px;
 
-
}
 
-
 
-
ul#topnav li div.subNavRight {
 
-
right: 0px;
 
-
width: 340px;
 
-
}
 
-
 
-
ul#topnav li div.subNavSecond {
 
-
left: -50px;
 
-
width: 310px;
 
-
}
 
-
 
-
ul#topnav li div.subNavMiddle {
 
-
left: -50px;
 
-
width: 280px; 
 
-
}
 
-
 
-
ul#topnav li div.subNavLeft {
 
-
    width: 410px;
 
-
}
 
-
 
-
 
-
ul#topnav li:hover div { display: block; } /*--Show subnav on hover--*/
 
-
ul#topnav li div a { display: inline; }
 
-
ul#topnav li div a:hover {
 
-
text-decoration: underline;
 
-
color: #fff;
 
-
}
 
-
/*--Menu Ends Here--*/
 
-
 
-
 
-
.htitle {
 
-
display: block;
 
-
padding: 8px;
 
-
font-size: 1em;
 
-
font-weight: normal;
 
-
border-bottom: solid 1px #ccc;
 
-
margin-bottom: 0px;
 
-
clear:both;
 
-
color: #000;
 
-
}
 
-
.textboxes {
 
-
position: relative;
 
-
border: 1px solid #f0f0f0;
 
-
background: #f0f0f0;
 
-
border-bottom: 2px solid #ccc; 
 
-
-webkit-border-radius: 10px;
 
-
-moz-border-radius: 10px;
 
-
border-radius: 10px;
 
-
margin-top: 10px; margin-bottom: 10px;
 
-
}
 
-
.innertextbox { /*--Goes inside textboxes class--*/
 
-
display: block;
 
-
position: relative;
 
-
margin: 10px;
 
-
padding: 20px;
 
-
-webkit-border-radius: 10px;
 
-
-moz-border-radius: 10px;
 
-
border-radius: 10px;
 
-
background: #fff;
 
-
}
 
Line 329: Line 167:
//  Bandeau haut
//  Bandeau haut
/////////////////////////////////////////////////////////////////////////// */
/////////////////////////////////////////////////////////////////////////// */
 +
/* Design provided by <a href="https://2013.igem.org/Europe">iGEM Europe 2013</a> */
#top-section {
#top-section {
Line 336: Line 175:
#p-logo {
#p-logo {
border: none;
border: none;
-
background-image: url('https://static.igem.org/mediawiki/2013/4/49/EuJamBandeauHaut.png');
+
background-image: url('https://static.igem.org/mediawiki/igem.org/c/c7/HEADER_na_2013.png');
}
}
Line 351: Line 190:
#p-logo .igemLogo {
#p-logo .igemLogo {
         height: 70px;
         height: 70px;
-
         padding: 16px 25px 5px 25px;
+
         padding: 16px 35px 5px 680px;
}
}
Line 364: Line 203:
#search-controls {
#search-controls {
-
top: 10px;
+
top: 1px;
-
right: 180px;
+
right: 1px;
-
width: 240px;
+
width: 1px;
 +
        display: none;
}
}
#search-controls a {
#search-controls a {
-
margin : 0 5px 5px 5px;
+
size: 1px,1px,1px;
 +
        display: none;
}
}
#search-controls input {
#search-controls input {
-
vertical-align: middle;
+
display: none;
-
}
+
-
 
+
-
#socialLinks {
+
-
margin-bottom: 10px;
+
}
}
#searchInput {
#searchInput {
-
border: none;
+
      display: none;
-
background-color: lightgrey;
+
-
height: 20px;
+
}
}
Line 394: Line 229:
font-weight: normal;
font-weight: normal;
color: white;
color: white;
-
background-color: #451700;
+
background-color: #003366;
margin: 0 0 0 -12px;
margin: 0 0 0 -12px;
padding: 0 15px;
padding: 0 15px;
height: 20px;
height: 20px;
font-size: 0.9em;
font-size: 0.9em;
-
color: lightgrey;
+
color: white;
cursor: pointer;
cursor: pointer;
 +
        display: none;
}
}
Line 418: Line 254:
// Column
// Column
/////////////////////////////////////////////////////////////////////////// */
/////////////////////////////////////////////////////////////////////////// */
 +
 +
.boxes1 {
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  border:2px solid #000066;  position:relative;
 +
}
 +
 +
.boxes2 {
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  border:2px solid #006699;  position:relative;
 +
}
 +
 +
.boxes3 {
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  border:2px solid #00cccc;  position:relative;
 +
}
 +
 +
.indent {
 +
margin-left:4em;
 +
margin-right: 4em;
 +
 +
}
#columns {
#columns {
-
background: #4056fd;
+
background: #ffffff;
padding: 28px 0 10px 0;
padding: 28px 0 10px 0;
}
}
#columns .column {
#columns .column {
-
width: 260px;
+
width: 190px;
-
                background: #4056fd;
+
float: left;
float: left;
}
}
Line 504: Line 363:
padding: 0!important;
padding: 0!important;
list-style: none;
list-style: none;
-
border: 1px solid #b4b4b4;
+
}
}
Line 510: Line 369:
margin: 0;
margin: 0;
padding: 15px;
padding: 15px;
-
background: url(https://static.igem.org/mediawiki/2012/6/60/EuropeanJamboree_Linkbg6b.png) repeat-x bottom left;
+
background: url(https://static.igem.org/mediawiki/2013/e/ea/Northamerica_link.png) repeat-x bottom left;
 +
                                -moz-border-radius-bottomright: 10px;
 +
                        -khtml-border-radius-bottomright: 10px;
 +
                        -webkit-border-bottom-right-radius: 10px;
 +
                        -moz-border-radius-bottomleft: 10px;
 +
                        -khtml-border-radius-bottomleft: 10px;
 +
                        -webkit-border-bottom-left-radius: 10px;
 +
                        -moz-border-radius-topleft: 10px;
 +
                        -khtml-border-radius-topleft: 10px;
 +
                        -webkit-border-top-left-radius: 10px;
 +
                        -moz-border-radius-topright: 10px;
 +
                        -khtml-border-radius-topright: 10px;
 +
                        -webkit-border-top-right-radius: 10px;
 +
 
}
}
                       #columns li a {
                       #columns li a {
-
                       color: #000000;
+
                       color: #ffffff;
                       }
                       }
                       #columns li a:hover {
                       #columns li a:hover {
-
                       color: #f7b93d;
+
                       color: #ffefe7;
                       font-size: 115%;
                       font-size: 115%;
                       text-decoration: none;  
                       text-decoration: none;  
-
}
+
      }
#columns p {
#columns p {
Line 530: Line 402:
#columns p a {
#columns p a {
-
color: #232323;
+
color: #000000;
text-decoration: none;
text-decoration: none;
}
}
#columns p a:hover {
#columns p a:hover {
-
color: #232323;
+
color: #ffefe7;
text-decoration: underline;
text-decoration: underline;
}
}
Line 541: Line 413:
#columns h2 a {
#columns h2 a {
-
color: #FFFFFF;
+
color: #000000;
text-decoration: none;
text-decoration: none;
}
}
#columns h2 a:hover {
#columns h2 a:hover {
-
                        color: #FFFFFF;
+
                        color: #ffefe7;
                                 text-decoration: underline;
                                 text-decoration: underline;
}
}
Line 762: Line 634:
}
}
 +
 +
/* ///////////////////////////////////////////////////////////////////////////
 +
//  Caroussel
 +
/////////////////////////////////////////////////////////////////////////// */
 +
 +
 +
 +
.bx-wrapper {
 +
    margin: 55px 0px 30px;
 +
    border-bottom: 1px solid #0090D1;
 +
  }
 +
  .bx-wrapper .bx-viewport {
 +
    box-shadow: none;
 +
    border: none;
 +
    left: 0;
 +
  }
 +
  .bx-wrapper .bx-pager.bx-default-pager a:hover,
 +
.bx-wrapper .bx-pager.bx-default-pager a.active {
 +
    background-color: #0090D1;
 +
  }
 +
  .bx-wrapper .bx-pager {
 +
    top: 510px;
 +
  }
/* ///////////////////////////////////////////////////////////////////////////  
/* ///////////////////////////////////////////////////////////////////////////  
// Nav bar
// Nav bar
/////////////////////////////////////////////////////////////////////////// */
/////////////////////////////////////////////////////////////////////////// */
 +
/*--Menu Bar CSS--*/
/*--Menu Bar CSS--*/
-
#navbarcontainer { width: 100%;  
+
#navbarcontainer {
 +
width: 100%;  
height: 35px;  
height: 35px;  
-
background: #232f8a;  
+
background: #591e00;  
margin-top:0px;
margin-top:0px;
 +
font-size: 12px;
 +
              -moz-border-radius-bottomright: 10px;
 +
              -khtml-border-radius-bottomright: 10px;
 +
              -webkit-border-bottom-right-radius: 10px;
 +
              -moz-border-radius-bottomleft: 10px;
 +
              -khtml-border-radius-bottomleft: 10px;
 +
              -webkit-border-bottom-left-radius: 10px;
 +
              -moz-border-radius-topleft: 10px;
 +
              -khtml-border-radius-topleft: 10px;
 +
              -webkit-border-top-left-radius: 10px;
 +
              -moz-border-radius-topright: 10px;
 +
              -khtml-border-radius-topright: 10px;
 +
              -webkit-border-top-right-radius: 10px;
 +
}
}
#navbar { width:975px;  
#navbar { width:975px;  
Line 778: Line 689:
position:relative;  
position:relative;  
height: 35px;
height: 35px;
-
}
+
 
-
#navbarsocial { float:right;
+
 
-
padding-top: 4px;
+
}
}
#flashylink { display: block;  
#flashylink { display: block;  
-
float: left;  
+
float: centre;  
border: 0px solid #fff;  
border: 0px solid #fff;  
-
color: #232f8a;
+
color: #591e00;  
-
text-shadow: #000 1px 1px 1px;  
+
padding:3px; line-height: 100%;  
padding:3px; line-height: 100%;  
text-align: center;  
text-align: center;  
Line 793: Line 702:
-moz-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;  
border-radius: 3px;  
-
margin-right: 10px;
+
margin-right: 10px;  
}
}
#flashylink a:hover { color: #fff;
#flashylink a:hover { color: #fff;
Line 800: Line 709:
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/
/*--Menu Begins Here http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/ --*/
ul#topnav {
ul#topnav {
-
margin: 0; padding: 0 0 0 37px;
+
margin: 0; padding: 0 0 0 100px;
-
float: left;
+
float: centre;
/*-- width: 960px;--*/
/*-- width: 960px;--*/
list-style: none;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1em;
font-size: 1em;
-
background: #232f8a/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/;
+
background: #591e00/*--url(https://static.igem.org/mediawiki/igem.org/c/c8/Navbar-3.gif) repeat-x--*/;
z-index: 6;
z-index: 6;
}
}
Line 828: Line 737:
text-decoration: none;
text-decoration: none;
}
}
-
ul#topnav li:hover { background: #4056fd url(topnav_active.gif) repeat-x; }
+
ul#topnav li:hover { background: #993300 url(topnav_active.gif) repeat-x; }
ul#topnav li span {
ul#topnav li span {
float: left;
float: left;
Line 834: Line 743:
position: absolute;
position: absolute;
z-index:10;
z-index:10;
-
left: 37px; top:35px;
+
top:35px;
display: none; /*--Hide by default--*/
display: none; /*--Hide by default--*/
-
width: 720px;
+
background: #993300;
-
background: #4056fd;
+
color: #fff;
color: #fff;
-
/*--Bottom right rounded corner--*/
 
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
-khtml-border-radius-bottomright: 10px;
-khtml-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-
/*--Bottom left rounded corner--*/
 
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomleft: 10px;
Line 858: Line 764:
padding: 8px;
padding: 8px;
font-size: 1em;
font-size: 1em;
-
font-weight: bold;
+
font-weight: normal;
border-bottom: solid 1px #ccc;
border-bottom: solid 1px #ccc;
margin-bottom: 0px;
margin-bottom: 0px;
Line 865: Line 771:
}
}
.textboxes {
.textboxes {
-
display: block;
 
position: relative;
position: relative;
border: 1px solid #f0f0f0;
border: 1px solid #f0f0f0;
Line 999: Line 904:
}
}
-
h2,h3 {font-wright:bold; font-family: Calibri, Arial, Helvetica, sans-serif}
+
h2,h3 {font-wright: bold; font-family: Calibri, Arial, Helvetica, sans-serif}
</style>
</style>
</html>
</html>

Latest revision as of 17:12, 17 October 2013

Retrieved from "http://2013.igem.org/Template:North_America_2013_Page_CSS"