Team:OU Norman/stylesheet

From 2014.igem.org

(Difference between revisions)
 
(43 intermediate revisions not shown)
Line 106: Line 106:
.toc{visibility:hidden; height:0px;}
.toc{visibility:hidden; height:0px;}
 +
.biopic {height:200px;}
 +
/*------------------------- Layout styles ------------------------*/  
/*------------------------- Layout styles ------------------------*/  
 +
body{
body{
margin:0 auto;
margin:0 auto;
Line 115: Line 118:
         background-attachment: fixed;
         background-attachment: fixed;
         background-size:cover;
         background-size:cover;
-
         border-right: 2px dotted black;
+
         border-right: 1px dotted black;
-
         border-left: 2px dotted black;
+
         border-left: 1px dotted black;
-
 
+
        border-bottom: 1px dotted black;
 +
        border-radius:15px;
}
}
Line 127: Line 131:
}
}
 +
div.pocket {width: 850px; padding-left:50px; padding-top:25px;}
 +
div.innerpocket {width:600px;padding-left:100px;}
 +
 +
table {
 +
    text-align:center;
 +
    vertical-align:middle;
 +
    cell-spacing:4px;
 +
}
 +
table tr:first-child {
 +
    background-color: #C5F2FB;
 +
    border: 0px;
 +
    cell-padding:2px;
 +
}
/*------------------------- Font ------------------------*/  
/*------------------------- Font ------------------------*/  
 +
@font-face {
@font-face {
p.arial
p.arial
Line 135: Line 153:
/*------------------------- Header ------------------------*/  
/*------------------------- Header ------------------------*/  
 +
.header{
.header{
background:#62D2E7 url('#'); /*--url--*/
background:#62D2E7 url('#'); /*--url--*/
Line 143: Line 162:
         border-style: solid dotted;
         border-style: solid dotted;
         border-color: black;
         border-color: black;
-
         border-width: 2px;
+
         border-width: 1px;
 +
        border-radius: 15px;
}
}
Line 189: Line 209:
}
}
-
/*------------------------- General Body ------------------------*/
 
 +
/*------------------------- buttons ------------------------*/
 +
#projlink {
-
/*--------Bootstrap table stuff---------*/
+
    color: black;
