/* 
--------------------------------------------------------------
	Garmin Skin Styles
	
	1) Typography
		a) General
		b) Market Pages
		c) Market Category Pages
	2) Layout
		a) General 
			i) Form elements
		b) Market General
			i) On the Trail
			i) In the Air
		c) Market Category General
			i) On the Trail
			ii) In the Air
	3) Main nav
		a) Header
		b) Footer
	4) Buttons

------------------------------------------------------------------ 
*/

/* 
------------------------------------------------------------------------------------------------
 										Section 1: TYPOGRAPHY
------------------------------------------------------------------------------------------------ 
*/

/* Section 1a - General Type Styles */
a {text-decoration: none; color: #007cc3; border-bottom: 1px solid transparent; 
	-webkit-transition: all ease .37s; -moz-transition: all ease .37s; transition: all ease .37s;}
a:hover {color: #3396cf;}
a:visited {color: #007cc3;}

h1 {color: #222; text-shadow: 0 1px 1px rgba(0,0,0,.8);}
h1 a:visited, h1 a:link {color: #222;}
h2 { color: #555; text-shadow: 0 1px 0 rgba(255,255,255,.35); border-bottom: 1px dotted #888;}
h2 span {color: #222;}
h3, h6 {color: #555;}
h4, h5 {color: #222;}

p, ul li, div {color: #222;}
p a:hover, li a:hover, span a:hover, a.to-the-top:hover, a.blog-link:hover {border-bottom: 1px solid #3396cf;}

small {color: #555;}
ul li { list-style-image: url(http://static.garmincdn.com/shared/us/m/g/on-the-trail/bullet-icon-blue.png); }


.suckerfish a {-webkit-transition: none; -moz-transition: none; transition: none;}
.suckerfish a:hover {border-bottom: none;}

.ebony a {color:#222; border: none;}
.ebony a:hover {text-shadow: 0 0 7px rgba(20,25,25,.7); border: none;}
.ebony a:visited {color:#222;}
.ivory a{color:#fff; border: none;}
.ivory a:hover {text-shadow: 0 0 7px rgba(255,255,255,.7); border: none;}
.ivory a:visited {color:#fff;}
ul.mkt-subnav.ebony li a:hover, ul.mkt-subnav.ivory li a:hover {text-shadow: none;}

/* Section 1b - Market Page Type Styles */

/* Tab Area */
ul.tab-nav li { border-bottom: solid 1px #bfb8af; }
ul.tab-nav li a { color: #3d3d3d; border: none;}
ul.tab-nav li a:hover, ul.tab-nav li a.current { color: #6c6c6c; border: none;}

.tab-content .copy h6 { color: #222; }

/* Suggestive Nav */
.suggestive-container { background-color: rgba(126,126,126,.7); 
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
}
.suggestive { background-color: #ececec;
	-webkit-box-shadow: 0 -1px 0 0 rgba(255,255,255,.95), 0 1px 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow: 0 -1px 0 0 rgba(255,255,255,.95), 0 1px 1px 0 rgba(0,0,0,.6);
	box-shadow: 0 -1px 0 0 rgba(255,255,255,.95), 0 1px 1px 0 rgba(0,0,0,.6);
}
.suggestive > div {  border-right: solid 1px rgba(0,0,0,.2); border-left: solid 1px rgba(255,255,255,1); }
/* Being that the separating borders are created with CSS3, we can use CSS3 psuedo selectors here without worrying about IE */
.suggestive > div:first-child { border-left: none; }
.suggestive > div:last-child { border-right: none; }

/* Section 1c - Market Category Page Type Styles */

ul.importantlinks {border-top: 1px dotted #ccc;}
ul.importantlinks li {list-style-image: none;}
/* 
------------------------------------------------------------------------------------------------
 										End Section 1: TYPOGRAPHY
------------------------------------------------------------------------------------------------ 
*/

/* 
------------------------------------------------------------------------------------------------
 										Section 2: Layout
------------------------------------------------------------------------------------------------ 
*/

/* Section 2a - General Layout */

body {background-color: #cfcfcf;}

/* Section 2a i - Forms */
input {
	color: #aaa;
	outline: none;
	border: 2px solid #ccc;
}
input:focus {
	outline: none;
	color: #888;
}
.search-page input {
	border-radius: 8px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
}
.search-page input:focus {
	box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
	box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
	box-shadow: inset 0 1px 5px rgba(0,0,0,.6);
}
.search-page button {color: #007cc3; background: transparent; border: none; border-left: 1px solid silver;}
.search-page button:hover {color: #3396CF;}
input.newsletter {
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);	
}
input.newsletter:focus {
	-webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
	-moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
	box-shadow: inset 0 1px 5px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.4);
}

/* Section 2b - Market Page Layout Styles */

.content-1 {
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.6);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.6);
	box-shadow: 1px 1px 1px rgba(0,0,0,.6);
	background-position: center top;
	background-repeat: no-repeat;
}
.content-2 {
	background-image: linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -o-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(191,191,191)),
		color-stop(1, rgb(248,248,248))
	);
}

/* Section 2b i - On the Trail fallbacks */
body.onthetrail { background-color: #ccc2b4; }
body.onthetrail .content-1  { background: #ead597 url('http://static.garmincdn.com/shared/us/m/g/on-the-trail/tile-bg.jpg') repeat left top; }
body.onthetrail.market .content-1 {height: 476px;}
body.onthetrail .content-2 { background-color: #ccc2b4;
	background-image: -moz-radial-gradient(50% 0%, ellipse cover, #edeae5, #ccc2b4 33%);
	background-image: -webkit-radial-gradient(50% 0%, ellipse cover, #edeae5, #ccc2b4 33%);
	background-image: -o-radial-gradient(50% 0%, ellipse cover, #edeae5, #ccc2b4 33%);
	background-image: -ms-radial-gradient(50% 0%, ellipse cover, #edeae5, #ccc2b4 33%);
	background-image: radial-gradient(50% 0%, ellipse cover, #edeae5, #ccc2b4 33%);
}
body.onthetrail h1 a, body.onthetrail h2, body.onthetrail h3, body.onthetrail h4, body.onthetrail h5 { color: #504e4c; }
body.onthetrail h2, body.onthetrail h3, body.onthetrail h5 { text-shadow: 0 1px 0 rgba(255,255,255,.3); }

/* Section 2b ii - In the Air fallbacks */
body.intheair { background-color: #cfcfcf; }
body.intheair .content-1  { background: #3396cf url('http://static.garmincdn.com/shared/us/m/g/in-the-air/ita-bg-sky.jpg') center top no-repeat; }
body.intheair .content-2 { background-color: #cfcfcf;
	background-image: linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -o-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(191,191,191) 0%, rgb(248,248,248) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(191,191,191)),
		color-stop(1, rgb(248,248,248))
	);
}


/* Section 2c - Market Category Page Layout Styles */
ul.mkt-subnav li a:hover, ul.mkt-subnav li a.active {
	background-color:rgba(0,0,0,.25);
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5) , 0 1px 0 0 rgba(255,255,255,.35);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5) , 0 1px 0 0 rgba(255,255,255,.35);
	box-shadow: inset 0 0 1px rgba(0,0,0,.5) , 0 1px 0 0 rgba(255,255,255,.35);
}


/* Section 2c i - On the Trail general category styles */
body.onthetrail.category .content-1 { background-color: #ead597; }
body.onthetrail.category .hero-content { background-color: rgba(44,38,27,.93);}
body.onthetrail ul.mkt-subnav li.back { border-bottom-color: rgba(44,38,27,.93);}
body.onthetrail ul.tertiary-nav li a, body.onthetrail ul.importantlinks li a { color: #fff; border: none; }
body.onthetrail ul.tertiary-nav li a:hover, body.onthetrail ul.importantlinks li a:hover {text-shadow: 0 0 7px rgba(255,255,255,.7); border: none;}
body.category .main-banner h3 { 
	-webkit-box-shadow: 0 2px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
	-moz-box-shadow: 0 2px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
	box-shadow: 0 2px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35); 
	color: #fff; background-color: #3396cf; font-size: 28px; }
body.category .main-banner p { background-color: #f3f3f3; color: #222;
	-webkit-box-shadow: 0 2px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.85);
	-moz-box-shadow: 0 2px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.85);
	box-shadow: 0 2px 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.85);
}
body.category .main-banner .banner-text h3:after, body.category .main-banner .banner-text p:after { background-color: #3396CF; }
body.category .main-banner .banner-text p:after { background-color: #fff; }

/* Section 2c ii - In the Air general category styles */
body.intheair ul.mkt-subnav li.back { border-bottom-color: #131313;}
body.category.intheair.forwardfit ul.mkt-subnav li.back {border-bottom-color: rgba(0,0,0,.5);}
body.intheair.category .content-1 { background-color: #3396cf; }
body.intheair.category .hero-content {background-color: #030303;
	background-image: linear-gradient(bottom, rgb(3,3,3) 0%, rgb(19,19,19) 100%);
	background-image: -o-linear-gradient(bottom, rgb(3,3,3) 0%, rgb(19,19,19) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(3,3,3) 0%, rgb(19,19,19) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(3,3,3) 0%, rgb(19,19,19) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(3,3,3) 0%, rgb(19,19,19) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(3,3,3)),
		color-stop(1, rgb(19,19,19))
	);
}
body.intheair ul.tertiary-nav li a, body.intheair ul.importantlinks li a { color: #fff; border: none; }
body.intheair ul.tertiary-nav li a:hover, body.intheair ul.importantlinks li a:hover {text-shadow: 0 0 7px rgba(255,255,255,.7); border: none;}
/* 
------------------------------------------------------------------------------------------------
 										End Section 2: Layout
------------------------------------------------------------------------------------------------ 
*/

/* 
------------------------------------------------------------------------------------------------
 										Section 3: Main Navigation
------------------------------------------------------------------------------------------------ 
*/ 

/* Section 3a - Header styles (replace with new header nav css at launch) */

.header {background-color:transparent;}
.suckerfish a { display: block; color: #272B2F;}
.suckerfish li {list-style: none;}
.suckerfish li li { background-color:#F9F9F8;  border-color:#CCC;}
.suckerfish li:hover, .suckerfish li.sfhover { background:#F0F0ED; }
ul.suckerfish li a.hd-main { color:#EFEFEF; background:#000; border-right:1px solid #FFF; border-bottom: none; }
ul.suckerfish li a.hd-main.last { border:0; }
ul.suckerfish li.hd-main-li { background:#000; }

/* Section 3b - Footer (replace with new footer nav css at launch) */

.content-2 { padding-bottom: 1px; 
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.45);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.45);
	box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.footer-container { padding-top: 1px; margin-top: 8px;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
body .footer-container { background-color: rgba(255,255,255,.48); }
.footer { margin-top: 20px; }
 

/* 
------------------------------------------------------------------------------------------------
 										End Section 3: Main Navigation
------------------------------------------------------------------------------------------------ 
*/

/* 
------------------------------------------------------------------------------------------------
 										Section 4: Buttons
------------------------------------------------------------------------------------------------ 
*/

.btn1, .btn2, .btn3 {
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.25, rgba(255,255,255,0)),
		color-stop(1, rgba(255,255,255,0.4))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0.4) 100%
	);
}
.btn1, .btn2, .btn3, a.btn1, a.btn2, a.btn3 {color:#fff;}

/* button 1 color */
.btn1 {text-shadow:0px 0px 2px #007cc3; /* med blue */}
.btn1:hover {background-color:#3396cf; /* light blue */}
.btn1, .btn1:active, .btn1.disabled:hover  {background-color:#007cc3; /* med blue */}
.btn1, .btn1.disabled:focus {border-color:#007cc3; /* med blue */}
.btn1:focus {border-color:#134561; /* dark blue */}

/* button 2 color */
.btn2 {text-shadow:0px 0px 2px #aab200; background-color: #aab200; /* med green */}
.btn2:hover {background-color:#bbc133; /* light green */}
.btn2, .btn2:active, .btn2.disabled:hover  {background-color:#aab200; /* med green */}
.btn2, .btn2.disabled:focus {border-color:#aab200; /* med green */}
.btn2:focus {border-color:#858c00; /* dark green */}

/* button 3 color */
.btn3 {text-shadow:0px 0px 2px #ff9d00; /* med orange */}
.btn3:hover {background-color:#ffb133; /* light orange */}
.btn3, .btn3:active, .btn3.disabled:hover  {background-color:#ff9d00; /* med orange */}
.btn3, .btn3.disabled:focus {border-color:#ff9d00; /* med orange */}
.btn3:focus {border-color:#995e00; /* dark orange */}

/* secondary colors */
.btn-sec {
	text-shadow: 0px 0px 2px #fff;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgba(255,255,255,0)),
		color-stop(.75, rgba(255,255,255,1))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,1) 75%
	);
}
.btn-sec, a.btn-sec {color:#555;}
.btn-sec:hover {background-color:#fff;}
.btn-sec, .btn-sec:active, .btn-sec.disabled:hover {background-color:#e5e5e5;}

/* disabled state */
.btn1.disabled, .btn2.disabled, .btn3.disabled {
	cursor:default;
	/* Netscape */
	-moz-opacity:0.5;
	/* Safari 1.x */
	-khtml-opacity:0.5;
	/* Good browsers */
	-webkit-opacity:0.5;
	opacity:0.5;
}
/* 
------------------------------------------------------------------------------------------------
 										End Section 4: Buttons
--------------------------------------------------------------------------------------- */