body{
	margin:0; 
	padding:0;
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
	background-color: #F0F0F0
}

img {
	border: 0;
	}
/* new design css start */
#main{
width: 760px;
margin: auto;
background-color: /*#EFFBD7*/#FFFFFF;
}
.line{
border-bottom: 1px solid #74BE12;
}
.greenbutton{
background-color: #D2F593;
padding: 0px 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
color: #74BE12;
cursor: pointer;
}
.smallgreenbutton{
background-color: #D2F593;
padding: 0px 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
color: #74BE12;
cursor: pointer;
}
.smallgraybutton{
/*border: 1px solid #969696;
background-color: #F0F0F0;
padding: 0px 3px;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
color: #646464;
cursor: pointer;
}
.graybutton{
padding: 0px 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
color: #646464;
cursor: pointer;
}
.grayborderbutton{
padding: 0px 3px;
border: 1px solid #646464;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
color: #646464;
cursor: pointer;
}
.tblhead{
font-weight: bold;
}
/* new design css end */

#whole_page{
	
	MARGIN-TOP:0;
	width:800px;
	height: 100%;
}

#top {
	background-image: url(top.gif);
	background-repeat: no-repeat;
	height: 85px;
	width: 800px;
	z-index: -1;
}
    


#login_form {
	background-image: url(login.gif);
	background-repeat: no-repeat;
	height: 47px;
	width: 230px;
}


.inputbox_login {
	height: 13px;
	width: 104px;
	border: 1px solid #aaaaaa;
}

#main {

	height: 100%;
}

#index_main {
	background-image: url(index_main.gif);
	background-repeat: no-repeat;
	height: 487px;
	width: 800px;
	z-index: -1;
}

#index_link_table {
	z-index: 1;
	left: 0px;
	top: 20px;
	position: relative;
}

.index_link {
	background-color:#323114;
	width:200px;
}




#index_photo_comment {
	color: #8D8E87;
	font-family: Arial;
	font-size: 9px;

}

#copyright {
	color: #8D8E87;
	font-family: Arial;
	font-size: 10px;
	padding-TOP:10px;
}

#loading {
	position: absolute;
	z-index: 10;
	top: 150px;

}

#memberaccess_text{
	color: #353335;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
}

#login_panel_welcome_text{
	color: #353335;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
}

#sign_out_text{
	color: #1F62CA;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
}

.main_panel_block{word-break:break-all; /*width:360px;*/width:395px; overflow:auto;}

.index_breaking_news_time {
	font-weight: bold;
	color: #7B7B78;
	text-decoration: none;
	font-family: Arial;
	font-size: 12px;
	font-style: italic;
}

.index_breaking_news_content {
	color: #7B7B78;
	text-decoration: none;
	font-family: Arial;
	font-size: 10px;
	font-style: italic;
}

.detailSubTitle {
	font: bold 13px Arial;
	color: #8ED316;
}

.plainFieldHeadRequired {
	padding-left: 14px;
	color: #999;
	font-size: 11px;
	font-family: Arial;
}

.detailSubTitle_2 {
	
	background: url(detail-block-blue.gif) top left  no-repeat;
	padding-left: 14px;
	margin-bottom: 8px;
	color: #999;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial;
}

.plainFieldHeadRequired_2 {
	
	background: url(detail-block-orange.gif) top left  no-repeat;
	padding-left: 14px;
	color: #999;
	font-size: 14px;
	font-family: Arial;
}

.listTable {
	width:720px;
	height:100%;
	overflow-x:auto;
	padding:5px 5px 5px 5px ;
}

/*  main_panel text format start */

.message_right {
	color: #73BE10;
	font: bold 8px Arial;
}

.message_wrong {
	color: #ff0000;
	font: bold 8px Arial;
}
.green_22{
font: 22px Calibri;
color: #74BE12;
}
.green_18{
font: 18px Calibri;
color: #74BE12;
}
.green_16_bold {
	font: bold 16px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
}

.green_16 {
	font: 16px Calibri;
	/*color: #73BE10;*/
	color: #74BE12;
}

.green_13_bold {
	font: bold 13px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
}


