Team:Concordia/CSS/Base

From 2013.igem.org

(Difference between revisions)

Latest revision as of 03:26, 28 September 2013

/* Reset MediaWiki CSS */ /**********************/

content {

   border: none;}

{ margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {

   border: none;
   padding: 0;

}

/* General css classes */ /***********************/

.invisible {

   display: none;

}

.wrapper {

   overflow: hidden;

}

.img-thumbnail {

   padding: 20px;
   margin: 0 auto;
   display: block;

}

/* iGEM logo */ /*************/

p-logo {

   width: auto;
   position: static;

}

.contents #p-logo {

   display: none;

}

.body.team-page, body.team-page {

   background: #333;

}

.page-Team_Concordia_Parts {

   overflow: hidden;

}

body {

   background-image: url('https://static.igem.org/mediawiki/2013/5/58/Geometry.png');
   background-repeat: repeat-x repeat-y;

}

body.page-Team_Concordia {

   background-image: none;
   background-repeat: none;

}

.page-Team_Concordia_Parts .site-menu, .page-Team_Concordia_Safety .site-menu, .page-Team_Concordia_Logic .site-menu {

   margin-bottom: -8000px;

}

.contents {

   background-image: url('https://static.igem.org/mediawiki/2013/5/58/Geometry.png');
   background-repeat: repeat-x repeat-y;
   background-position: center;
   background-attachment: fixed;

}

.contents.modeling {

   background-image: url('https://static.igem.org/mediawiki/2013/8/89/Modeling.jpg');
   background-repeat: no-repeat;
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/

}

.contents.team {

   background-image: url('https://static.igem.org/mediawiki/2013/6/68/Concordia_team.png');
   background-repeat: no-repeat;
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/

}

.contents.hp {

   background-image: url('https://static.igem.org/mediawiki/2013/d/dd/Hp_concordia.jpg');
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/
   background-repeat: no-repeat;

}

.contents.project {

   background-image: url('https://static.igem.org/mediawiki/2013/9/90/Background_project.PNG');
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/
   background-repeat: no-repeat;

}

.contents.notebook {

   background-image: url("");
   -webkit-background-size: cover; /* For WebKit*/
   -moz-background-size: cover;    /* Mozilla*/
   -o-background-size: cover;      /* Opera*/
   background-size: cover;         /* Generic*/
   background-repeat: no-repeat;

}

/* iGEM logo */ /*************/

p-logo img {

   width : 200px;

}

/* Top section */ /***************/

top-section {

   margin-left : 30px;
   float: left;
   max-height: 100px;
   width: 90%;
   border: 0;

}

top-section ul {

   list-style-type: none;

}

top-section li {

   display: inline;
   float: left;
   margin-right: 10px;

}

top-section .left-menu {

   float: left;

}

top-section .right-menu {

   float: right;

}

/* Radial menu CSS */ /*******************/ /* generic styles for button & circular menu */ .radial-menu-container {

   height: 100%;

}

.ctrl {

   position: absolute;
   top: 30%; left: 40%;
   font: 1.5em/1.13 Verdana, sans-serif;
   transition: .5s;

}

a.ctrl {

   -moz-box-shadow:    inset 0 0 10px rgba(50,50,50,0.75);
   -webkit-box-shadow: inset 0 0 10px rgba(50,50,50,0.75);
   box-shadow:         inset 0 0 10px rgba(50,50,50,0.75);

}

/* generic link styles */ a.ctrl, .ctrl a {

   display: block;
   opacity: .56;
   background: #c9c9c9;
   color: #7a8092;
   background-image: url('https://static.igem.org/mediawiki/2013/8/8f/Logo_b_w.png');
   background-size: 12.5em;
   background-repeat: no-repeat;
   text-align: center;
   vertical-align: center;
   text-decoration: none;
   text-shadow: 0 -1px dimgrey;

} a.ctrl:hover, a.ctrl:focus {

   background-image: url('https://static.igem.org/mediawiki/2013/5/5e/Logo_concordia.png');
   opacity: 1;
   -moz-box-shadow:    0 0 10px rgba(50,50,50,0.75);
   -webkit-box-shadow: 0 0 10px rgba(50,50,50,0.75);
   box-shadow:         0 0 10px rgba(50,50,50,0.75);

}

.ctrl a:hover, .ctrl a:focus {

   opacity: 1;

} a.ctrl:focus, .ctrl a:focus { outline: none; } .button {

   z-index: 2;
   margin: -.625em;
   width: 12.5em; height: 12.5em;
   border-radius: 50%;
   box-shadow: 0 0 3px 1px white;

} /* circular menu */ .tip {

   z-index: 1;
   /**outline: dotted 1px white;/**/
   margin: -5em;
   margin-left: -9em;
   left: 43%;
   top: 30%;
   width: 25em; height: 25em;
   transform: scale(.001);
   -ms-transform: scale(.001);
   -webkit-transform: scale(.001);
   list-style: none;
   opacity: 0;

}

