/************************************************************************************
RESET
*************************************************************************************/
* {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
}

header, nav, section, article, .box div img, footer {
	display: block;
}

.top, .mid, .btm, .page {
	position: absolute;
	width: 100%;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/
html {
	background-color: #fff;
}

body {
	font-family: Georgia, Helvetica, Arial, serif;
	font-size: 12px;
}

/************************************************************************************
HEADER
*************************************************************************************/
header {
	width: 100%;
	height: 100px;
	background: #0c5f95;
	background-image: -o-linear-gradient(top, #00396b, #0c5f95);
	background-image: -webkit-gradient(linear,left top,left bottom, from(#00396b), to(#0c5f95));
	background-image: -moz-linear-gradient(center top, #00396b 0, #0c5f95 100%);
	background-image: linear-gradient(center top, #00396b, #0c5f95);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00396b', endColorstr='#0c5f95');
	border-top: solid 3px black;
	border-bottom: solid 1px #A3E0CF;
}

h1 {
	font-size: 60px;
	line-height: 100px;
	text-shadow: -3px 0 4px #006;
	text-align: center;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	color: #81bae5;
	mask-image: -moz-linear-gradient(center top, rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
	-o-mask-image: -o-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
	-webkit-mask-image: -webkit-gradient(linear, left top,left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	-moz-mask-image: -moz-linear-gradient(center top, #rgba(0,0,0,1) 0, rgba(0,0,0,0) 100%);
/*	-ie-mask-image: ; */
	text-decoration: none;
}

h1:after {
	color: #000;
	text-shadow: 3px 3px 1px #600;
}

/************************************************************************************
CONTENT
*************************************************************************************/
.page {
	width: 100%;
	height: 100%;
	top: 104px;
	border-top: solid 10px #95c615;
	background-image: -o-linear-gradient(top, #C7D0FF 15%, #DFEAFA 30%, #fff 100%);
	background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0.15, #C7D0FF), color-stop(0.3, #DFEAFA), to(#fff));
	background-image: -moz-linear-gradient(center top, #C7D0FF 15%, #DFEAFA 30%, #fff 100%);
	background-image: linear-gradient(center top, #C7D0FF 15%, #DFEAFA 30%, #fff 100%);
}

/************************************************************************************
INDEX
*************************************************************************************/
nav, section {
	width: 960px;
	margin: 25px auto 20px auto;
}

article {
	float: left;
	width: 239px;
	margin-right: 1px;
	line-height: 18px;
}

article a {
	color: #333;
	text-decoration: none;
}

article img {
	width: 239px;
}

article p {
	width: 211px;
	margin: 5px 0 15px 15px;
	font-size: 12px;
	line-height: 22px;
}

article p:hover {
	text-shadow: white 1px 1px 0px, #ccc 2px 2px 0px, #ccc 3px 3px 0px, #ccc 4px 4px 0px, #ccc 5px 5px 0px;
	color: black;
	margin-left: 5px;
}

article b {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
}

/************************************************************************************
GAL
*************************************************************************************/
.left, .right {
	position: absolute;
	width: 72px;
	height: 41px;
	left: 50%;
	top: 271px;
	cursor: pointer;
}

.left {
	margin-left: -480px;
	background-image: url("./arw_lft.png");
}

.right {
	margin-left: 407px;
	background-image: url("./arw_rgt.png");
}

.left:hover, .right:hover {
	background-position: -72px 0;
}

.box {
	position: absolute;
	width: 800px;
	left: 50%;
	margin-left: -400px;
	margin-bottom: 20px;
}

.box div {
	width: 100%;
}

.box div img {
	height: 532px;
	margin: auto;
}

.gallery {
	float: left;
	position: absolute;
	width: 960px;
	left: 50%;
	margin-left: -480px;
	margin-top: 560px;
	border-top: solid 1px #95c615;
}

.gallery div {
	float: left;
}

.gallery div img, .gallery div a {
	width: 100px;
	height: 100px;
	margin: 15px 10px 0 10px;
}

.gallery div a {
	position: absolute;
}


.gallery p {
	float: left;
	width: 932px;
	margin: 20px 14px 0 14px;
	font-size: 14px;
}

/************************************************************************************
FOOTER
*************************************************************************************/
footer {
	float: left;
	width: 960px;
	height: 40px;
	margin: 10px auto;
	text-align: center;
	line-height: 20px;
	border-top: solid 1px #95c615;
}

footer a {
	text-decoration: none;
	color: black;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* small layout, iphone and netbook */
@media all and (max-width: 960px), (max-height: 400px) {
	html {
		-webkit-text-size-adjust: none;
	}
	
	h1 {
		font-size: 36px;
	}
	
	nav, section, hr, footer {
		width: 98%;
	}
/* INDEX */	
	article {
		width: 100%;
		margin-right: 0;
	}
	
	article a {
		float: left;
	}
	
	.img {
		width: 40%;
	}
	
	article img {
		width: 100%;
	}
	
	.txt {
		width: 60%;
	}
	
	article p {
		width: 90%;
		margin-top: 7.5%;
		margin-left: 10%;
		line-height: 12px;
	}
	
	article p:hover {
		text-shadow: white 1px 1px 0px, #ccc 2px 2px 0px, #ccc 3px 3px 0px;
		margin-left: 5%;
	}
/* GAL */
	section {
		margin-top: 70px;
	}

	.left, .right {
		top: 15px;
	}
	
	.left {
		margin-left: -86px;
	}
	
	.right {
		margin-left: 15px;
	}
	
	.box, .gallery, .gallery p {
		width: 98%;
	}
	
	.box {
		float: left;
		left: 1%;
		margin-left: 0;
	}
	
	.box div img {
		height: 210px;
	}
	
	.gallery {
		left: 1%;
		margin-top: 225px;
		margin-left: 0;
	}
	
	.gallery div, .gallery div a {
		width: 19%;
		margin: 0;
	}
	
	.gallery div {
		margin: 2.5% 0.5% 0 0.5%;
	}
	
	 .gallery div img {
	 	width: 100%;
	 	margin: 0;
	 }
	 
	 .gallery p {
	 	margin: 5% 0 0 0;
	 }
}