/******************************************************************************
 * rt-style.css
 **----------------
 * This is the default theme (bluesocial) for RaidTracker 3
 * I have put comments and split it into position and style sections to 
 * ease styling for RT3. This uses a lot of CSS3 and works best in all 
 * browsers IE8+, Firefox 4+ Opera 9.62+ Safari 5+ Chrome 15+
 * and will degrade well into Firefox 3.5x-3.6x
 ******************************************************************************/

/********************* Position only  *****************************************/
.desktop {display: none;}
body { /* location on page */
	margin: 35px 0 0; /*margin top needed to avoid conflicts with the pageheader */ 
	padding: 0;
}
/* for the top bar (aka logo) */
#pageheader { 
	position: fixed;
	width: 100%;
	height: 27px;
	left: 0;
	top: 0;
	padding-left: 20px; 
	padding-top: 4px;
	padding-bottom: 4px;
	vertical-align: middle;
}
/* the user menu, login/logout as well. Fits in the space of pageheader */
#pagemenu {
	position: fixed;
	top: 11px;
	left: 220px;
	list-style: none;
}
#pagemenu * {display: inline;} /* keeps top bar inline */
#pagemenu a {padding: 2px 5px;} /* for rounded corners below */
#pagetime {
	position: fixed;
	top: 8px;
	left: 90%;
}
.errorbar, .newsbar { /*error messages and newstickers */
	left: 0;
	padding: 3px 15px;
	margin-bottom: 2px;
}
.errorbar div, .newsbar div {display: inline;}
/* Yeah, this is the container holding the views */
#main { 
	margin: 0% 5%;
	padding: 5px;
}
#pagefooter {
	margin-top: 0px;
	padding: 2px 15px;
}
/* essential edges taken care of. Now for the essential interior*/
/* For all views that have "tabs" to separate content */
#tabbar {
	margin: 0 -5px 3px;
	padding-left: 50px;
}
/* the actual tabs */
#tabbar a {
	display: inline-block;
	padding: 2px 5px 2px;
}
/* General HTML positioning */
input[type="submit"] { -moz-box-sizing: content-box;}
table {width: 100%;}
h1, h2 {
	margin: 0;
	padding: 0;
}

/* next block for tooltip */
.info .tooltip, .event .tooltip {display: none;}
td .info:hover .tooltip, .info:hover .tooltip, .event:hover .tooltip {
	display: block;
	position: absolute;
}
.tooltip {
	padding: 2px;
	width: 200px;
}
.tooltip form, .tooltip input {
	margin: 0;
	padding: 0;
}
.tooltip .cstatus {float: right;} /* This is the supplemental bold bar text in the tooltip. Usually the right side */
/* Proper formatting of forms */
.formline div {display: inline-block; }
.formline { margin-left: 2%;}
.fieldname {width: 20%;}
/* formatting input boxes */
input.number {width: 4em;}
/* input.time {width: 8em;}*/
input[type="time"] {width: 4.5em;}
input[type="date"] {width: 7.5em;}
input[type="number"] {width: 3.5em;}

/* calendar formatting */
#calendar td {
	vertical-align: top;
	width: 10%;
	height: 80px;
}
.tooltip.move {margin-left: -10%;} /* used on the 7th day in calendar view */
.date {margin-bottom: 2px;}
/* calendar -- button for add event */
.newevent {
	margin: 0;
	padding: 0;
	vertical-align: top;
	float: right;
	margin-right: 3px;
}
/* to group selections in eventdateblock and eventstatusbar */
.groupblock {
	display: inline-block; 
	width: 15%;
	text-align: center;
}
.groupblock.max {width: 50%;} /* if a bigger section is needed */
/* for subscription table */
#subscriptions th {width: 24%;}
#subscriptions th>div {display: inline;} /* for tip with whiteboard */
/********************* style only *********************************************/
body { /* default style/font for page */
	background: #88f;
	color: #000;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
}
/* to keep top bar with a proper background */
#pageheader {background: #88f;}
#pagemenu {
	color: #fff;
	font-family: Verdana, sans-serif;
	font-size: 9pt;
}
/* links */
#pagemenu input[type="submit"],
#pagemenu a:visited, #pagemenu a:link, #pagemenu a:hover, #pagemenu a:active {
	color: #ff6;
}
/* style the input boxes */
#login .enter {
	width: 75px;
	background: #a0a0ff;
	color: #906;
	border: 1px solid #ccf;
	border-radius: 8px;
}
#pagemenu input[type="submit"], #pagemenu a { /*styles links/buttons the same */
	background: none;
	color: #ff0;
	/*font-weight: bold;*/
	border: 1px solid #ccf;
	border-radius: 8px;
}
#pagetime {
	color: #fff;
	font-family: Verdana, sans-serif;
	font-size: 8pt;
}
.errorbar, .newsbar {
	font-family: Tahoma, sans-serif;
	font-size: 1.1em;
}
.errorbar {
	background: #900;
	color: #fff;
}
.newsbar {
	background: #ff6;
	color: #000;
	border-top: 5px solid #ccc;
	border-bottom: 5px solid #555;
}
.errorbar .subject {
	color: #cc0;
	font-weight: bold;
	font-size: 1.5em;
}
.newsbar .subject {
	color: #f55;
	font-weight: bold;
	font-size: 1.5em;
}
#main { 
	border: 1px solid #999;
	border-radius: 8px;
	background: #fff;
	color: #000;
}
#pagefooter {
	color: #fff;
	font-family: Tahoma, sans-serif;
	font-size: 8pt;
}
a:link, a:visited, a:hover, a:active {
	text-decoration: none;
}

