/*********************************************************************************************
Global application styles.
@author j. flores, Elliance Inc.
@contact jflores@elliance.com

 * CONTENTS:
 * =DEFAULTS=     Default styles for global selectors
 * =GENERICA=     Classes with some generic modifications (font-family, for example) that could apply to many different dom elements
 * =CONTAINER=    Primary container definitions
 * =HEADER=       Application global header, including primary navigation
 * =FOOTS=        Global footer styles
 * =FORM=         Form and input styles
 * =SITEMAP=      site map lists
**********************************************************************************************/

/*********************************************************************************************
=DEFAULTS=
*********************************************************************************************/
p {
  font-size: 13px;
  line-height: 1.5;
}

/*********************************************************************************************
=GENERICA=
*********************************************************************************************/
.half { float: left; width: 50%; }
.quarter { float: left; width: 25%; }

ol.ordered li {
  list-style: decimal outside;
  padding: 15px;
  margin: 0 0 0 80px;
}

.bordered-bottom
{
	border-bottom: 1px #ccc solid;
	padding-bottom: 15px;
}

.grey-divider
{
	border-top: 1px #ccc solid;
	clear: both;
	display: block;
	height: 1px;
	margin: 5px 10px 0 5px;
	padding: 0 0 5px 0;
}

/*********************************************************************************************
=CONTAINER=
*********************************************************************************************/
div#stage {
	margin: 0 auto;
  width: 975px;
}

div#content {
	clear: both;
  margin: 0;
}

div h1#infographics-headline,
div#content h2 {
	font-size: 34px;
	font-weight: 300;
	margin: 0 0 .5em 0;
}

/*********************************************************************************************
=HEADER=
*********************************************************************************************/
div#tops {
	height: 70px;
  position: relative;
}

div#tops h1 a {
	background: url(../images/interface/logo.gif) no-repeat left top;
	height: 24px;
  left: 0;
	position: absolute;
  text-indent: -9999em;
  bottom: 20px;
  width: 174px;
}

#main-logo
{
	bottom: 20px;
	display: block;
	height: 20px;
	left: 0;
	position: absolute;
	width: 169px;
}

div#tops ul#primaryNavigation 
{
	font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, sans-serif;
	font-weight: 500;
	position: absolute;
	right: 0;
	bottom: 10px;
}

div#tops ul#primaryNavigation li {
  display: block;
	float: left;
	font-size: 14px;
	height: 33px;
  letter-spacing: .05em;
  margin: 0 1px;
	text-transform: uppercase;
}

div#tops ul#primaryNavigation li a {
	display: block;
  height: 30px;
  line-height: 32px;
  padding: 1px 15px 0;
}

div#tops ul#primaryNavigation li a:hover,
div#tops ul#primaryNavigation li a.selected {
	border: 1px solid #d7d7d7;
  border-bottom: 2px solid #838383;
  border-top: 1px solid #fef;
  padding: 0 14px;
}

div#tops ul#featuredTags {
	position: absolute;
  right: 0;
  bottom: 0;
}

div#tops ul#featuredTags li {
  float: left;
  font: normal normal 11px/1 "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .5px;
  margin: 0 25px 0 0;
  text-transform: uppercase;
}

div#tops ul#featuredTags li a {
	color: #b4b4b4;
}

div#tops ul#featuredTags li a:hover,
div#tops ul#featuredTags li a.selected {
	color: #2587b2;
}

div#tops div#contact {
  position: absolute;
  right: 15px;
  top: 5px;
  height: 20px;
}

div#tops div#contact a {
  background: url(/images/interface/contactSprite.gif) no-repeat center left;
  color: #999;
  display: block;
  height: 12px;
  float: left;
  font-size: 11px;
  text-transform: capitalize;
  padding: 0 0 0 15px;
}

div#tops div#contact a.login {
  background-position: bottom left;
  margin-left: 15px;
}

