Team:CBNU-Korea/Project

From 2012.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>
<head>
-
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
+
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
-
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
+
    <link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
-
<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1, maximum-scale=1, user-scalable=yes, target-densitydpi=medium-dpi"/>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1, maximum-scale=1, user-scalable=yes, target-densitydpi=medium-dpi" />
-
<style>
+
    <style>
 +
        /* ----------------Display:none---------------- */
-
/* ----------------Display:none---------------- */
+
        #p-logo {
 +
            display: none;
 +
        }
-
#p-logo {
+
        #search-controls {
-
display: none;
+
            display: none;
-
}
+
        }
-
#search-controls {
+
        .firstHeading {
-
display: none;
+
            display: none;
-
}
+
        }
-
.firstHeading {
+
        #catlinks {
-
    display: none;
+
            display: none;
-
}
+
        }
-
#catlinks {
+
        #footer-box {
-
display: none;
+
            display: none;
-
}
+
        }
-
#footer-box {
+
        #contentSub {
-
display: none;
+
            display: none;
-
}
+
        }
-
#contentSub {
+
        /* ----------------Body---------------- */
-
display: none;
+
-
}
+
-
/* ----------------Body---------------- */
+
        body {
 +
            font-family: 'Droid Sans', sans-serif;
 +
            background-color: white; /*per Page*/
 +
        }
-
body {
+
        #globalWrapper {
-
font-family: 'Droid Sans', sans-serif;
+
            padding-bottom: 0px;
-
background-color: white; /*per Page*/
+
        }
-
}
+
-
#globalWrapper {
+
        /* ----------------TopSection---------------- */
-
padding-bottom: 0px;
+
-
}
+
-
/* ----------------TopSection---------------- */
+
        #top-section {
 +
            height: 30px;
 +
            width: 100%;
 +
            background: none repeat scroll 0 0 #343838; /*per Page*/
 +
            border-bottom: 1px solid #262B35; /*per Page*/
 +
            border-left: medium none;
 +
            border-right: medium none;
 +
        }
-
#top-section {
+
        #menubar {
-
height: 30px;
+
            top: 2px;
-
width: 100%;
+
            font-family: 'Droid Sans', sans-serif;
-
    background: none repeat scroll 0 0 #343838; /*per Page*/
+
        }
-
border-bottom: 1px solid #262B35; /*per Page*/
+
-
border-left: medium none;
+
-
border-right: medium none;
+
-
}
+
-
#menubar {
+
        /* ----------------TopSection_left-menu---------------- */
-
top: 2px;
+
        .left-menu, .left-menu a {
-
font-family: 'Droid Sans', sans-serif;
+
            color: white;
-
}
+
            left: 0px;
 +
            text-transform: capitalize;
 +
        }
-
/* ----------------TopSection_left-menu---------------- */
+
            .left-menu:hover {
-
.left-menu, .left-menu a {
+
                background-color: transparent;
-
color: white;
+
            }
-
left: 0px;
+
-
text-transform: capitalize;
+
-
}
+
-
.left-menu:hover {
+
                .left-menu:hover a {
-
background-color: transparent;
+
                    color: white;
-
}
+
                    text-decoration: none !important;
 +
                }
-
.left-menu:hover a {
+
            .left-menu li a:hover {
-
color: white;
+
                color: #aaaaff;
-
text-decoration: none !important;
+
            }
-
}
+
-
.left-menu li a:hover {
 
-
color: #aaaaff;
 
-
}
 
 +
        /* ----------------TopSection_right-menu---------------- */
 +
        .right-menu li {
 +
            background-color: transparent;
 +
        }
-
/* ----------------TopSection_right-menu---------------- */
+
        .right-menu, .right-menu a {
-
.right-menu li {
+
            color: white;
-
background-color: transparent;
+
            right: 0;
-
}
+
            text-align: right;
 +
        }
