body{
    background:url(img/bg.jpg) center top repeat-x #373737;
    text-align:center;
	font-family: 'Droid Serif', serif;    
    width:1000px;
    color:#ccc;
    float:none;
    margin:auto;
    padding:30px 0 10px}
header {
	width:100%;
	float:left;
	position:relative;
	background-image: url(../images/main-header-background.png);
	background-repeat: repeat-x;
	background-position: 100px 100px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-family: 'Federo', cursive;
	z-index: 9999;
	font-size: 18px;
}

nav {
	width:1000px;
	position:relative;
	height: 80px;
	float: right;
	font-family: 'Times New Roman', serif;
	font-size: 16px;
	cursor: default;
	margin: 0px;
}
aside{
	width:370px;
	float:left;
	text-align:left;
	bottom:10px;
	height:auto
}
a{color:#9cf;text-decoration:none;border-bottom:1px dotted #9cf}
a:hover{color:#fff;border-bottom:1px dotted #fff}
h1,h2,h3,h4,h5,h6{
	
    font-weight:400;
    margin:12px 12px 12px 0}
h1{
	font-family: 'Federo', cursive;
    font-size:26pt}
h2{ font-family: 'Federo', cursive;
    font-size:24px}
h3{
	font-size:18px;	
	font-weight: 400;
}
ul{
    list-style-type:square}
section{
    background-color:#222;
    border-top:1px dotted #999;
    border-bottom:1px dotted #999;
    margin-top:10px;
    padding:8px}
footer{
	color:#ccc;
	background-color:#333;
	font-family: 'Droid Serif', serif;
	font-size:14px;
	height:40px;
	text-align:center;
	width: 1000px;
	position: relative;
	top: auto;
	display: inline-block;
}
section p{
    line-height:16px;margin:10px}
section h3{
    color:#9cf}
article
{
	font-family: 'Droid Serif', serif;
	text-align:left;
	width:600px;
	float:right;
	position:relative;
	bottom:10px;
	font-size: 18px;
}
article p{
	line-height:20px;letter-spacing:1px}

li ul{
    position: absolute;
    display: none;
}

li:hover ul{
    display: block;
}
.gallery {
	/* box shadow effect in Safari and Chrome*/
                -webkit-box-shadow: #272229 10px 10px 20px;
	/* box shadow effect in Firefox*/
                -moz-box-shadow: #272229 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: #272229 10px 10px 20px;
	width: 640px;
	overflow: visible;
	background-color: #000;
	display: inline;
	height: 130px;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
            }		  
.gallery ul{
               /* This position the ul content in the middle of the gallery*/
    margin-left:-30px; 
            }
.gallery ul li {
	display:inline-table;
	list-style-image: none;
	list-style-type: none;
            }                 
            /* 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;
	margin-top:10px;
	margin-left:-20px;
	/* 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;
	position: absolute;
	border: 1px solid black;
            } 
.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:200px;
	height:200px;
	opacity:1;
	visibility:visible;
	float: right;
            }