MediaWiki:Common.css

/** 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>
 */