
#gauth-widget {
	padding:9px;
	border:1px solid #ccc;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
#gauth-widget-frame {
	width:210px;
	height:300px; /* actual height will be reported back by the iframe */
}

/* Styles for social dialogue box */
#light_box_fade.LB-black-overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}

#gauth-light-box.LB-white-content {
    display: none;
    background-color: white;
    z-index: 1002;
}

#liteBoxClose{
	margin: 0.5em;
	float: right;
}
/* basic formatting/resets */
body {
	padding:0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	color:#272B2F;
	font-size:13px;
	line-height:18px;
}
a img {
	border:none;
}
a {
    color: #0074D4;
    text-decoration: underline;
}
a:focus, a:hover {
    text-decoration: none;
}
hr {
    background: none repeat scroll 0 0 #DDDDDD;
    border: medium none;
    clear: both;
    color: #DDDDDD;
    height: 0.1em;
    margin: 1.5em 0;
    width: 100%;
}
h1,h2,h3,h4,h5,h6 {
	margin-bottom:.5em;
	font-weight:500;
	font-family:"Lucida Grande", "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height:1.5;
}
h1 {
	font-size:2em;
}

/* blueForm-basic styling */
.blueForm-basic .textfield {
	margin:0px 0px .5em 0px;
}
.blueForm-basic .textfield label {
	font-weight:bold;
}
.blueForm-basic .textfield input {
	border:1px solid #bbb;
	background:#f6f6f6;
	padding:5px;
	display:block;
	margin:0; /* .5em .5em .5em 0 */
}
.blueForm-basic .textfield input:focus {
	background:#fff;
	border:1px solid #999;
}
.blueForm-basic .attn {
	display:block;
	font-size: 85%;
}

/* blueForm-basic validation styling */
.blueForm-basic .form-alert div {
	padding: 5px 5px 5px 27px;
	margin:.5em 0px 10px 0px;
	background-position:6px 6px;
	background-repeat:no-repeat;
	border:none;
	color: #272B2F;
}
.blueForm-basic .form-alert div a {
	color:#007CC3;
}
.blueForm-basic .error {
	background-image:url('../images/cross_circle.gif');
}
.blueForm-basic .attention {
	background-image:url('../images/exclamation.gif');
}

/* blueForm V2 */

/* start form width settings - fluid down to 670px wide */
.formLabel {
	width:100%; /* sets width of label column, set to 100% to vertically stack */
	line-height:26px; /* vertically aligns labels w/ form fields (adjust when changing body font size) */
	clear:both;
}
.formField {
	width:200px; /* sets width of input column, set to 100% to vertically stack */
}
.smallFormField {
    width:180px; /* sets width of input column, set to 100% to vertically stack */
}

.formField #name{
	text-transform: capitalize;
}
.formAlert {
	padding-left:200px; /* padding should be sum of formLabel and formField widths, remove and float left to vertically stack */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	line-height:16px;
}
/* end form width settings */

.smallFormAlert {
    padding-left:180px; /* padding should be sum of formLabel and formField widths, remove and float left to vertically stack */
}

.formTextField label, .formDropDown label {
	/*float:left;  label text alignment */
	margin-right:10px; /* spacing between label and input */
}

.createFormLabel {
    float:left;
	width:175px; /* sets width of label column, set to 100% to vertically stack */
    text-align: right;
    line-height:26px; /* vertically aligns labels w/ form fields (adjust when changing body font size) */
}