.green_13_underline {
	font:  13px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
	border-bottom: 1px;
	border-bottom-color: #949391;
	border-bottom-style: double;
}

.green_13 {
	font: 13px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
}

.green_11_bold {
	font: bold 11px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
}

.green_11_bold_italic {
	font: italic bold 11px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
}

.green_11_italic{
font: italic 11px Arial;
/*color: #73BE10;*/
color: #74BE12;
}

.green_11 {
	font:   11px Arial;
	/*color: #73BE10;*/
	color: #74BE12;
}

.green_9{
	font: 9px Arial;
	color: #74BE12;
}

.orange_16_bold {
	font: bold 16px Arial;
	color: #FF6500;
}

.orange_16 {
	font: 16px Arial;
	color: #FF6500;
}

.orange_13_bold {
	font: bold 13px Arial;
	color: #FF6500;
	
}

.orange_13 {
	font:  13px Arial;
	color: #FF6500;
	
}

.orange_11_bold {
	font: bold 11px Arial;
	color: #FF6500;

}

.orange_11_italic{
font: italic 11px Arial;
color: #FF6500;
}

.orange_11 {
	font:  11px Arial;
	color: #FF6500;
}

.orange_9{
	font: 9px Arial;
	color: #FF6500;
}

.blue_16_bold {
	font: bold 16px Arial;
	color: #0065FF;
}

.blue_16 {
	font: 16px Arial;
	color: #0065FF;
}

.blue_13_bold {
	font: bold 13px Arial;
	color: #0065FF;
}

.blue_13_italic {
	font: italic 13px Arial;
	color: #0065FF;
}

.blue_13 {
	font:  13px Arial;
	color: #0065FF;
}


.blue_11_bold {
	font: bold 11px Arial;
	color: #0065FF;
}

.blue_11_italic {
	font: italic 11px Arial;
	color: #0065FF;
}

.blue_11 {
	font: 11px Arial;
	color: #00B0F0;
}

.blue_9{
	font: 9px Arial;
	color: #0065FF;
}

.purple_16_bold {
	font: bold 16px Arial;
	color: #B50084;
}


.purple_13_bold {
	font: bold 13px Arial;
	color: #B50084;
}

.purple_13{
	font: 13px Arial;
	color: #B50084;
}

.purple_13_italic {
	font: italic 13px Arial;
	color: #B50084;
}

.purple_13_bold_italic {
	font: bold italic 13px Arial;
	color: #B50084;
}

.purple_13_underline {
	font:  13px Arial;
	color: #B50084;
	border-bottom: 1px;
	border-bottom-color: #949391;
	border-bottom-style: double;
}

.purple_11 {
	font:  11px Arial;
	color: #B50084;
	border-bottom: 0px;
}

.purple_11_bold {
	font: bold 11px Arial;
	color: #B50084;
}

.purple_11_italic {
	font: italic 11px Arial;
	color: #B50084;
}

.purple_11_bold_italic {
	font: bold  italic 11px Arial;
	color: #B50084;
}

.purple_10 {
	font: 10px Arial;
	color: #B50084;
}


.purple_9 {
	font:  9px Arial;
	color: #B50084;
}

.red_13_bold {
	font: bold 13px Arial;
	color: red;
}

.red_13 {
	font:  13px Arial;
	color: red;
}

.gray_16_bold {
	font: bold 16px Arial;
	/*color: #787878;*/
	color: #646464;
}


