/* In Pictures Style Sheet */



/*---------------------------------------------------------------------------*/
/*---------------------------- WHOLE PAGE -----------------------------------*/
/*---------------------------------------------------------------------------*/


* {
  padding: 0;
  margin: 0;
  border-width: 0px;
  border-style: none;
  }

html {
  overflow: scroll;
  background-color: #333;
  }

body {
  background-color: #333;
  margin: 0 0 60px 0;
  font-size: 62.5%; /* Sets 1em equal to 10px. */
  font-family: arial,helvetica,clean,sans-serif;
  color: #222;
  text-align: center;
  }

a,
a:visited {
  text-decoration: none;
  color: #0033cc;
  }

a:hover {
  text-decoration: underline;
  }

ul,
li {
  list-style: none;
  }

img {
  border: none;
  }


/* CLEAR FLOATS ------------------------------------------------------------ */

.clear {
  clear: both;
  }


/* PAGE CONTAINER ---------------------------------------------------------- */

#container {
  width: 960px;
  margin: 0 auto;
  text-align: left;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- HEADER ---------------------------------------*/
/*---------------------------------------------------------------------------*/


img.logo {
  float: left;
  cursor: hand;
  padding: 30px 0;
  }

p.tagline {
  text-align: right;
  font-size: 1.9em;
  font-weight: normal;
  color: #fff;
  letter-spacing: .5px;
  padding: 101px 20px 0 0;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- NAVBAR ---------------------------------------*/
/*---------------------------------------------------------------------------*/


#navbar {
  position: relative;
  width: 960px;
  background-color: #222;
  }


/* BLOCKS ------------------------------------------------------------------ */

#navbar ul li,
#footer ul li {
  float: left;
  display: block;
  width: 160px;
  background-color: #222;
  padding-bottom: 25px;
  }

#footer ul li.wide {
  width: 239px;
  }

#footer ul li.lastwide {
  float: right;
  margin-right: 0;
  width: 240px;
  }


/* TEXT LINKS -------------------------------------------------------------- */

#navbar ul li p {
  font-size: 1.6em;
  font-weight: bold;
  color: #b4f218;
  padding: 25px 10px 5px 20px;
  letter-spacing: 1px;
  line-height: 140%;
  }

#navbar ul li a,
#navbar ul li a:visited,
#nabvar ul li a.blank {
  display: block;
  font-size: 1.6em;
  color: #555;
  padding: 2px 10px 2px 20px;
  line-height: 140%;
  }

#navbar ul li a.blank:hover {
  text-decoration: none;
  }


/* BLOCK HOVER LINKS ------------------------------------------------------- */

#navbar ul li:hover a,
#navbar ul li:hover a:visited {
  color: #fff;
  }

#navbar ul li:hover a:hover {
  color: #ffea00;
  }


/* YOU ARE HERE BLOCK LINKS ------------------------------------------------ */

#navbar ul li.urh a,
#navbar ul li.urh a:visited {
  color: #fff;
  }

#navbar ul li.urh:hover a:hover {
  color: #ffea00;
  }


/* YOU ARE HERE TEXT LINKS ------------------------------------------------- */

#navbar ul li.urh a.urh,
#navbar ul li.urh a.urh:visited {
  color: #ffea00;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- TRIMBAR --------------------------------------*/
/*---------------------------------------------------------------------------*/


#trimbar {
  width: 960px;
  height: 6px;
  border: 1px solid #222;
  background-color: #ffea00;
  }

#trimbar.footer {
  background-color: #8bc43d;
  }

#trimbar.tutyellow {
  width: 728px;
  }

#trimbar.tutgreen {
  width: 728px;
  border-top: 0;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  background-color: #8bc43d;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- BILLBOARD ------------------------------------*/
/*---------------------------------------------------------------------------*/


#billboard {
  width: 960px;
  background-color: #8bc43d;
  border-width: 0 1px;
  border-style: solid;
  border-color: #333;
  }

h1 {
  font-size: 2.5em;
  font-weight: bold;
  padding: 20px 40px;
  line-height: 100%;
  }

h2 {
  font-size: 2.4em;
  font-weight: bold;
  padding: 20px 40px;
  line-height: 100%;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- COPY AREA ------------------------------------*/
/*---------------------------------------------------------------------------*/


#copyframe {
  background-color: #fff;
  width: 960px;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #222;
  }


/* HOME PAGE --------------------------------------------------------------- */

#copyframe.home {
  padding: 40px 0;
  }

#copyframe.home p {
  font-size: 1.8em;
  margin: 20px 520px 20px 40px;
  line-height: 160%;
  }

#copyframe.home img {
  padding: 0 40px 40px 20px;
  float: right;
  }


/* TWO COLUMNS ------------------------------------------------------------- */

#copyframe.twocol {
  background-color: #EEE;
  }

#copyframe.twocol #leftcol {
  float: left;
  width: 660px;
  border-right: 1px solid #222;
  padding: 20px 0 80px 0;
  background-color: #FFF;
  }