-
/*!
+
    display: inline;
-
* Bootstrap v3.2.0 (http://getbootstrap.com)
+
    height: 200px;
-
* Copyright 2011-2014 Twitter, Inc.
+
    line-height: 40px;
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+
    text-decoration: none;
-
*/
+
    width: 400px;
 +
    text-align: center;
 +
    border-radius:25px;
 +
    font-size:25px;
 +
    vertical-align: middle;
 +
}
-
/*!
+
#notelink {
-
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=85fd9b5e4bbcb3a83b23)
+
 
-
* Config saved to config.json and https://gist.github.com/85fd9b5e4bbcb3a83b23
+
    color: black;
-
*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#428bca;text-decoration:none}a:hover,a:focus{color:#2a6496;text-decoration:underline}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;width:100% \9;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;width:100% \9;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}table{background-color:transparent}th{text-align:left}.table{width:100%;max-width:100%;margin-bottom:20px}.table>thead>tr>th,.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>td,.table>tbody>tr>td,.table>tfoot>tr>td{padding:8px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd}.table>thead>tr>th{vertical-align:bottom;border-bottom:2px solid #ddd}.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th,.table>caption+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>td,.table>thead:first-child>tr:first-child>td{border-top:0}.table>tbody+tbody{border-top:2px solid #ddd}.table .table{background-color:#fff}.table-condensed>thead>tr>th,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>tbody>tr>td,.table-condensed>tfoot>tr>td{padding:5px}.table-bordered{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>tbody>tr>th,.table-bordered>tfoot>tr>th,.table-bordered>thead>tr>td,.table-bordered>tbody>tr>td,.table-bordered>tfoot>tr>td{border:1px solid #ddd}.table-bordered>thead>tr>th,.table-bordered>thead>tr>td{border-bottom-width:2px}.table-striped>tbody>tr:nth-child(odd)>td,.table-striped>tbody>tr:nth-child(odd)>th{background-color:#f9f9f9}.table-hover>tbody>tr:hover>td,.table-hover>tbody>tr:hover>th{background-color:#f5f5f5}table col[class*="col-"]{position:static;float:none;display:table-column}table td[class*="col-"],table th[class*="col-"]{position:static;float:none;display:table-cell}.table>thead>tr>td.active,.table>tbody>tr>td.active,.table>tfoot>tr>td.active,.table>thead>tr>th.active,.table>tbody>tr>th.active,.table>tfoot>tr>th.active,.table>thead>tr.active>td,.table>tbody>tr.active>td,.table>tfoot>tr.active>td,.table>thead>tr.active>th,.table>tbody>tr.active>th,.table>tfoot>tr.active>th{background-color:#f5f5f5}.table-hover>tbody>tr>td.active:hover,.table-hover>tbody>tr>th.active:hover,.table-hover>tbody>tr.active:hover>td,.table-hover>tbody>tr:hover>.active,.table-hover>tbody>tr.active:hover>th{background-color:#e8e8e8}.table>thead>tr>td.success,.table>tbody>tr>td.success,.table>tfoot>tr>td.success,.table>thead>tr>th.success,.table>tbody>tr>th.success,.table>tfoot>tr>th.success,.table>thead>tr.success>td,.table>tbody>tr.success>td,.table>tfoot>tr.success>td,.table>thead>tr.success>th,.table>tbody>tr.success>th,.table>tfoot>tr.success>th{background-color:#dff0d8}.table-hover>tbody>tr>td.success:hover,.table-hover>tbody>tr>th.success:hover,.table-hover>tbody>tr.success:hover>td,.table-hover>tbody>tr:hover>.success,.table-hover>tbody>tr.success:hover>th{background-color:#d0e9c6}.table>thead>tr>td.info,.table>tbody>tr>td.info,.table>tfoot>tr>td.info,.table>thead>tr>th.info,.table>tbody>tr>th.info,.table>tfoot>tr>th.info,.table>thead>tr.info>td,.table>tbody>tr.info>td,.table>tfoot>tr.info>td,.table>thead>tr.info>th,.table>tbody>tr.info>th,.table>tfoot>tr.info>th{background-color:#d9edf7}.table-hover>tbody>tr>td.info:hover,.table-hover>tbody>tr>th.info:hover,.table-hover>tbody>tr.info:hover>td,.table-hover>tbody>tr:hover>.info,.table-hover>tbody>tr.info:hover>th{background-color:#c4e3f3}.table>thead>tr>td.warning,.table>tbody>tr>td.warning,.table>tfoot>tr>td.warning,.table>thead>tr>th.warning,.table>tbody>tr>th.warning,.table>tfoot>tr>th.warning,.table>thead>tr.warning>td,.table>tbody>tr.warning>td,.table>tfoot>tr.warning>td,.table>thead>tr.warning>th,.table>tbody>tr.warning>th,.table>tfoot>tr.warning>th{background-color:#fcf8e3}.table-hover>tbody>tr>td.warning:hover,.table-hover>tbody>tr>th.warning:hover,.table-hover>tbody>tr.warning:hover>td,.table-hover>tbody>tr:hover>.warning,.table-hover>tbody>tr.warning:hover>th{background-color:#faf2cc}.table>thead>tr>td.danger,.table>tbody>tr>td.danger,.table>tfoot>tr>td.danger,.table>thead>tr>th.danger,.table>tbody>tr>th.danger,.table>tfoot>tr>th.danger,.table>thead>tr.danger>td,.table>tbody>tr.danger>td,.table>tfoot>tr.danger>td,.table>thead>tr.danger>th,.table>tbody>tr.danger>th,.table>tfoot>tr.danger>th{background-color:#f2dede}.table-hover>tbody>tr>td.danger:hover,.table-hover>tbody>tr>th.danger:hover,.table-hover>tbody>tr.danger:hover>td,.table-hover>tbody>tr:hover>.danger,.table-hover>tbody>tr.danger:hover>th{background-color:#ebcccc}@media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;overflow-x:auto;-ms-overflow-style:-ms-autohiding-scrollbar;border:1px solid #ddd;-webkit-overflow-scrolling:touch}.table-responsive>.table{margin-bottom:0}.table-responsive>.table>thead>tr>th,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tfoot>tr>td{white-space:nowrap}.table-responsive>.table-bordered{border:0}.table-responsive>.table-bordered>thead>tr>th:first-child,.table-responsive>.table-bordered>tbody>tr>th:first-child,.table-responsive>.table-bordered>tfoot>tr>th:first-child,.table-responsive>.table-bordered>thead>tr>td:first-child,.table-responsive>.table-bordered>tbody>tr>td:first-child,.table-responsive>.table-bordered>tfoot>tr>td:first-child{border-left:0}.table-responsive>.table-bordered>thead>tr>th:last-child,.table-responsive>.table-bordered>tbody>tr>th:last-child,.table-responsive>.table-bordered>tfoot>tr>th:last-child,.table-responsive>.table-bordered>thead>tr>td:last-child,.table-responsive>.table-bordered>tbody>tr>td:last-child,.table-responsive>.table-bordered>tfoot>tr>td:last-child{border-right:0}.table-responsive>.table-bordered>tbody>tr:last-child>th,.table-responsive>.table-bordered>tfoot>tr:last-child>th,.table-responsive>.table-bordered>tbody>tr:last-child>td,.table-responsive>.table-bordered>tfoot>tr:last-child>td{border-bottom:0}}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important;visibility:hidden !important}.affix{position:fixed;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}
+
    display: inline;
 +
    height: 200px;
 +
    line-height: 40px;
 +
    text-decoration: none;
 +
    width: 400px;
 +
    text-align: center;
 +
    border-radius: 25px;
 +
    font-size:25px;
 +
    vertical-align: middle;
 +
}
 +
 
 +
#teamlink {
 +
 
 +
    color: black;
 +
    display: inline;
 +
    height: 200px;
 +
    line-height: 40px;
 +
    text-decoration: none;
 +
    width: 400px;
 +
    text-align: center;
 +
    border-radius: 25px;
 +
    font-size:25px;
 +
    vertical-align: middle;
 +
}
 +
 
 +
#outlink {
 +
 
 +
    color: black;
 +
    display: inline;
 +
    height: 200px;
 +
    line-height: 40px;
 +
    text-decoration: none;
 +
    width: 400px;
 +
    text-align: center;
 +
    border-radius: 25px;
 +
    font-size:25px;
 +
    vertical-align: middle;
 +
}
 +
 
 +
#minibutton {
 +
    background-color: #62D2E7;
 +
    color: black;
 +
    display: inline;
 +
    line-height: 100px;
 +
    text-decoration: none;
 +
    width: 200px;
 +
    text-align: center;
 +
    border-radius: 25px;
 +
    font-size:25px;
 +
    vertical-align: middle;
 +
    padding:20px 50px;
 +
}

Latest revision as of 22:40, 17 October 2014

div#navigation{

       /* Old browsers */

