@charset "UTF-8";
/* CSS Document */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    vertical-align: baseline;
    background: transparent;
    position: inherit;
}
html, body {
    width: 100%;
    height:100%;
    position:relative;
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color: #111;
}



.container, main {
	display:block;
	width:200px;
	height:300px;
	background-color:rgba(255,255,255,0.5);
	margin:0 auto 
}
.container {
	margin-top:100px;
}
ul {
	position:relative;
	top:100px;
	left:25px;
}
li {
	display:inline-block;
	list-style-type:none;
}
img {
	position:absolute;
	height:25px;
	width:auto;
	left:0;
}
#facebook {
	clip:rect(0px, 25px, 25px, 0px);
}
#flicker {
	clip:rect(0px, 50px, 25px, 25px);
}
#instagram {
	clip:rect(0px, 75px, 25px, 50px);
}
#linkedin {
	clip:rect(0px, 100px, 25px, 75px);
}


#page1 .container {
	background-image:url(fountain.jpg);
	background-position: 0px 0px;
}
#page2 .container {
	background-image:url(fountain.jpg);
	background-position: 0px 300px;
}