Team:NGSS TR

From 2014hs.igem.org

(Difference between revisions)
(Replaced content with "<html>")
Line 1: Line 1:
-
<html>
+
{{:Team:NGSS_TR/style2.css}}
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
 +
<title>İGEM NGSS_TR 2014</title>
 +
<style> <head>
 +
<body class="mediawiki ltr ns-0 ns-subject page-team_NGSS_TR style="zoom: 1;"><div id="globalWrapper">
 +
<div class="visualClear"></div>
 +
 
 +
 
 +
 
 +
 
 +
html, body
 +
{
 +
height: 100%;
 +
}
 +
 
 +
.visualClear
 +
{
 +
  clear: both;
 +
 
 +
}
 +
 
 +
body
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
background: #383838;
 +
font-family: 'Source Sans Pro', sans-serif;
 +
font-size: 11pt;
 +
font-weight: 300;
 +
color: #22BFC7
 +
}
 +
 
 +
h1, h2, h3
 +
{
 +
margin: 0;
 +
padding: 0;
 +
font-weight: 600;
 +
color: #454445;
 +
}
 +
 
 +
p, ol, ul
 +
{
 +
margin-top: 0;
 +
}
 +
 
 +
ol, ul
 +
{
 +
padding: 0;
 +
list-style: none;
 +
}
 +
 
 +
p
 +
{
 +
line-height: 180%;
 +
color: #15292A;
 +
}
 +
 
 +
strong
 +
{
 +
}
 +
 
 +
a
 +
{
 +
color: #2C383B;
 +
}
 +
 
 +
a:hover
 +
{
 +
text-decoration: none;
 +
}
 +
 
 +
