HTML, BODY{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	background-color: #A3AFC0; 
}

/* PAGE */

#page{
	margin:0 auto;
	text-align: center;
	width: 1250px;
}

/* HEADER */

header {
    float: center;
	width: 1250px;
	height: 270px;
	background : #a3afbf url(./images/s2dlogo.jpg) no-repeat center;
/*	border-radius: 15px 15px 0px 0px; */
}

/* TOPIC */

nav {
	float: left;
	font-weight : bold;
	width: 1250px;
	height: 20px;
	background-color:#F2F2F2;
	font-size: 18px;
/*	border-radius: 0px 0px 0px 0px; */
	padding-top: 20px;
	padding-bottom: 20px;
}

nav a{
	padding: 8px 10px 8px 10px;
	color: #333333;
	text-decoration: none;
/*	border-radius: 4px 4px 4px 4px; 
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0.36, #C9C9C9),color-stop(0.69, #EEEBF0));
	background: -moz-linear-gradient(center bottom,#C9C9C9 36%,#EEEBF0 69%); */
}

nav a img {
	vertical-align : middle;
}

nav a.sel {
	background-color: silver;
}

nav a:hover {
	 text-decoration: underline;
}

/* CONTENT */

section {
	float: left;
	text-align: center;
	width: 1250px;
	background-color: #F2F2F2; 
	padding-bottom: 20px;
}

section h1,h2,h3,h4{
	font-weight : bold;
	font-family : Arial;
	background-color: silver;
/*	border-radius: 15px 15px 15px 15px; */
}

/* MAINCONTENT */

article{
	float: left;
	margin-top:10px;
	margin-left:15px;
	text-align: center;
	width: 900px;
	padding-right: 10px;
	padding-left: 15px;
	background: #E5E5E5;
	padding: 5px 5px 5px 5px;
/*    box-shadow: black 10px 10px 20px;
	border-radius: 15px 15px 15px 15px; */
}

article h1 {
	font-size: 28px;
	margin-bottom: 25px;
	margin-top: 0px;
	padding: 5px 5px 5px 5px;
}

article h2{
	font-size: 18px;
	margin-top: 35px;
	margin-bottom: 18px;
	padding: 5px 5px 5px 5px;
}

article h3{
	text-align: left;
	background-color: #E5E5E5;
	font-size: 16px;
	margin-top: 25px;
	margin-bottom: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 5px 5px 5px 5px;
}

article h4{
	text-align: center;
	background-color: #E5E5E5;
	font-size: 18px;
	padding: 5px 5px 5px 5px;
}

article h5{
	text-align: center;
	font-size: 14px;
}

article p{
	text-align: left;
	line-height: 170%;
	font-size: 13px;
}

article a, aside a {
	text-align: left;
	text-decoration: none;
	font-weight : bold;
	color: #22227C;
}

article a:hover, aside a:hover {
	text-decoration: underline;
}

article ul{
	padding-left: 35px;
}

article li{
	text-align: left;
	padding: 2px 0px 2px 2px;
	line-height: 150%;
}

article .sidepicture {
	float: right;
	padding-top: 110px;
	padding-right: 20px;
	width: 160px;
}

.center-text{
	text-align: center;
	font-size: 16px;
}

.list-unstyled{
	position: relative;
	list-style-type: none;
	text-align: center;
	padding: 2px 20px 2px 20px;
	line-height: 150%;
}

.landingpage{
	text-align: center;
	padding: 2px 20px 2px 20px;

}

/* SIDEBAR */

aside{
	float: left;
	text-align: center;
	margin-left:30px;
	width: 265px;
	background-color: #E5E5E5;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 0px 5px 0px 5px;
/*	border-radius: 15px 15px 15px 15px; 
    box-shadow: black 10px 10px 20px; */
}

aside h2{
	font-size: 18px;
	margin-bottom: 10px;
	padding: 4px 0px 4px 0px;
}

aside p{
	line-height: 180%;
	text-align: center;
	font-size: 16px;
}

aside #gallery{
	width: 210px;
}

/* FOOTER */

footer, footer a {
	clear: both;
	width: 1250px;
	height: 70px;
	padding-top: 1px;
	text-align: center;
	text-decoration: none;
	background-color: silver;
/*	border-radius: 0px 0px 15px 15px; */
}

/* GALLERY */

#gallery {
    width: 600px;
/*    border-radius: 15px 15px 15px 15px; */
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

#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{
   opacity:0;
   visibility:hidden; 
   position:absolute; 
   margin-top:-150px; 
   margin-left:-20px; 
/*   border:1px solid black; 
   box-shadow: black 2px 2px 10px; */
}

#gallery ul li .mini:hover{
    cursor:pointer;
}

/* This create the desired effect of showing the image 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 */
   height:500px;
   opacity:1; 
   visibility:visible; 
   float:right;
}