/* ==|== common page styles =====================================================
   Author: Hugh Guiney
   ========================================================================== */

#auth > .options > li:first-child:after
{
	content:' | ';
	left:.5em;
	position:relative
}

#branding > hgroup
{
	margin-bottom:.25em;
	margin-left:6.5rem;
	text-align:left;
	white-space:nowrap
}

#branding > hgroup > h1
{
	font-family:"Arial Rounded MT Bold", sans-serif;
	font-size:3rem;
	font-weight:normal
}

#branding > hgroup > h2
{
	font-size:1.4rem;
	font-weight:normal
}

#branding
,#branding > *
,#branding:hover
,#branding:hover > *
,#branding:visited
,#branding:visited > *
,#branding:active
,#branding:active > *
,#parent-site > a:hover
{
	color:whiteSmoke;
	fill:whiteSmoke;
	text-decoration:none
}

#branding,[role="contentinfo"] > .content > *
,.options > li
,.cta a
,a.cta
{
	display:inline-block
}

#emblem
{
	float:left;
}

#search > form
{
	position:relative;
	width:100%
}

#search > form > [type="image"]
{
	padding:.6em;
	position:absolute;
	right:.2em;
	top:2px;
	top:.2rem;
}

.boxshadow.rgba [role="navigation"] > ul > li > form > [type="search"]
,.boxshadow.rgba [role="navigation"] > ul > li > form > [type="search"]:focus
{
	transition-duration:.25s;
	transition-property:box-shadow
}

.boxshadow.rgba [role="navigation"] > ul > li > form > [type="search"]:focus
{
	box-shadow:inset 2px 2px 4px rgba(10,10,10,.3), 0 0 27px rgba(245,245,245,.5);
	outline:none
}

.cta
, .cta a
, [role="navigation"] a
, #parent-site > a
, [role="contentinfo"] a
, a:hover
{
	text-decoration:none
}

/*[lang="en-US"]*/ abbr.trunc:after
{
   content: '. '
}

p.cta
{
   margin-bottom: 0;
}

.social
{
	margin-left:1.5em
}

.social > li
{
	display:inline-block;
	margin:0 .125em;
	vertical-align: top;
}

.social:before
{
	content:'Find Runkeeper on: '
}

.total3 > *
{
	width:100%
}

[role="banner"]
{
	background:rgb(10,10,10) url(../../images/healthgraph/black-grain-tile.png);
	background:linear-gradient(top,hsla(0,0%,96%,0.125) 0 hsla(0,0%,0%,0) 75% hsla(0,0%,4%,0.75) 100%), url(../../images/healthgraph/black-grain-tile.png);
	box-shadow:0 2px 5px rgba(10,10,10,.5);
	padding: 14px 0 8px;
	position:relative;
	width:100%
}

[role="banner"] > .content
{
	max-width: 90%;
}

body > .content
{
   position: relative;
   min-height: 100%;
   height: auto;
}

[role="contentinfo"]
{
	background: white url(../../images/healthgraph/contentinfo-bg.png) top no-repeat;
	font-size: small;
	padding: 1.5em 0 .75em;
	text-align: left;
	bottom: 0;
   width: 100%;
   position: relative;
}

[role="contentinfo"] a:hover
{
	color:#2F8CCC
}

[role="contentinfo"] nav li:after
{
	content:' | '
}

[role="contentinfo"] nav li:last-child:after
{
	content:''
}

[role="contentinfo"]
,[role="contentinfo"] a
{
	color:#666;
}

[role="navigation"]
{
	font-weight:bold
}

[role="navigation"] .options li
{
	margin-left:.5em;
	margin-right:.5em
}

[role="navigation"] > ul
{
	display:table
}

[role="navigation"] > ul > li > form > [type="search"]
{
	border:none;
	border-radius:.3em;
	box-shadow:inset 2px 2px 4px rgba(0,0,0,.3);
	padding:.4em 2.25em .4em .4em
}