.createFormAlert {
	padding-left:375px; /* padding should be sum of formLabel and formField widths, remove and float left to vertically stack */
    /*float:left;*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
    line-height:16px;
}

.leftPad200 {
    clear: both;
    padding: 5px 0 5px 175px;
}

/* base resets */
abbr {
	border-bottom:none;
}
fieldset {
	border:0px;
	padding:0px;
	margin:0px;
}
legend {
	display:none;
}
button {
	margin-right:5px; /* really only needed for IE as it ignores white space */
}

/* base formatting */
.blueForm-v2 {
	float:left;
	width:100%;
}
.blueForm-v2 label {
	font-weight:bold;
}
.formTextField, .formDropDown, .formField, .formField span {
	float:left;
}
.formTextField, .formDropDown, .formRadio, .formCheckbox { /* margin/padding for each form item container */
	width:100%;
	margin:1px 0px;
	padding:5px 0px;
}
.formTextField input[type=text], .formTextField input[type=password], .formDropDown select
{
	width:195px; /* overall width of text fields and dropdowns, should be dictated by best practices (narrower than formField width for IE7) */
	float:left;
	border:1px solid #bbb;
	background:#f6f6f6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.smallFormTextField input
{
	width:175px; /* overall width of text fields and dropdowns, should be dictated by best practices (narrower than formField width for IE7) */
}
.formTextField input {
	padding:5px;
}
.formDropDown select {
	padding:4px 5px;
}
.formTextField input:focus, .formDropDown select:focus {
	background:#fff;
	border:1px solid #999;
}
.blueForm-v2 .attn {
	font-size:80%;
	width:100%; /* keeps span on it's own line in case of non-standard width input/selects */
}

/* alert styles */
.formAlert .alert {
	padding-left:30px;
	margin:.4em 10px 0px 0px;
	background-position:10px 0px !important; /* was 10px 20px */
	background-repeat:no-repeat !important;
}
.createFormAlert .alert {
	padding-left:30px;
	margin:.4em 10px 0px 0px;
	background-position:10px 0px !important; /* was 10px 20px */
	background-repeat:no-repeat !important;
}
.error, .attention, .information {
	margin-left:-10px;
	margin-right:-10px;
	padding-left:10px;
	padding-right:10px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}
.error {
	background-color:#ffcece;
}
.error .alert {
	background-image:url('../images/cross_circle.gif');
}
.attention {
	background-color:#fffbcc;
}
.attention .alert {
	background-image:url('../images/exclamation.gif');
}
.information {
	background-color:#dbe3ff;
}
.information .alert {
	background-image:url('../images/information.gif');
}
.success .alert {
	background-image:url('../images/tick_circle.gif');
}
.loading .alert {
	background-image:url('../images/ajax-loader-sm.gif');
	height:18px; /* needed to display bg image since there is no content in loading div */
}

/* VERROCCHIO BUTTONS */

/* miscellaneous resets */
a.btn1, a.btn2, a.btn3 {
	display:inline-block;
	text-decoration:none;
}
a.btn1:focus, a.btn2:focus, a.btn3:focus {
	outline:0; /* removes standard link focus outline */
}
input.btn1::-moz-focus-inner, input.btn2::-moz-focus-inner, input.btn3::-moz-focus-inner, button.btn1::-moz-focus-inner, button.btn2::-moz-focus-inner, button.btn3::-moz-focus-inner { /* removes standard button focus outline */
	border:0;
}

/* default buttons */
input.btn1, input.btn2, input.btn3, button.btn1, button.btn2, button.btn3 {
	padding-top:0px;
	padding-bottom:0px;
	cursor:pointer;
	height:32px; /* button height */
}
.btn1, .btn2, .btn3 {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	line-height:28px; /* button height minus top & bottom border */
	vertical-align:middle;
	white-space:nowrap;
	padding-left:8px;
	padding-right:8px;
	border-width:2px;
	border-style:solid;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	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.5))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0.5) 100%
	);
	-webkit-background-clip:padding-box;
	-moz-background-clip:padding-box;
	background-clip:padding-box;
	/* for IE padding stacking */
	width:auto;
	overflow:visible;
}
.btn1, .btn2, .btn3, a.btn1, a.btn2, a.btn3 {
	color:#fff;
}

/* small buttons */
input.btn-sm, button.btn-sm {
	height:20px; /* button height */
}
input.btn-sm, button.btn-sm, a.btn-sm {
	font-size:12px;
	line-height:18px; /* button height minus top & bottom border */
	padding-left:4px;
	padding-right:4px;
	border-width:1px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

/* large buttons */
input.btn-lg, button.btn-lg {
	height:48px; /* button height */
}
input.btn-lg, button.btn-lg, a.btn-lg {
	font-size:18px;
	line-height:42px; /* button height minus top & bottom border */
	padding-left:14px;
	padding-right:14px;
	border-width:3px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
}

/* 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; /* 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;
}

/* button icons */
.btn1 img, .btn2 img, .btn3 img {
	vertical-align:text-top;
	margin:0px 8px 0px 0px;
	border:none;
}
.btn1.btn-lg img, .btn2.btn-lg img, .btn3.btn-lg img {
	margin-right:14px;
}

/* disabled state */
.btn1.disabled, .btn2.disabled, .btn3.disabled {
	cursor:default;
	/* IE 8 */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	/* IE 5-7 */
	filter:alpha(opacity=50);
	/* Netscape */
	-moz-opacity:0.5;
	/* Safari 1.x */
	-khtml-opacity:0.5;
	/* Good browsers */
	-webkit-opacity:0.5;
	opacity:0.5;
}

/* core login component styles */
#login-component {
	position:relative;
}
#login-component #login-create-account, #login-component #login-state-default {
	margin-bottom:1em;
}
#login-component .textfield label {
    float:left;
	margin-right: 0.25em;
    display:block;
}
#login-component .textfield input {
	clear:left;
	width:190px; /* overwrite to set own width */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/* display:inline; allows element to pick up margin stying */
}
#login-state-returning .SSI-welcome-msg a {
    display:block;
}
#login-component #login-remember {
	margin-left:10px;
}
#login-component #login-remember-checkbox {
	display:inline;
}

