h1 {font-family: Futura, "Futura", san-serif;font-size:35px;line-height:23px;font-weight:bolder;letter-spacing:5px;margin:0 0 20px 0;color:#CD2165;text-align:center;}
h2 {font-family: Futura, "Futura", san-serif;font-size:12px;line-height:20px;font-weight:normal;letter-spacing:0px;margin:0 0 20px 0;text-align:left;}
font.pink {color:#CD2165}
font.black{color:#000}


/* PAGE CONTENT */


#html {margin-left: 0; margin-right: 0;


margin:0px;
padding:0px;


} 

#body {


margin:0px;
padding:0px;



}

body, html {
    margin: 0;
    padding: 0;
    height:100%; /* needed for footer positioning*/
} 
 
#container {
            height: 100%;
            width: 100%;
        }


#content{
	alignment-adjust:central;
	position: relative;
	width: 900px;
	height:800px;
	top: -15px;
	left: -10px;
	margin-left: auto; margin-right: auto;
	margin-bottom:0px;
	height:100%;
	
	
}


#content_circles{
	position:absolute;
	width: 1060px;
	height:880px;
	top: 25px;
	left: 25px;
	margin-left: auto; margin-right: auto;
	background-image:url(mary_background.png);
	background-repeat:repeat;
}







#mary{
	position:absolute;
	width:200px;
	height:388px;
	top: 50px;
	left:40px;
	z-index:4;
}

#name{
	position:absolute;
	width:200px;
	height: 90px;
	top:60px;
	left:0px;
	background-color:#FFF;
	z-index:3;
}

#name_text{
	position:absolute;
	height:90px;
	width:200px;
	left:3px;
	top:15px;
	height: 290px;
	z-index:4;
	text-align:center;
}

#name_shade{
	position:absolute;
	width:200px;
	height: 90px;
	top:40px;
	left:20px;
	background-color:#000;
	z-index:2;
	opacity:0.7;
}


#mary_intro{
	position:absolute;
	width:500px;
	height: 205px;
	top:60px;
	left:310px;
	background-color:#FFF;
	z-index:3;
}

#intro_text{
	position:absolute;
	height:200px;
	width:450px;
	left:25px;
	top:20px;
	height: 290px;
	z-index:4;
}

#intro_shade{
	position:absolute;
	width:500px;
	height: 205px;
	top:40px;
	left:330px;
	background-color:#000;
	z-index:2;
	opacity:0.7;
}

#mary_gallery_content{
	position:absolute;
	width:550px;
	top:250px;
	left:320px;
	z-index:4;
}
	

#mary_gallery {
                
                width: 800px;
                overflow: visible;
				
             
            }
          
		  
            #mary_gallery ul{
               /* This position the ul content in the middle of the gallery*/
               margin-left:-40px; 
            }
       
       
            #mary_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:18px;
            }
                 
                 
            /* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
            #mary_gallery ul li .pic{
                /* Animation with transition in Safari and Chrome */
               -webkit-transition: all 0.5s ease-in-out;
               /* Animation with transition in Firefox (No supported Yet) */
               -moz-transition: all 0.5s ease-in-out;
               /* Animation with transition in Opera (No supported Yet)*/
               -o-transition: all 0.5s ease-in-out;
                /* The the opacity to 0 to create the fadeOut effect*/
               opacity:0;
			   
               visibility:hidden; 
               position:absolute; 
               margin-top:20px; 
               margin-left:-400px; 
               /* box shadow effect in Safari and Chrome*/
               -webkit-box-shadow:#272229 2px 2px 10px;
                /* box shadow effect in Firefox*/
               -moz-box-shadow:#272229 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:#272229 2px 2px 10px;
            }
            

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