[role="navigation"] a
,#parent-site > a
{
	color:whiteSmoke;
	opacity:.5;
	transition-duration:.25s;
	transition-property:opacity
}

[role="navigation"] a:hover
,#parent-site > a:hover
{
	opacity:1;
	transition-duration:.25s;
	transition-property:opacity
}

[role="navigation"] li
{
	display: inline-block;
	margin: 0 .75em;
	vertical-align: middle;
}

[role="navigation"] li > a
,[role="contentinfo"] > .content > nav li > a
{
	padding:.25em
}

[role="navigation"]
,[role="contentinfo"] > .content > nav
{
	line-height:2;
	margin-bottom:0
}

[role="navigation"]
, [role="navigation"] a:hover
,#parent-site > a:hover
,#home [role="main"] a
,#home [role="main"] a:hover
,#home [role="main"] a:visited
,#home [role="main"] a:active
{
	color:whiteSmoke
}

body
{
	font-family:"Helvetica Neue", sans-serif;
	font-weight:300;
	text-shadow:1px 1px 2px rgba(10,10,10,.0125)
}

a[title]
{
	cursor: inherit;
}

.cta.button
, .cta .button
, .cta[role="button"]
, .cta [role="button"]
, [type="submit"]
, #auth > details > ul > li > a:hover /* Profile Drop-down highlight */
{
	background: #0f81c6;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(203,86%,42%,1)), color-stop(100%,hsla(224,62%,31%,1)));
	background:
		linear-gradient(
			top,
			hsla(203, 86%, 42%, 1) 0%,
			hsla(224, 62%, 31%, 1) 100%
		)
	;
}

.cta.button
, .cta .button
, .cta[role="button"]
, .cta [role="button"]
, [type="submit"]
{
	border: 1px solid #013681;
	padding: 0.4em 1.25em;
	color: rgb(245, 245, 245);
	border-radius: 2em;
	font-weight: bold;
	text-shadow: -1px -1px 0 rgba(10, 10, 10, .5);
	cursor: pointer;
}

.cta.button:hover
, .cta .button:hover
, .cta[role="button"]:hover
, .cta [role="button"]:hover
, [type="submit"]:hover
{
   background: #1f4678; /* hsla(214, 74%, 47%, 1) 50% */
   background:
      linear-gradient(
         top,
         hsla(203, 86%, 52%, 1) 0%,
         hsla(224, 62%, 41%, 1) 100%
      )
   ;
}

[type="submit"]:disabled
, [type="button"]:disabled
, [type="cancel"]:disabled
, [role="button"][aria-disabled="true"]
, [type="submit"]:disabled:hover
, [type="button"]:disabled:hover
, [type="cancel"]:disabled:hover
, [role="button"][aria-disabled="true"]:hover
{
   background: #c6c6c6;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,78%,1)), color-stop(100%,hsla(0,0%,50%,1)));
   background: linear-gradient(top,  hsla(0,0%,78%,1) 0%,hsla(0,0%,50%,1) 100%);
   cursor: not-allowed;
}

code:not(.informal)
, samp:not(.informal)
{
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
}

p code:not(.informal)
, p samp:not(.informal)
, li code:not(.informal)
, li samp:not(.informal)
{
	font-size: inherit;
	line-height: inherit;
}

code.format var
{
	font-style: normal;
}

code mark
, samp mark
{
	background-color: transparent;
	font-style: normal;
}

pre.example
, .example pre
, [id^="example"] pre
{
	background: rgb(233, 233, 233);
	padding: 1em;
	border: 1px solid rgb(210, 210, 210);
	text-align: left;
	overflow: auto;
	white-space: pre-line;
	tab-size: 2;
}

.example > figcaption
, [id^="example"] figcaption
{
  font-weight: bold; 
}

[id^="example"] dl
{
	max-width: 100%;
}