/* make the menu appear on click */ .button:focus + .tip {

   transform: scale(1);
   -ms-transform: scale(1);
   -webkit-transform: scale(1);
   opacity: 1;

} /* slices of the circular menu */ .slice {

   overflow: hidden;
   position: absolute;
   /**outline: dotted 1px yellow;/**/
   width: 50%; height: 50%;
   transform-origin: 100% 100%;
   -ms-transform-origin: 100% 100%;
   -webkit-transform-origin: 100% 100%;

} /*

* rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A°
* where A is the angle of 1 slice (30° in this case)
* k is the number of the slice (in {1,2,3,4,5} here)
* and n is the number of slices (5 in this case)
* formula works for odd number of slices (n odd)
* for even number of slices (n even) the rotation angle is (k - n/2)*A°
* 
* after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30° 
*/

.slice:first-child {

   transform: rotate(-45deg) skewY(60deg);
   -ms-transform: rotate(-45deg) skewY(60deg);
   -webkit-transform: rotate(-45deg) skewY(60deg);

} .slice:nth-child(2) {

   transform: rotate(-15deg) skewY(60deg);
   -ms-transform: rotate(-15deg) skewY(60deg);
   -webkit-transform: rotate(-15deg) skewY(60deg);

} .slice:nth-child(3) {

   transform: rotate(15deg) skewY(60deg);
   -ms-transform: rotate(15deg) skewY(60deg);
   -webkit-transform: rotate(15deg) skewY(60deg);

} .slice:nth-child(4) {

   transform: rotate(45deg) skewY(60deg);
   -ms-transform: rotate(45deg) skewY(60deg);
   -webkit-transform: rotate(45deg) skewY(60deg);

} .slice:last-child {

   transform: rotate(75deg) skewY(60deg);
   -ms-transform: rotate(75deg) skewY(60deg);
   -webkit-transform: rotate(75deg) skewY(60deg);

} /* covers for the inner part of the links so there's no hover trigger between

  star button & menu links; give them a red background to see them */

.slice:after {

   position: absolute;
   top: 32%; left: 32%;
   width: 136%; height: 136%;
   border-radius: 50%;
   /* "unskew" = skew by minus the same angle by which parent was skewed */
   transform: skewY(-60deg);
   content: ;

} /* menu links */ .slice a {

   width: 200%; height: 200%;
   border-radius: 50%;
   box-shadow: 0 0 3px dimgrey, inset 0 0 4px white;
   /* "unskew" & rotate by -A°/2 */
   transform: skewY(-60deg) rotate(-15deg);
   -ms-transform: skewY(-60deg) rotate(-15deg);
   -webkit-transform: skewY(-60deg) rotate(-15deg);
   background: /* lateral separators */
   linear-gradient(75deg,

transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0,

   linear-gradient(-75deg,

transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0,

   /* make sure inner part is transparent */
   radial-gradient(rgba(127,127,127,0) 49%,

rgba(255,255,255,.7) 51%, #c9c9c9 52%);

   background-size: 15% 15%, 15% 15%, cover;
   line-height: 3;
   vertical

} /* arrow for middle link */ .slice:nth-child(3) a:after {

   position: absolute;
   top: 13%; left: 50%;
   margin: -.25em;
   width: .5em; height: .5em;
   box-shadow: 2px 2px 2px white;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
   content: ;

}

/* Header */ /**********/

.header {

   background-color: #834141;
   min-height: 15%;

}

.header > h2 {

   font: 1.2em/1.5em;

}

/* Footer */ /**********/ .footer {

   background-color: #834141;
   min-height: 15%;

}

/* Site-menu */ /*************/ .site-menu {

   width: 15%;
   height: 100%;
   background: #333;
   color: #eee;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   margin-bottom: -15000px;
   padding-bottom: 15000px;

}

.site-menu-content {

   height: 100%;
   margin-top: 100px;

}

.site-menu ul {

   margin-top: 10px;

} .site-menu ul li {

   display: inline-block;
   width: 200px;
   list-style: none;
   font-size: 20px;
   padding: 3px 10px;

} .site-menu ul li:before {

   content: '-';
   margin-right: 5px;
   color: rgba( 255, 255, 255, 0.2 );

}

body.index .site-menu-logo {

   display:none;

}

.site-menu-logo {

   width: 100%;

}

/* Team page */ /*************/

.team-cat-wrapper {

   float:left;
   display: block;

}

.team-member {

   background: none repeat scroll 0 0 #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   margin: 2.5%;
   cursor: pointer;
   height: 400px;

}

.team-member-img-wrap {

   width: 90%;
   margin: 0 auto;

}

.team-member-img {

   padding-top: 2%;
   display: block;
   width: 75%;
   margin: 0 auto;

}

.team-member-desc{

   width: 85%;
   margin: 0 auto;
   text-align: center;

}

.avgrund-popup {

   width: 70%;

}

.avgrund-popup .team-member-modal-img-wrap {

   display: block;
   float: right;

}

.avgrund-popup .team-member-modal-img {

   width: 250px;
   margin-left: 15px;

}

/* Notebook page */ /*****************/

.log {

   background: none repeat scroll 0 0 #FFFFFF;
   border-bottom: 1px solid #DDDDDD;
   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
   margin: 2.5%;

}

.log-img-wrap{

   width: 90%;

}

.log-img{

   padding-top: 2%;
   display: block;
   width: 75%;

}

.log-desc {

   padding-top: 15px;

}

.log-left {

   width:90%;
   text-align: left;

}

.log-right{

   width: 90%;
   margin-left: 22.5%;
   text-align : right;

}

.log-right img {

   float : right;

}

.log-right .log-desc {

   clear : right;

}

@@ Line 1: / Line 1: @@
 /* Reset MediaWiki CSS */
 /**********************/
-#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
-    display:none;}
-#top-section {
-    border: none;
-    height: 0px;}
 #content {
      border: none;}
 * { margin: 0; padding: 0; }