border-radius: 0px;

       padding:90px 0 0 0;

}

  1. navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }
  2. navigation ul li{
       float:left; 
       position:relative; 

}

  1. navigation ul li a{
	display:block;

padding:7px 12px; margin-left:auto;

       margin-right:auto;

font-size:18px; white-space:nowrap; border-radius:1px; }

  1. navigation ul li a:hover{}
  2. navigation ul li ul li a{width: 150px;}
  1. navigation ul ul li a:hover{
       background:black; /*menu item highlight*/

background-repeat:repeat-x;

       color:white; /*text on hover*/

background-size:200%; }

  1. navigation ul ul{
       float: left;

position:absolute; height:-99999px; margin-left:auto;

       margin-right:auto;

opacity: 0; /* Hide sub level */ -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; z-index:497; background:#8De2f2; /*menu background*/ padding: 0px; border:1px solid #063257; border-top:1px solid #063257; box-shadow:#111 0 3px 4px; border-bottom-left-radius:2px; border-bottom-right-radius:2px; }

  1. navigation ul ul ul {

margin-left:auto;

       margin-right:auto; 

opacity: 0; -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */ -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; border-radius:6px; border:1px solid #444; }

  1. navigation ul li:hover>ul{ opacity: 1; position:absolute; top:100%; left:0; }
  2. navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
  1. footer-box {visibility:hidden}
  2. catlinks {visibility:hidden}
  3. top-section {height: 0px;}
  4. p-logo {height:0px; overflow:hidden; display:none;}
  5. search-controls {display:none;}
  1. top-section {
   height:14px;
   width: 100%;
   border: 0;
   background: rgba(51,51,51,1)} 

.left-menu a {

   color: white; }

.left-menu:hover {

   color: white;
   background: transparent; }

.left-menu:hover a {

   color: white; }

.right-menu li a {

   background-color: transparent; 
   color: white;}
  1. content {
   width:100%;
   border:none;
   padding:0;

}

  1. content #top, #content #siteSub, #content #contentSub {
  display:none;
  margin:0;
  padding:0;

}

/* Hides default page title beneath banner */ .firstHeading {

  height:0px;
  visibility:hidden;

}

.toc{visibility:hidden; height:0px;} .biopic {height:200px;}


/*------------------------- Layout styles ------------------------*/

body{ margin:0 auto;

       width: 962px;
       height: 0 auto;

background:#ffffff;

       background-attachment: fixed;
       background-size:cover;
       border-right: 1px dotted black;
       border-left: 1px dotted black;
       border-bottom: 1px dotted black;
       border-radius:15px;

}

.page{

       margin: -23px 0 0px 0;
       width:962px;
       height: 0 auto;

background:#ffffff no-repeat center top; }

div.pocket {width: 850px; padding-left:50px; padding-top:25px;} div.innerpocket {width:600px;padding-left:100px;}

table {

   text-align:center;
   vertical-align:middle;
   cell-spacing:4px;

} table tr:first-child {

   background-color: #C5F2FB;
   border: 0px;
   cell-padding:2px;

} /*------------------------- Font ------------------------*/

@font-face { p.arial

   font-weight: normal;
   font-style: normal;

}

/*------------------------- Header ------------------------*/

.header{ background:#62D2E7 url('#'); /*--url--*/ width:962px; margin:0 auto ; height:124px; padding:0px 0px 0;

       border-style: solid dotted;
       border-color: black;
       border-width: 1px;
       border-radius: 15px;

} .header a#logo{ display:block; float:left; outline:none;

       margin:17px 0 0 15px;

} .header a#logo img{ border:0; } .header a#name{

       display:block;
       float:left;
       outline:none;
       margin:17px 0 0 0;

} .header a#name img{

       border:0;

} .header ul{ margin:0 15px 0 0; list-style:none; padding:0px 0 0; float:right; } .header ul li.left{ float:left; margin:0 0 0 36px; } .header ul li.right{ float:right; margin:0 0 0 36px; } .header ul li.selected a,.header ul li a:hover{ color:#fffdd0; } .header ul li a{ font-size:16px; text-decoration:none; color:black;

outline:none; }


