﻿/* Class names correspond to class defined in quotes.xml */

#bird
{
   	cursor: pointer;
}
.bird1 {
	top: 25px;
}
.bird2 {
	top: 5px;
}
.bird3
{
	margin-right: 415px;
}
.bird4
{
	margin-right: 45px;
}
/* Bubble 1 (long left) */
.bubble1
{
	background-image: url(../images/bubble1.png);
	display: block;
	z-index: 2;
	position: absolute;
	top: 100px;
	margin-left: 80px;
	width: 554px;
	height: 325px;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE which doesn't recognize opacity property */
	text-align: center;
}
/* Common properties for each quote inside bubble1 */
.bubble1 .q1, .bubble1 .q2, .bubble1 .q3
{
  	margin-left: 150px;
  	width: 350px;
  	padding-top: 5px;
}
/* Bubble 2 (long right) */
.bubble2
{
	background-image: url(../images/bubble2.png);
	display: block;
	z-index: 2;
	position: absolute;
	top: 175px;
	margin-left: 250px;
	width: 480px;
	height: 335px;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE which doesn't recognize opacity property */
	text-align: center;
}
/* Common properties for each quote inside bubble2 */
.bubble2 .q1, .bubble2 .q2, .bubble2 .q3
{
  	margin-left: 50px;
  	width: 350px;
  	padding-top: 5px;
}

/* Bubble 3 (short left) */
.bubble3
{
	background-image: url(../images/bubble3.png);
	display: block;
	z-index: 2;
	position: absolute;
	top: 175px;
	margin-left: 415px;
	width: 439px;
	height: 292px;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE which doesn't recognize opacity property */
	text-align: center;
}
/* Common properties for each quote inside bubble2 */
.bubble3 .q1, .bubble3 .q2, .bubble3 .q3
{
  	margin-left: 50px;
  	width: 350px;
}

/* Bubble 4 (short right) */
.bubble4
{
	background-image: url(../images/bubble4.png);
	display: block;
	z-index: 2;
	position: absolute;
	top: 175px;
	margin-left: 220px;
	width: 478px;
	height: 312px;
	opacity: 0;
	filter: alpha(opacity=0); /* For IE which doesn't recognize opacity property */
	text-align: center;
}
/* Common properties for each quote inside bubble2 */
.bubble4 .q1, .bubble4 .q2, .bubble4 .q3
{
  	margin-left: 50px;
  	width: 350px;
}

/* Specific properties */
/* Long quote */
.q1
{
	margin-top: 130px;
	font-size: 20px;
}
/* Medium quote */
.q2
{
   	margin-top: 110px;
	font-size: 18px;
}
/* Short quote */
.q3
{
	margin-top: 95px;
	font-size: 16px;
}