.example dd
, [id^="example"] dd
{
   margin-left: 0;
}

details
, summary
{
	appearance: none;
}

summary::-webkit-details-marker
{
	display: none;
}

table
{
	border-collapse: separate;
	border-spacing: 2px;
	margin-top: 1.5em;
	width: 90%;
}

caption
{
   text-align: left;
   margin-bottom: .75em;
   /*font-weight: bold;*/
   font-style: italic;
}

table abbr[title]
, code abbr[title]
, samp abbr[title]
{
   border-bottom: none;
}

abbr.placeholder
{
   font-style: normal;
}

caption > dl > *
{
   display: inline-block;
}

caption > dl > dt
{
   margin-right: .25em;
}

caption > dl > dt:after
{
   content:': ';
}

caption > dl > dd
{
   margin-left: 0;
}

thead
{
	text-align: center;
}

.button[title]
, [role~="button"][title]
{
	cursor: pointer;
}

[type="url"]
{
	width: 26em;
	max-width: 100%;
}

input.initial:invalid
{
	background-color: inherit;
}

abbr[title="Required field"]
{
	color:#cc0000;
	font-weight: bold;
	border-bottom: none;
}

th
{
	background-color: #e1f0f9;
	color: #114e76;
	font-weight: normal;
}

th
, td
{
	padding: 1em;
}

dt
{
   margin-bottom:.75em;
}

dt
, dfn
{
   font-weight: bold;
}

dfn
{
   font-style: normal;
}

.toc
, tbody > tr:nth-child(even) > td
{
	background-color: #f6fafd;
}

.toc
{
	color: #57a2d3;
	padding: 1.25em 2.25em;
   margin-bottom: 1.5em;
}

.toc > :last-child
{
   margin-bottom: 0;
}

div[role="heading"]
{
   margin-bottom: 1em;
}

[role="main"] li > p
, [role="main"] li > [role="heading"]
{
   margin-bottom: .5em;
}

[role="main"] > .content > :last-child
{
   margin-bottom: 3em;
}

.steps
{
   margin-bottom: 1.5em;
}

[role="main"] .steps > li > ul
{
   margin-left: 1.5em;
}

[role="main"] .steps > li > ul > li
{
   margin-bottom: .5em;
}

[role="main"] .steps > li
{
    margin-bottom: 1.5em;
}

* + section
, [role="main"] * + hgroup
{
	margin-top: 1.5em;
}

ul > ul
, ol > ul
, ul > ol
{
   
}

.msg
{
   margin: 1.5em 0;
}

.msg mark
, .msg mark > var
{
   font-style: normal;
   background: none;
}

.msg > [role="heading"]
{
   margin-bottom: .25em;
}

.msg.warning > [role="heading"]
, .msg.warning mark
{
   color:#f69f2e;
}

.msg.warning
{
   border: 4px solid #ffeed8;
   padding: 1em;
}

.msg.warning > :last-child
{
   margin-bottom: 0;
}

.js .modal {
   min-width: 100%;
   width:100%;
   min-height:100%;
   height:100%;
   position: fixed;
   z-index: 5;
   top:0;
   left:0;
   background:rgba(0, 0, 0, .5);
}

.js .modal > .msg
{
   position: relative;
}

.js .modal > .msg > [role="heading"]
{
   background-color: white;
}

.js .modal > .msg > [role="heading"]
{
   padding: 1.25em 1em;
}

.js .modal > .msg > .unit
{
   padding: .25em 3em;
}

.js .modal > .msg > p.cta
{
   padding: 0 3em 1.5em;
} 

.js .x
{
   position: absolute;
   right: -11px;
   top: -13px;
   background-color: #0A0A0A;
   display: inline-block;
   color: white;
   z-index: 100;
   text-align: center;
   margin: 0;
   vertical-align: super;
   text-decoration: none;
   border-radius: 21px;
   font-weight: bold;
   border: 2px solid white;
   height: 30px;
   width: 30px;
   font-size: 1.3em;
   line-height: 1.1;
   box-shadow: 0 0 20px rgba(10,10,10,.5);
}