#tabbar {
	background: #d0eeff;
	font-size: larger;
}
#tabbar a {
	border: 1px solid #cccc33;
	border-radius: 8px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom: none;
	background: #ffffc0;
	color: #555555;
 }
#tabbar a.select {
	background: #fff;
	color: #000;
	cursor:default;
}
#tabbar a.inactive {
	background: #ffe0e0;
	color: #999999;
	cursor:default;
}
h1 {
	font-family: Tahoma, sans-serif;
	font-size: 2em;
	font-weight: bold;
	color: #00f;
	text-align: center;
}
h2 {
	font-family: Tahoma, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
	color: #00f;
	text-align: center;
}
th {
	background: #8cf;
	color: #200;
	border: 1px solid #8cf;
	border-radius: 10px;
}
table {
	border-bottom: 2px solid #8cf;
	border-top: 2px solid #8cf;
}
tr:hover { background-color: #Cff;}
td.number {text-align: right;}
/* style tooltip */
.tooltip {
	background: #ccccff;
	color: #000;
	border: 2px solid #000;
	border-radius: 8px;
}
.tooltip input[type="submit"] {
	background: none;
	color: #09f;
	border: none;
	cursor:pointer;
}
.estatus {
	background: #333333;
	color: #ffff00;
	font-size: large;
	margin: -2px -2px 0px;
	padding-bottom: 2px;
}
.cstatus {color: #fff;}
.eventname {
	font-weight: bold;
	color: #330000;
}
.eventnote.private {
	font-style: oblique;
	color: #992020;
}
.eventlink {text-align: center;}
input, select, textarea {
/*input[type="submit"], input[type="text"], input[type="password"], select, textarea {*/
	border: 1px solid #00f;
	font-family: Verdana, sans-serif;
	font-size: 10pt;
	background: none;
	border-radius: 8px;
	padding: 0;
}
input[disabled="disabled"], input[readonly="readonly"] { border: none;}
a img {border: none;}
.fieldname {	font-weight: bold;}
#calendar tr:hover, #subscriptions tr:hover {background: inherit;} /* don't distract the coloring */
#calendar td:not(:empty):hover{	/* for days that exist on calendar */
	background-color: #cff;
	border: 0px solid #cff;
	border-radius: 8px;
}
#calendar td:empty { /* for empty days on calendar (month view) */
	background-color: #cccccc;
	border: 0px solid #cccccc;
	border-radius: 8px;
}
#today .date { background: #00aaff;}
.date  {
	background: #cccccc;
	color: #000000;
	height: 1.5em;
	border: 1px solid #cccccc;
	border-radius: 8px;
	padding-left: 3px;
}
.newevent input[type="submit"] {
	border: none;
	background: none;
	cursor:pointer;
}
.reset {
	background: #6699ff;
	color: #ffff99;
}
.eventdateblock {
	background: #808080;
	color: #ccc;
	border: 1px solid #0ff;
	border-radius: 5px;
}
.datehead {
	font-weight: bold;
	font-size: larger;
}
.groupblock.urgent {color:#ff0;}
.groupblock.note {color: #00ffff;}
#eventstatusbar {
	background: #d0d0d0;
	color: #000;
	border: 1px solid #0ff;
	border-radius: 5px;
}
.eventtime{
	color: #f00;
}
#eventrolecount {
	background: #b0b0dd;
	color: #000;
	border: 1px solid #0ff;
	border-radius: 5px;
}
input.long {width: 40em;}
th.long {width: 50%;}
.eventdateblock input {
	border: 1px solid #ccc;
	color: inherit;
}
.eventdateblock input[readonly="readonly"] {
	border: none;
	text-align: left;
	color: inherit;
}

.subtime {font-style: italic;}
.notes.public {
	color: #00f;
	font-style: normal;
}
.notes.private {
	color: #f0f;
	font-style: italic;
}
#subscriptions td {vertical-align: top;}
.role {font-weight: bold;}
.points.total{color: #399; font-weight: bold;}
.points.award{color: #666;}
.points.penalty{color: #f00;}
.points.purchase{color: #f0f;}
#subscriptions input[type="image"] {border: 0; border-radius: 0px;}
pre {
 white-space: pre-wrap;
 font-size: 125%;
}