/*****************************************************************************

PROJECT:    PLWire
FILE:       main.css 
DATE:       01/25/2007

Copyright (c) 2007 by the Massachusetts Institute of Technology.
All rights reserved.

Developed by Takashi Okamoto at the Media Laboratory, MIT,
Cambridge, Massachusetts.
http://plw.media.mit.edu/people/mud

For use by Physical Language Workshop.

This distribution is approved by Frank Moss,
Director of the Media Laboratory, MIT.

Permission to use, copy, or modify this software and its documentation for
educational and research purposes only and without fee is hereby granted,
provided that this copyright notice and the original authors' names appear on
all copies and supporting documentation. If individual files are separated from
this distribution directory structure, this copyright notice must be included.
For any other uses of this software, in original or modified form, including
but not limited to distribution in whole or in part, specific prior permission
must be obtained from MIT. These programs shall not be used, rewritten, or
adapted as the basis of a commercial software or hardware product without
first obtaining appropriate licenses from MIT. MIT makes no representations
about the suitability of this software for any purpose. It is provided "as is"
without express or implied warranty.
  
******************************************************************************/

body {
	color: white;
	font-weight: bold;
	margin: 0;
	font: 11px/13px Arial, Helvetica, Verdana, sans-serif;
	background: url(../images/logo.gif) transparent no-repeat center center;
	background-color: #000000;
}

h1, h2 {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	color: #333;
}

h3, h4, h5 {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	color: #333;
	margin: 0;
}

pre {
	background-color: #eeeeee;
	padding: 10px;
	font-size: 11px;
}

fieldset {
	background-color: #f6f6f6;
	border: 1px solid #ccc;
	margin: 0;
}

a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: underline;
}

a:hover {
	color: hotpink;
	text-decoration: none;
}

img {
	border: none;
}

form {
	margin: 0;
}

input {
	font-size: 18px;
	font-weight: bold;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}


/*----- 4a. STRUCTURE -------------------------------------------------------*/
#content-wrapper {
	width: 100%;
	min-height: 700px;
	position: relative;
	margin: 0 auto;
	padding: 0;
	clear: both;
}

#content {
	float: left;
}

#display-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 10000;
	opacity: 0.98;
}

#display-wrapper table {
	position: absolute;
	width: 100%;
	height: 80%;
}

#display-wrapper table tr td {
	vertical-align: middle;
	text-align: center;
}

#aboutus-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        margin: 50px 0 0 0;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 10000;
        opacity: 0.98;
}

#aboutus-wrapper p{
        padding:0;
        margin: 20px 100px 20px 100px;
}


#design-by {
	position: absolute;
	margin-right: 10px;
	bottom: 10px;
	right: 0;
	color: #666;
	text-align: right;
	font-size: 9px;
}

/* IE HACK \*/
* html #design-by {
	position: absolute;
	top: 700px;
}
/* END IE HACK */


/* ----------------------- Draggable containers --------------------------------- */
.draggable-angel {
	position: absolute;
	top: 0;
	left: 0;
	cursor: move;
	background-color: #ADA310;
	width: 200px;
}

.draggable-demon {
	position: absolute;
	top: 0;
	left: 0;
	cursor: move;
	background-color: #801E1C;
	width: 200px;
}

.draggable-both {
	position: absolute;
	top: 0;
	left: 0;
	cursor: move;
	background-color: #6E8036;
	width: 200px;
}


/* ----------------------- Draggable handles ------------------------------------ */
.handle-angel,
.handle-demon,
.handle-both {
	width: 100%;
	height: 20px;
	cursor: move;
	overflow: hidden;
}

.handle-angel a,
.handle-demon a,
.handle-both a {
	cursor: pointer;
}

/* ----------------------- Draggable text ---------------------------------- */

.module-content a {
	cursor: pointer;
}

/* ----------------------- ETC --------------------------------------------- */
.module-content p,
.module-content ul {
	margin: 10px;
}

