body
{
	background-color: #e1f0f9;
}

[role="complementary"]
{
	border-top-right-radius: .3em;
	border-top-left-radius: .3em;
	background: white url('../../images/healthgraph/white-gray-rl-gradient.png') right repeat-y
}

[role="main"]
{
	background-color: white;
}

[role="main"] > .content > header:first-of-type > hgroup > *
{
	font-weight: normal;
}

a
, [role="complementary"] summary
{
	color: #1c82c5;
}

a.here
, a.here:hover
{
	color: #444444;
	font-weight: bold;
}

a:hover
, [role="main"] a:visited
, [role="complementary"] a:visited
/*, [role="complementary"] summary:hover /* Doesn't work as expected in Chrome */
{
	color: #0F466B;
}

[role="complementary"] summary
{
	background-color:rgba(235, 235, 235, .25);
}

[role="complementary"] details > ul
{
	padding: 1.25em 1.5em 1.5em;
	border-top: 1px solid #d4dfef;
	line-height: 2;
}

[role="complementary"] details > ul > li
{
	margin-left:.5em;
	margin-right: .5em;
}

[role="complementary"] > nav
, [role="complementary"] ul
{
	width: 100%;
	max-width: 100%;
}

[role="complementary"] a
{
	text-decoration: none;
}

[role="complementary"] > nav > ul > li
{
	display: block;
	border-bottom: 1px solid #d4dfef;
}

[role="complementary"] details > summary
{
	padding: 20px 30px 20px 60px;
	position: relative;
}

[role="complementary"] details > summary img
{
	position: absolute;
	top: 50%;
	left: 30px;
	margin-top: -10px;
	margin-bottom: 0;
	width: 21px;
	height: 21px;
}

/*[role="complementary"] details > summary::-webkit-details-marker
{
	display:none;
}*/

#content
{
	margin:1.5em auto;
	border-radius: .3em;
	width: 90%;
	box-shadow: 0 0 6px rgba(10, 10, 10, .25)
}

[role="main"]
{
	margin-top: -1.5em;
	padding-top: 1.5em;
}

[role="main"] > .title > hgroup:first-child
{
	/*color: inherit;*/
	margin-left: 60px;
	margin-left: 6rem;
}

[role="main"] > .content > hgroup:first-child:before
{
	margin-left: -65px;
	margin-left: -6.5rem;
	margin-top: -6px;
	margin-top: -.6rem;
	position: absolute;
}

/*.title > hgroup > h2
, .title > hgroup > h2
{
   color: inherit;
}*/

[role="main"] > .content > header:first-of-type > hgroup
, [role="main"] > .content > header:first-of-type > hgroup
{
   border-bottom: 1px solid #e1e1e1;
}

[role="main"] > .content > header > hgroup
{
	/*margin-bottom: 1.5em;*/
	position: relative;
}

td ul
, td ol
{
	padding: inherit;
}

.title > hgroup > h2
{
   margin-top: .5em;
   margin-bottom: .75em;
}

.ideas
{
   background-color: #e1f0f9;
   padding: 1.25em 1.5em;
   width: 100%;
   border-radius: .3em;
   position: relative;
   margin-bottom: 2em;
}

.ideas > hgroup
, .ideas > p
{
   text-align: center;
}

.ideas:after {
   content: "";
   position: absolute;
   bottom: -20px;
   bottom: -2rem;
   right: 50px;
   right: 5rem;
   border-width: 20px 0 0 30px;
   border-width: 2rem 0 0 3rem;
   border-style: solid;
   border-color: #e1f0f9 transparent;
   display: block;
   width: 0;
}

.ideas > p:last-child
{
   margin:0 auto;
   text-align: center;
}

.ideas .button
{
   background-color: #4f9fd3;
   display: inline-block;
   color: whiteSmoke;
   text-decoration: none;
   padding:.5em .75em;
   border-radius: .3em;
   transition-property: background-color;
   transition-duration: .25s;
}

.ideas .button:hover
{
   background-color: #58b1ed;
   transition-property: background-color;
   transition-duration: .25s;
}

.ideas > hgroup
{
   color:#81abc3;
   font-style:italic;
   text-transform:lowercase;
}

.ideas > ul > li
{
   list-style: none;
}

[role="main"] .ideas > ul
{
   text-align: center;
}

.hint
{
   /*margin-top:-1em;*/
   font-size: 13px;
   font-size: 1.3rem;
   max-width: 58.5em;
}

.builder
, .callout
{
   border: 4px solid white;
   border-radius: .3em;
   box-shadow: 0px 0px 7px rgba(10,10,10,.5);
}

[role="main"] .callout
{
   max-width: 100%;
}

.builder
{
   margin-top: 3em;
   margin-bottom: 3em;
}

.builder > footer
{
   background-color: #e4f4ff;
}

.callout
{
   background-color: #f6fafd;
   padding: .75em;
}

