/* CSS Document 
anngroups
*/

#main-div {
position: absolute;
top: 0; /* if we want to center vertical also, use  50%  and margin-top= -25em */
left: 50%;
width: 70em;
height: 50em;
margin-top: 0; /*always take 1/2 from the size of the height, they have to be negative  -25em*/
margin-left: -35em; /*always take 1/2 from the size of the width, they have to be negative*/
}

#header {
  background #000033;
  width: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#ffffcc;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}



/* Sortable tables */
table.sortable thead {
    background-color:#eee;
    color:#666666;
    font-weight: bold;
    cursor: default;
}


table {
	border-style:none;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	right:200px; 
	
		background-color:"#e8e8e8";
}

/*table with border*/
.tableb {
	border-style:solid;
	border-width:2px;
	border-color:"yellow";
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}

/*table with outset*/
.tableout {
	border-style:outset;
	border-width:1px;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	border-spacing: ;
	border-color: gray;
	border-collapse: separate;
	background-color: white;
}

/* cell with border */
td.tpeb {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
}

td.tpe_checks {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;

	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:center;
	background-color:"#ffffcc";
}


td.tpebgreen {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;

	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
	background-color:"lightgreen";
}

td.tpebyellow {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;

	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:center;
	background-color:"ffff99";
}


td.tpeblb {
	font-family: Arial, Helvetica, sans-serif;
	font-size:9px;
	font-weight:bold;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
	background-color:"ffffcc";
}

td.tpebbg {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
	background-color:"6699ff";
}

td.tpeblv {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
	background-color:"#ffffcc";
}

td.tpelv {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
	background-color:"#ffffcc";
}




td.tpebligterv {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"yellow";
	text-align:left;
	background-color:"ffcccc";
}


// San Ramon colors

.table_sr {
	border-style:none;
	border-color:"000033";
	border-width:0px;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	background-color:"000033";
}

td.tpe_sr_bold {
	font-family: Arial, Helvetica, sans-serif;
	color:"ffffff";
	font-size:12px;
	font-weight:bold;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"000033";
	text-align:left;
	background-color:"000033";
}


td.tpe_sr_light {
	font-family: Arial, Helvetica, sans-serif;
	color:"ffffff";
	font-size:12px;
	font-weight:light;
	border-bottom-style:solid;
	border-width:2px;
	border-color:"000033";
	text-align:left;
	background-color:"000033";
}


td {
	font-family: Arial, Helvetica, sans-serif;
	border-style:none;
	border-right-color:#e8e8e8;
}

td.tp {
	font-family: Arial, Helvetica, sans-serif;
	border-right-style:dotted;
	border-right-width:2px;
	border-right-color:#FFFFFF;
}

td.tpd {
	font-family: Arial, Helvetica, sans-serif;
	border-right-width:2px;
	border-left-width:2px;
	border-right-color:#FFFFFF;
	text-align:center;
}

td.tpe {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	border-right-style:none;
	border-right-width:0px;
	border-right-color:#e8e8e8;
	text-align:left;
	background-color:"e8e8e8";
}


td.tpecenter {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	border-right-style:none;
	border-right-width:0px;
	border-right-color:#e8e8e8;
	text-align:center;
	background-color:"e8e8e8";
}

td.tpebcenter {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#e8e8e8;
	text-align:center;
	background-color:"e8e8e8";
}

td.tperight {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#FFFFFF;
	color:#FF6600;
	text-align:right;
}

td.tpebrown {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
    border-right-style:none;
	border-right-width:2px;
	border-right-color: #ffffff;
	color:"brown";
	text-align:left;
}
td.tpe8bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size:8px;
	font-weight:bold;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#FFFFFF;
}

td.tpe8 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:8px;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#FFFFFF;
}

td.tpe12bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#FFFFFF;
}

td.tpe15bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#FFFFFF;
}

td.tpe15boldcenter {
	font-family: Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	border-right-style:none;
	border-right-width:2px;
	border-right-color:#FFFFFF;
	text-align:center;
}

td.todolist {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	width:200px;
	color:#FF6600;
	border-right-style:none;
	border-right-width:15px;
	border-right-color:#cc3300;
}

td.tpexls {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	width:300px;
//	color:#FF6600;
//	color:"black";
	border-right-style:none;
	border-right-width:15px;
	border-right-color:#cc3300;
}


th {
	font-family: Arial, Helvetica, sans-serif;
	border-style:none;
}

h1 {
	color:#ED5224;
	font-size:18px;
}

h2 {
page-break-before: always;
}


h4 {
position: absolute;
top: 200px;
left: 150px;}
}