-
.right-menu,.right-menu a {
+
            .right-menu:hover {
-
color: white;
+
                background-color: transparent;
-
right: 0;
+
            }
-
text-align: right;
+
-
}
+
-
.right-menu:hover {
+
                .right-menu:hover a {
-
background-color: transparent;
+
                    color: white;
-
}
+
                }
-
.right-menu:hover a {
+
            .right-menu li a {
-
color: white;
+
                background-color: transparent;
-
}
+
                color: white;
 +
                padding: 0 15px 0 0;
 +
            }
-
.right-menu li a {
+
                .right-menu li a:hover {
-
background-color: transparent;
+
                    color: #aaaaff;
-
color: white;
+
                }
-
padding: 0 15px 0 0;
+
-
}
+
-
.right-menu li a:hover {
 
-
color: #aaaaff;
 
-
}
 
 +
        /* ----------------CB_top---------------- */
-
/* ----------------CB_top---------------- */
+
        #CB_top {
 +
            height: 200px;
 +
            background-color: #00B4CC;
 +
            font-family: 'Francois One', sans-serif;
 +
        }
-
#CB_top {
+
        #CB_top_logo_cont {
-
height: 200px;
+
            width: 90%;
-
background-color: #00B4CC;
+
            max-width: 1080px;
-
font-family: 'Francois One', sans-serif;
+
            margin: 0 auto;
-
}
+
            padding-top: 50px;
 +
            line-height: 1em;
 +
        }
-
#CB_top_logo_cont {
+
        #CB_top_CBNU_logo {
-
width: 90%;
+
            width: 70%;
-
max-width: 1080px;
+
            margin: 0 auto;
-
margin: 0 auto;
+
            color: white;
-
padding-top: 50px;
+
            font-size: 30px;
-
line-height: 1em;
+
            float: left;
-
}
+
        }
-
#CB_top_CBNU_logo {
+
        #CB_top_iGEM_logo {
-
width: 70%;
+
            width: 30%;
-
margin: 0 auto;
+
            float: right;
-
color: white;
+
            color: white;
-
font-size: 30px;
+
            font-size: 30px;
-
float: left;
+
            text-align: right;
-
}
+
        }
-
#CB_top_iGEM_logo {
+
        /* ----------------CB_content---------------- */
-
width: 30%;
+
-
float: right;
+
-
color: white;
+
-
font-size: 30px;
+
-
text-align: right;
+
-
}
+
-
/* ----------------CB_content---------------- */
 
 +
        #CB_subcontent {
 +
            width: 90%;
 +
            max-width: 1080px;
 +
            margin: 0 auto;
 +
            margin-top: -9.5em;
 +
            background: transparent;
 +
        }
-
#CB_subcontent {
+
        #CB_content_imgbox {
-
width: 90%;
+
        }
-
max-width: 1080px;
+
-
margin: 0 auto;
+
-
margin-top: -9.5em;
+
-
background: transparent;
+
-
}
+
-
#CB_content_imgbox {
+
            #CB_content_imgbox img {
-
}
+
                border: 2px solid white;
 +
                width: 100%;
 +
            }
-
#CB_content_imgbox img {
 
-
border: 2px solid white;
 
-
width: 100%;
 
-
}
 
 +
        /* ----------------CB_content---------------- */
-
/* ----------------CB_content---------------- */
+
        #CB_footer {
 +
            height: 200px;
 +
            background: #008C9E;
 +
            margin-top: 10px;
 +
        }
-
#CB_footer {
 
-
height: 200px;
 
-
background: #008C9E;
 
-
margin-top: 10px;
 
-
}
 
 +
        /* ----------------Content---------------- */
-
/* ----------------Content---------------- */
+
        #content {
 +
            background: transparent;
 +
            padding: 0;
 +
            width: 100%;
 +
            border: 0px;
 +
        }
-
#content {
 
-
background: transparent;
 
-
padding: 0;
 
-
width: 100%;
 
-
border: 0px;
 
