/* ------------------------------------------------------------------------------
   Jan Service Default template CSS
   
   Just modifying this file you can heavily customize the site's look.
   
-----------------------------------------------------------------------------*/

/****************************************************
 HTML Elements
******************************************************/






html, body {
        font-family: Arial,Verdana, sans-serif;
        font-size: 100%;
        margin: 0px 2% 0%;
        padding: 0%;
        background-color: #fff;
        color: #333;
	}

/****************************************************
 HTML Elements
******************************************************/

/* ----------- Links --------------------- */
a.menu:link{
        color:#000000;
        text-decoration: none;
}
a.menu:hover{
        color:#FFFFFF;
        background-color: #F04564;
        text-decoration: underline;
}
a.menu:visited{
        color:#000000;
        text-decoration: none;        
}



#horizontal_main_menu_bar {
        background-color: #FFFFFF;
        color: #000000;
        font-size: 80%;
        border-bottom: 1px dashed #999;
        margin-bottom: 1px;
        width: 95%;
	}

#vertical_main_menu_bar {
        background-color: #CCCCCC;
        color: #000000;
        font-size: 80%;
        width: 15%;
        float: left;
        margin-left: 0px;
        padding: 0px;
        border-top: 3px solid #604564;
        border-left: 3px solid #604564;
        border-bottom: 3px solid #604564;
        border-right: 3px solid #604564;
	}
	
	
#content_area {
        background-color: #FFFFFF;
        color: #604564;
        font-size: 80%;
        padding: 0px;
        margin-left: 20%;
        width: 69%;
        border-top: 3px solid #604564;
        border-left: 3px solid #604564;
        border-bottom: 3px solid #604564;
        border-right: 3px solid #604564;
        }

div.thumbnail {
        width: 160px;
        height: 120px;
        }

div.left {
        background-color: #FFFFFF;
        color: #604564;
        font-size: 100%;
        padding: 10px;
        margin-left: 10px;
        width: 40%;
        float: left;
        }

div.right {
        background-color: #FFFFFF;
        color: #604564;
        font-size: 100%;
        padding: 10px;
        margin-left: 310px;
        width: 40%;
        }

div.fullwidth {
        background-color: #FFFFFF;
        color: #604564;
        font-size: 100%;
        padding: 0px;
        margin-left: 0px;
        width: 90%;
        }

div.test {
        background-color: #FFFFFF;
        color: #604564;
        font-size: 100%;
        padding: 0px;
        margin-left: 0px;
        width: 10%;
        }

img.left {
        padding: 10px;
        margin-left: 10px;
        float: left;
        }

img.right {
        padding: 10px;
        margin-left: 310px;
        }

h1.content_area {
        position:relative;
        left:0px;
        color: #604564;
        border-bottom: 3px solid #604564;
        }

h2.content_area {
        position:relative;
        left:0px;
        color: #604564;
        }

h3.content_area {
        position:relative;
        left:0px;
        color: #604564;
        }

h4.content_area {
        position:relative;
        left:0px;
        color: #604564;
        }

h5.content_area {
        position:relative;
        left:0px;
        color: #604564;
        }

h6.content_area {
        position:relative;
        left:0px;
        color: #604564;
        }


#page_header {
        background-color: #604564;
        font-size: 100%;    
        color: #FFFFFF;
        border-bottom: 1px dashed #999;
        margin-bottom: 1px;
        width: 95%;
	}

	
#page_footer {
        background-color: #fff;
        color: #999999;
        border-top: 1px dashed #999;
        text-align: right;
        padding: 2px 10px 0 0;
        clear: both;
        width: 95%;
	}


.spacer {
	clear: both;
	}
	
p {padding: 0;
   margin-top: 0px;
	}


/*
-------------------------------------
 GALLERY related styling 
-------------------------------------
*/
ul.gallery {
border-width: 2;
margin:0px;
padding:5px;
list-style-type:none;
}

a.gallery_thumb {
border-width: 2;
margin:0px;
padding:0px;
target: "_blank"
}

img.gallery_thumb {
width: 80px;
height: 60px;
border-style:ridge;
border-color:#999999;
border-width: 2;
margin:0px;
padding:0px;
alt: "Angry";
}

img.gallery_thumb:hover{
width: 80px;
height: 60px;
border-style:ridge;
border-color:#F04564;
border-width: 2;
margin:0px;
padding:0px;
alt: "Angry";
}

.gallery_thumb:hover span{ /*CSS for enlarged image*/
position: relative;
overflow: scroll;
visibility: visible;
left: 110px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

span { /*CSS for enlarged image*/
position: absolute;
/*width: 80%';*/
/*background-color: lightyellow;*/
padding: 0px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

img.gallery_image_0deg {
/*position: absolute;*/
position: absolute;
width: 480px;
height: 360px; 
left: -100px; /*position where enlarged image should offset horizontally */
border-style:ridge;
border-color:#999999;
border-width: 2;
margin:0px;
padding:0px;
alt: "Angry";
}

img.gallery_image_90deg {
/*position: absolute;*/
position: absolute;
width: 360px;
height: 480px; 
left: -100px; /*position where enlarged image should offset horizontally */
border-style:ridge;
border-color:#999999;
border-width: 2;
margin:0px;
padding:0px;
alt: "Angry";
}

img.gallery_image_180deg {
/*position: absolute;*/
position: absolute;
width: 480px;
height: 360px; 
left: -100px; /*position where enlarged image should offset horizontally */
border-style:ridge;
border-color:#999999;
border-width: 2;
margin:0px;
padding:0px;
alt: "Angry";
}

img.gallery_image_270deg {
/*position: absolute;*/
position: absolute;
width: 360px;
height: 480px; 
left: -100px; /*position where enlarged image should offset horizontally */
border-style:ridge;
border-color:#999999;
border-width: 2;
margin:0px;
padding:0px;
alt: "Angry";
}

/*.gallerycontainer{
position: relative;
Add a height attribute and set to largest image's height to prevent overlaying
}
*/

/*
.thumbnail img{
border: 1px solid white;
margin: 0 0px 0px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}
*/

/*
.gallery_thumb span img{ CSS for enlarged image
border-width: 0;
padding: 2px;
}
*/

/*
img.gallery_thumb:hover span{ CSS for enlarged image
position: relative;
overflow: scroll;
visibility: visible;
top: 0px;
left: 110px; position where enlarged image should offset horizontally 
z-index: 50;
}
*/

/*ul.topic {
list-style:none;
}
*/