// link does not change color and stay underlined
a:link { color:#0033ff; text-decoration:underline; }
a:visited { color:#0033ff; text-decoration:underline; }
//a:visited { color:#006699; text-decoration:none; }

a.tnl:link { color:#FFFFFF; text-decoration:none; }
a.tnl:link:hover { color:#99CCFF; text-decoration:underline; }

a.tnl:visited { color:#CCCCCC; text-decoration:none; }
a.tnl:visited:hover { color:#FFFFFF; text-decoration:none; }


.tnlselected {
	background-color:#CC3300;
	border-right-style:dotted;
	border-right-width:2px;
	border-right-color:#FFFFFF;
}

.annlogo {
	width:180;
	height:90;
	border-style:none;
	position:relative;
	top:5px;
	left:5px;
}

.error {
	font-family: Arial, Helvetica, sans-serif;
	position:relative;
	top:0px;
	left:0px;
	background-color:"#f8f8f8";
	color:"#ff0000";
	font-size:15px;
	text-align:left;
	padding-bottom:2px;
}

.loginbar {
	background-color:#ffcc00;
	position:relative;
	top:10px;
	left:10px;
	text-align:center;
}

.topnav {
	background-color:#0099cc;
	width:400px;
	height:20px;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#CCCCCC;
	font-variant:small-caps;
	position:relative;
	top:0px;
	left:0px;	
	border-style:dotted;
	border-width:2px;
	border-color:#FFFFFF;
	margin-bottom:0;
	margin-left:200;
	margin-right:0;
	margin-top:0;
}

.leftNav
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	padding: 3px;
	background-color: #FFFFCC;
	text-align:left;
	clear:left;
	width:20%;
	height:3in;
	table-layout:fixed;
	top:0px;
	left:0px;
	float:center;
	margin-right:400;
}

.emailNav
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	padding: 3px;
	background-color: #FFFFCC;
	text-align:left;
	clear:left;
	width:20%;
	height:3in;
	table-layout:fixed;
	top:0px;
	left:0px;
	float:center;
	margin-left:400;
	margin-top:0;


}


.rightNav
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 18px;
	padding: 3px;
	background-color: #FFFFCC;
	text-align:left;
	float:right;
	clear:left;
	width:70%;
	height:4in;
	table-layout:fixed;
	top:150px;
	left:200px;
}


.namebar {
	border-width:0px;
	border-style:none;
	border-color:#FFFFFF;
//	background-image:url("http://www.getann.com/images/topbackground.jpg");
//	background-image:url("http://www.getann.com/images/ANNHeader.gif");
	background-image:url("http://www.getann.com/images/ANNHeaderSolution.gif");
	background-repeat:no-repeat;
	border-bottom-style:none;
	position:relative;
	top:0px;
	left:0px;
	width:800px;
	height:100px;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:center;
	vertical-align:text-bottom;
	color:#999999;
}


.namebar1 {
	border-width:0px;
	border-style:none;
	border-color:#FFFFFF;
	background-image:url("http://www.getann.com/images/topbackground.jpg");
	background-repeat:no-repeat;
	border-bottom-style:none;
	position:relative;
	top:0px;
	left:0px;
	width:800px;
	height:100px;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:30px;
	text-align:center;
	vertical-align:text-bottom;
	color:red;
}
.toplinkNav
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 10px;
	position:relative;
    padding: 3px;
	background-color: #FFFFCC;
	text-align:left;
	float:left;
	clear:left;
	width:800px;
	height:0.5in;
	table-layout:fixed;
}

.managerNav
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 10px;
	padding: 3px;
	background-color: #FFFFCC;
	text-align:left;
	float:left;
	clear:left;
	width:100%;
	height:1in;
	table-layout:fixed;
}

.memberNav
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 10px;
	padding: 3px;
	background-color: #FFFFCC;
	text-align:left;
	float:left;
	clear:left;
	width:100%;
	height:0.25in;
	table-layout:fixed;
}

.mcpnav {
	background-color:#0099cc;
	width:800px;
	height:20px;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:#CCCCCC;
	font-variant:small-caps;
	position:relative;
	top:0px;
	left:0px;
	border-style:dotted;
	border-width:2px;
	border-color:#FFFFFF;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}

.main {
	border-style:none;
	border-width:0px;
	border-color:#CC0001;
	background-color:#FFFFFF;
	border-bottom-style:solid;
	border-bottom-color:"white";
	border-bottom-width:2px;
	position:relative;
	top:0px;
	left:0px;
	width:760px;
	font-size:12px;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}

.pagetitle {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:center;
	color:#ff1c11;
	font-size:24px;
	z-index:2;
}

.headertitle {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:left;
	font-size:16px;
	z-index:2;
}


.descriptivetext {
	font-family: Comic Sans MS;
	text-align:left;
	color:black;
	font-size:13px;
	z-index:2;
	margin-left:50;
}

.descriptivetext_bold {
	font-family: Comic Sans MS;
	text-align:left;
	color:black;
	font-size:13px;
	font-weight:bold;
	z-index:2;
}

.marqueetitle {
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align:center;
	color:#000000;
	font-size:20px;
	z-index:2;
}

.joingroup {
	position:relative;
	left:10px;
	width:750px;
	height:200px;
}

.publicgroups {
	background-color:aqua;
	position:relative;
	width:800px;
	height:250px;
	font-size:20px;
	overflow:scroll;
	border-bottom-style:solid;
	border-bottom-color:#999999;
	border-bottom-width:2px;
}

.agreement {
	background-color:white;
	position:relative;
	width:400px;
	height:100px;
	overflow:scroll;
}
.viewexcelsheet {
	background-color:aqua;
	position:relative;
//	width:800px;
//	height:400px;
//	overflow:scroll;
}



.img {
	width:100%;
	height:100%;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}

.column1of2right {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:50%;
	text-align:right;
}
.column1of2right30 {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:30%;
	text-align:right;
}

.column1of2right8px {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color = "brown";
	width:50%;
	text-align:right;
}
.column1of2adjustleft {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:50%;
	text-align:left;
}

.column1of2adjustcenter {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:50%;
	text-align:center;
}

.column1of2adjustright {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:50%;
	text-align:right;
}
.column1of2right25% {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	width:25%
	text-align:right;
}

.column1of2left75% {
	font-family: Arial, Helvetica, sans-serif;
  	font-size:10px;
  	color:#cc3333;
	background-color:#ffffcc;
	width:550px;
	text-align:left;
}

.column1of2left25% {
	font-family: Arial, Helvetica, sans-serif;
  	font-size:10px;
	color:#cc3333;
	background-color:#ccffff;
	width:150px;
	text-align:left;
}


.column1of2left {
	font-family: Arial, Helvetica, sans-serif;
  	font-size:12px;
	width:30%;
	text-align:right;
}

.bottomtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#999999;
	text-align:center;
	position:relative;
	top:5px;
	left:0px;
	width:780px;
}

