Template:Team:KIT-Kyoto/Common

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{CSS/Main}}
 
<html>
<html>
-
<style>
+
<head>
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}, table/*-- hides default wiki settings --*/
+
-
</style>
+
-
 
+
<style type="text/css">
<style type="text/css">
-
body {
+
 
-
    color: #000;
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
 +
 
 +
.firstHeading {
 +
width: 975px;
 +
margin: 0px auto;
 +
padding-top: 100px;
 +
margin-bottom: 20px;
 +
font-family: Georgia, Times, "Times New Roman", serif;  
}
}
-
.pure-img-responsive {
+
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
-
    max-width: 100%;
+
 
-
    height: auto;
+
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 +
background-color: #383838;
 +
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 100%;  
 +
left: 50%;
 +
margin-left: -487px;
}
}
-
/*
+
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
-
Add transition to containers so they can push in and out.
+
background-color: #383838;
-
*/
+
height: 14px;
-
#layout,
+
display: block;
-
#menu,
+
z-index: 10;
-
.menu-link {
+
position: fixed;
-
    -webkit-transition: all 0.2s ease-out;
+
width: 100%;
-
    -moz-transition: all 0.2s ease-out;
+
top: 0;
-
    -ms-transition: all 0.2s ease-out;
+
-
    -o-transition: all 0.2s ease-out;
+
-
    transition: all 0.2s ease-out;
+
}
}
-
/*
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
This is the parent `<div>` that contains the menu and the content area.
+
color: #727272;
-
*/
+
text-decoration: none;  
-
#layout {
+
background-color: transparent;
-
    position: relative;
+
-
    padding-left: 0;
+
}
}
-
    #layout.active {
 
-
        position: relative;
 
-
        left: 150px;
 
-
    }
 
-
        #layout.active #menu {
 
-
            left: 150px;
 
-
            width: 150px;
 
-
        }
 
-
        #layout.active .menu-link {
+
body {  
-
            left: 150px;
+
background-color: #fff;
-
        }
+
-
/*
+
-
The content `<div>` is where all your content goes.
+
-
*/
+
-
.content {
+
-
    margin: 0 auto;
+
-
    padding: 0 2em;
+
-
    max-width: 800px;
+
-
    margin-bottom: 50px;
+
-
    line-height: 1.6em;
+
}
}
-
.header {
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
-
    margin: 0;
+
width: 100%;  
-
    color: #333;
+
height: 100%;
-
    text-align: center;
+
border: 0px;
-
    padding: 2.5em 2em 0;
+
background-color: transparent;
-
    border-bottom: 1px solid #eee;
+
margin: 0px;
-
}
+
padding: 0px;
-
    .header h1 {
+
}
-
        margin: 0.2em 0;
+
-
        font-size: 3em;
+
-
        font-weight: 300;
+
-
    }
+
-
    .header h2 {
+
-
        font-weight: 300;
+
-
        color: #ccc;
+
-
        padding: 0;
+
-
        margin-top: 0;
+
-
    }
+
-
.content-subhead {
+
html, body, .wrapper { /*-- changes default wiki settings --*/
-
    margin: 50px 0 20px 0;
+
width: 100%;  
-
    font-weight: 300;
+
height: 100%;  
-
    color: #888;
+
background-color: transparent;
}
}
 +
#contentcontainer { /*-- creates container for all content on page --*/
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: normal;
 +
font-size: 14px;
 +
color: #414141;
 +
width: 960px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #transparent;
 +
margin-top: 0px;
 +
}
 +
.sidemenu, .sidemenu li {
 +
list-style-type: none;
 +
list-style-image: none;
 +
font-family: verdana;
 +
text-decoration: none;
 +
color:#000;
 +
font-size: 14px;
 +
}
-
/*
+
.sidemenu li {display: block;}
-
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+
-
appears on the left side of the page.
+
-
*/
+
-
#menu {
+
.sidemenu a {
-
    margin-left: -150px; /* "#menu" width */
+
text-decoration:none;  
-
    width: 150px;
+
color: #000;
-
    position: fixed;
+
display: block;  
-
    top: 0;
+
width: 180px;  
-
    left: 0;
+
height: 100%;  
-
    bottom: 0;
+
padding: 3px 5px;  
-
    z-index: 1000; /* so the menu or its navicon stays above all content */
+
transition: .25s ease-in-out;
-
    background: #191818;
+
-moz-transition: .25s ease-in-out;
-
    overflow-y: auto;
+
-webkit-transition: .25s ease-in-out;
-
    -webkit-overflow-scrolling: touch;
+
}  
-
}
+
-
    /*
+
-
    All anchors inside the menu should be styled like this.
+
-
    */
+
-
    #menu a {
+
-
        color: #999;
+
-
        border: none;
+
-
        padding: 0.6em 0 0.6em 0.6em;
+
-
    }
+
-
    /*
+
.sidemenu a.greyout { color: #909090; }
-
    Remove all background/borders, since we are applying them to #menu.
+
-
    */
+
-
    #menu .pure-menu,
+
-
    #menu .pure-menu ul {
+
-
        border: none;
+
-
        background: transparent;
+
-
    }
+
-
    /*
+
.sidemenu a:hover {
-
    Add that light border to separate items into groups.
+
color:#666;  
-
    */
+
background-color: #d9f5aa;
-
    #menu .pure-menu ul,
+
}
-
    #menu .pure-menu .menu-item-divided {
+
-
        border-top: 1px solid #333;
+
-
    }
+
-
        /*
+
-
        Change color of the anchor links on hover/focus.
+
-
        */