#copyframe.twocol #leftcol p {
  font-size: 1.8em;
  margin: 20px 40px;
  line-height: 160%;
  }

#copyframe.twocol #leftcol ul {
  margin: 20px 40px;
  }

#copyframe.twocol #leftcol li {
  list-style: square;
  font-size: 1.8em;
  margin: 20px 40px;
  line-height: 160%;
  }

#copyframe.twocol #rightcol {
  float: right;
  width: 280px;
  padding-top: 20px;
  }

#copyframe.twocol #rightcol p {
  font-size: 1.7em;
  margin: 20px 20px 20px 0;
  line-height: 160%;
  }

#copyframe.twocol p.phphack {
  font-size: .5em;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  }


/* ONE COLUMN -------------------------------------------------------------- */

#copyframe.onecol {
  padding: 20px 0 80px 0;
  }

#copyframe.onecol a.begin {
  display: block;
  text-align:right;
  font-weight:bold;
  font-size: 1.9em;
  margin: 30px 40px;
  }

#copyframe.onecol a.subhead {
  display: block;
  font-size: 1.8em;
  margin: 20px 40px 10px 40px;
  line-height: 100%;
  }

#copyframe.onecol p {
  margin: 20px 40px;
  font-size: 1.8em;
  }

#copyframe.onecol #leftlist {
  float: left;
  width: 479px;
  }

#copyframe.onecol #rightlist {
  float: right;
  width: 479px;
  }

#copyframe.onecol #leftlist p,
#copyframe.onecol #rightlist p {
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #333;
  margin: 40px 40px 20px 40px;
  }

#copyframe.onecol #leftlist a,
#copyframe.onecol #rightlist a {
  display: block;
  font-size: 1.6em;
  margin: 10px 40px 0 60px;
  line-height: 100%;
  }

#copyframe.onecol #leftlist a.subhead,
#copyframe.onecol #rightlist a.subhead {
  display: block;
  font-size: 1.8em;
  margin: 20px 40px 10px 40px;
  line-height: 100%;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- FOOTER ---------------------------------------*/
/*---------------------------------------------------------------------------*/


#footer {
  width: 960px;
  background-color: #222;
  border: 1px solid #222;
  }

#footer p {
  font-size: 1.6em;
  margin: 20px 40px 0 20px;
  line-height: 150%;
  color: #777;
  }

#footer a,
#footer a:visited {
  color: #ddd;
  }

#footer a:hover {
  color: #ffea00;
  text-decoration: underline;
  }

#footer a.urh,
#footer a.urh:visited {
  color: #ffea00;
  }


/* END TEXT ---------------------------------------------------------------- */

p.end {
  margin: 40px 20px 20px 20px;
  }

p.copyright {
  font-size: 1.4em;
  color: #666;
  text-align: right;
  margin: 20px 20px 40px 20px;
  }



/*---------------------------------------------------------------------------*/
/*---------------------------- FORM LAYOUT ----------------------------------*/
/*---------------------------------------------------------------------------*/


#leftcol table {
  margin: 20px 40px;
  border-collapse: collapse;
  border-spacing: 0;
  }

#leftcol table td {
  vertical-align: top;
  }

#leftcol table td.text {
  font-size: 1.8em;
  padding: 10px 10px 10px 0;
  }

#leftcol input[type=text],
#leftcol textarea {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
  color: #666;
  font-size: 1.7em;
  font-family: arial,helvetica,clean,sans-serif;
  border: 1px solid #333;
  }

#leftcol input[type=submit]  {
  margin: 10px 0;
  padding: 10px 20px;
  background-color: #222;
  color: #fff;
  font-size: .9em;
  font-family: arial,helvetica,clean,sans-serif;
  }

#leftcol table input[type=submit] {
  font-size: 1.7em;
  }

#leftcol img {
  display: none;
  padding: 0;
  margin: 0;
  }



/*---------------------------------------------------------------------------*/
/*-------------------------- TUTORIAL FORMATTING ----------------------------*/
/*---------------------------------------------------------------------------*/


#contut {
  width: 730px;
  margin: 0 auto;
  text-align: left;
  }


/* HEADER AREA ------------------------------------------------------------- */

#billtut {
  width: 688px;
  background-color: #8bc43d;
  padding: 20px;
  border-top: 1px solid #222;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
  }

#billtut a,
#billtut a:visited {
  font-size: 2.4em;
  color: #222;
  font-weight: bold;
  }

#navtut {
  width: 688px;
  background-color: #222;
  padding: 20px;
  color: #bbb;
  font-size: 1.5em;
  border-right: 1px solid #222;
  border-left: 1px solid #222;
  }

#navtut p {
  line-height: 180%;
  }

#navtut a,
#navtut a:visited {
  color: #fff;
  }

#navtut a:hover,
#navtut a.urh {
  color: #ffea00;
  }


/* COPY AREA --------------------------------------------------------------- */

#copytut {
  background-color: #fff;
  width: 728px;
  padding: 1px 0;
  border-width: 0 1px;
  border-style: solid;
  border-color: #222;
  }

