MediaWiki:Common.css

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/** CSS placed here will be applied to all skins */

/*
<pre>
 */

.hiddenStructure {display: none}
.hidden {display:none}
.if {display: none}

/*Collection extension */
.onlyinprint {display: none}


/*front page */

/* CCFFFF = bright light blue */

[class*="front-"] {width: 100%}

@media only screen and (min-width: 768px) {
.front-left {padding:3px; float:left; width:57%; border:1px solid #006699; background: #EBFFFF}
.front-right {float:left; width:40%; background: #FAF9EC; border:1px solid #996600; margin-left: 4px; padding: 3px}
div.front_title {background:#E2C4E8; border-bottom:1px solid #996600;border-top:1px solid #996600;line-height:1}
div.front_title h1 span.mw-headline {font-size:80%;line-height:1;}
}

@media print {
#front_left {}
#front_right {}
}

/* Space out and bold main section titles */
h1 {font-weight:bold;}
h2 {margin-top:3.5ex;font-weight:bold;}
h3 {margin-top:2ex;}

#GooglesearchBody input{ font-size: 80%; }
.noautonum .tocnumber { display: none; }

/* wikitable/prettytable class for skinning normal tables */

table.wikitable,
table.prettytable {
  margin: 1em 1em 1em 0;
  background: #f9f9f9;
  border: 1px #aaaaaa solid;
  border-collapse: collapse;
}

table.wikitable th, table.wikitable td,
table.prettytable th, table.prettytable td {
  border: 1px #aaaaaa solid;
  padding: 0.2em;
}

table.wikitable th,
table.prettytable th {
  background: #f2f2f2;
  text-align: center;
}

table.wikitable caption,
table.prettytable caption {
  margin-left: inherit;
  margin-right: inherit;
}

.allpagesredirect {
  font-style: italic;
}

/* Overrides for semantic forms tables - SemanticForms/skins/SemanticForms.css */

table.formtable {
 width: 100%;
 margin: 5px 0 0;
 padding: 0.3em 0.2em 0.2em 0.2em;
 background: transparent;
 border: 1px dotted grey;
 border-radius: 2px;
 background: #f9f9f9;
}

table.formtable caption {
 color:blue;
 text-align:left;
 font-size:12pt;
}

/* Infobox template style */

 .infobox {
   border: 1px solid #aaaaaa;
   width:270px;
   background-color: #f9f9f9;
   color: black;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
}
.infobox td,
.infobox th {
   border: 2px none #aaaaaa;
   padding: 0.2em 0.5em;
   border-bottom: 1px solid #f0f0f0 !important;
}
.infobox caption {
   font-size: larger;
   margin-left: inherit;
}
.infobox.bordered {
   border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
   border: 1px solid #aaaaaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
   border: 0;
}

.infobox.sisterproject {
   width: 20em;
   font-size: 90%;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
   border: 0;
   border-top: 1px solid #aaaaaa;
   border-right: 1px solid #aaaaaa;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
   border: 0;
   border-right: 1px solid #aaaaaa;
}


/* Removes useless links from printout */
@media print {
    .portlet, #privacy, #about, #disclaimer {display:none;}
}

/* Banner Styles used in EduTech wiki 
 - use class names like Banner_xxxx
 */

.Banner_incomplete {
  float:right;
  clear:right;
  width:200px;
  border:1px solid orange;
  background-color:#FFFACD;
  padding:7px; 
  margin-bottom: 10px;
  margin-left: 1em;
}

.Banner_stub {
  float:right;
  clear:right;
  width:200px;
  border:1px solid orange;
  background-color:#FFFFCD;
  padding:7px; 
  margin-bottom: 10px;
  margin-left: 1em;	
}

.Banner_tutorial {
  float:right;
  clear:right;
  width:200px;
  border:1px solid blue;
  background-color:#F8C9E4;
  padding:7px; 
  margin-bottom: 10px;
  margin-left: 1em;
}

.tut_goals {
  background-color:#F8C9E4;
  padding:7px; 
  margin-bottom: 10px;
  border:1px solid #AAAAAA;
}

.Banner_copyright {
  background-color:#d0f0c0;
  padding:7px; 
  margin-bottom: 10px;
  border:1px solid #AAAAAA;
}

/* Style for the source code tag */

.actionscript {
  background-color:#FFFFEE;
  padding:7px; 
  margin-bottom: 10px;
  border:1px #AAAAAA solid;
}

/* Tag cloud extension CSS */

.tagcloud {
	width: 95%;
	text-align: center;
	background-color: #FDFDFD;
	border: 1px solid #EEEEEE;
	padding: 15px 10px 15px 10px;
 }
 .tagcloud a {
	color: #0052CB;
	margin-left: 10px;
	margin-right: 10px;
	font-weight: bold;
 }

/* See http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/PageBy/README */
ul.pageby {
    border:1px solid #60606F;
    background-color:#E0E0EF;
    font-size: 80%;
    margin:1ex;
    padding:1ex;
    list-style-type:none;
  }

/* category tree - first is just for portlet - second for all trees */
/*
#p-categorytree-portlet {font-size: 85% } 
*/
.CategoryTreeTag {font-size: 85%; }
.CategoryTreeLabel {font-size: 85%; }
.CategoryTreeLabelCategory {font-size: 85%; }

/* Syntaxhighlight geshi */
div.mw-geshi {

  font-size: 100%
}

/* removed for MW 1.24
  border: 1px dotted grey;
  padding: 2px; 
  margin-left:0em;
  margin-top:2px;
  margin-right:0px;
  margin-bottom:2px;
*/

code {
  border: 1px solid #ddd;
  padding: 1px 4px;
  border-radius: 2px;
}


/* ------------------------- class for fluid two columns layout -------------------------*/

.wrapper{position:relative;clear:both;}

.leftFifty {
  width:50%;
  float:left;

}
.rightFifty {
  width:50%;
  float:right;
}

.leftSixty {
  width:60%;
  float:left;
}
.rightForty {
  width:40%;
  float:right;
}
.rightSixty {
  width:60%;
  float:right;
}
.leftForty {
  width:40%;
  float:left;
}



.CStable_h1{
color: white;
margin-top: -5px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
border-bottom: 1px solid rgb(170, 170, 170);
background: rgb(130, 160, 210);
font-size: 140%;
display: block;
vertical-align: middle;
line-height: 35px;
}

table.formtable.ProjectBlue th{
    text-align: center;
    vertical-align: middle;
    background: rgb(220,230,240);
    padding: 10px;
    box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
    border: 1px solid rgb(210,220,230);
    font-size: 14px;
    color: #333;
max-width: 220px;
min-width:170px;
}
table.formtable.ProjectBlue td{
    padding-left:30px;
}

table.formtable.ProjectGreen th{
    text-align: center;
    vertical-align: middle;
    background: rgb(200, 250, 160);
    padding: 10px;
    box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
    border: 1px solid rgb(190,240,150);
    font-size: 14px;
    color: #333;
max-width: 180px;
}
table.formtable.ProjectGreen td{
    padding-left:30px;
}

table.formtable.ProjectYellow th{
    text-align: center;
    vertical-align: middle;
    background: rgb(250, 230, 84);
    padding: 10px;
    box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
    border: 1px solid rgb(240, 220, 74);
    font-size: 14px;
    color: #333;
max-width: 180px;
}
table.formtable.ProjectYellow td{
    padding-left:30px;
}


table.formtable.ProjectRed th{
    text-align: center;
    vertical-align: middle;
    background: rgb(250, 160, 100);
    padding: 10px;
    box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
    border: 1px solid rgb(240, 150, 90);
    font-size: 14px;
    color: #333;
max-width: 180px;
}
table.formtable.ProjectRed td{
    padding-left:30px;
}

table.formtable.ProjectPurple th{
    text-align: center;
    vertical-align: middle;
    background: rgb(230, 204, 230);
    padding: 10px;
    box-shadow: 1px 1px 1px 0px white inset,1px 1px 1px rgba(3,3,3,0.1);
    border: 1px solid rgb(220, 195, 220);
    font-size: 14px;
    color: #333;
max-width: 180px;
}
table.formtable.ProjectPurple td{
    padding-left:30px;
}


.CStable_h2blue{
text-transform: uppercase;
color: rgb(102, 132, 182);
font-weight: bold;
font-size: 120%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 1;
position: relative;
display: block;
width: auto;
min-width: 250px;
margin-top:10px;
padding:6px 0px;
}

@media screen and (max-width: 1200px) {
  .leftFifty {
    width:100% !important;
    border:none !important;
  }
  .rightFifty {
    left: 0;
    width:100% !important;
    position:relative;
  }
  .leftSixty {
    width:100%;
  }
  .rightForty {
    left: 0;
    width:100%;
    position:relative;
  }
  .rightSixty {
    left: 0;
    width:100%;
    position:relative;
  }
  .leftForty {
    width:100%;
  }

.CS_left{
position:relative;
float:none;
width:100%;
margin-top:10px;
}

.nodisplay{
display:none;
}


#map_google3_1{width:auto !important;height:200px !important;}

.headBlockBlue{height:280px;}
.headBlockGreen{height:280px;}
.headBlockRed{height:280px;}
.noResize{height:auto;}

}

/* ------------------------- class for citizen science project template-------------------------*/

.decorativeBlueCell{
width:21px; 
border: 1px solid rgb(200,215,230); 
text-align:center; 
color:black; 
font-weight:bold;
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
padding:8px;
background:rgb(190, 209, 225);
background-image: linear-gradient(to right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
background-image:-webkit-linear-gradient(right, rgb(190, 209, 225) 0%, rgb(219, 232, 248) 100%);
}

.decorativeRedCell{
width:21px; 
border: 1px solid rgb(215,195,125); 
text-align:center; 
color:black; 
font-weight:bold;
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
padding:8px;
background:rgb(220, 200, 130);
background-image: linear-gradient(to right, rgb(220, 200, 130) 0%,rgb(248, 228, 158) 100%);
background-image:-webkit-linear-gradient(right, rgb(220, 200, 130) 0%,rgb(248, 228, 158) 100%);
}

.decorativeGreenCell{
width:21px; 
border: 1px solid rgb(150,180,90); 
text-align:center; 
color:black; 
font-weight:bold;
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
padding:8px;
background:rgb(160,190,100);
background-image: linear-gradient(to right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
background-image:-webkit-linear-gradient(right, rgb(160,190,100) 0%,rgb(200,230,140) 100%);
}
.decorativeGreyCell{
width:21px; 
border: 1px solid rgb(200,200,200); 
text-align:center; 
color:black; 
font-weight:bold;
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset,1px 0px 3px rgba(0,0,0,0.1);
padding:8px;
background:rgb(242, 242, 242);
background-image: linear-gradient(to right, #d7d7d7 0%,#e6e6e6 100%);
background-image:-webkit-linear-gradient(right, #d7d7d7 0%,#e6e6e6 100%);
}

table.CS_wikitable{
border-collapse: collapse;
width:100%;
text-align:justify;
margin:0px 15px 0px 0px;
}

table.CS_wikitable td{
padding:7px;
}

.CStable_h2grey{
text-transform:uppercase;
color:#777777;
font-weight:bold;
font-size:120%;
}
.CStable_h2green{
text-transform:uppercase;
color:rgb(100, 170, 80);
font-weight:bold;
font-size:120%;
}
.CStable_h2red{
text-transform:uppercase;
color:rgb(200, 80, 70);
font-weight:bold;
font-size:120%;
}


.blueBlock{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:rgb(190, 209, 225);
background-image: linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
background-image: -webkit-linear-gradient(rgb(219, 232, 248), rgb(190, 209, 225));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
border:1px solid rgb(175, 194, 209);
display:inline-block;
color:#333333;
font-family:arial;
font-size:13px;
font-style:normal;
text-decoration:none;
margin:0px 0px 10px 1%;
padding:0px 8px;
line-height:90px;
width:48%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.headBlockBlue{
-moz-box-shadow:1px 1px 1px rgb(90,90,90);
-webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
box-shadow:1px 1px 2px rgb(90,90,90);
background:rgb(130, 160, 210);
background-image: linear-gradient(rgb(130, 160, 210), rgb(110, 140, 190));
background-image: -webkit-linear-gradient(rgb(130, 160, 210), rgb(100, 130, 180));
-webkit-border-radius: 1px 6px 1px 1px;
-moz-border-radius: 1px 6px 1px 1px;
border-radius: 1px 6px 1px 1px;
padding:15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
margin-top: 53px;
}
.headBlockGreen{
-moz-box-shadow:1px 1px 2px rgb(90,90,90);
-webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
box-shadow:1px 1px 2px rgb(90,90,90);
background:rgb(150, 190, 110);
background-image: linear-gradient(rgb(150, 190, 110), rgb(120, 170, 90));
background-image: -webkit-linear-gradient(rgb(150, 190, 110), rgb(120, 170, 90));
-webkit-border-radius: 1px 6px 6px 6px;
-moz-border-radius: 1px 6px 6px 6px;
border-radius: 1px 6px 6px 6px;
padding:15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
margin-top:53px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.headBlockRed{
-moz-box-shadow:1px 1px 2px rgb(90,90,90);
-webkit-box-shadow:inset 1px 1px 2px rgb(90,90,90);
box-shadow:1px 1px 2px rgb(90,90,90);
background:rgb(200, 110, 90);
background-image: linear-gradient(rgb(200, 110, 90), rgb(190, 100, 80));
background-image: -webkit-linear-gradient(rgb(200, 110, 90), rgb(190, 100, 80));
-webkit-border-radius: 1px 6px 6px 6px;
-moz-border-radius: 1px 6px 6px 6px;
border-radius: 1px 6px 6px 6px;
padding:15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align:center;
margin-top:53px;
}

.blueBlock b{
color:rgb(60, 84, 139) !important;
} 

.orangeBlock{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:rgb(220, 200, 130);
background-image: linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
background-image: -webkit-linear-gradient(rgb(248, 228, 158), rgb(220, 200, 130));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
border:1px solid rgb(215, 190, 125);
display:inline-block;
color:#333333;
font-family:arial;
font-size:13px;
font-style:normal;
text-decoration:none;
padding:0px 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.orangeBlock b{
color:rgb(110, 40, 40)  !important;
} 

.redBlock{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:rgb(220, 30, 30);
background-image: linear-gradient(rgb(255, 130, 130), rgb(220, 30, 30));
background-image: -webkit-linear-gradient(rgb(255, 130, 130), rgb(220, 30, 30));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
border:1px solid rgb(190, 10, 10);
display:inline-block;
color:rgb(255, 230,230);
font-family:arial;
font-size:13px;
font-style:normal;
text-decoration:none;
padding:0px 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.redBlock b{
color:rgb(255, 200,200)  !important;
} 




.greenBlock{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:rgb(200, 230, 140);
background-image: linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
background-image: -webkit-linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
border:1px solid rgb(155,185,95);
display:inline-block;
color:#333333;
font-family:arial;
font-size:13px;
font-style:normal;
text-decoration:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0px 8px;
}

.greenBlock b{
color:rgb(70, 95, 60)  !important;
} 

.greyBlock{
-moz-box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
box-shadow:1px 1px 0px 1px rgba(0, 0, 0, 0.15);
background:rgb(230, 230, 230);
background-image: linear-gradient(rgb(252, 252, 252), rgb(235, 235, 235));
background-image: -webkit-linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
display:inline-block;
color:#333333;
font-family:arial;
font-size:12px;
font-style:normal;
text-decoration:none;
margin:0px 0px 10px 1%;
padding:0px 8px;
line-height:120px;
width:48%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position:relative;
}

.greyBlockTitle{font-size: 14px;
width: 25px;
position: absolute;
height: 104%;
left: -2px;
text-align: center;
display: block;
top: -2%;
line-height: 15px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 6px 0px 0px 6px;
vertical-align: middle;
padding: 8px 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 1px 0px 1px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 0px 1px rgba(0,0,0,0.2);
box-shadow:1px 0px 1px rgba(0,0,0,0.2);
border:1px solid rgba(0,0,0,0.15);
}

/* ---------------------------------------------------------------------------------------*/
/* ------------------------------ Citizen Science CSS V2 ---------------------------------*/
/* ---------------------------------------------------------------------------------------*/
.CSwrapper{
    display:table;
    width:100%;
    padding:20px 10px;
    margin: 15px 0;
    box-sizing: border-box;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-shadow:1px 1px 1px 1px rgb(183,183,183);
    border: 4px solid white; 
min-width:540px; 
color:rgba(0, 0, 0, 0.8);
}

.gradient_Blue{
background: linear-gradient(to right,  #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
  background: -webkit-linear-gradient(left, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
  background: -moz-linear-gradient(left #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
  background: -o-linear-gradient(left, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
  background: -ms-linear-gradient(right, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
}

.gradient_Green {
background: linear-gradient(to right,  #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
  background: -webkit-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
  background: -moz-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
  background: -o-linear-gradient(left #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
  background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
}

.gradient_Yellow {
background: linear-gradient(to right,  #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
  background: -webkit-linear-gradient(left,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
  background: -moz-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
  background: -o-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
  background: -ms-linear-gradient(left, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
}

.gradient_Red {
background: linear-gradient(to right,  #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
  background: -webkit-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
  background: -moz-linear-gradient(left #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
  background: -o-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
  background: -ms-linear-gradient(left, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
}

.gradient_Purple {
background: linear-gradient(to right,  #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
  background: -webkit-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
  background: -moz-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
  background: -o-linear-gradient(left, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
  background: -ms-linear-gradient(left #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
}

.gradient_Grey {background: rgb(232,232,232);padding-left: 20px;}

.iconSet{
    width:40px;
    height:40px;
    background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
    display:inline-block;
    vertical-align:middle;
}
.iconSet_Small{
    width:30px;
    height:30px;
    background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
    background-size:1100px;
    display:inline-block;
    vertical-align:middle;
    margin-top:-5px;
}

.starProgress{
    width:20px;
    height:20px;
    background:url(http://edutechwiki.unige.ch/mediawiki/images/4/47/Star_Pogress.svg);
    background-size:80px;
    display:inline-block;
    vertical-align:middle;
    margin-top:-5px;
}

.iconSet_Smallest{
    width:20px;
    height:20px;
    background:url(http://edutechwiki.unige.ch/mediawiki/images/1/1c/Mfg_labs_iconset.svg);
    background-size:750px;
    display:inline-block;
    vertical-align:middle;
    margin-top:-5px;
}

.somewhat{
    width:27px;
    height:27px;
    background:#2B2B29;
    vertical-align:middle;
    color:white;
    font-size:7px;
    font-weight:bolder;
    line-height:8px;
    border-radius:20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
padding-top:6px;
padding-right:1px;
text-align:center;
}

.section_Title{
	display: table-cell;
	vertical-align: middle;
        width:30px
}

.section_Title p{ color:white;
	border:0px solid red;
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform: rotate(-90deg);
        -ms-transform:rotate(-90deg);
	white-space:nowrap;
	display:inline-block;
	vertical-align: middle;
	font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	text-shadow: 0px 0px 1px #333;	
}
	

.section_Content{margin:0px 10px 0px -130px; text-align: justify;}

.whiteBlock{
	display: table-cell;
	margin: 0px;
	background: white;
	box-shadow:0px 0px 1px rgba(0,0,0,0.3);
	border-bottom: 1px solid rgba(0,0,0,0.3);
	border-right: none;
	border-top: 12px solid #444;
	border-left: none;
	text-align: left;
        padding:7px;
        min-width:295px;

}
	
.map{
     margin: 0px 15px 0px 0px;
     background: #4CB385;
     box-shadow:1px 1px 1px rgba(0,0,0,0.1);
     border-bottom: 1px solid rgba(0,0,0,0.3);
     border-right: 1px solid rgba(0,0,0,0.3);
     border-top: 1px solid rgba(0,0,0,0.1);
     border-left: 1px solid rgba(0,0,0,0.1);
     text-align: center;
     width: 300px;
     color: white;
     text-shadow:1px 1px 0px #333;
     float: left;
}

.bigLink{
    text-indent: 0px;
    display: inline-block;
    color: rgb(51, 51, 51);
    font-family: arial;
    font-size: 15px;
    font-style: normal;
    text-decoration: none;
    -moz-box-sizing: border-box;
    padding: 8px;
    text-align: left;
    margin: 6px;
    width:320px;
border-left:4px solid #555;
background:white;
box-shadow:1px 1px 1px rgba(0,0,0,0.3);
margin-left:15px;
}

.bigLink a{color:#333;}



/*----------- Completion levels --------- */

.evaluationBlock{
     display:inline-block;
     height:18px;
     vertical-align:middle;
     text-align:center;
     width:25%;
     box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
     box-sizing: border-box;
     font-size: 13px;
}

.grey{background:#F2F2F2;border:1px solid rgb(215,215,215);color:#333;}
.green{background:rgb(110,200,100);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
.red{background:rgb(200, 50, 50);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}
.orange{background:rgb(220, 130, 0);color:white;font-weight:bold;border:1px solid rgb(185,185,185);}

/*----------- Small & medium screen --------- */

.showSmallScreen{display: none ! important;}
.showMediumScreen{display: none ! important;}

.frame{border:4px solid white;box-shadow:1px 1px 1px 1px rgb(213,213,213);}

/*----------- Smart buttons --------- */
.btn{
border:1px solid;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);
border-radius:4px;
display:inline-block;
font-size:13px;
font-style:normal;
text-decoration:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0px 8px;
color:white;
text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);
}

.btn:hover{
   -webkit-transform:scaleY(1.04);
   -moz-transform:scaleY(1.04);
   -ms-transform:scaleY(1.04);
   -o-transform:scaleY(1.04);
  transform:scaleY(1.04);
}
.btn a{color:white !important;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25) !important; text-decoration:none !important;display:block;}

.btnGreen{
  background-image: -webkit-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
  background-image: -moz-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
  background-image: -o-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
  background-image: -ms-linear-gradient(top, rgb(98, 196, 98), rgb(81, 163, 81));
  background-image:linear-gradient(to bottom, rgb(98, 196, 98), rgb(81, 163, 81));
}

.btnRed{
  background-image: -webkit-linear-gradient(top rgb(248, 108, 48), rgb(218, 68, 28));
  background-image: -moz-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
  background-image: -o-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
  background-image: -ms-linear-gradient(top, rgb(248, 108, 48), rgb(218, 68, 28));
  background-image:linear-gradient(to bottom, rgb(248, 108, 48), rgb(218, 68, 28));
}
.btnBlue{
  background-image: -webkit-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
  background-image: -moz-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
  background-image: -o-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
  background-image: -ms-linear-gradient(top, rgb(90,136, 204), rgb(50, 88, 204));
  background-image:linear-gradient(to bottom, rgb(90,136, 204), rgb(50, 88, 204));
}

/*----------- Tables --------- */
.CS_semanticTable{
margin: 0px auto!important;
border-collapse: separate !important;
border-spacing:0px 8px;
width:100%;
text-align:center;
padding:0px 8px !important;
}

.blue{background:lightblue !important;}
.orange{background:rgb(250,210,120) !important;}
.orange th{background:rgb(250,210,120) !important;}
.blue th{background:lightblue !important;}
.green {background:rgb(120,220,150)!important;}
.green th{background:rgb(120,220,150)!important;}


.CS_semanticTable td{
border: none !important;
border-right: 1px dashed lightgrey !important;
padding:0px 10px !important;
}

.CS_semanticTable tr{
background: white !important;
box-shadow: 1px 1px 1px #333;
}

.CS_semanticTable th,
.CS_semanticTable th{
text-align: center;
font-weight:bold;
color:white;
padding: 1px !important;
font-weight:bold;
font-size:150%;
text-shadow:1px 1px 0px #333;
border:none !important;
}


/*---------------------------CSS SHOW/HIDE------------------*/
#showHide1 {opacity: 0;display:none;}
#showHide1:target {opacity: 1;display:block;transition:opacity 3s ease-out;}

#showHide2 {opacity: 0;display:none;}
#showHide2:target {opacity: 1;display:block;transition:opacity 3s ease-out;}

/*------------------------ MEDIUM SCREEN ----------------- */
@media screen and (max-width: 1250px) {
	
.gradient_Blue{
background: linear-gradient(to bottom,  #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);/* W3C */
background: -webkit-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
background: -moz-linear-gradient(top #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
background: -o-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
background: -ms-linear-gradient(top, #4c71b2 0%, #2d59a6 55px, #f0f4fb 55px, #f0f4fb 100%);
}

.gradient_Green {
background: linear-gradient(to bottom,  #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);/* W3C */
  background: -webkit-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
  background: -moz-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
  background: -o-linear-gradient(top, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
  background: -ms-linear-gradient(left, #4DB285 0%, #2EA670 55px, #EDFAF4 55px, #EDFAF4 100%);
}

.gradient_Yellow {
background: linear-gradient(to bottom,  #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);/* W3C */
  background: -webkit-linear-gradient(top,#E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
  background: -moz-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
  background: -o-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
  background: -ms-linear-gradient(top, #E3D120 0%, #DDC301 55px, #FFFCE8 55px, #FFFCE8 100%);
}

.gradient_Red {
background: linear-gradient(to bottom,  #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);/* W3C */
  background: -webkit-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
  background: -moz-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
  background: -o-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
  background: -ms-linear-gradient(top, #D45049 0%, #CC3530 55px, #FBF0F0 55px, #FBF0F0 100%);
}

.gradient_Purple {
background: linear-gradient(to bottom,  #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); /* W3C */
  background: -webkit-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
  background: -moz-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
  background: -o-linear-gradient(top, #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
  background: -ms-linear-gradient(top #B24BE0 0%, #B24BE0 55px, #F9F2FC 55px, #F9F2FC 100%); 
}

  .section_Title{
	display: block;
	vertical-align: middle;
	text-align: center;
        width:auto;
  }

  .section_Title p{ color:white;
	border:0px solid red;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	display:block;
	vertical-align: middle;
	margin: auto;
	height: 55px ! important;
  }

  .section_Content{margin:15px !important;}	

  .hideMediumScreen{display: none !important;}
  .showMediumScreen{display: block !important;}
  .bigLink{margin:2px 2px 2px 15px;font-size:14px;line-height:14px;}
}

/*----------- SMALL SCREENS --------- */
@media screen and (max-width: 950px) {
		
.map{display: block;width: 100%;height: 250px;margin-bottom:15px;}
		
.hideSmallScreen{display: none !important;}
.showSmallScreen{display: block !important;}
	
.whiteBlock{
display:block;
width: 100%;
margin:auto;
height:auto;
min-height: 40px;
margin: 0px 0px 10px 0px;
}	

.CStable_h2blue{margin-left:0px !important;}
}

.column2 label.checkboxLabel {
display: block;
width:50%;
float: left;
font-size:12px;
}

.column3 label.checkboxLabel {
display: block;
width:33.3%;
float: left;
font-size:12px;
}

.column4 label.checkboxLabel {
display: block;
width:25%;
float: left;
font-size:12px;
}

.spacedList label.checkboxLabel {
padding-right:22px !important;
float:left;
font-size:12px;
}

.blueList {
background:#D6F4FF;
}
.greenList{
background:#E6FFD6;
}

.redList {
background:#FFE8DB;
}

.yellowList {
background:#FDFFD1;
}

.selectionBox .ms-selection{
    width: 349px;
    height: auto;
    min-height: 25px;
    background:white;
}

.selectionBox .ms-selectable{
    width: 349px;
    height: auto;
    border: none;
    background:transparent !important;
    font-size: 11px;
    border: none !important;
}

.selectionBox .ms-container {width:350px;}

.selectionBox li.ms-elem-selectable {display:block;float:left;border: none !important;padding: 0px 5px !important;}

.selectionBox li.ms-elem-selected {display:block;float:left;border: none !important;}

.selectionBox .ms-container ul.ms-list {width:auto;height:auto;}

.selectionBox input.two-listboxes-search {display:none;}

.selectionBox input.createboxInput {
border-width: 0px 0px 1px;
border-color: #999;
border-radius: 0;
background: rgba(255,255,255,0.5);
}

.selectionBox  select.createboxInput.sfShowIfSelected {width:375px;}

input.createboxInput {
padding: 4px;
border-radius: 3px;
border-bottom: 1px solid lightgrey;
border-right: 1px solid lightgrey;
border-top: 1px solid #555;
border-left: 1px solid #555;
}

#Identification input.createboxInput {width:100%;}

select.createboxInput.sfShowIfSelected {
border-radius: 3px 2px 2px 3px;
border-bottom: 1px solid #D3D3D3;
border-right: 1px solid #D3D3D3;
border-top: 1px solid #555;
border-left: 1px solid #555;
height: 27.4px;
background:white;
}

input.hasDatepicker{
padding: 4px;
border-radius: 3px 0px 0px 3px;
border-bottom: 1px solid #D3D3D3;
border-right: 1px solid #D3D3D3;
border-top: 1px solid #555;
border-left: 1px solid #555;
}

button.ui-datepicker-trigger{
height: 25.5px;
margin-left: -1px;
vertical-align: top;
}

input.ui-autocomplete-input.ui-widget.ui-widget-content.ui-corner-left.sfComboBoxActual{
padding: 4px;
border-top: 1px solid #555;
border-left: 1px solid #555;
border-radius: 3px 0px 0px 3px;
}

button.ui-button.ui-widget.ui-state-default.ui-button-icon-only.ui-corner-right.ui-button-icon.sfComboBoxActual{
height:25.4px;
}


.sfImagePreviewWrapper  img{height:30px; margin:2px; border:1px solid grey;}

select {vertical-align:top !important;}
input {vertical-align:top !important;}

ul.arrow {
list-style:none;
}

.GoBlock{
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:rgb(200, 230, 140);
background-image: linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
background-image: -webkit-linear-gradient(rgb(200, 230, 140), rgb(160, 190, 100));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
border:1px solid rgb(155,185,95);
display:inline-block;
color:#333333;
font-family:arial;
font-size:13px;
font-style:normal;
text-decoration:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0px 8px;
text-align:center;
}

/*
</pre>
 */
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=MediaWiki:Common.css&oldid=70735"