@charset "utf-8";

/* html, body */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
	position: relative;
	min-width: 300px;
	min-height: 750px;
}

body > div {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent no-repeat 50% 50%;
    background-size: cover;
}

body > div:before {
	content: '';
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	/* from: http://colorzilla.com/gradient-editor/#000000+60,000000+100&0.1+60,1+100 */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(60%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 1) 100%);
    background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 1) 100%);
}

body.lake > div {
	background-image: url(../images/layout/rmw_guided_fly_fishing_background_1.jpg);
}

body.river > div {
    background-image: url(../images/layout/rmw_guided_fly_fishing_background_2.jpg);
}

@media screen and (max-width: 767px) {
    body {
        min-height: 680px;
    }

	body > div {
	    background-position: 70% 50%;
	}
}

/* fonts */
body, h1 {
    font-family: 'Open Sans', 'Helvetica', 'Verdana', sans-serif;
	font-weight: 300;
	font-size: 22px;
    line-height: 26px;
    text-align: center;
	color: white;
}

h1 span {
    font-weight: 700;	
}

/* default elements | headings */
h1 {
    margin: 0;
	padding: 2% 0 80px 0;
}

h1 span {
	display: block;
}

@media screen and (max-width: 767px) {
	h1 {
	    padding-bottom: 65px;
	}	
}

/* default elements | paragraph */
p {
	margin: 0 0 15px 0;
}

/* default elements | anchors */
a {
    display: block;
	height: 54px;
    width: 220px;
    margin: 15px auto 10px auto;
	background: rgba(44, 50, 15, 0.6);
    border: 2px solid #b7c95c;
	line-height: 54px;
	text-decoration: none;
	font-style: normal;
	color: #c1d45b;
}

a[href^="tel"],
a[href^="mailto"] {
	margin-top: 0;
	background: rgba(48, 54, 60, 0.7);
    border-color: #616d7a;
	color: #9fbebb;
}

a.small {
	font-size: 14px;
}

/* section | header */
header {
	padding: 125px 0 0 0;
}

header img {
    position: absolute;
	left: 5px;
	top: 5px;
}

@media screen and (max-width: 767px) {
    header {
        padding: 85px 0 0 0;
    }

    header img {
        max-width: 125px;
        left: 10px;
        top: 10px;
    }
}

/* section | main */
main {
	/* IE quirk */
	display: block;
	width: 270px;
	margin: 0 auto;
}

main > p:last-child {
    position: absolute;
    bottom: 6%;
    left: 50%;
	width: 220px;
    margin: 0 0 0 -112px;
}