/* CSS Document */


/*for horizontal accordion*/

#container{
           width:1010px;
		   height:310px;
		   border:solid #66CCFF 1px;
		   overflow:hidden;}
#container_bis{
           width:1010px;
		   height:310px;
		   /*border:solid #66CCFF 1px;*/
		   overflow:hidden;}


/*

the picture width is set to 898px. On extended apps, this could be the entire block width
when starting, el(i).mt=el(i-1).height
               el(i).ml = Sum(1, (i))[el(j).ml] + (i-1)*$fen
when el(i) is expanded, el(i).mt=el(i-1).height
                        el(i+1).ml = Sum(1, (i))[el(j).ml] + [el(i).width-$fen]
						
						
						*/
#one{
     margin-left:10px;
	 margin-top:5px;
	 width:900px;
	 height:300px;
	 background-color:#FFFFFF;
	 }
	 
#one h5{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#3399FF;
   font-weight:700;
   }

#one p{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
   color:#666666;
   margin-top:0px;
   }

#one a{}

#one img{
     margin-right:10px;}
	 
#one hr{
    width:60%;}

#two{
     margin-left:60px;
	 margin-top:-300px;
	 width:900px;
	 height:300px;
	  background-color:#FFFFFF;
	 	
	 }
	 
#two h5{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#3399FF;
   font-weight:700;
   }

#two p{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
   color:#666666;
   margin-top:0px;
   }

#two a{}

#two img{
     margin-right:10px;}
	 
#two hr{
    width:60%;}

#three{
     margin-left:110px;
	 margin-top:-300px;
	 width:900px;
	 height:300px;
	  background-color:#FFFFFF;
	 	
	 }
	 
#three h5{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#3399FF;
   font-weight:700;
   }

#three p{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:11px;
   color:#666666;
   margin-top:0px;
   }

#three a{}

#three img{
     margin-right:10px;}
	 
#three hr{
    width:60%;}
	 
/*for vertical*/
#container_2{
    width:345px;
	height:204px;
	overflow:hidden;
	border:solid #66CCFF 1px;}

#four{
      /*border:solid #669933 1px;*/
	  z-index:3;}

#five{
     margin-top:3px;
	 /*border:solid #66CCFF 1px;*/
	 z-index:2;
	 }

#six{
     margin-top:-154px;
	 /*border:solid #666666 1px;*/
	 z-index:1;
	 }

.box{
    width:345px;
	height:170px;
	background-color:#FFFFFF;
	}
	
#lbox{
    width:625px;
	height:250px;
	border:solid #66ccff 1px;
	padding-left:10px;
	padding-right:10px;
	}
	
#four h4{
    font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	background-color:#0099FF;
	margin-top:0px;
	padding-left:10px;}
	
#four .ctn{
   visibility:visible;}
.ctn{
   visibility:hidden;
   padding-left:10px;}
	
/*basic effects*/
.box a{
      font-family:Verdana, Arial, Helvetica, sans-serif;
	  font-size:14px;
	  color:#66CCFF;}

.box a:hover{
    opacity:0.5;
	filter:alpha(opacity=50);
	zoom:1;
	}
	
h3.bluebordered{
   color:#333333;
   font-family:Verdana, Arial, Helvetica, sans-serif;
   border:solid #66ccff 1px;
   height:40px;
   padding-left:5px;
   margin-top:0px;
   margin-bottom:5px;
   }
	
/*end*/

.fleft{float:left;}
.no-border{border:none;}