-
}
 
 +
        a {
 +
            color: #0088cc;
 +
            text-decoration: none;
 +
        }
-
a {
+
            a:hover {
-
color: #0088cc;
+
                color: #005580;
-
text-decoration: none;
+
                text-decoration: none!important;
-
}
+
            }
-
a:hover {
+
        p {
-
color: #005580;
+
            margin: 0px;
-
text-decoration: none! important;
+
        }
-
}
+
-
p {
+
        hr {
-
margin: 0px;
+
            height: 1px;
-
}
+
            color: transparent;
 +
            background-color: transparent;
 +
            border: 0;
 +
            background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 +
            background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 +
            background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 +
            background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 +
        }
-
hr {
 
-
height: 1px;
 
-
color: transparent;
 
-
background-color: transparent;
 
-
border: 0;
 
-
background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 
-
background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 
-
background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 
-
background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.25), transparent);
 
-
}
 
-
/****************************************/
+
        /***************************************************************/
-
#mobile{
+
-
visibility: hidden;
+
-
background: #21BBE1;
+
-
position: fixed;
+
-
z-index: 100;
+
-
width: 100%;
+
-
}
+
-
#mobile ul{
+
-
margin: 0;
+
-
}
+
-
#mobile ul li{
+
-
width: 50%;
+
-
float: left;
+
-
}
+
-
#mobile a{
+
-
color: #fff;
+
-
padding: 15px 1.5em;
+
-
display: block;
+
-
border-bottom: 1px solid rgba(255,255,255,0.25);
+
-
text-decoration: none;
+
-
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
+
-
white-space: nowrap;
+
-
text-overflow: ellipsis;
+
-
overflow: hidden;
+
-
}
+
-
#mobile li:nth-of-type(2n-1) a{
+
-
border-right: 1px solid rgba(255,255,255,0.25);
+
-
}
+
 +
        .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 +
* html .group { height: 1%; }
 +
*:first-child+html .group { min-height: 1px; }
 +
 +
/* Mobile nav not visible by desktop browsers but only set to visiblity hidden so jQuery can still detect the height of it
 +
-------------------------------------------------------------------------------------------------------------------------------------- */
 +
#mobile { visibility: hidden; background: #21BBE1; position: fixed; z-index: 100; width: 100%; }
 +
#mobile ul { margin: 0; } 
 +
#mobile ul li { width: 50%; float: left; } 
 +
#mobile a { color: #fff; padding: 15px 1.5em; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
 +
#mobile li:nth-of-type(2n-1) a { border-right: 1px solid rgba(255, 255, 255, 0.25); }
 +
/* ----------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
@media only screen and (min-width: 320px) and (max-width: 480px) {
-
 
-
    /* Hide the main nav for mobile widths */
 
-
    /*#main { display: none; }*/
 
-
 
-
    /* Make the mobile nav visible for mobile widths */
 
-
    #mobile { visibility: visible; }
 
-
 
-
}
 
 +
/* Hide the main nav for mobile widths */
 +
 +
 +
/* Make the mobile nav visible for mobile widths */
 +
#mobile { visibility: visible; }
-
</style>
+
}
-
</head>
+
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
 +
/* Add the "Pull Down for Navigation" bar, all controlled via CSS including the text */
 +
#CB_main:before { width: 100%; display: block; content: "Pull Down for Navigation"; padding: 0.75em 1.5em; margin: -1em -1.5em 1em; color: #878787; text-shadow: 0 1px 1px rgba(255, 255, 255, 1); border-bottom: 1px solid #a6a6a6; background-origin: content-box; text-indent: 22px;
 +
background-color: #e3e3e3;
 +
background-image: url(images/pull.png), url(images/down.png);
 +
background-position: right center, left center;
 +
background-repeat: no-repeat;
 +
}
-
<body>
+
}
 +
    </style>
-
<script type="text/javascript" charset="utf-8">
+
    <script type="text/javascript" charset="utf-8">
