/*********************************************************************************************
Expertise section specific styles.
@author j. flores, Elliance Inc.
@contact jflores@elliance.com

 * CONTENTS:
 * =OVERRRIDES= things that are different!
 * =INTRO=      Introduction section on expertise detail pages.
 * =SUBNAV=     Styles the section navigation below the primary navigation.
 * =PANELS=     Presentation for the accordion panels on each expertise page.
**********************************************************************************************/

/*********************************************************************************************
=OVERRIDES=
*********************************************************************************************/
div#content {
  overflow: none;
  min-height: 650px;
}

div#content h1 {
  clear: both;
  color: #b3b3b3;
  font-family: "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 63px;
  font-weight: 100;
  letter-spacing: -3px;
  padding: 15px 0 60px 0;
  text-indent: 1em;
}

div#content h1 em {
  color: #2587b2;
  font-style: normal;
}

div#content h2.subhead {
  color: #3e3e3e;
  font: normal bold 14px/1 "Helvetica", Helvetica, Verdana, Arial, sans-serif;
  margin: 0 0 1em;
  text-transform: uppercase;
}

/*********************************************************************************************
=SUBNAV=
*********************************************************************************************/
div#subNav {
  color: #ff0000;
  float: right;
  font: 400 normal 11px/1 "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, sans-serif;
  margin: 0 0 30px;
  text-align: right;
  text-transform: uppercase;
  width: 75%;
}

div#subNav a { margin-right: 15px; }
div#subNav a:hover { text-decoration: underline; }
div#subNav a.selected { color: #000; font-weight: 700; }

/*********************************************************************************************
=INTRO=
*********************************************************************************************/
div#expertiseIntro {
  border-top: 1px solid #b2b2b2;
  padding: 48px 0;
}

div#expertiseIntro img {
  display: block;
  float: right;
}

div#expertiseIntro p {
  font-family: Arial, Verdana, Sans-Serif;
  width: 60%;
  margin: 12px 0;
}

/*********************************************************************************************
=PANELS=
*********************************************************************************************/

div#details {
  width: 975px;
}

div#details p {
	font: normal normal 12px Arial, Helvetica, sans-serif;
  margin: 0 0 30px 0;
  width: 70%;
}

div#details h2 {
  color: #2587B2;
  font-size: 26px;
  font-weight: 300;
  height: 53px;
  letter-spacing: -1px;
  line-height: 53px;
  position: relative;
  width: 100%;
  text-align: left;
  text-indent: 40px;
  margin: -1px 0 0 0;
}

div#details h2 a {
  color: inherit;
}

div#details h2 a:focus,
div#details h2 a:hover {
  text-decoration: underline;
}

div#details h2 span.number {
	background: url(/images/interface/work/number.png) no-repeat center center;
  font: normal bold 16px/54px Helvetica, Arial, sans-serif;
  color: #fff;
  display: block;
  position: absolute;
  left: 0;
  width: 27px;
  height: 53px;
  text-align: center;
  text-indent: 0px;
}

div#details div.panel {
  border-top: 1px solid #ccc;
  clear: both;
  overflow: hidden;
  padding: 0 15px 40px 0;
}

div#details div.panel.halfsies { padding: 0 15px 70px 0; }
div#details div.panel.halfsies div.panelCopy { width: 50% }
div#details div.panel div.panelCopy {
  float: left;
  width: 70%;
  margin: 0;
  padding: 25px 0 0 0;
}

div#details div.panel div.panelCopy div {
  margin: 5px 0 30px 40px;
}

div#details div.panel div.panelCopy div a {
  color: #2587B2;
  text-decoration: underline;
}
div#details div.panel div.panelCopy h3 {
  color: #3e3e3e;
  font: normal bold 13px/1.5 "Helvetica Neue",Helvetica,sans-serif;
  text-transform: uppercase;
}

div#details div.panel div.panelCopy p {
  width: 95%;
  line-height: 1.5;
  margin: 0 0 10px;
}

div#details div.panel div.panelCopy ul.perspective {
  padding: 0 0 0 40px;
}

div#details div.panel div.panelCopy ul.perspective li {
  color: #2587b2;
  font: normal normal 18px/1.3 "proxima-nova-1", "proxima-nova-2", "Helvetica Neue", Helvetica, sans-serif;
  margin: 0 0 20px;
}

div#details div.panel.halfsies div.panelImage { width: 50%; }
div#details div.panel div.panelImage {
  float: right;
  width: 25%;
  margin: 0;
  padding: 0;
}

div#details div.panel.halfsies div.panelImage img {
  margin: 30px 0 0 0;
}

div#details div.panel div.panelImage img {
  display: block;
}