/*------------------------- buttons ------------------------*/

  1. projlink {
   color: black;
   display: inline;
   height: 200px;
   line-height: 40px;
   text-decoration: none;
   width: 400px;
   text-align: center;
   border-radius:25px;
   font-size:25px;
   vertical-align: middle;

}

  1. notelink {
   color: black;
   display: inline;
   height: 200px;
   line-height: 40px;
   text-decoration: none;
   width: 400px;
   text-align: center;
   border-radius: 25px;
   font-size:25px;
   vertical-align: middle;

}

  1. teamlink {
   color: black;
   display: inline;
   height: 200px;
   line-height: 40px;
   text-decoration: none;
   width: 400px;
   text-align: center;
   border-radius: 25px;
   font-size:25px;
   vertical-align: middle;

}

  1. outlink {
   color: black;
   display: inline;
   height: 200px;
   line-height: 40px;
   text-decoration: none;
   width: 400px;
   text-align: center;
   border-radius: 25px;
   font-size:25px;
   vertical-align: middle;

}

  1. minibutton {
   background-color: #62D2E7;
   color: black;
   display: inline;
   line-height: 100px;
   text-decoration: none;
   width: 200px;
   text-align: center;
   border-radius: 25px;
   font-size:25px;
   vertical-align: middle;
   padding:20px 50px;

}