[role="main"] .callout > li
{
   list-style: none;
   margin-bottom: 2.5em;
   padding-left: 52px;
   padding-left: 5.2rem;
}

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

.callout > li > [role="heading"] > :first-child
{
   font-size: 1.4em;
   font-weight: normal;
}

.callout > li > [role="heading"] > :first-child > a
{
   text-decoration: none;
}

.callout > li > [role="heading"] > :first-child > a:before
{
   float: left;
   margin-right: .75em;
   margin-left: -52px;
   margin-left: -5.2rem;
}

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

.builder p
, .builder .msg
{
   width: 90%;
}

.builder p
{
   margin-left: auto;
   margin-right: auto;
}

.builder p
, .builder ol
, .builder ul
, .builder dl
, .builder address
, .builder nav
, .builder img
, .builder aside
{
   margin-bottom: 1em;
}

.builder > footer > p
{
   margin-bottom: 0;   
}

.builder dl > dd > img
{  
   margin-bottom:0;
}

.builder dl.options
{
   margin-left: auto;
   margin-right: auto;
}

.builder dl.options > dt
{
   float: none;
   clear: both;
   text-align:left;
}

.builder > header
{
   background-color: #e4f4ff;
   padding: 1.5rem 2rem;
}

[role="main"] .builder > header > hgroup
{
   color: inherit;
   margin-bottom: 0;
}

.builder header + section
{
   margin-top:.25em;
}

.builder > header > hgroup > h2
{
   font-size:20px;
   font-size:2rem;
}

.builder > section > hgroup
, .builder summary
{
   padding: 10px 20px;
   padding: 1rem 2rem;
   font-size:18px;
   font-size:1.8rem;
}

.builder > footer
{
   padding:20px 20px;
   padding: 2rem 2rem;
}

[role="main"] .builder > section > hgroup
, [role="main"] .builder summary
{
   background-color: #eef7ec;
   color: #59b541;
}

/*.builder details > summary::-webkit-details-marker
{
   display:none;
}*/

.builder details > summary:before
{
   content:url(../../images/healthgraph/plus-sign-circled.png);
   /*display: inline-block;*/
   margin-right: .5em;
   /*vertical-align: bottom;*/
   float: left;
}

.builder details[open] > summary:before
, .builder details.open > summary:before
{
   content:url(../../images/healthgraph/minus-sign-circled.png);
}

.builder > section > hgroup > *
{
   font-weight: normal;
}

.builder dl.options > dd > p
{
   text-align: center;
   margin-bottom:0;
   height:50%;
   padding:10% 0;
   width:100%;
   max-width:100%;
}

.builder dl.options > dd.vertical > p:first-child
{
   padding:6% 0;
}

.builder dl.options > dd > p > img
{
   margin-bottom:0;
}

.builder dl.options > dd > p:first-child
{
   width:100%;
   border:1px solid white;
   border-top-right-radius: .3em;
   border-top-left-radius: .3em;
}

.builder dl.options > dd > p + p
{
   background:white;
   border-top:1px solid #d7d8d9;
}

.builder dl.options > dd > p + p > label > [type="radio"]
{
   margin-right:.25em;
}

.builder dl.options > dd > p + p > label
{
   color: #1c82c5;
   font-weight: bold;
   font-size: .95em;
}

.builder dl > dd
{
   margin-left:0;
}

.builder dl.options > dd
{
   background-color: #f4f4f4;
   height:147px;
   height:14.7rem;
   max-height:147px;
   max-height:14.7rem;
   border:1px solid #d7d8d9;
   border-radius: .3em;
   margin-bottom:1.5em;
}

.builder dl.options > dd.checked
{
   background-color: #e4f4ff;
}

.builder dl.options.total3 > dd /* same as in common.css but for narrower widths */
{
   float:left;
   margin-right:2%;
   width:30%;
   margin-top: 0;
   margin-bottom:0;
   text-align: center;
}

.decorative
{
   box-shadow: 0 0 20px rgba(10,10,10,.225) inset;
   padding: 1.5em;
   border: 1px solid #E6E6E6;
   width: 90%;
   margin-left: 0;
   margin-right: 0;
   max-width: 39em;
}

.decorative > img
{
   margin-bottom: 0;
}

[role="main"] .title > hgroup:before
{
   float: left;
   margin-top: -.2em;
   margin-right: .5em;
}

#content
{
	/*width: 1280px;
	width: 128rem;*/
	max-width: 90%;
}

[role="main"] ul:not(.prose)
, [role="main"] ol:not(.prose):not(.steps)
{
	max-width: 17.3333em;
	text-align: left;
	padding-left: 20px;
}

/* This is going to be really slow but it's the easiest to manage */
[role="main"] .title ~ :not(article) hgroup[aria-level="1"]
, [role="main"] .title ~ :not(article) hgroup[aria-level="2"]
, [role="main"] .title ~ :not(article) hgroup[aria-level="3"]
, [role="main"] .title ~ :not(article) hgroup[aria-level="4"]
{
	color:#114e76;
}