.module-content ul li {
	padding-bottom: 4px;
}

#toolbar-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #F1F1F1;
	width: 100%;
	height: 45px;
	z-index: 10000;
}

#toolbar {
        padding: 0;
        margin: 24px 0 0 0;
	color: #000000;
}

#toolbar ul {
	display: inline;
}

#toolbar ul li {
	float: left;
	list-style: none;
	display: inline;
}

#toolbar ul li.first {
	margin-left: 0;
	border-left: none;
	list-style: none;
	display: inline;
}

#toolbar a {
        margin: 0 0 0 10px;
        padding: 0;
}

/* ----------------------- LABELS ------------------------------------------ */
#draggable-angel-label {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/label_bg.png) transparent no-repeat;
	width: 140px;
	height: 40px;
	padding: 12px 0;
	text-align: center;
	opacity: 0.8;
	z-index: 10000;
}

#draggable-demon-label {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/label_bg.png) transparent no-repeat;
	width: 140px;
	height: 40px;
	padding: 12px 0;
	text-align: center;
	opacity: 0.8;
	z-index: 10000;
}

#draggable-both-label {
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/label_bg.png) transparent no-repeat;
	width: 140px;
	height: 40px;
	padding: 12px 0;
	text-align: center;
	opacity: 0.8;
	z-index: 10000;
}

/* ----------------------- AUDIO STUFF ----------------------------------- */
.call-angel, 
.call-demon, 
.call-both, 
.call-person {
	width: 100%;
	height: 100%;
	opacity: 0.8;
	position: absolute;
	top: 0;
	left: 0;
}

.call-angel {
	background-color: #0099CC;
}

.call-demon {
	background-color: #DD0055;
}

.call-both {
	background-color: #006600;
}


.call-angel h1, 
.call-demon h1, 
.call-both h1 {
	color: #FFFFFF;
	margin: 8px 0 0 8px;
	font: 24px/30px Arial, Helvetica, Verdana, sans-serif;
	font-weight: 900;
	letter-spacing: 0;	
}


.call-angel span, 
.call-demon span, 
.call-both span,
.call-person span {
	font-weight: normal;
	font: 15px/15px Arial, Helvetica, Verdana, sans-serif;
	letter-spacing: 0;
}

.call-angel h4, 
.call-demon h4, 
.call-both h4,
.call-person h4 {
	color: #FFFFFF;
	margin: 8px 0 0 8px;
	font: 11px/13px Arial, Helvetica, Verdana, sans-serif;
	font-weight: normal;
	letter-spacing: 0;
	
}

.call-angel a, 
.call-demon a, 
.call-both a, 
.call-person a {
	color: #FFFFFF;
	letter-spacing: 0;
}

#audio-viewing-mask {
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	margin: 0 auto;
	padding: 0;
	background: url(/images/phone_number.png) transparent no-repeat center center;
	background-color: #000;
	opacity: 0.8;
}

.icon {
	margin: 4px 4px 0 0px; 
	float: right; 
	cursor: pointer;
	display: block;
}

.num-audio-tags {
	color:  #FFFFFF;
	position: absolute;
	margin: 0;
	padding: 4px;
	top: 20px;
	left: 0;
	background-color: #000;
}


/* ----------------------- TOOLTIP ------------------------------------------- */

.tooltip {
	cursor: pointer;
}

#tooltipbox {
	position: absolute;
	max-width: 200px;
	height: 100px;
	z-index: 100;
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: .8;
}

#tooltipbox-pointer {
	position: absolute;
	top: -4px;
	left: 0;
	height: 4px;
	width: 18px;
	background: url(../images/tip.gif) no-repeat;
}

#tooltipbox-content {
	padding: 4px;
	font-size: 9px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: white;
	background-color: black;
}

/* Admin */

#admin_body td, #admin_body th {
  padding: 5px;
  text-align: left;
}