.bottombar {
	border-style:none;
	background-image:url("http://www.getann.com/images/poweredby3.gif");
	background-repeat:no-repeat;
	width:290px;
	height:80px;
	float:right;
	clear:right;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
}



#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: yellow;
}

.verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
}



#vertical {
  width:45em; 
  padding:0;
  margin:0 auto; 
  list-style-type:none; 
  font-size:1em; 
  font-family:georgia, "times new roman", serif;
  }

#vertical li {
  float:left; 
  border:0.2em solid #eee;
  margin:0.1em;
  }
#vertical li a {
  text-decoration:none; 
  color:#000; 
  display:block; 
  width:1.5em; 
  height:1.5em; 
  border-top:0.1em solid #000; 
  height:auto;
  }
#vertical li a em {
  font-style:normal; 
  display:block; 
  text-align:center; 
  background:#fff; 
  border-left:0.1em solid #000; 
  border-right:0.1em solid #000;
  }
#vertical li a em.nd {
  border-bottom:0.1em solid #000;
  }
#vertical li a:hover {
  background:#eee;
  }
#vertical li a:hover em {
  background:#eee; 
  color:#800;
  }












#topcol {
  	background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:0px; 
	width:800px;
  	height: 100px;	
  	margin-left:0;
  	z-index: 10; 
}

#leftcol {
  background: #d8d8d8;
	position:absolute; 
	right:600px; 
	top:100px; 
	width:200px;
  	height: 630px;
	margin-left:0;
		text-align:left;
  	z-index: 14; 
}


#centercol_withoutfeaturebar {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:100px; 
	width:600px;
	margin-left:0;
		text-align:left;
  	z-index: 13; 
}


#groupfeaturebar {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:100px; 
	width: 600px;
	  	height: 100px;	
	margin-left:0;
		text-align:left;	
  	z-index: 12; 
}
#centercol_withfeaturebar {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:+200px; 
	width:600px;
	  	height: 400px;	
	margin-left:0;
		text-align:left;
  	z-index: 13; 
}


#addmidcolumn {
  background: #e8e8e8;
	position:absolute; 
	right:410px; 
	top:650px; 
	width:190px;
	  	height: 400px;	
	margin-left:0;
		text-align:left;
  	z-index: 13; 
}

#addgroupscolumn {
  background: #e8e8e8;
	position:absolute; 
	right:200px; 
	top:650px; 
	width:190px;
	  	height: 400px;	
	margin-left:0;
		text-align:left;
  	z-index: 14; 
}

#addattachmentcolumn {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:650px; 
	width:190px;
	  	height: 400px;	
	margin-left:0;
		text-align:left;
  	z-index: 15; 
}


#rightcol {
  background: #ffcccc;
	position:absolute; 
	right:0px; 
	top:100px; 
	width:10px;
	margin-left:0;
  	z-index: 12; 
}


#footer {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:600px; 
	width:600px;
	margin-left:0;
  	z-index: 12; 
}

#centercol_full {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:+100px; 
	width:800px;
	  	height: 500px;	
	margin-left:0;
		text-align:left;
  	z-index: 11; 
}

#footer_full {
  background: #e8e8e8;
	position:absolute; 
	right:0px; 
	top:500px; 
	width:800px;
	margin-left:0;
  	z-index: 12; 
}


#corner_topleft {
  background: #ffffff;
	position:relative; 
	right:120px; 
	top:100px; 
	width:10px;
	margin-left:0;
  	z-index: 12; 
}


h2.pos_left
{
position:relative;
left:-20px;
}

h2.pos_right
{
position:relative;
left:20px;
}