MediaWiki:Common.css: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 384: Line 384:


.special{
.special{
line-height:216px!;
line-height:216px !important;
}
}



Revision as of 16:30, 4 September 2013

/** CSS placed here will be applied to all skins */

/*
<pre>
 */

.hiddenStructure {display: none}
.hidden {display:none}
.if {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 {}
}http://edutechwiki.unige.ch/en/Zooniverse

/* Space out main section titles */
h2 {margin-top:3.5ex;}
h3 {margin-top:2ex;}

#GooglesearchBody input{ font-size: 80%; }

/* 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%; }

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

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

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

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

.CS_right{
width:320px;
float:right;
text-align:center;}

.CS_left{display:block;}

.CS_rightImg{
box-shadow:1px 1px 2px;
display:inline-block;
margin:0px auto 8px auto;
width:300px;
background:#ECECEC;
}

.CS_semanticTableL{
margin: 0px auto 8px auto;
background: #f9f9f9;
border-collapse: collapse;
width:280px;
}
.CS_semanticTableL td,
.CS_semanticTableL th,
.CS_semanticTableR td,
.CS_semanticTableR th{
  border: 1px #aaaaaa solid;
  padding: 4px 8px 4px 8px;
}

.CS_semanticTableL th,
.CS_semanticTableR th{
background: #f2f2f2;
text-align: center;
font-weight:bold;
color:#A0BE64;
padding: 8px 15px 8px 15px;
}

.CS_semanticTableR{
margin: 0px auto 8px auto;
background: #f9f9f9;
border-collapse: collapse;
width:280px;
}

.evaluationGreyBlock{
display:inline-block;
height:23px;
line-height:23px;
vertical-align:middle;
text-align:center;
background:#F2F2F2;
width:24%;
border:1px solid rgb(225,225,225);
box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
margin:1px;
}
.evaluationGreenBlock{
display:inline-block;
height:23px;
line-height:23px;
vertical-align:middle;
text-align:center;
background:rgb(110,200,100);
width:24%;
border:1px solid rgb(225,225,225);
box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
margin:1px;
color:white;
font-weight:bold;
}
.evaluationRedBlock{
display:inline-block;
height:23px;
line-height:23px;
vertical-align:middle;
text-align:center;
background:rgb(200, 50, 50);
width:24%;
border:1px solid rgb(225,225,225);
box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
margin:1px;
color:white;
font-weight:bold;
}
.evaluationOrangeBlock{
display:inline-block;
height:23px;
line-height:23px;
vertical-align:middle;
text-align:center;
background:rgb(220, 130, 0);
width:24%;
border:1px solid rgb(225,225,225);
box-shadow:0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 0px 5px rgba(0, 0, 0, 0.1);
margin:1px;
color:white;
font-weight:bold;
}

@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;
  }

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

.special{
line-height:216px !important;
}

.greenBlock{
margin:0px 0px 10px 1%;
}
.blueBlock{
margin:0px 0px 10px 1%;
}
.redBlock{
margin:0px 0px 10px 1%;
}
.greyBlock{
margin:0px 0px 10px 1%;
}
.whiteBlock{
margin:0px 0px 10px 1%;
}

.CS_rightImg{
box-shadow:1px 1px 2px;
display:inline-block;
margin:8px auto;
width:auto;
height:230px;}

.CS_rightImg img{width:auto;height:230px;}

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

.CS_right{
position:relative;
float:none;
width:100%;
}

}

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

.decorativeBlueCell{
width:20px; 
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:20px; 
border: 1px solid rgb(205,105,105); 
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,120,120);
background-image: linear-gradient(to right, rgb(210,110,110) 0%,rgb(240,140,140) 100%);
background-image:-webkit-linear-gradient(right, rgb(210,110,110) 0%,rgb(240,140,140) 100%);
}

.decorativeGreenCell{
width:20px; 
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:20px; 
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:98%;
text-align:justify;
margin:0px 15px 15px 0px;
}

table.CS_wikitable td{
padding:7px;
border: 1px solid rgb(200,200,200);
}

.CStable_h1{
font-weight:bold;
height:25px;
font-size:133%;
}

.CStable_h2grey{
text-transform:uppercase;
color:#777777;
font-weight:bold;
font-size:113%;
}
.CStable_h2blue{
text-transform:uppercase;
color:#85A4D3;
font-weight:bold;
font-size:113%;
}


.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.8%;
padding:0px 8px;
line-height:90px;
width:44%;
}

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

.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, 120, 120);
background-image: linear-gradient(rgb(240, 140, 140), rgb(210, 110, 110));
background-image: -webkit-linear-gradient(rgb(240, 140, 140), rgb(210, 110, 110)));
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-indent:0;
border:1px solid rgb(205, 100, 100);
display:inline-block;
color:#333333;
font-family:arial;
font-size:13px;
font-style:normal;
text-decoration:none;
margin:0px 0px 10px 1.8%;
padding:0px 8px;
line-height:90px;
width:44%;
}

.redBlock b{
color:rgb(110, 40, 40);
} 

.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(160, 190, 100);
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:12px;
font-style:normal;
text-decoration:none;
margin:0px 0px 10px 1.8%;
padding:0px 8px;
line-height:90px;
width:44%;
}

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



.greyBlock{
-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(230, 230, 230);
background-image: linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
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;
border:1px solid rgb(207,207,207);
display:inline-block;
color:#333333;
font-family:arial;
font-size:12px;
font-style:normal;
text-decoration:none;
margin:0px 0px 10px -1.5%;
padding:0px 8px;
line-height:90px;
width:44%;
}

.whiteBlock{
-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(244, 244, 244);
background-image: linear-gradient(rgb(238, 238, 238), rgb(220, 220, 220));
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;
border:1px solid rgb(207,207,207);
display:inline-block;
color:#333333;
font-family:arial;
font-size:12px;
font-style:normal;
text-decoration:none;
margin:0px 0px 10px 2.4%;
padding:0px 8px;
height:90px;
width:44%;
}