h3 {
  font-size: 3.5em;
  font-weight: bold;
  text-transform: uppercase;
  margin: 40px 20px;
  }

h4 {
  font-size: 2.7em;
  font-weight: bold;
  margin: 40px 20px;
  }

h5 {
  font-size: 2.4em;
  font-weight: normal;
  margin: 40px 20px;
  }

#copytut p {
  font-size: 1.8em;
  line-height: 160%;
  margin: 20px 20px 20px 65px;
  }

#copytut p.practice {
  font-size: 3.4em;
  font-weight: normal;
  text-transform: uppercase;
  margin: 20px;
  }

#copytut p.num {
  margin: 60px 20px 20px 0;
  }

.number {
  font-size: 1.7em;
  font-weight: bold;
  padding: 5px 10px 0 20px;
  background-color: #222;
  color: #fff;
  margin: 20px 10px 20px 0px;
  }

#copytut p.dub {
  margin: 20px 20px 20px 82px;
  }

#copytut ul,
#copytut p.intro {
  margin: 20px;
  }

#copytut ul li {
  font-size: 1.8em;
  list-style: square;
  margin: 10px 20px;
  }

#copytut ol li {
  font-size: 1.8em;
  list-style: decimal;
  margin: 10px 20px;
  }

#copytut p.bold {
  font-weight: bold;
  }

#callout {
  margin: 40px 20px;
  padding: 1px 0 20px 0;
  background-color: #fff;
  border: 1px solid #222;
  }

#callout p {
  margin: 20px 40px;
  }

#callout p.callhead {
  font-size: 1.8em;
  font-weight: bold;
  }


/* TABLE FORMATTING -------------------------------------------------------- */

table {
  border-collapse: collapse;
  }

table.indent {
  margin-left: 78px;
  }

table.indent td {
  padding: 4px 8px;
  border: 1px solid #222;
  font-size: 1.8em;
  }

table.indent tr.grey,
table.indent td.grey {
  background-color: #fff;
  }

table.indent td.greytext {
  color: #999;
  }


/* PAGE NAV AND ADS -------------------------------------------------------- */

.back {
  float: left;
  width: 200px;
  font-size: 2em;
  margin: 40px 20px;
  }

.next {
  float: right;
  text-align: right;
  width: 200px;
  font-size: 2em;
  margin: 40px 20px;
  }

.back a,
.back a:visited,
.next a,
.next a:visited {
  font-weight: bold;
  text-transform: uppercase;
  }

#adbar {
  background: #666;
  width: 728px;
  border: 1px solid #222;
  }



/*---------------------------------------------------------------------------*/
/*-------------------------- LEGACY FORMATTING ------------------------------*/
/*---------------------------------------------------------------------------*/


#legacynav {
  white-space: nowrap;
  list-style: none;
  background: #222;
  width: 100%;
  padding: 0;
  margin: 0;
  border-width: 0 1px;
  border-style: solid;
  border-color: #222;
  }

#legacynav li {
  display: inline;
  padding: 0 0 10px 0;
  margin: 0 20px 0 0;
  }

#left {
  float: left;
  width: 50%;
  margin: 0;
  padding: 1px 0;
  }

#right {
  margin: 0 0 0 50%;
  padding: 1px 0;
  }

#left p,
#right p {
  margin: 20px 20px 40px 20px;
  font-weight: bold;
  font-size: 2em;
  }

#copytut ol {
  margin: 20px 0 20px 20px;
  }

#copytut ol li.step {
  list-style: decimal;
  margin: 20px 30px;
  font-size: 19pt;
  font-weight: bold;
  }

#copytut p.bigtext,
.bigtext {
  font-size: 14pt;
  font-weight: normal;
  line-height: 140%;
  }

#copytut p.img {
  margin: 20px 0;
  padding: 0;
  }

.callout {
  margin: 20px 30px 30px 30px;
  padding: 0;
  background: #DDD;
  border-style: solid;
  border-color: #222;
  border-width: 1px;
  }

.callouthead {
  font-size: 14pt;
  font-weight: bold;
  margin: 20px;
  padding: 0;
  }

.callouttext {
  font-size: 14pt;
  margin: 20px;
  padding: 0;
  line-height: 140%;
  }

.code {
  font-size: 12pt;
  font-family: courier new,courier,monospace;
  font-weight: bold;
  line-height: 140%;
  }

.codedk {
  font-size: 12pt;
  font-family: courier new,courier,monospace;
  font-weight: bold;
  background: #cc0000;
  color: #fff;
  }

h5 {
  font-weight: bold;
  font-size: 21pt;
  margin: 20px;
  padding: 0;
  line-height: 120%;

  color: #222;
  }

h6 {
  font-size: 18pt;

  font-weight: normal;
  margin: 20px;
  padding: 0;
  line-height: 120%;

  color: #222;
  }

#copytut ul.descrul {
  margin-left:40px;
 }

 #copytut ul li.descrli {
  margin: 30px 40px 30px 20px;
  font-size: 14pt;
 }

#copytut p.descrp {
  margin-left:20px;
  font-size: 14pt;
 }