[role="main"] ul
, [role="main"] ul.prose ul
{
	list-style-type: square;
}

[role="main"] ul.prose
{
   list-style-type: none;
}

[role="main"] ul ul
{
   list-style-type: disc;
   margin-left: 1.25em;
}

[role="main"] ul.prose ul
{
   margin-left: inherit;
}

[role="main"] ul ul ul
{
   list-style-type: circle;
}

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

[role="main"] li:last-child
{
   margin-bottom: 0;
}

.conclusion
{
   margin-top: 3em;
}

[id^="example"] > hgroup > h3:before
{
	content: ': ';
	margin-left: -.125em;
	display: inline-block;
	margin-right: .25em;
}

[id^="example"] > hgroup > *
{
	display: inline-block;
}

.toc
{
	line-height: 1.5;
}

.toc ol
, .toc li
{
	margin-bottom: 0;
}

@media only screen and (max-width: 34em) {
   .builder dl.options
   {
      width: 50%;
   }
   
   .builder dl.options.total3 > dd
   {
      float: none;
      width:100%;
      margin-bottom: .75em;
   }
}
   
@media only screen and (min-width: 39em) {
	[role="main"] .content
	,#content
	{
		text-align: left;
	}
	
	[role="main"] p
   , [role="main"] ul
   , [role="main"] ol
   , [role="main"] dl
   , [role="main"] address
   {
      margin-left: 0;
      margin-right: 0;
   }
	
	[role="main"] ul:not(.prose)
	, [role="main"] ol:not(.prose):not(.steps)
	{
		max-width: inherit;
		margin-left: 0;
		margin-left: 0;
	}
   
   .builder dl.options
   {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
   }
   
   .builder > section
   {
      padding-left:15px;
      padding-left:1.5rem;
   }
   
   .builder > section details > summary
   {
      margin-bottom: .25em;
   }
   
   .builder > section > hgroup
   , .builder > section details[open] > summary
   , .builder > section details.open > summary
   {
      margin-bottom: 1em;
   }
   
   .builder > section > hgroup
   , .builder > section details > summary
   {
      margin-left:-15px;
      margin-left:-1.5rem;
   }
   
}

@media only screen and (min-width: 50em) {
	.getting-started [role="main"] .options
	{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: inherit;
	}
	
	.getting-started [role="main"] .options > *
	{
		width: 19em;
		/*display: table-cell;*/
		vertical-align: top;
		border-spacing: .75em;
		border-collapse: separate;
	}

   .ideas
   {
      min-width: 12em;
      width: 25%;
      padding-bottom: 5em;
      margin-right: 0;
      margin-left: 0;
   }
   
   .ideas > p:last-child
   {
      position: absolute;
      bottom: 1.25em;
   }
   
   .ideas > ul
   {
      text-align: left;
   }
   
   .explore > *
   {
      list-style: none;
      float: left;
      width:50%;
      padding-right: 1.5em;
   }
}

@media only screen and (min-width: 70em) { /* 65em */
	[role="complementary"] nav li
	, [role="complementary"] nav di
	{
		display: inherit;
		text-align: left;
	}
	
	[role="complementary"]
	, [role="main"]
	{
		display: table-cell;
		border-radius: inherit; /* fix inner sides */
		vertical-align: top;
	}
	
	[role="complementary"]
	{
		width: 300px;
		width: 30rem;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right: 1px solid #c4d4dd;
	}
	
	[role="main"]
	{
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	
	#content
	{
		display: table;
	}
	
	[role="complementary"] details > ul
   {
      line-height: 1.5;
   }
   
   [role="complementary"] details > ul > li
   {
      margin-bottom: .5em;
   }
}

@media only screen and (min-width: 97.5em) { /* 97.5em */
	#content
	{
		width: 1280px;
		width: 128rem;
	}
}

#subpage #intro > .content > aside
{
   width: 100%;
   margin: 5px auto 10px;
}

#parent-site
{
	margin-top:1.5em;
	max-width:100%;
	width:128rem;
   text-align: right;
   color: #114E76;
}

#parent-site a
{
   color: #114E76;
}

#parent-site a:hover
{
   color: #1C82C5;
}

#parent-site > a:before
{
	font-weight:bold
}

textarea.consoleRequestBody {
   width: 660px;
   height: 150px;
   margin-bottom: 30px;
}

textarea.consoleResponseBody {
   width: 878px;
   padding: 5px 10px;
   height: 150px;
   margin-bottom: 30px;
}

textarea.consoleRequestBody,
textarea.consoleResponseBody {
   font-size: 13px;
   line-height: 150%;
}

#consoleFootnote {
   position: relative;
   color: #666;
   font-size: 13px;
   top: -24px;
}

.console.divider {
   border-bottom: 1px solid #EEE;
   height: 1px;
   margin: 20px auto;
   width: 880px;
}