* {
	
}

html{
	height: 100%;
	width: 100%;
}

body{
	height: 100%;
	width: 100%;
}

#contenthome {
	font-family:century gothic; 
	font-size:24px; 
	color:#FFFFFF; 
	margin-left:325px; 
	margin-top:-718px; 
	height:385px; 
	width:500px; 
	padding-left:10px; 
	padding:-right:10px; 
	padding-top:10px; 
	padding-bottom:10px;
}	

.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
	font-family:century gothic; 
	font-size:16px; 
	color:#FFFFFF; 
	margin-left:290px; 
	margin-top:-618px; 
	padding-left:10px; 
	padding:-right:10px; 
	padding-top:20px; 
	padding-bottom:10px;
	position: relative;
	width: 500px;
	height: 240px; /* Set height to be able to contain height of largest content shown*/
	overflow: hidden;
}

.fadecontent{/*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */
background:none;
position: absolute;
padding: 10px;
visibility: hidden;
width: 420px;
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
width: 350px;
border: 5px solid maroon;
border-top-width: 0;
overflow: hidden;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
border-right: 2px solid maroon;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: black;
}

.fadecontenttoggler a:hover{
background: #C03021;
color: white;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: black;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: black;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #C03021;
color: white;
}

/*the "closebox" and "closeButton" styles are required for the javaScript to work properly. and dont effect the look of the div for the most part.*/
div.closebox {
	cursor: pointer;
	padding-top:15px;
	text-align:right;
}

/* the height and width attributes of this style may need to be updated to fit a new image if you create a cutsom close button.  if you need to adjust the positioning of the close button it can be adjusted in "pupUpDiv.js" near the top of the code.*/
div.closeButton /* Use for ALL close buttons */ {
	position: absolute;
	/*left: 500px;*/

	float: right;
	cursor: pointer;
	border: 0px solid #000000;
	padding: 0px;
	width: 94px;
	height: 40px;
	color:#FFFFFF;/*top: -12px;*/
}

/*the following is the style for the pop up div.  it can be renamed as long as the correct class is called in the html.*/

.popUpDiv {
	
	height:450px;
	width:350px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#FFFFFF;
	background-color: #000000;
	padding: 10px;
	border: 1px solid #FFFFFF;
	z-index: 300;/*border: 100px solid transparent;*/
}

  /*this is what we want the div to look like
    when it is not showing*/
div.loading-invisible{
    /*make invisible*/
    display:none;
}

  /*this is what we want the div to look like
    when it IS showing*/
div.loading-visible{
    /*make visible*/
    display:block;

    /*position it at the very top-left corner*/
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align:center;

    /*in supporting browsers, make it
      a little transparent*/
    background:#000000;
    _background:none; /*this line removes the background in IE*/
    opacity:.75;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;

    /*set the padding, so that the content
      of the div is centered vertically*/
    padding-top:23%;
}