@import url(http://fonts.googleapis.com/css?family=Ubuntu&v1);
@import url(http://fonts.googleapis.com/css?family=Play);

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background:url(../images/main_bg.jpg);
	background-repeat:repeat-x;
	background-color:#0f0f0f;
}
.text1{
	font-family: 'Play', arial, serif;
	font-size:14px;
	color:#FFF;
	text-align:justify;
	font-style:normal;
	letter-spacing:0px;
	line-height:20px;
}
.text1 a{
	font-family: 'Play', arial, serif;
	font-size:14px;
	color:#FFF;
	text-align:justify;
	font-style:normal;
	letter-spacing:0px;
	line-height:20px;
}
.text1 a:hover{
	font-family: 'Play', arial, serif;
	font-size:14px;
	color:#FFF;
	text-align:justify;
	font-style:normal;
	letter-spacing:0px;
	line-height:20px;
}
img.floatLeft {

float: left;
font-size: 12px;
color: #777;
text-align:left;
padding-left:8px;
padding-right:5px;
text-align:justify;
line-height:18px;

}

img.floatRight {

float: right;
}

.h1 { font-family: 'Ubuntu', arial, serif;
color:#525252;
font-size:24px;
text-align:right;
 }
 .tele { 
	font-family:'Ubuntu', arial, serif;
	font-weight:normal;
	font-size:14px;
color:#fff;
text-decoration:none;
text-align:left;
 }
  .tele a{ font-family: 'Ubuntu', arial, serif;
color:#868686;
font-size:14px;
text-decoration:none;
text-align:left;

 }
  .tele a:hover { font-family: 'Ubuntu', arial, serif;
color:#868686;
font-size:14px;
text-align:left;

 }
.bann{
	background:url(../images/bannerbg.jpg);
	background-position:top center;
	background-repeat:no-repeat;
}
.top{
	background:url(../images/button_top.jpg);	
	background-position:top center;
	background-repeat:no-repeat;
}
*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
	font-family:Delicious;
color: #ffffff;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
border-bottom: 3px solid gray; /*bottom border is 3px*/

}

.text{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	color:#FFF;
	text-align:justify;
	letter-spacing:1px;
	line-height:18px;
	font-style:italic;
}




            h1 {
                color: #FBF6FD;
                font-size: 60px;
                text-shadow: #272229 2px 2px 4px;
            }
            

            #gallery {
                border: 10px solid #0f0f0f;
                height: 300px;
                width: 900px;
                margin-left: auto;
                margin-right: auto;
                overflow: visible;
                background: #272229;
                /* box shadow effect in Safari and Chrome*/
                -webkit-box-shadow: #0f0f0f 10px 10px 20px;
                /* box shadow effect in Firefox*/
                -moz-box-shadow: #0f0f0f 10px 10px 20px;
                /* box shadow effect in IE*/
                filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
                /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
                 box-shadow: #0f0f0f 10px 10px 20px;
            
            }
          
		  
            #gallery ul{
               /* This position the ul content in the middle of the gallery*/
               margin-left:-30px; 
            }
       
       
            #gallery ul li {
                /* In order to create the proper effect with hover we should use display inline-table
                    This will display the big picture right next to its thumbnail
                */
                list-style:none; display:inline-table; padding:10px;
            }
                 
                 
            /* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
            #gallery ul li .pic{
                /* Animation with transition in Safari and Chrome */
               -webkit-transition: all 0.6s ease-in-out;
               /* Animation with transition in Firefox (No supported Yet) */
               -moz-transition: all 0.6s ease-in-out;
               /* Animation with transition in Opera (No supported Yet)*/
               -o-transition: all 0.6s ease-in-out;
                /* The the opacity to 0 to create the fadeOut effect*/
               opacity:0;
               visibility:hidden; 
               position:absolute; 
               margin-top:10px; 
               margin-left:-20px; 
               border:1px solid black;
               /* box shadow effect in Safari and Chrome*/
               -webkit-box-shadow:#242424 2px 2px 10px;
                /* box shadow effect in Firefox*/
               -moz-box-shadow:#242424 2px 2px 10px;
               /* box shadow effect in IE*/
               filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
                 /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
               box-shadow:#242424 2px 2px 10px;
			   width:100px;
			   height:auto;
            }
            

            #gallery ul li .mini:hover{
                cursor:pointer;
            }
            
            
            /* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
           #gallery ul li:hover .pic {
                /* width and height is how much the picture is going to growth with the effect */
                width:240px; 
                height: auto;
                opacity:1; 
                visibility:visible; 
                float:right;
            }