MediaWiki:Common.css

The educational technology and digital learning wiki
Revision as of 18:05, 21 February 2014 by Dacostj7 (talk | contribs)
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: 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 */
@media screen {
#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; font-size:large; border-bottom:1px solid #996600;border-top:1px solid #996600;}
}

@media print handheld {
#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_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 {
  border: 1px dotted grey;
  padding: 2px; 
  margin-left:1em;
  margin-top:2px;
  margin-right:2px;
  margin-bottom:2px;
  font-size: 120%
}

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

/*
</pre>
 */

/* ------------------------- 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: 1280px) {
  .leftFifty {
    width:100%;
  }
  .rightFifty {
    left: 0;
    width:100%;
    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;
}

.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 #333;
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;
}

.column3 label.checkboxLabel {
display: block;
width:33.3%;
float: left;
}

.column4 label.checkboxLabel {
display: block;
width:25%;
float: left;
}

.spacedList label.checkboxLabel {
padding-right:25px !important;
float:left;
}

.blueList label.checkboxLabel{
background:#CFEEFF;
box-shadow:1px 1px 1px grey;
padding:3px 0px 6px 0px;
margin-top:-6px; 
}
.greenList label.checkboxLabel{
background:#CEFFBE;
box-shadow:1px 1px 1px grey;
padding:3px 0px 6px 0px;
margin-top:-6px; 
}
.redList label.checkboxLabel{
background:#FFDED1;
box-shadow:1px 1px 1px grey;
padding:3px 0px 6px 0px;
margin-top:-6px; 
}
.yellowList label.checkboxLabel{
background:#FDFFD1;
box-shadow:1px 1px 1px grey;
padding:3px 0px 6px 0px;
margin-top:-6px; 
}

.ms-selection{
    width: 349px;
    height: auto;
    min-height: 25px;
    background:white;
}
.ms-selectable{
    width: 349px;
    height: auto;
    border: none;
    background:transparent !important;
    font-size: 11px;
    border: none !important;
}
.ms-container{width:350px;}
li.ms-elem-selectable{display:block;float:left;border: none !important;padding: 0px 5px !important;}
li.ms-elem-selected{display:block;float:left;border: none !important;}
.ms-container ul.ms-list{width:auto;height:auto;}
input.two-listboxes-search{display:none;}
#addFormat input.createboxInput {background:transparent !important; border-width:0px 0px 1px 0px;}
.select{vertical-align:baseline !important;}
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=MediaWiki:Common.css&oldid=51346"