+
-
        #menu .pure-menu li a:hover,
+
-
        #menu .pure-menu li a:focus {
+
-
            background: #333;
+
-
        }
+
-
    /*
+
.sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;}
-
    This styles the selected menu item `<li>`.
+
.sub-sidemenu a {color: #666;}
-
    */
+
-
    #menu .pure-menu-selected,
+
-
    #menu .pure-menu-heading {
+
-
        background: #1f8dd6;
+
-
    }
+
-
        /*
+
-
        This styles a link within a selected menu item `<li>`.
+
-
        */
+
-
        #menu .pure-menu-selected a {
+
-
            color: #fff;
+
-
        }
+
-
    /*
+
div.underconst
-
    This styles the menu heading.
+
{
-
    */
+
padding:10px;
-
    #menu .pure-menu-heading {
+
border-radius:5px;
-
        font-size: 110%;
+
background-color:pink;
-
        color: #fff;
+
text-align:center;
-
        margin: 0;
+
}
-
    }
+
-
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
-
/*
+
.contentpara {margin-bottom: 30px;}
-
The button to open/close the Menu is custom-made and not part of Pure. Here's
+
-
how it works:
+
-
*/
+
-
/*
+
span.email{font-family: monospace; font-weight: normal;}
-
`.menu-link` represents the responsive menu toggle that shows/hides on
+
-
small screens.
+
-
*/
+
-
.menu-link {
+
-
    position: fixed;
+
-
    display: block; /* show this only on small screens */
+
-
    top: 0;
+
-
    left: 0; /* "#menu width" */
+
-
    background: #000;
+
-
    background: rgba(0,0,0,0.7);
+
-
    font-size: 10px; /* change this value to increase/decrease button size */
+
-
    z-index: 10;
+
-
    width: 2em;
+
-
    height: auto;
+
-
    padding: 2.1em 1.6em;
+
-
}
+
-
    .menu-link:hover,
+
fieldset {border: 1px solid #337f53;}
-
    .menu-link:focus {
+
-
        background: #000;
+
-
    }
+
-
    .menu-link span {
+
.greyout {color: #A0A0A0;}
-
        position: relative;
+
.highlightme {background-color: #FFFF00;}
-
        display: block;
+
-
    }
+
-
    .menu-link span,
+
#alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;}
-
    .menu-link span:before,
+
#annContainer {margin-left: 8px;}
-
    .menu-link span:after {
+
#newsContainer {border: 1px solid #ccc;}
-
        background-color: #fff;
+
-
        width: 100%;
+
-
        height: 0.2em;
+
-
    }
+
-
        .menu-link span:before,
+
.newsTitle {
-
         .menu-link span:after {
+
display: block;
-
            position: absolute;
+
color: #414141;
-
            margin-top: -0.6em;
+
font-size: 25px; 
-
            content: " ";
+
         font-family: Georgia, Times, "Times New Roman", serif;
-
        }
+
padding: 15px 15px 5px 10px;  
 +
border-bottom: 1px solid #ccc;  
 +
margin-bottom: 10px;  
 +
}
-
        .menu-link span:after {
+
.newsItem {
-
            margin-top: 0.6em;
+
border-bottom: 1px solid #ccc;
-
        }
+
display: block;
 +
padding: 5px 15px 10px 10px;
 +
margin-bottom: 5px;  
 +
}
 +
.newsItem h3 {
 +
width: auto;
 +
display: inline;
 +
font-size: 14px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding: 0px;
 +
margin: 0px;
 +
}
-
/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
.newsItem img {
 +
float: right;
 +
clear: right;
 +
width: 80px;
 +
padding-left: 15px;
 +
display: inline-block;
 +
}
-
/*
+
.newsItem .newsDate {
-
Hides the menu at `48em`, but modify this based on your app's needs.
+
font-style: italic;
-
*/
+
font-size: 14px;
-
@media (min-width: 48em) {
+
display: inline-block;
 +
color: #999;
 +
float: right;
 +
padding: 0px 0px 10px 15px;
 +
}
-
    .header,
+
.newsItem p, .newsItem ul, .newsItem li {
-
    .content {
+
padding: 0px;
-
        padding-left: 2em;
+
margin-left: 20px;  
-
        padding-right: 2em;
+
font-size: 12px;
-
    }
+
line-height: 1.2;
 +
}
-
    #layout {
+
.newsItem p {margin-top: 10px;}
-
        padding-left: 150px; /* left col width "#menu" */
+
-
        left: 0;
+
-
    }
+
-
    #menu {
+
-
        left: 150px;
+
-
    }
+
-
    .menu-link {
+
.annItem {
-
        position: fixed;
+
border: 2px solid #96d359;
-
        left: 150px;
+
display: block;
-
        display: none;
+
padding: 0px 15px 10px 10px;
-
    }
+
margin-bottom: 18px;
 +
position: relative;  
 +
height: 160px;  
 +
vertical-align: middle;
 +
}
-
    #layout.active .menu-link {
+
.annItem .annCentered {
-
        left: 150px;
+
display: table-cell;  
-
    }
+
vertical-align: middle;
 +
height: 160px;
}
}
 +
 +
.annCentered h3 {
 +
padding: 0px;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
text-align: center;
 +
}
 +
 +
.annItem ul, .annItem li {padding: 0px; margin: 0px;}
 +
.annItem li {list-style: none; margin: 5px}
 +
 +
</style>
</style>
</style>
 +
</html>

Revision as of 09:06, 19 May 2014

Retrieved from "http://2014.igem.org/Template:Team:KIT-Kyoto/Common"