@charset "utf-8";
/* CSS Document */

/*總體設定*/
body {
	font-size: 16px;
	font-style: normal;
	color:#333;
	background-image:url(../img/bg-dark.png);
	margin: 0pt;
	text-align: left;
	font-family: "微軟正黑體", Arial, sans-serif, serif;
	text-justify: auto;
}
*{
	margin: 0;
	padding: 0;
	list-style:none;
}
a:visited    {
	font-size: 16px;
	text-decoration: none;
	color: #336699
}
a:link       {
	font-size: 16px;
	text-decoration: none;
	color:#069;
}
a:hover      {
	font-size: 16px;
	text-decoration: none;
	color: #03C;
}
a:active    {
	font-size: 16px;
	color: #900;
}
/*文字選擇*/
.font_date{font-size:12px;
color:#999;}

.font_date_dark{font-size:12px;
color:#35356A;}

.font3{font-size:16px}
.font3orange{font-size:16px;
font-weight:700;
color:#b85f2a;
}
.font3green{font-size:16px;
font-weight:700;
color:#5b9258;
}
.font3white{font-size:16px;
font-weight:700;
color:#FFF;
}
.font3boldorange{font-size:18px;
font-weight:700;
color:#A50;
}

.font3boldblue{font-size:18px;
font-weight:700;
color:#669;
}

.fontleft{
	font-size:14px;
    color:#FFF;
}
.fontleft_date{
	font-size:12px;
    color:#CCC;
}

/*紅色的超連結*/
a.redlink:visited    {
	font-size: 14px;
	text-decoration: none;
	color: #CC0000
}
a.redlink:link       {
	font-size: 14px;
	text-decoration: none;
	color: #CC0000
}
a.redlink:hover      {
	font-size: 14px;
	text-decoration: underline;
	color: #F00;
}
a.redlink:active    {
	font-size: 14px;
	color: #F00;
}


img {
border: 0px;
}

input.btn{
height: 30px; 
width: 100px;
line-height:30px;
cursor:pointer; 
font-size: 14px; 
background-color:#586b90;
color:white; 
border: 2px solid #FFFFFF;}

input.btn_big{
height: 60px; 
width: 150px;
line-height:60px;
cursor:pointer; 
font-size: 14px; 
background-color:#586b90;
color:white; 
border: 2px solid #FFFFFF;}



.main_body_1000{
	width:1000px;
	margin: 0px auto;
}

.div1000{
	width:1000px;
	float:left;
}

a.icon01{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon01.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon01{ 
display: block;
background-position: 0 -48px;
} 

a.icon02{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon02.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon02{ 
display: block;
background-position: 0 -48px;
} 

a.icon03{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon03.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon03{ 
display: block;
background-position: 0 -48px;
} 

a.icon04{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon04.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon04{ 
display: block;
background-position: 0 -48px;
} 

a.icon05{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon05.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon05{ 
display: block;
background-position: 0 -48px;
} 

a.icon06{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon06.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon06{ 
display: block;
background-position: 0 -48px;
} 

a.icon07{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon07.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon07{ 
display: block;
background-position: 0 -48px;
} 

a.icon08{ 
display: block;
height: 48px; 
width: 249px; 
overflow: hidden; 
background: url(../img/icon08.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.icon08{ 
display: block;
background-position: 0 -48px;
} 



a.pre{ 
display: block;
height: 55px; 
width: 39px; 
overflow: hidden; 
background: url(../img/pre.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.pre{ 
display: block;
background-position: 0 -55px;
} 

a.next{ 
display: block;
height: 55px; 
width: 52px; 
overflow: hidden; 
background: url(../img/next.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.next{ 
display: block;
background-position: 0 -55px;
} 
	
.container {
    float:left;
    width:1000px;
    background:url(../img/bg-main.jpg);
    overflow:hidden;
    position:relative;
}
.col1 {
    float:left;
    width:249px;
    position:relative;
    overflow:hidden;
	
}
.col2 {
    float:left;
    width:751px;
    position:relative;
    overflow:hidden;
	
}
.col3 {
    float:left;
    width:50px;
    position:relative;
    overflow:hidden;
	
}

.col1_full {
    float:left;
    width:250px;
    position:relative;
	text-align:left;	
}
.col2_full {
    float:left;
    width:700px;
    position:relative;
	text-align:lef;t	
}
.col3_full {
    float:left;
    width:50px;
    position:relative;
	text-align:left;	
}


.col1_inner {
    float:left;
    width:220px;
    position:relative;
    margin-left:15px;
	text-align:left;
}
.col2_inner {
    float:left;
    width:690px;
    position:relative;
    margin-left:30px;
	text-align:left;
}


.bluebox {
    float:left;
    width:636px;
    position:relative;
    margin-left:30px;
	text-align:left;
	background:url(../img/bluebox-bg.jpg);
}

.bluebox_inner {
    float:left;
    width:603px;
    position:relative;
    margin-left:15px;
	text-align:left;
}






/* Above, the asterisk selects all elements in the HTML document and rests the margin and padding. This ensures that any of the annoying "default" margin and paddings a browser might have will be reset to zero. */

#noti_Container {
    position:relative;     /* This is crucial for the absolutely positioned element */
    border:1px solid blue; /* This is just to show you where the container ends */
    width:40px;
    height:40px;
	margin-top:15px;
	text-align:right;
}
.noti_bubble {
    position:absolute;    /* This breaks the div from the normal HTML document. */
    top: -9px;
    right:-6px;
    padding:1px 2px 1px 2px;
    background-color:red; /* you could use a background image if you'd like as well */
    color:white;
    font-weight:bold;
    font-size:0.70em;
	width:20px;
	height:15px;
	text-align:center;

    /* The following is CSS3, but isn't crucial for this technique to work. */
    /* Keep in mind that if a browser doesn't support CSS3, it's fine! They just won't have rounded borders and won't have a box shadow effect. */
    /* You can always use a background image to produce the same effect if you want to, and you can use both together so browsers without CSS3 still have the rounded/shadow look. */
    border-radius:30px;
    box-shadow:1px 1px 1px gray;
}









.article_container_670 {
    float:left;
	margin-left:13px;
    width:670px;

    background:url(../img/article-bg.jpg);
    overflow:hidden;
    position:relative;

}

.article_left_253{
	width:253px;
	float:left;
	position:relative;
    overflow:hidden;
}

.article_right_417{
	width:417px;
	float:left;
	position:relative;
    overflow:hidden;
}

.article_right_inner{
	float:left;
    width:400px;
    position:relative;
    margin-left:10px;
	margin-top:3px;
}

.article_left_inner{
	float:left;
    width:204px;
    position:relative;
    margin-left:24px;
}

.board_inner{
	float:left;
    width:580px;
    position:relative;
    margin-left:45px;
}

.pray_container_670 {
    float:left;
    width:670px;

    background:url(../img/pray-bg.jpg);
    overflow:hidden;
    position:relative;

}

.pray_inner{
	width:300px;
	float:left;
	position:relative;
	margin-left:15px;
	margin-right:20px;
    overflow:hidden;
}

.pray_text{
	width:300px;
	line-height:18px;
}
.pray_line{
	width:275px;
	position:relative;
}
.pray_photo{
	width:35px;
	height:40px;
float:left;
}
.pray_name{
	width:258px;
	height:40px;
	float:left;
	margin-left:7px;
	line-height:17px;
}




.abgne_tab {
		border: 0px;
		clear: left;
		width: 700px;
		margin: 0px 0;
		float:left;
	}
	ul.tabs {
		width: 700px;
		height: 55px;
		float:left;
	}
	ul.tabs li.t1 {

		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 300px;
		background-image:url(../img/tab1.jpg);
		text-align:center;


	}
		ul.tabs li.t2 {
		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 50px;
		background-image:url(../img/tab2.jpg);
				text-align:center;
	}
			ul.tabs li.t3 {
		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 50px;
		background-image:url(../img/tab1.jpg);
				text-align:center;
	}
				ul.tabs li.t4 {
		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 50px;
		background-image:url(../img/tab2.jpg);
				text-align:center;
	}
				ul.tabs li.t5 {
		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 50px;
		background-image:url(../img/tab1.jpg);
				text-align:center;
	}
				ul.tabs li.t6 {
		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 50px;
		background-image:url(../img/tab2.jpg);
				text-align:center;
	}
	
	
	
		ul.tabs li.bible1 {

		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 340px;
		background-image:url(../img/tab1.jpg);
		text-align:center;
	}
	
			ul.tabs li.bible2 {

		float: left;
		height: 55px;
		line-height: 55px;
		overflow: hidden;
		position: relative;
		width: 339px;
		background-image:url(../img/tab1.jpg);
		text-align:center;
		border-left:#FFF 1px solid;
	}
	
	
	
	
	
	
	
	
		
		ul.tabs li.gap1 {
		float: left;
		height: 53px;
		line-height: 53px;
		overflow: hidden;
		position: relative;
		width: 9px;
	}
			ul.tabs li.gap2 {
		float: left;
		height: 34px;
		line-height: 34px;
		overflow: hidden;
		position: relative;
		width: 3px;
	}
			ul.tabs li.gap3 {
		float: left;
		height: 34px;
		line-height: 34px;
		overflow: hidden;
		position: relative;
		width: 75px;
	}
	
	
	ul.tabs li a {
		display: block;
		color: #000;
		border: none;
		text-decoration: none;

	}
	ul.tabs li a:hover {
		background-image:url(../img/tab-over.jpg);
	}
	ul.tabs li.active  {
		background-image:url(../img/tab-show.jpg);
		border-bottom: none;
	}
	ul.tabs li.active a:hover {
		background-image:url(../img/tab-show.jpg);
	}
	div.tab_container {
		text-align:left;
		clear: left;
		width: 417px;

		border: 0px solid #999;
		border-top: none;


	}
	div.tab_container .tab_content {
		padding: 0px;


	}
	div.tab_container .tab_content h2 {
		margin: 0 0 0px;
	}

.shadow { 
    text-align: center;
	font-weight:500;
	font-size: 15px; 
	color:#787878;	
}


a.box01{ 
display: block;
height: 94px; 
width: 190px; 
overflow: hidden; 
background: url(../img/box01.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.box01{ 
display: block;
background-position: 0 -94px;
} 

a.box02{ 
display: block;
height: 94px; 
width: 190px; 
overflow: hidden; 
background: url(../img/box02.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.box02{ 
display: block;
background-position: 0 -94px;
} 

a.box03{ 
display: block;
height: 94px; 
width: 190px; 
overflow: hidden; 
background: url(../img/box03.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.box03{ 
display: block;
background-position: 0 -94px;
} 


.form_left{
	float:left;
	text-align:right;
	width:140px;
}
.form_right{
	float:left;
	text-align:left;
	width:490px;
	margin-left:10px;
}

.is_available{
	color:green;
}
.is_not_available{
	color:red;
}

input.textinput{
	 height: 20px;
     border: solid 1px #CCCCCC; 
     color: #336699;
     background-color:#F9F5EC;
     }
input.textinputerror{
		 height: 20px;
     border: solid 1px #CC3366; 
     color: #336699;
     background-color: #F4CAD6;
     }
select.textselect {
		 height: 20px;
     border: solid 1px #CCCCCC; 
     color: #336699;
     background-color: #F9F5EC;
     }
select.textselecterror {
		 height: 20px;
		 
     border: solid 1px #CC3366; 
     color: #336699;
     background-color: #F4CAD6;
     }
textarea.textbox{
     border: solid 1px #CCCCCC; 
     color: #336699;
     background-color: #F9F5EC;
     }
textarea.textboxerror{
     border: solid 1px #CC3366; 
     color: #336699;
     background-color: #F4CAD6;
     }
input.file{position:absolute;top:20px;right:300px;top:0;
right:73px;width:0px;height:30px;filter:alpha(opacity=0);
-moz-opacity:0;opacity:0;}






a.cc01{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc01.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc01{ 
display: block;
background-position: 0 -91px;
} 

a.cc02{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc02.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc02{ 
display: block;
background-position: 0 -91px;
} 

a.cc03{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc03.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc03{ 
display: block;
background-position: 0 -91px;
} 

a.cc04{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc04.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc04{ 
display: block;
background-position: 0 -91px;
} 

a.cc05{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc05.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc05{ 
display: block;
background-position: 0 -91px;
} 

a.cc06{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc06.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc06{ 
display: block;
background-position: 0 -91px;
} 

a.cc07{ 
display: block;
height: 91px; 
width: 100px; 
overflow: hidden; 
background: url(../img/cc07.jpg) 0 0 no-repeat;
text-decoration: none;
float:left;
}   
a:hover.cc07{ 
display: block;
background-position: 0 -91px;
} 


.iconbar_left{
	float:left;
	text-align:left;
	position:relative;
	width:520px;
}
.iconbar_right{
	float:left;
	text-align:right;
	position:relative;
	width:150px;
}

.biblebook{
	width:120px;
	height:50px;
	background:url(../img/bg-biblebook.jpg);
	text-align:center;
	font-size:14px;
	font-weight:700;
	color:#FFF;
	float:left;
	line-height:45px;
}
.biblechapter{
	width:64px;
	height:50px;
	text-align:center;
	font-size:17px;
	font-weight:bold;
	color:#FFF;
	float:left;
}

input.biblebtn{
height: 45px; 
width: 58px; 
cursor:pointer; 
font-size: 15px; 
background-color:#586b90;
color:white; 
border: 3px solid #FFFFFF;}

input.biblebtn:hover{
background-color:#5b9258;
}



.bibleline_container {
    float:left;
    width:640px;
	margin-left:30px;
    overflow:hidden;
    position:relative;
}
.bibleline_col1 {
    float:left;
    width:25px;
    position:relative;
    overflow:hidden;
	
}
.bibleline_col2 {
    float:left;
    width:615px;
    position:relative;
    overflow:hidden;
	
}

a.bar01{ 
display: block;
height: 30px;
width:80px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar01.jpg) 0 0 no-repeat;
}   
a:hover.bar01{ 
display: block;
background-position: 0 -30px;
}

a.bar02{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar02.jpg) 0 0 no-repeat;
}   
a:hover.bar02{ 
display: block;
background-position: 0 -30px;
}

a.bar03{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar03.jpg) 0 0 no-repeat;
}   
a:hover.bar03{ 
display: block;
background-position: 0 -30px;
}

a.bar04{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar04.jpg) 0 0 no-repeat;
}   
a:hover.bar04{ 
display: block;
background-position: 0 -30px;
}

a.bar05{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar05.jpg) 0 0 no-repeat;
}   
a:hover.bar05{ 
display: block;
background-position: 0 -30px;
}

a.bar06{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar06.jpg) 0 0 no-repeat;
}   
a:hover.bar06{ 
display: block;
background-position: 0 -30px;
}

a.bar07{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar07.jpg) 0 0 no-repeat;
}   
a:hover.bar07{ 
display: block;
background-position: 0 -30px;
}

a.bar08{ 
display: block;
height: 30px;
width:80px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar08.jpg) 0 0 no-repeat;
}   
a:hover.bar08{ 
display: block;
background-position: 0 -30px;
}

a.bar09{ 
display: block;
height: 30px;
width:30px; 
overflow: hidden; 
text-decoration: none;
float:left;
background: url(../img/bar09.jpg) 0 0 no-repeat;
}   
a:hover.bar09{ 
display: block;
background-position: 0 -30px;
}

.box50_light{
	width:50px;
	height:50px;
	float:left;
	background:#76ba73;
}
:hover.box50_light{
	background:#b85f2a;	
}

.box50_dark{
	width:50px;
	height:50px;
	float:left;
	background:#416d3f;
}
:hover.box50_dark{
	background:#b85f2a;	
}

a.left{ 
display: block;
height: 34px;
width:250px; 
overflow: hidden; 
text-decoration: none;
float:left;

}   
a:hover.left{ 
display: block;
background-position: 0 -34px;
}

a.left01{
	background: url(../img/left01.jpg) 0 0 no-repeat;
}
a.left02{
	background: url(../img/left02.jpg) 0 0 no-repeat;
}
a.left03{
	background: url(../img/left03.jpg) 0 0 no-repeat;
}
a.left04{
	background: url(../img/left04.jpg) 0 0 no-repeat;
}


.example{
  margin-bottom : 1.5em;
}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){
  width   : 28px;
  margin  : 0;
  padding : 0;
  opacity : 0;
}

input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -28px;
  padding-left : 28px;
  background   : url('../img/checks.png') no-repeat 0 0;
  line-height  : 24px;
}

input[type=checkbox]:not(old):checked + label{
  background-position : 0 -24px;
}

input[type=radio]:not(old):checked + label{
  background-position : 0 -48px;
}