div#tops div#contact a:hover,
div#tops div#contact a:focus {
  text-decoration: underline;
}

div#tops div#contact a.selected {
  color: #2587B2;
  font-weight: bold;
}

/*********************************************************************************************
=FOOTS=
*********************************************************************************************/
div#foots {
  border-top: 1px solid #535353;
  clear: both;
  margin-top: 25px;
  padding-bottom: 100px;
}

div#foots a {
  border-right: 1px solid #ccc;
  color: #535353;
  font: normal normal 11px/4 Arial, Sans-Serif;
  padding: 0 .5em 0 0;
  text-transform: uppercase;
}

div#foots a.last {
  border-right: none;
}

div#foots a:active, div#foots a:hover, div#foots a:focus {
  text-decoration: underline;
}

div#foots span {
  float: right;
  font: normal normal 10px/4 Arial, Sans-Serif;
  text-align: right;
}

/*********************************************************************************************
=FORM=
*********************************************************************************************/
label {
  color: #3e3e3e;
  display: block;
  font: normal bold 13px/2 "Helvetica Nueue", Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
}

textarea.text,
input.text {
  background: #f2f2f2;
  border: 1px solid #b2b2b2;
  color: #616161;
  display: block;
  font: normal normal 24px/50px "Helvetica Nueue", Helvetica, Verdana, sans-serif;
  height: 50px;
  margin: 0 0 15px 0;
  padding: 0 0 0 10px;
  width: 95%;
}

textarea.text {
  height: 300px;
  line-height: 1;
}

input.hello {
  background: url(/images/interface/say-hello.png) no-repeat left top;
  border: none;
  cursor: pointer;
  display: block;
  height: 30px;
  margin: 50px 0 0 0;
  text-indent: -9999em;
  width: 108px;
}

input.login {
  background: url(/images/interface/login-now.png) no-repeat left top;
  border: none;
  cursor: pointer;
  display: block;
  height: 30px;
  text-indent: -9999em;
  width: 108px;
}

/*********************************************************************************************
=SITEMAP=
*********************************************************************************************/
div#details div.panel.siteMap { padding-right: 0; }
div#details div.panel.siteMap div.panelLeft { width: 90%;}
div#details div.panel.siteMap div.panelLeft a { color: inherit; }

div#details div.panel.siteMap div.panelLeft h2 { text-indent: 0; margin: 10px 0 20px; }

div.siteMap a:focus,
div.siteMap a:hover {
  text-decoration: underline;
}

div.siteMap li {
  margin: .25em 0;
}

div.siteMap ol li.l1 {
  display: block;
  float: left;
  width: 20%;  
}

div.siteMap ol li.l1 ol {
  margin: 15px 0 0 0;
}

div.siteMap ol li.l1 li {
  font-size: 12px;
  margin: .5em 0;
}

/*********************************************************************************************
=MISC=
*********************************************************************************************/

.clear {clear: both;}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.infographic-tools
{
	overflow: hidden;
}

.download-pdf
{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 14px;
	font-weight: bold;
	float: left;
	width: 180px;
}

.download-pdf a
{
	color: #2587B2;
}

.download-pdf a:hover,
.download-pdf a:focus
{
	text-decoration: underline;
}

.social-device
{
	float: left;
	width: 150px;
}

.love h4 {
  color: #2587B2;
  font: normal bold 14px Arial,Helvetica,sans-serif;
  margin: 0 0 15px;
}

.love a {
  background: url(/images/interface/about/social-networks-sprite.png) no-repeat left top;
  display: block;
  float: left;
  height: 16px;
  margin: 0 4px 0 0;
  text-indent: -9999em;
  width: 16px;
}

.love a.facebook { background-position: left top; }
.love a.stumble { background-position: -16px top; }
.love a.twitter { background-position: -32px top; }
.love a.technorati { background-position: -48px top; }
.love a.reddit { background-position: -64px top; }
.love a.delicious { background-position: -80px top; }
.love a.print { background-position: right top; }