+h1, h2, h3, h4, h5, h6 {
+    border: none;
+    padding: 0;
+}
+/* General css classes */
+/***********************/
 .invisible {
@@ Line 19: / Line 22: @@
 }
-.content {
+.img-thumbnail {
-     margin-left: 16.6667%;
+    padding: 20px;
+     margin: 0 auto;
+    display: block;
 }
-.body.index, body.index {
+/* iGEM logo */
-     overflow: hidden;
+/*************/
-     background-image: none;
+#p-logo {
+     width: auto;
+     position: static;
+}
+.contents #p-logo {
+    display: none;
 }
@@ Line 32: / Line 44: @@
 }
-.body.team-page .content, body.team-page .content {
+.page-Team_Concordia_Parts {
+    overflow: hidden;
+}
+body {
      background-image: url('https://static.igem.org/mediawiki/2013/5/58/Geometry.png');
      background-repeat: repeat-x repeat-y;
-    background-position: center;
-    background-attachment: fixed;
 }
-.contents, .body, body {
+body.page-Team_Concordia {
+    background-image: none;
+    background-repeat: none;
+}
+.page-Team_Concordia_Parts .site-menu,
+.page-Team_Concordia_Safety .site-menu,
+.page-Team_Concordia_Logic .site-menu {
+    margin-bottom: -8000px;
+}
+.contents {
      background-image: url('https://static.igem.org/mediawiki/2013/5/58/Geometry.png');
      background-repeat: repeat-x repeat-y;
      background-position: center;
      background-attachment: fixed;
+}
+.contents.modeling {
+    background-image: url('https://static.igem.org/mediawiki/2013/8/89/Modeling.jpg');
+    background-repeat: no-repeat;
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+.contents.team {
+    background-image: url('https://static.igem.org/mediawiki/2013/6/68/Concordia_team.png');
+    background-repeat: no-repeat;
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+}
+.contents.hp {
+    background-image: url('https://static.igem.org/mediawiki/2013/d/dd/Hp_concordia.jpg');
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+    background-repeat: no-repeat;
 }
 .contents.project {
-     background-image: url("../images/lab_setup.jpg");
+     background-image: url('https://static.igem.org/mediawiki/2013/9/90/Background_project.PNG');
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+    background-repeat: no-repeat;
 }
 .contents.notebook {
-     background-image: url("../images/modeling.jpg");
+     background-image: url("https://static.igem.org/mediawiki/2013/e/e6/Lab_setup.jpg");
+    -webkit-background-size: cover; /* For WebKit*/
+    -moz-background-size: cover;    /* Mozilla*/
+    -o-background-size: cover;      /* Opera*/
+    background-size: cover;         /* Generic*/
+    background-repeat: no-repeat;
+}
+/* iGEM logo */
+/*************/
+#p-logo img {
+    width : 200px;
+}
+/* Top section */
+/***************/
+#top-section {
+    margin-left : 30px;
+    float: left;
+    max-height: 100px;
+    width: 90%;
+    border: 0;
+}
+#top-section ul {
+    list-style-type: none;
+}
+#top-section li {
+    display: inline;
+    float: left;
+    margin-right: 10px;
+}
+#top-section .left-menu {
+    float: left;
+}
+#top-section .right-menu {
+    float: right;
 }
@@ Line 89: / Line 187: @@
 }
 a.ctrl:hover, a.ctrl:focus {
-     background-image: url('https://static.igem.org/mediawiki/2013/c/c9/Logo.png');
+     background-image: url('https://static.igem.org/mediawiki/2013/5/5e/Logo_concordia.png');
      opacity: 1;
      -moz-box-shadow:    0 0 10px rgba(50,50,50,0.75);
@@ Line 251: / Line 349: @@
      -moz-box-sizing: border-box;
      box-sizing: border-box;
-     margin-bottom: -5000px;
+     margin-bottom: -15000px;
-     padding-bottom: 5000px;
+     padding-bottom: 15000px;
 }
 .site-menu-content {
      height: 100%;
+    margin-top: 100px;
 }
@@ Line 299: / Line 398: @@
      margin: 2.5%;
      cursor: pointer;
+    height: 400px;
 }
@@ Line 361: / Line 461: @@
 .log-left {
      width:90%;
+    text-align: left;
 }
@@ Line 366: / Line 467: @@
      width: 90%;
      margin-left: 22.5%;
+    text-align : right;
+}
+.log-right img {
+    float : right;
+}
+.log-right .log-desc {
+    clear : right;
 }