.js .modal > .msg
{
   z-index: 1;
   width: 48.75em;
   max-width: 90%;
   margin:13% auto;
   box-shadow: 0 2px 20px rgba(10, 10, 10, .75);
   background-color: #e9f3f9;
}

.js .modal > .msg textarea
{
   width: 100%;
   padding: .75em;
   font-size: 13px;
   font-family: monospace;
   margin-bottom: .75em;
}

.title > hgroup > h2
{
   text-align: left;
}

hgroup code
, hgroup code:not(.informal) /* specificity required for overwrite */
{
   font-size: inherit;
}

a[href^="#"].cta:before
{
   content: url(../../images/healthgraph/jump-link-arrow.png);
   margin-right:.5em;
}

.svg a[href^="#"].cta:before
{
   content: url(../../images/healthgraph/jump-link-arrow.svg);
}

@media only screen and (max-width: 64em) {
   th
   , td
   {
      display: block;
      /*width: 90%;*/
   }
   
   table > thead
   {
      display: none;
   }
   
   table > tbody > tr > *:before
   {
      font-weight: bold;
      margin-right: .25em;
   }
}

@media only screen and (min-width: 35em) {
	pre.example
	, .example pre
	, [id^="example"] pre
	{
		white-space: pre-wrap;
	}
	
	[role="main"] p
	, [role="main"] ul
	, [role="main"] ol
	, [role="main"] dl
	, [role="main"] address
	/*, [role="main"] table*/
	{
		text-align: left;
		/*margin-left: 0;
		margin-right: 0;*/
	}
	
	[role="main"] table
	, [role="main"] figure
	{
	  margin-left: 0;
	  margin-right: 0;
	}
	
	.csshyphens [role="main"] p
	{
		hyphens:auto;
		text-align:justify
	}
	
	.csshyphens [role="main"] header p
	{
		text-align: inherit;
	}
}

@media only screen and (min-width: 65em) {
	.total3 > *
	{
	   margin-left:2%;
      margin-right:2%;
		float:left;
		margin-top: 0;
		text-align: center;
		width:30%;
	}
	
	.total3 > :first-child
	{
		margin-left:0
	}
	
	.total3 > :last-child
	{
		margin-right:0
	}
	
	hgroup
	{
		text-align:left
	}
	
	table
	{
	  width: 100%;  
	}
	
	.col-last_abbr > tbody > tr > td:last-child
   {
      text-align: center;
   }
}

@media only screen and (min-width: 70em) {
	
	#branding > hgroup
	,#branding > img
	,[role="navigation"]
	{
		margin-top: 0;
		margin-bottom: 0
	}
	
	#branding
	,[role="navigation"]
	{
		display:inline-block;
		vertical-align:middle;
		width: 30%;
	}
	
	[role="banner"]
	{
		display:table
	}
	
	[role="navigation"]
	{
		width:69%
	}
	
	[role="navigation"] > ul
	{
		float:right;
		margin:0;
		max-width:100%;
		text-align:right
	}
}

@media only screen and (min-width: 97.5em) {
	[role="banner"] > .content
	{
		width: 1280px;
		width: 128rem;
	}
}

.code {
    font-family: Monaco, Consolas, 'Courier New', Courier, monospace;
    font-weight: normal;
    color: #333;
    line-height: 150%;
}

nav.content ul li ul {
   margin-bottom: 0;
}

.inline-figure {
   float: left;
   padding: 10px;
}

figcaption {
   text-align: center;
   font-style: italic;
}

img.logo {
   display: block;
   margin: 20px 0;
}

div.tableCell {
   float: left;
   margin-right: 30px;
}

div.clear {
   clear: both;
}