-
function checkWidth(){
+
    function checkWidth () {
-
var mobileNavHeight = $('#mobile').height();
+
    var mobileNavHeight = $('#mobile').height();
-
if ($(window).width() < 481) {
 
-
$('#main_contents'.css({
+
    if ($(window).width() < 481) {
-
top: mobileNavHeight + 'px !important'
+
        $('#CB_main').css({
-
});
+
        // Change the CSS top value of #site to whatever mobileNavHeight outputs
-
$(window).scrollTop(mobileNavHeight);
+
      top: mobileNavHeight + 'px !important'
-
}
+
    });
-
else if($(window).width() > 480){
+
    // Scroll the window the height of mobileNavHeight [animation set at 0 to hide the navigation immediately]
-
$('#main_contents').css({
+
    $('html, body').stop().animate({
-
top: 0 +'px'
+
        'scrollTop': $('#CB_main').offset().top
 +
}, 0, 'swing', function () {
 +
window.location.hash = '#CB_main';
});
});
-
$(window).scrollTop(0);
+
    }
-
}
+
    else if ($(window).width() > 480) {
 +
        $('#CB_main').css({
 +
        // Make sure the top value of #site is 0 so we don't see the space for the mobile nav
 +
      top: 0 + 'px'
 +
    });
 +
    // Scroll to the absolute top of the page
 +
    $(window).scrollTop(0); //no need for $.animate, on desktop browser it works just fine
 +
    }
 +
    }
-
}
+
    $(document).ready(function(){
 +
    checkWidth();
 +
    });
-
$(document).ready(function(){
 
-
checkWidth();
 
-
}
 
-
</script>
 
-
<nav id="mobile">
+
    </script>
-
<ul class="group">
+
-
<li><a href="#">Home</a></li>
+
-
<li><a href="#">Home</a></li>
+
-
<li><a href="#">Home</a></li>
+
-
<li><a href="#">Home</a></li>
+
-
<li><a href="#">Home</a></li>
+
-
<li><a href="#">Home</a></li>
+
-
<li><a href="#">A longer</a></li>
+
-
</ul>
+
-
</nav>
+
 +
</head>
-
<div id="main_contents">
 
-
<div id="CB_top">
+
<body>
-
<div id="CB_top_logo_cont">
+
<div id="CB_main">
-
<div id="CB_top_CBNU_logo">
+
    <div id="CB_top">
-
Team:CBNU-Korea
+
        <div id="CB_top_logo_cont">
-
</div>
+
            <div id="CB_top_CBNU_logo">
-
<div id="CB_top_iGEM_logo">
+
                Team:CBNU-Korea
-
<a href="https://2012.igem.org">iGEM_logo</a>
+
            </div>
-
</div>
+
            <div id="CB_top_iGEM_logo">
-
</div>
+
                <a href="https://2012.igem.org">iGEM_logo</a>
-
</div>
+
            </div>
 +
        </div>
 +
    </div>
-
<div id="CB_content">
+
    <div id="CB_content">
-
<div id="CB_subcontent">
+
        <div id="CB_subcontent">
-
<div id="CB_content_imgbox">
+
            <div id="CB_content_imgbox">
-
<img src="https://static.igem.org/mediawiki/2012/7/77/CBK_menu_safety.png">
+
                <img src="https://static.igem.org/mediawiki/2012/7/77/CBK_menu_safety.png">
-
</div>
+
            </div>
-
<hr>
+
            <hr>
-
<div id="test">
+
            <div id="test">
-
</div>
+
            </div>
-
</div>
+
        </div>
-
</div>
+
    </div>
-
 
+
-
<div id="CB_footer">
+
 +
    <div id="CB_footer">
 +
    </div>
</div>
</div>
-
 
+
</body>
-
 
+
-
</div>
+
-
 
+
-
+
-
 
+
-
</doby>
+
</html>
</html>

Revision as of 05:46, 11 September 2012

Retrieved from "http://2012.igem.org/Team:CBNU-Korea/Project"