/* default (myGarmin) login component styles */
#GAuth-component h2 {
	font-size:120%;
	font-weight:bold;
}
#login-component .textfield a, #login-state-returning .SSI-welcome-msg a, #login-component #login-remember {
    font-size:85%;
}
#login-component .support-tooltip {
    font-size:90%;
	line-height:16px;
	-moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#login-component .support-tooltip a {
	font-size:100%;
}
#GAuth-component .btn1 {
	font-size:12px; /* default button size too large for returning user buttons */
}
#GAuth-component .loaderImage{
	position: absolute; top: 45%; left: 45%	
}

/* desktop (24px) SSI icons */
#SSI-component .SSI-icons a {
	display:inline-block;
	height:24px;
	width:24px;
	background-image:url("../images/icon-SSI-md.png");
	background-repeat:no-repeat;
	margin-right:5px;
	margin-bottom:5px;
	text-decoration:none;
}
#loginFacebookSI {
    background-position:0 0;
}
#loginGoogleSI {
    background-position:0 -24px;
}
#loginYahooSI {
    background-position:0 -48px;
}
#loginTwitterSI {
    background-position:0 -72px;
}
#loginWindowsSI {
    background-position:0 -96px;
}
#loginLinkedInSI {
    background-position:0 -120px;
}
#loginRenrenSI {
    background-position:0 -144px;
}
#loginQQSI {
    background-position:0 -168px;
}
#loginSinaSI {
    background-position:0 -192px;
}
#loginKaixinSI {
    background-position:0 -216px;
}

/* All GAuth popups */
.GAuth-popup {
	/* background-image:url('https://my.garmin.com/static/m/g/gr-headerBarAlt-sm.jpg');
	background-repeat:repeat-x; */
}
#GAuth-header {
	position:relative;
	margin:0px 20px;
	height:72px;
}
#GAuth-header #logo {
	position:absolute;
	bottom:8px;
}
#GAuth-header #header-close {
	float:right;
	color:#fff;
	font-size:90%;
	margin-top:10px;
}
#GAuth-content {
	margin:20px;
}
.GAuth-popup .blueForm-v2 {
	padding-bottom:20px; /* since blueForm floats outside of parent */
}

/* GAuth popups content */
#SSI-link-account {
	text-align:center;
}
#SSI-link-account .btn-lg {
	width:350px;
	line-height:22px;
	font-size:95%;
	margin:6px 2px;
	white-space:normal; /* allows text in these buttons to wrap for translations */
	vertical-align:top;
	padding-bottom:18px;
}
#SSI-link-account .btn-lg h2 {
	margin-bottom:3px;
}
#SSI-link-account .btn-lg span {
	line-height:16px;
}
#SSI-sign-in iframe, #GAuth-reauthenticate iframe {
	width:210px;
}

/* Management Social page-specific styles */
#SSI-manage div {
	border-bottom:1px solid #ccc;
	margin-bottom:20px;
}
#SSI-manage div a {
	display:block;
	margin-bottom:20px;
}
#SSI-manage div img {
	float:left;
	margin:0px 10px 20px 0px;
}

/* mobile styles  */
@media all and (max-width: 400px) {

	#SSI-link-account .btn-lg {
		width:auto !important;
		height:auto;
		font-size:65%; /* scales down button text */
		padding:6px 8px;
		border-width:2px;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
	}
	#SSI-link-account .btn-lg h2 {
		display:inline;
		line-height:16px;
	}
	#SSI-link-account .btn-lg span {
		display:none;
	}
	/* mobile validation layout adjustments (bumps messages under inputs) */
	.formAlert {
		float:left;
		/*width:100%;*/
		padding-left:0px;
	}
	.formAlert .alert {
		padding-left:20px;
		background-position: 0px 0px !important;
	}
	#GAuth-header #logo {
		width:32.5%; /* image width(130px)/max-width(400px) */
	}

}

.clearfix {
    clear:both;
}
#GAuth-component {
	font-size: 11px;
	line-height: 150%;
	font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
	color: #485056;
}
#GAuth-component h2 {
	font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
	color: #333333;
}
#GAuth-component label {
	font-weight:normal;
}
#GAuth-component a {
	color:#C16427;
}
#GAuth-component #login-component {
	margin-left:10px;
	margin-right:10px;
}
#login-component .textfield a, #login-state-returning .SSI-welcome-msg a, #login-component #login-remember, #login-component .support-tooltip {
    font-size:100%;
}
#login-component .forgot-loginID .support-tooltip {
    width:225px;
}
#login-component .textfield {
	margin-bottom:1em;
}