.container
 +
{
 +
margin: 0px auto;
 +
width: 1200px;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Image Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.image
 +
{
 +
display: inline-block;
 +
}
 +
 
 +
.image img
 +
{
 +
display: block;
 +
width: 100%;
 +
}
 +
 
 +
.image-full
 +
{
 +
display: block;
 +
width: 100%;
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
.image-left
 +
{
 +
float: left;
 +
margin: 0 2em 2em 0;
 +
}
 +
 
 +
.image-centered
 +
{
 +
display: block;
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
.image-centered img
 +
{
 +
margin: 0 auto;
 +
width: auto;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* List Styles                                                                  */
 +
/*********************************************************************************/
 +
 
 +
ul.style1
 +
{
 +
margin: 0;
 +
padding: 0em 0em 0em 0em;
 +
overflow: hidden;
 +
list-style: none;
 +
color: #6c6c6c
 +
}
 +
 
 +
ul.style1 li
 +
{
 +
overflow: hidden;
 +
display: block;
 +
padding: 2.80em 0em;
 +
border-top: 1px solid #D1CFCE;
 +
}
 +
 
 +
ul.style1 li:first-child
 +
{
 +
padding-top: 0;
 +
border-top: none;
 +
}
 +
 
 +
ul.style1 .image-left
 +
{
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.style1 h3
 +
{
 +
padding: 1.2em 0em 1em 0em;
 +
letter-spacing: 0.10em;
 +
text-transform: uppercase;
 +
font-size: 1.2em;
 +
font-weight: 600;
 +
color: #454445;
 +
}
 +
 
 +
ul.style1 a
 +
{
 +
text-decoration: none;
 +
color: #525252;
 +
}
 +
 
 +
ul.style1 a:hover
 +
{
 +
text-decoration: underline;
 +
color: #525252;
 +
}
 +
 
 +
ul.style2
 +
{
 +
margin: 0;
 +
padding-top: 1em;
 +
list-style: none;
 +
}
 +
 
 +
ul.style2 li
 +
{
 +
border-top: solid 1px #E5E5E5;
 +
padding: 0.80em 0 0.80em 0;
 +
font-family: 0.80em;
 +
}
 +
 
 +
ul.style2 li:before
 +
{
 +
display: inline-block;
 +
padding: 4px;
 +
background: #DB3256;
 +
}
 +
 
 +
ul.style2 a
 +
{
 +
display: inline-block;
 +
margin-left: 1em;
 +
}
 +
 
 +
ul.style2 li:first-child
 +
{
 +
border-top: 0;
 +
padding-top: 0;
 +
}
 +
 
 +
ul.style2 .icon
 +
{
 +
color: #FFF;
 +
}
 +
 
 +
ul.style3
 +
{
 +
margin: 0;
 +
padding-top: 1em;
 +
list-style: none;
 +
}
 +
 
 +
ul.style3 li
 +
{
 +
border-top: solid 1px rgba(255,255,255,.2);
 +
padding: 1em 0 1em 0;
 +
font-family: 0.80em;
 +
}
 +
 
 +
ul.style3 li:before
 +
{
 +
display: inline-block;
 +
padding: 4px;
 +
background: #FFF;
 +
}
 +
 
 +
ul.style3 a
 +
{
 +
display: inline-block;
 +
margin-left: 1em;
 +
font-size: 1em !important;
 +
color: #FFF;
 +
}
 +
 
 +
ul.style3 li:first-child
 +
{
 +
border-top: 0;
 +
padding-top: 0;
 +
}
 +
 
 +
ul.style3 .icon
 +
{
 +
color: #DB3256;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Social Icon Styles                                                            */
 +
/*********************************************************************************/
 +
 
 +
ul.contact
 +
{
 +
margin: 0;
 +
padding: 2em 0em 0em 0em;
 +
list-style: none;
 +
}
 +
 
 +
ul.contact li
 +
{
 +
display: inline-block;
 +
padding: 0em 0.30em;
 +
font-size: 1em;
 +
}
 +
 
 +
ul.contact li span
 +
{
 +
display: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
 
 +
ul.contact li a
 +
{
 +
color: #FFF;
 +
}
 +
 
 +
ul.contact li a:before
 +
{
 +
display: inline-block;
 +
background: #3f3f3f;
 +
width: 40px;
 +
height: 40px;
 +
line-height: 40px;
 +
border-radius: 20px;
 +
text-align: center;
 +
color: #FFFFFF;
 +
}
 +
 
 +
ul.contact li a.icon-twitter:before
 +
{
 +
background: #2DAAE4;
 +
}
 +
 
 +
ul.contact li a.icon-facebook:before
 +
{
 +
background: #39599F;
 +
}
 +
 
 +
ul.contact li a.icon-dribbble:before
 +
{
 +
background: #C4376B;
 +
}
 +
 
 +
ul.contact li a.icon-tumblr:before
 +
{
 +
background: #31516A;
 +
}
 +
 
 +
ul.contact li a.icon-rss:before
 +
{
 +
background: #F2600B;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Button Style                                                                  */
 +
/*********************************************************************************/
 +
 
 +
.button
 +
{
 +
display: inline-block;
 +
padding: 1.3em 3em;
 +
background: #1B9772;
 +
-moz-transition: opacity 0.25s ease-in-out;
 +
-webkit-transition: opacity 0.25s ease-in-out;
 +
-o-transition: opacity 0.25s ease-in-out;
 +
-ms-transition: opacity 0.25s ease-in-out;
 +
transition: opacity 0.25s ease-in-out;
 +
letter-spacing: 0.20em;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
font-weight: 600;
 +
color: #FFF;
 +
}
 +
 
 +
.button:hover
 +
{
 +
}
 +
 
 +
.button:active
 +
{
 +
}
 +
 
 +
.button-big
 +
{
 +
padding: 1.6em 4em;
 +
font-size: 1.4em;
 +
font-weight: 900;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Heading Titles                                                                */
 +
/*********************************************************************************/
 +
 
 +
.title
 +
{
 +
margin-bottom: 3em;
 +
}
 +
 
 +
.title h2
 +
{
 +
font-weight: 400;
 +
font-size: 2.8em;
 +
color: #323232;
 +
}
 +
 
 +
.title .byline
 +
{
 +
letter-spacing: 0.15em;
 +
text-transform: uppercase;
 +
font-weight: 400;
 +
font-size: 1.1em;
 +
color: #6F6F6F;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Header                                                                        */
 +
/*********************************************************************************/
 +
@import url('https://2014hs.igem.org/Team:NGSS_TR/reset.css?action=raw&ctype=text/css');
 +
#header-wrapper
 +
{
 +
padding: 2em 0em;
 +
background: #F3B644;
 +
}
 +
 
 +
#header
 +
{
 +
position: relative;
 +
height: 100px;
 +
text-align: left;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Logo                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#logo
 +
{
 +
position: absolute;
 +
top: -16px;
 +
left: 6px;
 +
width: 1209px;
 +
}
 +
 
 +
#logo h1
 +
{
 +
display: inline-block;
 +
font-size: 2.5em;
 +
text-transform: uppercase;
 +
font-weight: 700;
 +
color: #2C383B;
 +
padding-right: 0.50em;
 +
}
 +
 
 +
#logo span
 +
{
 +
position: absolute;
 +
top: 1.4em;
 +
display: inline-block;
 +
padding-left: 1.50em;
 +
letter-spacing: 0.10em;
 +
text-transform: uppercase;
 +
font-size: 0.90em;
 +
}
 +
 
 +
#logo a
 +
{
 +
text-decoration: none;
 +
color: #197d62;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Menu                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#menu
 +
{
 +
position: absolute;
 +
right: 62px;
 +
top: 0px;
 +
}
 +
 
 +
#menu ul
 +
{
 +
display: inline-block;
 +
}
 +
 
 +
#menu li
 +
{
 +
display: block;
 +
float: left;
 +
text-align: center;
 +
line-height: 60px;
 +
}
 +
 
 +
#menu li a, #menu li span
 +
{
 +
display: inline-block;
 +
margin-left: 1px;
 +
padding: 0em 1.5em;
 +
letter-spacing: 0.10em;
 +
text-decoration: none;
 +
font-size: 1em;
 +
text-transform: uppercase;
 +
outline: 0;
 +
color: #09B8A0;
 +
}
 +
 
 +
#menu li:hover a, #menu li.active a, #menu li.active span
 +
{
 +
}
 +
 
 +
#menu li.current_page_item a
 +
{
 +
background: #09B8A0;
 +
color: #FFF !important;
 +
}
 +
 
 +
#menu .icon
 +
{
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Banner                                                                        */
 +
/*********************************************************************************/
 +
 +
#banner-wrapper
 +
{
 +
overflow: hidden;
 +
padding: 3em 0em;
 +
background: #09B8A0;
 +
}
 +
 
 +
#banner
 +
{
 +
overflow: hidden;
 +
width: 1000px;
 +
padding: 0px 100px;
 +
text-align: center;
 +
color: rgba(255,255,255,.7);
 +
}
 +
 
 +
#banner a
 +
{
 +
color: rgba(255,255,255,.9);
 +
}
 +
 
 +
#banner .box-left
 +
{
 +
float: left;
 +
}
 +
 
 +
#banner .box-right
 +
{
 +
float: right;
 +
}
 +
 
 +
#banner h2
 +
{
 +
margin: 0em;
 +
padding: 0em;
 +
font-weight: 400;
 +
font-size: 3em;
 +
color: #555555;
 +
}
 +
 
 +
#banner span
 +
{
 +
display: block;
 +
padding-top: 0.20em;
 +
text-transform: uppercase;
 +
font-size: 1.2em;
 +
color: #A2A2A2;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Page                                                                          */
 +
/*********************************************************************************/
 +
 
 +
#wrapper
 +
{
 +
background: #09B8A0;
 +
}
 +
 
 +
#page
 +
{
 +
overflow: hidden;
 +
padding: 6em 0em;
 +
border-bottom: 2px solid #09B8A0;
 +
text-align: center;
 +
}
 +
 
 +
#page .button
 +
{
 +
margin-top: 2em;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Content                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#content
 +
{
 +
padding: 0em 7em;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Sidebar                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#sidebar
 +
{
 +
float: right;
 +
width: 450px;
 +
}
 +
 
 +
#stwo-col
 +
{
 +
margin-top: 2em;
 +
}
 +
 
 +
#stwo-col h2
 +
{
 +
display: block;
 +
padding-bottom: 1.5em;
 +
letter-spacing: 0.10em;
 +
text-transform: uppercase;
 +
font-size: 1.2em;
 +
font-weight: 600;
 +
color: #E09B07;
 +
}
 +
 
 +
#stwo-col .sbox1
 +
{
 +
float: left;
 +
width: 210px;
 +
}
 +
 
 +
#stwo-col .sbox2
 +
{
 +
float: right;
 +
width: 210px;
 +
}
 +
 
 +
 
 +
 
 +
/*********************************************************************************/
 +
/* Featured                                                                      */
 +
/*********************************************************************************/
 +
 
 +
#featured-wrapper
 +
{
 +
overflow: hidden;
 +
padding: 6em 0em;
 +
background: #09B8A0;
 +
text-align: center;
 +
}
 +
 
 +
#featured
 +
{
 +
overflow: hidden;
 +
}
 +
 
 +
#featured .major
 +
{
 +
overflow: hidden;
 +
margin-bottom: 3em;
 +
padding-bottom: 2em;
 +
border-bottom: 1px solid #09B8A0;
 +
}
 +
 
 +
#featured .major h2
 +
{
 +
font-size: 3em;
 +
}
 +
 
 +
#featured .major .byline
 +
{
 +
font-size: 1.3em;
 +
}
 +
 
 +
#featured .title
 +
{
 +
margin-bottom: 1.5em;
 +
padding-bottom: 1.5em;
 +
border-bottom: 1px solid rgba(255,255,255,.1);
 +
}
 +
 
 +
#featured .title h2
 +
{
 +
font-size: 1.2em;
 +
}
 +
 
 +
#featured h2
 +
{
 +
text-align: center;
 +
color: #FFF;
 +
}
 +
 
 +
#featured .icon
 +
{
 +
position: relative;
 +
display: inline-block;
 +
width: 100px;
 +
height: 100px;
 +
margin: 0px auto 20px auto;
 +
line-height:  100px;
 +
font-size: 3em;
 +
text-align: center;
 +
color: #FFF;
 +
}
 +
 
 +
.column1,  .column2,  .column3,  .column4
 +
{
 +
width: 282px;
 +
}
 +
 
 +
.column1,  .column2
 +
{
 +
float: left;
 +
margin-right: 24px;
 +
}
 +
 
 +
.column3
 +
{
 +
float: left;
 +
}
 +
 
 +
.column4
 +
{
 +
float: right;
 +
}
 +
 
 +
 
 +
#header-featured
 +
{
 +
height: 30em;
 +
background-image: url(images/ngss_logo.jpg);
 +
background-position: center;
 +
background-size: cover;
 +
}
 +
 
 +
 
 +
#slider-wrapper
 +
{
 +
padding: 6em 0em;
 +
background: #09B8A0;
 +
}
 +
 
 +
#slider
 +
{
 +
margin: 0em auto 0em auto;
 +
width: 1200px;
 +
position: relative;
 +
}
 +
 
 +
#slider .button
 +
{
 +
}
 +
 
 +
#slider .button:hover
 +
{
 +
}
 +
 
 +
#slider .viewer
 +
{
 +
width: 1000px;
 +
height: 375px;
 +
margin: 0 auto;
 +
overflow: hidden;
 +
}
 +
 
 +
#slider .viewer .reel
 +
{
 +
display: none;
 +
height: 375px;
 +
}
 +
 
 +
#slider .viewer .reel .slide
 +
{
 +
position: relative;
 +
width: 1000px;
 +
height: 375px;
 +
}
 +
 
 +
#slider .viewer .reel h2
 +
{
 +
position: absolute;
 +
top: 130px;
 +
left: 0;
 +
width: 1200px;
 +
height: 80px;
 +
line-height: 80px;
 +
background: #09B8A0;
 +
text-align: center;
 +
opacity: 0.85;
 +
font-weight: normal;
 +
color: #ffffff;
 +
font-size: 2.25em;
 +
}
 +
 
 +
#slider .viewer .reel p
 +
{
 +
position: absolute;
 +
top: 210px;
 +
left: 0;
 +
width: 1200px;
 +
height: 40px;
 +
line-height: 40px;
 +
background: #0074C6;
 +
text-align: center;
 +
opacity: 0.85;
 +
font-weight: normal;
 +
color: #ffffff;
 +
font-size: 1.1em;
 +
}
 +
 
 +
#slider .icon
 +
{
 +
font-size: 4em;
 +
color: #FFF;
 +
}
 +
 
 +
#slider .previous-button
 +
{
 +
position: absolute;
 +
top: 150px;
 +
left: 0;
 +
}
 +
 
 +
#slider .next-button
 +
{
 +
position: absolute;
 +
top: 150px;
 +
right: 0;
 +
}
 +
 
 +
#slider .indicator
 +
{
 +
margin: 30px auto 0 auto;
 +
}
 +
 
 +
#slider .indicator ul
 +
{
 +
list-style: none;
 +
padding: 0;
 +
margin: 0;
 +
text-align: center;
 +
}
 +
 
 +
#slider .indicator ul li
 +
{
 +
display: inline-block;
 +
width: 12px;
 +
height: 12px;
 +
text-indent: -9999em;
 +
background: #09B8A0;
 +
margin: 0 2px 0 2px;
 +
border-radius: 8px;
 +
border-bottom: solid 1px #ffffff;
 +
border-top: solid 1px #09B8A0;
 +
}
 +
 
 +
#slider .indicator ul li.active
 +
{
 +
background: #09B8A0;
 +
border-top: solid 1px #09B8A0;
 +
}
 +
 
 +
/*********************************************************************************/
 +
/* Footer                                                                        */
 +
/*********************************************************************************/
 +
 
 +
 
 +
#footer-wrapper
 +
{
 +
overflow: hidden;
 +
padding: 6em 0em;
 +
background: #09B8A0;
 +
text-align: center;
 +
}
 +
 
 +
#footer
 +
{
 +
overflow: hidden;
 +
}
 +
 
 +
 
 +
#footer .title h2
 +
{
 +
font-size: 1.6em;
 +
font-weight: 300;
 +
color: #FFF;
 +
}
 +
 
 +
#footer .title .byline
 +
{
 +
display: block;
 +
padding-top: 1em;
 +
text-transform: uppercase;
 +
font-size: 0.80em;
 +
color: rgba(255,255,255,0.5);
 +
}
 +
 
 +
#footer .button
 +
{
 +
margin-top: 2em;
 +
}
 +
 
 +
#extra
 +
{
 +
overflow: hidden;
 +
margin: 0em auto 0em auto;
 +
padding: 5em 0em 5em 0em;
 +
text-align: center;
 +
}
 +
 
 +
#extra h2
 +
{
 +
margin: 0em;
 +
padding: 0em;
 +
font-weight: 400;
 +
font-size: 2.4em;
 +
color: #555555;
 +
}
 +
 
 +
#extra span
 +
{
 +
display: block;
 +
padding-top: 0.20em;
 +
margin-bottom: 3em;
 +
text-transform: uppercase;
 +
font-size: 1.2em;
 +
color: #09B8A0;
 +
}
 +
 
 +
 
 +
#extra .button
 +
{
 +
margin-top: 2em;
 +
}
 +
 
 +
#extra2
 +
{
 +
overflow: hidden;
 +
padding-bottom: 5em;
 +
}
 +
 
 +
#extra2 .button
 +
{
 +
margin-top: 2em;
 +
}
 +
 
 +
#extra2 .title h2
 +
{
 +
font-size: 2em;
 +
}
 +
 
 +
#extra2 .title .byline
 +
{
 +
font-size: 0.80em;
 +
}
 +
 
 +
#extra2 #ebox1,
 +
#extra2 #ebox2
 +
{
 +
width: 560px;
 +
}
 +
 
 +
#extra2  #ebox1
 +
{
 +
float: left;
 +
}
 +
 
 +
#extra2 #ebox2
 +
{
 +
float: right;
 +
}
 +
</style>
 +
 
 +
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" >
 +
  <tr><td>
 +
<div id="header-wrapper">
 +
  <div id="header" class="container">
 +
    <div id="logo"><img src="images/ngss_logo.jpg" width="145" height="103" alt=""/></div>
 +
    <div id="menu">
 +
      <ul>
 +
        <li class="current_page_item"><a href="index.html" accesskey="1" title="">Homepage</a></li>
 +
        <li><a href="page1.html" accesskey="2" title="">PROJECT</a></li>
 +
        <li><a href="page2.html" accesskey="3" title="">NOTEBOOK</a></li>
 +
        <li><a href="page4.html" accesskey="4" title="">LAB</a></li>
 +
        <li><a href="page5.html" accesskey="5" title="">OUTREACH</a></li>
 +
        <li><a href="page6.html" accesskey="6" title="">TEAM</a></li>
 +
      </ul>
 +
    </div>
 +
    </div>
 +
</div>
 +
<div id="header-featured"></div>
 +
 
 +
<div id="wrapper">
 +
  <div id="featured-wrapper">
 +
    <div id="featured" class="container">
 +
      <div class="column1"> <span class="icon icon-cogs"></span>
 +
        <div class="title">
 +
          <h2>PROJECT</h2>
 +
        </div>
 +
        <p>YOU CAN START EXPLORING JUST BY CLİCKİNG ME</p>
 +
      </div>
 +
      <a href="page1.html" </a>
 +
      <div class="column2"> <span class="icon icon-legal"></span>
 +
        <div class="title">
 +
          <h2>NOTEBOOK</h2>
 +
        </div>
 +
        <p>WHAT WE DID IN THE LAB?</p>
 +
      </div>
 +
      <div class="column3"> <span class="icon icon-unlock"></span>
 +
        <div class="title">
 +
          <h2>HUMAN PRACTISE</h2>
 +
        </div>
 +
        <p>SEE WHAT WE DID AS H PRACTISE!</p>
 +
      </div>
 +
      <div class="column4"> <span class="icon icon-wrench"></span>
 +
        <div class="title">
 +
          <h2>LAB</h2>
 +
        </div>
 +
        <p>What happened in the lab?</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 +
</div>
 +
</div>
 +
</td></tr></table>
 +
</body>
 +
</html>

Revision as of 14:01, 11 June 2014

Team:NGSS TR/style2.css İGEM NGSS_TR 2014

Retrieved from "http://2014hs.igem.org/Team:NGSS_TR"