/* -- This StyleSheet is shared by the team -- */

/* Overview of Styling methods:
/*
/* Absolute Positioning...
/* 1. General Idea: Offset margins by half dimensions, this way we can position the center of the element.
/* 
*/

html {
background-image:url('http://www.cs.mcgill.ca/~akurtz1/images/bg.png');
background-repeat:no-repeat;
background-position:center center fixed;
background-size:cover;
}

/* -- Ubuntu font for good looks -- */
h1, h2, h3, h4, h5, p {
font-family: 'Ubuntu', sans-serif;
}

a {
	text-decoration:none;
	font-color:#000;
}

a:link{
	color:#000;
}
a:visited{
	color:#000;
}

.button {
	background-color:rgba(240,240,240,0.3);
//	border: solid 2px rgba(0,0,0,0.1);
	border-radius:10px;
	padding: 0px 0px 0px 0px;
	transition: all .5s ease-in-out;
}

.button:hover {
	background-color:rgba(240,240,240,0.8);
//	border: solid 2px rgba(0,0,0,1);
}

/* -------- For Login (Charles) ----------- */
.login_wrap {
	display:inline-block;
	width=300px;
	height=400px;
	font-family: 'Ubuntu', sans-serif;
}

.login_wrap img.team {
	position: relative;
	display:inline-block;
	left:0;
	top:0;
	margin: 0 auto;
}

form.login_form {
	display:inline-block;
	margin: 0 auto;
}

.login_form td {
	text-align: right;
}

form.login_form button{
	font-size: 16px;
	padding: 2px 20px;
	margin-top: 15px;
	margin-bottom: 20px;
}

/* -------- For WELCOME (Aidan) ---------*/
.slider {
	padding:10 0;
	display:hidden;
}

/* -------- For PUZZLE (Aidan) ----------*/

.row_wrap {
	text-align: center;
	text-decoration: none;
	width: 400px;
	margin: 0 auto;
	padding: 10 20;
	font-family: 'Ubuntu', sans-serif;
}

img.puzzled {
	height: 400px;
	width: 400px;
	margin: 0 auto;
}

img.hidden {
	position:absolute;
	height: 200px;
	top:50%;
	margin-top:-100px;
	opacity:0;
	transition: opacity 1s ease-in-out;
}

img.hidden:hover {
	opacity:1;
}


/* -------- For ROOM (Aidan) ------------ */

img.west {
height: 100px;
width: 143px;
position: absolute;
left:0%;
top:50%;
margin-top:-50px;  /* to get perfect center, offset by half height */
transition: all 1s ease-in-out;
}

img.west:hover {
height:110px;
width:157px;
margin-top:-55px;
}

img.east {
height: 100px;
width: 143px;
position: absolute;
right: 0%;
top: 50%;
margin-top:-50px;
transition: all 1s ease-in-out;
}

img.east:hover {
height: 110px;
width: 157px;
margin-top:-55px;
}

img.north {
height: 100px;
width: 143px;
position: absolute;
left: 50%;
top; 0%;
margin-left:-71px; /* offset by half width of image */
transition: all 1s ease-in-out;
}

img.north:hover {
height: 110px;
width: 157px;
margin-left:-76px;
}

img.south {
height: 100px;
width: 143px;
position: absolute;
left: 50%;
bottom: 0%;
margin-left:-71px;
transition: all 1s ease-in-out;
}

img.south:hover {
height: 110px;
width: 157px;
margin-left:-76px;
}

/* for Menu Items */

img.team {
position: absolute;
height: 100px;
width: 400px;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top:-50px;
}

.in_menu {
text-align: center;
position: absolute;
left: 1%;
width: 200px;
padding: 0.25 0;
opacity: 0.7;
transition: opacity .5s ease-in-out;
animation-duration:1.5s;
}