.gray_13_bold {
	font: bold 13px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_13{
	font: 13px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_13_italic {
	font: italic 13px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_13_bold_italic {
	font: bold italic 13px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_13_underline {
	font:  13px Arial;
	/*color: #787878;*/
	color: #646464;
	border-bottom: 1px;
	border-bottom-color: #949391;
	border-bottom-style: double;
}

.gray_11 {
	font:  11px Arial;
	/*color: #787878;*/
	color: #646464;
	text-decoration : none ;
}

.gray_11_bold {
	font: bold 11px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_11_italic {
	font: italic 11px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_11_bold_italic {
	font: bold  italic 11px Arial;
	/*color: #787878;*/
	color: #646464;
}

.gray_10 {
	font: 10px Arial;
	/*color: #787878;*/
	color: #646464;
}


.gray_9 {
	font:  9px Arial;
	/*color: #787878;*/
	color: #646464;
}

.black_16_bold {
	font: 15px Calibrib;
	/*color: #212121;*/
	color: #333333;
}

.black_13 {
	font:  13px Arial;
	/*color: #212121;*/
	color: #333333;
}

.black_13_bold {
	font: 13px Calibrib;
	/*color: #212121;*/
	color: #333333;
}

.black_13_bold_italic {
	font: bold  italic 13px Arial;
	/*color: #212121;*/
	color: #333333;
	
}

.black_13_underline {
	font:  13px Arial;
	/*color: #212121;*/
	color: #333333;
	text-decoration: underline;
}

.black_11_bold {
	font: bold 11px Arial;
	/*color: #212121;*/
	color: #333333;
	
}

.black_11_italic {
	font: italic 11px Arial;
	/*color: #212121;*/
	color: #333333;
}

.black_11_bold_italic {
	font: bold italic 11px Arial;
	/*color: #212121;*/
	color: #333333;
}

.black_11_underline {
	font:  11px Arial;
	/*color: #212121;*/
	color: #333333;
	text-decoration: underline;
}

.black_11 {
	font:  11px Arial;
	/*color: #212121;*/
	color: #333333;
	text-decoration : none ;
}
.white_18_bold{
font: 18px Calibrib;
color: #FFFFFF;
}
.white_16_bold{
font: 16px Calibrib;
color: #FFFFFF;
}
.white_14_bold{
font: 14px Calibrib;
color: #FFFFFF;
}
.pink_16_bold {
	font: bold 16px Arial;
	color: #E415DF;
}

/*  main_panel text format end */



/* forum format start */
.forum_table {
	background-color: #497AAD;
 
 }
 .forum_table_top {
	background-color: #497AAD;
	color: #FFFFD5;
	font-size: medium;
	font-weight: bold;
 }
 .forum_title {
	font-size: medium;
	color: #ffffd5;
}
.forum_subtitle {
	font-size: small;
	color: #FFFFFF;
	background-color: #5895D5;
	
}
.forum_subtitle2 {
	font-size: small;
	color: #000099;
	background-color: #cddbeb;
}
.forum_section {
	font-size: small;
	color: #000000;
	background-color: #FFFFFF;
}

/* forum format end */


/* form format start */
input.text_round {
	border:none;
	background:url(input.png) no-repeat;
	width:284px;
	height:20px;
	padding:5px 8px 0px 8px;
	font: 11px Arial;
	
}

input.text_long_round {
	border:none;
	background:url(input_long.png) no-repeat;
	width:212px;
	height:20px;
	padding:5px 8px 0px 8px;
	font-size:14px;
}

input.text_middle_round {
	border:none;
	background:url(input_middle.png) no-repeat;
	width:145px;
	height:20px;
	padding:5px 8px 0px 8px;
	font-size:14px;
}

input.text_short_round {
	border:none;
	background:url(input_short.png) no-repeat;
	width:76px;
	height:20px;
	padding:5px 8px 0px 8px;
	font-size:14px;
}

input.text {

	width:284px;
	height:15px;
	/*font-size:13px;
	color: #787878;*/
	font: 11px Arial;
	color: #646464;
	border: 1px;
	border-color: #555555;
	border-style: double;
}

input.text_long {

	width:212px;
	height:15px;
	font-size:13px;
	color: #787878;
	border: 1px;
	border-color: #555555;
	border-style: double;
}

input.text_middle {

	width:125px;
	height:15px;
	/*font-size:13px;*/
	/*color: #787878;*/
	font-size: 11px Arial;
	color: #646464;
	border: 1px;
	border-color: #555555;
	background-color: #FFFFFF;
	border-style: double;
}

input.text_short {
/*	border:none;
	border-bottom: 1px;
	border-bottom-color: #555555;
	border-bottom-style: double;*/
	width:76px;
	height:15px;
	font-size:11px Arial;
	color: #646464;
	border: 1px;
	border-color: #555555;
	background-color: #FFFFFF;
	border-style: double;
	
}
/* input format end */


/* start format start */
select {
		
	font-size:13px;
	color: #787878;
}


/* start format end */

/*-----------button  start---------------*/

a.ovalbutton{
background: transparent url('button/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
cursor:pointer;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('button/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

/*<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>
*/


/*------share button start----*/
.blue_button{

border: 1px solid #646464;
background-color: #0065FF;
font: normal 12px Tahoma;
color: #ffffff; 
padding-left: 6px; 
padding-right: 6px; 
cursor:pointer;
/*font-size:8px;*/
}

.purple_button{

border: 1px solid #646464;
background-color: #BD008C;
font: normal 12px Tahoma;
color: #ffffff; 
padding-left: 6px; 
padding-right: 6px; 
cursor:pointer;
/*font-size:8px;*/
}

.orange_button{

border: 1px solid #646464;
background-color: #FF6500;
font: normal 12px Tahoma;
color: #ffffff; 
padding-left: 6px; 
padding-right: 6px; 
cursor:pointer;
/*font-size:8px;*/
}

.green_button{

border: 1px solid #646464;
background-color: #73BE10;
font: normal 12px Tahoma;
color: #ffffff; 
padding-left: 6px; 
padding-right: 6px; 
cursor:pointer;
/*font-size:8px;*/
}

.black_button{

border: 1px solid #646464;
background-color: #313031;
font: normal 12px Tahoma;
color: #ffffff; 
padding-left: 6px; 
padding-right: 6px; 
cursor:pointer;
/*font-size:8px;*/
}

.gray_button{

border: 1px solid #646464;
background-color: #EFEBEF;
font: normal 12px Tahoma;
color: #000000; 
padding-left: 6px; 
padding-right: 6px; 
cursor:pointer;
/*font-size:8px;*/
}
/*------share button end----*/

/*-----------button  end---------------*/


/* ---------shadow   start------------*/
.shadow{
border:1px solid silver;
font:10pt arial;
position:relative;
display:inline;
background:white;
z-index:100
}

.shadow_inner{
overflow:hidden;
position:absolute;
top: -1000px;
filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/
opacity:0.1; /*firefox 1.5 opacity*/
-moz-opacity:0.1; /*mozilla opacity*/
-khtml-opacity:0.1; /*opacity*/
z-index:10
}
/*

<p class="shadow" style="display: block" rel="red">This is some paragraph.<br />Set display="block" inside it.<br />This is some paragraph.</p>

<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" class="shadow" rel="blue" /><br />

<p><a href="http://www.dynamicdrive.com" class="shadow" rel="green">Some link</a></p>

*/

/*-----------shadow  end-----------------*/



/*---------arrow  box start-----------*/

.commentbox{
background-color: #ececec;
width: 300px;
padding: 10px;
}

.commentfooter{
background: url(arrow.gif) 20px 0 no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}

/*
<div class="commentbox">
This is some comment.<br />This is some comment.<br />This is some comment.
</div>
<div class="commentfooter">Posted by Dynamic Drive on 05/10, 03:39 AM</div>

*/
/*------------arrow box end ------------------------*/



/*----------------popup  image start------------*/
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

/*
<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />
<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br />
<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

*/

/*---------------popup image end-------------------------*/


/*---------------photo gallery start-----------------*/
.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 5px 5px 0;
}

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

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

/*
<div class="gallerycontainer">

<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>

<a class="thumbnail" href="#thumb"><img src="media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>

<br />

<a class="thumbnail" href="#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 

<a class="thumbnail" href="#thumb"><img src="media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="media/horses.jpg" /><br />Run wild with horses.</span></a>

<br />

<a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a>

<br />

<a class="thumbnail" href="#thumb">Zoka Coffee<span><img src="media/zoka.gif" /><br />Zoka Coffee</span></a>

</div>

*/

/*-----------------photo gallery end-----------------*/


/*--------------curly corner container start----------------*/

.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 300px;
}

.curlycontainer .innerdiv{
background: transparent url(brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}
/*
<div class="curlycontainer">
<div class="innerdiv">
<b>Some title</b> <br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here.
</div>
</div>

*/

/*---------------------curly corner container end----------------------*/
#outputPanel table{
border-collapse: collapse;
}