/*
Designed by TripHitz for Team Whitetail Alberta (TeamWhitetailAlberta.com).
Author's Website: http://www.triphitz.com
*/

/* ############################### */
/* FONTS */
/* ############################### */
@font-face {
  font-family: "Permanent Marker", serif;
  font-weight: 400;
  font-style: normal;
}

/* ############################### */
/* HTML & BODY */
/* ############################### */
* {padding: 0; margin: 0;}
html, body { height: 100%; width: 100%;font-family: Verdana;color: #fffcca;font-size: 16px;}
body {-webkit-text-size-adjust: none;}
html {background: #000 url(../img/twa-bg.jpg) repeat;}

/* ############################### */
/* LINKS */
/* ############################### */
a img {border:none;}
a:link, a:visited {color:#fffcca;text-decoration:underline;outline: none;}
a:hover {color:#fff;text-decoration:underline;}
a:active {color:#fffcca;text-decoration:underline;}

/* ############################### */
/* TEXT & PARAGRAPHS */
/* ############################### */
p {padding-bottom:10px;line-height: 1.5;}

/* ############################### */
/* GENERAL USE */
/* ############################### */
.clear {clear: both;}
.fl {float: left;}
.fr {float: right;}
.alignright {text-align: right;}
.aligncenter {text-align: center;}
.alignleft {text-align: left;}
.nodisp,.hide {display: none !important;}

/* ############################### */
/* IMAGES */
/* ############################### */
img.border,#left img {border-radius: 3px;}
img.marginleft {margin-left: 7px;}
img.marginright {margin-right: 7px;}
img.margintop {margin-top: 5px;}
img.marginbottom {margin-bottom: 5px;}
img.bigmarginleft {margin-left: 25px;}
img.bigmarginright {margin-right: 25px;}
img.bigmargintop {margin-top: 25px;}
img.bigmarginbottom {margin-bottom: 25px;}
img.fl {margin-right: 18px;margin-bottom: 8px;}
img.fr {margin-left: 18px;margin-bottom: 8px;}
img.noborder {border: none !important;box-shadow: none !important;}

/* ############################### */
/* HEADINGS */
/* ############################### */
h1 { /* main page title */font-family:Permanent Marker;font-size:45px;font-weight: bold;color:#d64c00;text-transform: none;font-style: italic;margin-bottom: 0px;line-height:1.2;}
p + h1 {padding-top: 22px;}
ul + h1,table + h1 {padding-top: 40px;}
h2 {/* used immediately below title */font-size:20px;font-weight: bold;color:#ed8800;text-transform:uppercase;margin-bottom:15px;font-style: normal;margin-top:10px;padding-top: 0px;}
h3 {/* sub-sections */font-size: 18px;font-weight: bold;text-transform: uppercase;padding: 0px !important;margin-top: 25px;margin-bottom: 10px;color: #ed8800;}
h4 {/* bottom-of-page call to action */font-family:aquilinetworegular;font-size:34px;font-weight: bold;text-transform: none;padding: 0px !important;margin-bottom: 10px;color: #fffcca;text-align: center;font-style: italic;margin-top: 5px;}

/* ############################### */
/* DIVS */
/* ############################### */
#wrapper {width:100%;max-width: 980px;margin: 0 auto;background: rgba(0, 0, 0, 0.5);box-sizing: border-box;}
#navWrapper {width:100%;max-width: 980px;height: 43px;margin: 0 auto;background:url(../img/br.png) repeat;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background: rgba(0, 0, 0, 0.5)}
#header {width:100%;max-width: 980px;height: 340px;margin: 0 auto;}
#logo {width: 296px;height: 174px;position: absolute;background: url(../img/twa.png) no-repeat;margin-left:110px;margin-top:62px;cursor: pointer;}
#sheet {padding: 25px;padding-top:55px;padding-bottom: 45px;background: rgba(0, 0, 0, 0.5);box-sizing: border-box;overflow-y:hidden !important;}
#left {max-width:515px !important;float: left;text-shadow: 1px 1px 1px #111;box-sizing:border-box}
#phone {position: absolute;width: 370px;text-align: center;padding: 0px;color: #fff;font-size:14px;margin-left:23px;margin-top:323px;text-shadow: 2px 2px 2px #000;font-weight: bold;font-style: italic;}

/* ############################### */
/* MOBILE STYLING */
/* ############################### */
@media (max-width: 1024px) {
	#logo {
		position: relative;
		margin-left: 0;
		text-align: center;
		display: inline-block;
	}
	#sheet {
		padding-top: 0px;
	}
    #phone,#slogan,#frame,#twitter,#facebook,#instagram,#contactForm {
        display: none !important;
    }
	#left,#right {
		width: 100% !important;
		float: none !important;
		float:none !important;
		width:100% !important;
		margin-top:0px !important;
	}
	#nav {
		text-align: center;
	}
	.fr,.fl {
		float:none;
	}
	.alignleft {
		text-align: center;
	}
	.alignright {
		text-align: center;
	}
	.hide-mobile {
		display:none !important;
	}
	#cboxLoadedContent img {max-width: 85vw !important;max-height:85vh !important; width: auto !important; height: auto !important;}
	.sidebox img,.sidebox {
		width: 100% !important;
		padding: 0px !important;
		padding-top:10px !important;
		z-index: 999 !important;
	}
}
@media (max-width: 600px) {
	#nav a {
		margin-right:8px !important;
	}
	.home-link {
		display: none !important;
	}
	.albumTitle {
		display: none !important;
	}
}

/* ############################### */
/* MENU TITLES */
/* ############################### */

/* Titles for larger screens */
.home-link:before {
    content: "Welcome";
}

.facts-link:before {
    content: "Hunting Facts";
}

.gear-link:before {
    content: "Recommended Gear";
}

.photos-link:before {
    content: "Whitetail Pics";
}

.contact-link:before {
    content: "Contact TWA";
}

/* Shorter titles for screens smaller than 1024px */
@media (max-width: 1024px) {
    .home-link:before {
        content: "Home";
    }

    .facts-link:before {
        content: "Facts";
    }

    .gear-link:before {
        content: "Gear";
    }

    .photos-link:before {
        content: "Pics";
    }

    .contact-link:before {
        content: "Contact";
    }
}

/* ############################### */
/* SLOGAN BOX */
/* ############################### */
#sloganWrapper {width:100%;max-width: 500px;height:28px;margin-left:23px;margin-top:265px;position: absolute;z-index: 888 !important;}
#slogan {position:absolute;width: 366px;height: 46px;background: url(../img/slogan.png) center center no-repeat;margin-top:-8px;margin-left:61px;}

/* ############################### */
/* SOCIAL ICONS */
/* ############################### */
#twitter {position: absolute;width: 32px;height: 32px;background: url(../img/t.png) no-repeat;margin-left:823px;margin-top:18px;cursor: pointer;opacity: 0.7;}
#facebook {position: absolute;width: 32px;height: 32px;background: url(../img/f.png) no-repeat;margin-left:866px;margin-top:18px;cursor: pointer;opacity: 0.7;}
#instagram {position: absolute;width: 32px;height: 32px;background: url(../img/i.png) no-repeat;margin-left:909px;margin-top:18px;cursor: pointer;opacity: 0.7;}
#twitter:hover,#facebook:hover,#instagram:hover  {opacity: 1.0;}
#twitter:active,#facebook:active,#instagram:active {opacity: 0.7;}

/* ############################### */
/* SIDEBAR STUFF */
/* ############################### */
#right {width:350px;float: right;margin-top:35px;}
.sidebox {width: 320px;border-radius: 12px;padding: 15px;}
.wbg {background: url(../img/br.png) repeat;}
.sidebox img {max-width: 320px !important;border-radius: 3px;box-shadow:2px 2px 10px #000000;}
.sidebox p:last-child {margin-bottom: 0px;padding-bottom: 0px;}
div.sidebox + div.sidebox {margin-top:25px;}
span.signature {display: block;margin-top: 8px;font-weight: bold;font-style: italic;}
span.signature:before {content: "- ";}

/* #################################### */
/* FOOTER */
/* #################################### */
#footerWrapper {width:100%;max-width: 980px;height:88px;min-height:88px;max-height:88px;background:url(../img/br.png) repeat;border-top-left-radius:12px;border-top-right-radius:12px;}
#footer {padding-left:45px;padding-right:45px;font-size:11px;color: #fffcca;text-align: center;padding-top:13px;line-height: 2;text-shadow: 1px 1px 1px #000;padding-bottom: 0px;}
#footer a {color: #fffcca;text-decoration: none;font-weight: normal;}
#footer a:hover {text-decoration: underline;}

/* ############################### */
/* NAVIGATION MENU */
/* ############################### */
#nav ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;margin-top:2px;}
#nav a{float:left;text-decoration:none;color:#fff;padding:9px;text-transform: uppercase;margin-right:16px;text-shadow: 2px 2px 2px #000;font-weight: bold;font-size: 16px;border-radius: 3px;}
#nav ul li {display:inline-block;padding: 0;margin: 0;}
#nav ul li:last-child {background: none !important;}
#nav ul li:first-child a {margin-left:16px;}
#nav a:hover {color: #ed8800;}
#nav a:active {background:none;color: #d64c00;}

/* #################################### */
/* SLIDESHOW */
/* #################################### */
#frame {width: 481px;height: 309px;position: absolute;background: url(../img/frame.png) no-repeat;margin-left:487px;margin-top:60px;}
#slideshow {position:relative;width:387px;height:240px;max-width: 387px;max-height: 240px;z-index: 0;margin-left:68px;margin-top:22px;}
#slideshow img {position:absolute;top:0;left:0;z-index:8;border-radius: 3px;}
#slideshow img.active {z-index:10;}
#slideshow img.last-active {z-index:9;}

/* ############################### */
/* TABLES AND ULs */
/* ############################### */
table {border-collapse: collapse;}
th, td {padding: 0;}
table {border-collapse: collapse;}
#sheet ul,#sheet table {list-style: none;padding-top: 10px;line-height: 22px;width: 100%;}
#sheet ul li,#sheet table tr td {padding-top: 8px;padding-bottom: 8px;padding-left: 5px;font-weight:normal;border-bottom: 1px dashed #fffcca;color: #fffcca;padding-right: 7px;}
#sheet ul li:first-child,#sheet table tr:first-child td {font-weight: bold;font-size: 118%;text-transform: uppercase;color: #fffcca;}
table.noheading tr:first-child td {font-weight: normal !important;font-size: 100% !important;text-transform: none !important;color: #000 !important;}
#sheet ul li:before {content: "↠ ";}
#sheet ul li:first-child:before {content: "";}
#sheet table tr:first-child td {padding-top: 17px;}
#sheet ul li:last-child,#sheet table tr:last-child td {border-bottom: none;}
ul + table {margin-top:15px;}
table + ul {margin-top: 15px;}
p + ul,p + table,table + p {margin-top:0px;}

/* ############################### */
/* GALLERY */
/* ############################### */
.photoGallery {padding-top: 15px;}
.imgrow {margin-top: 13px;}
.imgrow img {border:5px #fff solid;margin-right:13px;}
.lastpic img {margin-right: 0px;}
.chronoAlbumLinks {text-transform:capitalize;font-weight: bold;color:#fff;padding-bottom:0px;font-size: 110%;text-align: right;}
.chronoAlbumLinks a {background: #ed8800 url(../img/translucent_cam.png) 6px center no-repeat;padding:8px;border-radius:3px;text-decoration: none;padding-left: 26px;margin-right: 3px;}
.chronoAlbumLinks a.currentLink,.chronoAlbumLinks a:hover {background: #e6e6e6 url(../img/cam.png) 6px center no-repeat;color:#000;padding-left: 26px;}
.albumTitle {font-size: 145%;font-weight: bold;position: absolute;margin-top:-10px;color: #ed8800;text-shadow: 1px 1px 1px #111;}
.imgcount {position: absolute;font-size: 70%;margin-top: -18px;font-style: italic;text-shadow: 1px 1px 1px #111;}
.imgcount:after {content:" pictures in this album"}

/* #################################### */
/* CONTACT FORM */
/* #################################### */
table.contact td {vertical-align: top;}
#contactForm div.inputDiv{text-align: right;padding-bottom:8px;}
#contactForm label {display: inline-block;text-transform: uppercase;vertical-align:top;font-weight:bold;margin-right:3px;margin-top: 4px;font-size: 12px;}
#contactForm label.nopadding {margin-right: 0px;display: block;}
#contactForm label.notop {margin-top: 0px;}
#contactForm input[type=text] {width:118px;height:22px;border-radius: 3px;border: 2px #ed8800 solid;font-size:13px;font-weight:bold;color:#000;padding:2px;background: #fbfbfb;}
#contactForm textarea {width:282px;height:125px;border-radius: 3px;border: 2px #ed8800 solid;font-size:13px;font-weight:bold;color:#000;padding:2px;background: #fbfbfb;}
#contactForm .submitButton {min-width:100px;float: right;}
div#formErrors {background: url(../img/br.png) repeat;padding:12px;padding-left: 14px;color: #ff0000;font-weight: normal;font-size: 12px;text-align:left;font-style: italic;margin-bottom:5px;border-radius: 2px;line-height:15px;}
div#formErrors h3 {margin-top: 3px;font-size: 13px;margin-bottom:1px;}
div#formErrors p {padding-bottom: 4px;}