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

 * CONTENTS:
 * =TITLE=    Styles the flower & title
 * =METHODS=   Five method sections, with subsections
 *    =strategy= : =design= : =marketing= : =search= : =technology=
 * =MODAL=    Hey, did you know there was a modal window in the methodology page? Totally is!
**********************************************************************************************/

/*********************************************************************************************
=TITLE=
*********************************************************************************************/
div#title {
  margin: 5px 0 25px;
  overflow: auto;
  padding: 5px 0 25px;
}

div#title object,
div#title img {
  float: left;
}

div#title h1 {
  color: #B3B3B3;
  float: right;
  font-family: "proxima-nova-1", "proxima-nova-2","Helvetica Neue",Helvetica,sans-serif;
  font-size: 63px;
  font-weight: 100;
  letter-spacing: -3px;
  line-height: 0.9;
  margin: 0.8em 0 0.5em;
  width: 490px;
}

div#title h1 em {color: #2587B2; font-style: normal;}

div#title p {
  float: right;
  font-size: 13px;
  line-height: 1.7;
  width: 490px;
}

/*********************************************************************************************
=METHODS=
*********************************************************************************************/
div#methods {
  clear: both;
}

div#methods div {
  border-top: 1px solid #b2b2b2;
  clear: both;
  margin: 0 0 40px;
  padding: 15px 0 0;
  overflow: hidden;
}

div#methods div p {
  margin: 0 0 15px 40px;
  width: 48%;
}

div#methods div.details {
  border: none;
  clear: none;
  margin: 0 10px 0 0;
  padding: 0 0 0 0;
}

div#methods div h2 {
  font-size: 26px;
  height: 53px;
  line-height: 53px;
  margin: -1px 0 0;
  position: relative;
  text-align: left;
  text-indent: 40px;
  width: 48%;
}

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

div#methods div img {
  float: right;
  margin: 0 0 50px 30px;
}

div#methods div h3 {
  color: #3E3E3E;
  font: normal bold 13px/1.5 Arial, Sans-Serif;
  margin: 0 0 15px 40px;
  text-transform: uppercase;
  width: 48%;
}

div#methods div.Strategy h2,
div#methods div.Design h2,
div#methods div.Marketing h2,
div#methods div.Search h2,
div#methods div.Technology h2,
div#methods div.Strategy em,
div#methods div.Design em,
div#methods div.Marketing em,
div#methods div.Search em,
div#methods div.Technology em
{
	font-style: normal;
	font-weight: 300;
}

div#methods div.Strategy h2,div#methods div.Strategy em { color: #94bc54; }
div#methods div.Design h2, div#methods div.Design em { color: #59aacc; }
div#methods div.Marketing h2, div#methods div.Marketing em { color: #de9d4f;}
div#methods div.Search h2, div#methods div.Search em { color: #e4667e;}
div#methods div.Technology h2, div#methods div.Technology em { color: #7059cf;}

/*********************************************************************************************
=MODAL=
*********************************************************************************************/
div#modalContainer {
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 9998;
}

div#modal {
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 9999;
}

div#modal div#slides {
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-box-shadow: 0 1px 2px #676767;
  -webkit-box-shadow: 0 1px 2px #676767;
  background: none repeat scroll 0 0 #FFFFFF;
  height: 490px;
  margin: 60px auto 0;
  overflow: hidden;
  position: relative;
  width: 970px;
  _border: 1px solid #676767;
}

div#modal div#slides.ie {
  border: 1px solid #676767;
}

div#modal div#slides div.slide {
  background: #fff;
  left: 10px;
  position: absolute;
  top: 10px;
}

div#modal div#slides img#closeButton {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

div#modal div#slides div.controls {
  cursor: pointer;
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 9999;
}

div#modal div#slides div.controls p {
  font: normal bold 10px/1 Arial, sans-serif;
  text-align: center;
}

div#modal div#slides div.slide img {
  display: block;
  float: left;
}

div#modal div#slides div.slide h2 {
  float: right;
  font-weight: 300;
  padding: 130px 0 0 0;
  margin: 0;
  line-height: 1.5;
  width: 335px;
}

div#modal div#slides div.slide p {
  float: right;
  width: 335px;
}