Team:Imperial College London/balloontip

From 2011.igem.org

(Difference between revisions)
(Created page with ".balloonstyle{ position:absolute; top: -500px; left: 0; padding: 5px; visibility: hidden; border:1px solid black; font:normal 12px Verdana; line-height: 18px; z-index: 100; backg...")
Line 1: Line 1:
-
.balloonstyle{
+
div.speechbubbles{
-
position:absolute;
+
background-color:#EDEDED; /*background color of tooltip*/
-
top: -500px;
+
-
left: 0;
+
-
padding: 5px;
+
-
visibility: hidden;
+
border:1px solid black;
border:1px solid black;
-
font:normal 12px Verdana;
+
position:absolute;
-
line-height: 18px;
+
top:0;
-
z-index: 100;
+
z-index:100;
-
background-color: white;
+
visibility:hidden;
-
width: 200px;
+
line-height:1.3em;
-
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
+
padding:8px;
-
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
+
width:200px; /*default width of tooltip*/
 +
border-radius:8px; /*CSS3 border radius*/
 +
-moz-border-radius:8px;
 +
-webkit-border-radius:8px;
 +
box-shadow:0 0 10px #888888; /*CSS3 shadow*/
 +
-moz-box-shadow:0 0 10px #888888;
 +
-webkit-box-shadow:0 0 10px #888888;
}
}
-
#arrowhead{
+
 
-
z-index: 99;
+
 
 +
div.speechbubbles div.speechbubbles-arrow{ /*shared CSS for arrow DIV (upwards pointing)*/
 +
border-color: transparent transparent #EDEDED transparent; /*border color should be same as div.speechbubbles background color*/
 +
border-style: solid;
 +
border-width: 10px;
 +
height:0;
 +
width:0;
position:absolute;
position:absolute;
-
top: -500px;
+
top:-19px;
-
left: 0;
+
left:20px;
-
visibility: hidden;
+
z-index:101;
 +
_display:none; /*IE hack to hide arrow in IE6*/
 +
}
 +
 
 +
div.speechbubbles div.speechbubbles-arrow-border{ /*shared CSS for arrow border DIV*/
 +
border-color: transparent transparent black transparent; /*border color should be same as div.speechbubbles border color*/
 +
border-style: solid;
 +
border-width: 10px;
 +
height:0;
 +
width:0;
 +
position:absolute;
 +
top:-20px;
 +
left:20px;
 +
z-index:101;
 +
_display:none; /*IE hack to hide arrow in IE6*/
 +
}
 +
 
 +
 
 +
div.downversion div.speechbubbles-arrow{ /*down arrow DIV specific CSS*/
 +
border-color: #EDEDED transparent transparent transparent; /*border color should be same as div.speechbubbles background color*/
 +
top:auto;
 +
bottom:-19px;
 +
}
 +
 
 +
 
 +
div.downversion div.speechbubbles-arrow-border{ /*down arrow border DIV specific CSS*/
 +
border-color: black transparent transparent transparent; /*border color should be same as div.speechbubbles border color*/
 +
top:auto;
 +
bottom:-20px;
}
}

Revision as of 20:42, 21 September 2011

div.speechbubbles{ background-color:#EDEDED; /*background color of tooltip*/ border:1px solid black; position:absolute; top:0; z-index:100; visibility:hidden; line-height:1.3em; padding:8px; width:200px; /*default width of tooltip*/ border-radius:8px; /*CSS3 border radius*/ -moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:0 0 10px #888888; /*CSS3 shadow*/ -moz-box-shadow:0 0 10px #888888; -webkit-box-shadow:0 0 10px #888888; }


div.speechbubbles div.speechbubbles-arrow{ /*shared CSS for arrow DIV (upwards pointing)*/ border-color: transparent transparent #EDEDED transparent; /*border color should be same as div.speechbubbles background color*/ border-style: solid; border-width: 10px; height:0; width:0; position:absolute; top:-19px; left:20px; z-index:101; _display:none; /*IE hack to hide arrow in IE6*/ }

div.speechbubbles div.speechbubbles-arrow-border{ /*shared CSS for arrow border DIV*/ border-color: transparent transparent black transparent; /*border color should be same as div.speechbubbles border color*/ border-style: solid; border-width: 10px; height:0; width:0; position:absolute; top:-20px; left:20px; z-index:101; _display:none; /*IE hack to hide arrow in IE6*/ }


div.downversion div.speechbubbles-arrow{ /*down arrow DIV specific CSS*/ border-color: #EDEDED transparent transparent transparent; /*border color should be same as div.speechbubbles background color*/ top:auto; bottom:-19px; }


div.downversion div.speechbubbles-arrow-border{ /*down arrow border DIV specific CSS*/ border-color: black transparent transparent transparent; /*border color should be same as div.speechbubbles border color*/ top:auto; bottom:-20px; }

Retrieved from "http://2011.igem.org/Team:Imperial_College_London/balloontip"