/************************************************|
|   RuthieBenDor.com Screen Styles               |
|                                                |
|   Author: Ruthie BenDor                        |
|   Update: November 12th, 2008                  |
|                                                |
|************************************************/

/* -----------------------------------------------
       RESET
----------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

/* --- Lists ---------------------------------- */

ol, ul {
  list-style: none;
}

/* --- Tables --------------------------------- */

table {
  border-collapse: separate;
  border-spacing: 0;
  /* note: still need 'cellspacing="0"' in HTML */
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

/* --- Blockquotes ---------------------------- */

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

/* -----------------------------------------------
       TYPOGRAPHY
----------------------------------------------- */

/* --- Typefaces and line heights ------------- */

body {
  font-family: 'Lucida Grande', Tahoma, Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.5em;
}

p {
  line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.125em;
}

th, td {
  line-height: 1.000em;
}


/* --- Sizing and padding --------------------- */

h1 { font-size: 2.000em; padding: 0.5em 0; }
h2 { font-size: 1.750em; padding: 0.5em 0; }
h3 { font-size: 1.500em; padding: 0.5em 0; }
h4 { font-size: 1.375em; padding: 0.5em 0; }
h5 { font-size: 1.250em; padding: 0.5em 0; }
h6 { font-size: 1.125em; padding: 0.5em 0; }

th { font-size: 1.125em; padding: 0.75em 0; }
td { font-size: 0.875em; padding: 0.75em 0; }
p  { font-size: 0.875em; padding: 0.875em 0; }
li { font-size: 0.875em; padding: 0.75em 0; margin-left:1em; }
ul, ol { margin-left:1em; }


/* --- Other formatting ----------------------- */

a:link, a:visited {
  text-decoration:underline;
  background:inherit;
  color:#02245C;
}

a:hover, a:active {
  text-decoration:none;
  background:#02245C;
  color:#FFF;
}

em {
  font-style:italic;
}

strong {
  font-weight:bold;
}

/* --- Lists ---------------------------------- */

ul {
  list-style-type:circle;
}

ol {
  list-style-type:decimal;
}

/* -----------------------------------------------
       POSITIONING, ETC.
----------------------------------------------- */

body {
  background:#FFF;
}

#page {
  background:#FFF;
  margin:0 auto;
  text-align:center;
  width:900px;
}

#page-inner {
  text-align:left;
  overflow:auto;
}

#more {
  clear:both;
}

h2 {
  color:#493B3A;
  border-bottom:3px solid #493B3A; 
/*  border-top:3px solid #493B3A;
  background:#675958;

*/
}

/* --- Masthead ------------------------------- */

#masthead {
  width:900px;
  margin:0 auto;
  text-align:center;
  color:#FFF;
}

#masthead h1 {
  width:700px;
  margin:0 auto 0.5em auto;
  text-align:center;
  background:#02245C;
  padding-top:1.5em;
/* #284574 */
/* 02245C */
}


/* --- Footer --------------------------------- */

#footer {
  clear:both;
  text-align:center;
  color:#999;
}


/* --- Reasons To Hire Me --------------------- */

#reasons-to-hire-me {
  float:left;
  width:600px;
}

#reasons-to-hire-me .inner {
  padding:1em 20px;
  border-left:10px solid #FFF;
}

#reasons-to-hire-me a {
  font-weight:bold;
}

#reasons-to-hire-me h2 {
}


/* --- Get In Touch --------------------------- */

#get-in-touch {
  float:left;
  width:300px;
}

#get-in-touch .inner {
  padding:1em 20px;
}

#get-in-touch h2 {
}

#is-available .yes {
  text-align:center;
}

#is-available .no {
  text-align:center;
  color:#660000;
}

/* --- Portfolio ------------------------------ */

#portfolio {
  clear:both;
}

#portfolio h2 {
  margin:20px;
}

#portfolio #slider h2 {
  padding:0 !important;
  border-top:0;
  border:0 !important;
  background:#FFF;
  margin:0;
}

#portfolio #slider h2 a {
  text-decoration:none;
}

#slider {
  width:900px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.scroll {
  height:620px;
  width:600px;
  overflow:hidden;
  overflow-x:hidden;
  position:relative;
  float:left;
}

.scrollContainer div.panel {
  padding:10px 20px;
  height:600px;
  width:580px;
  background:#FFF;
}

.scrollButtons {
  display:none;
}

.hide {
  display:none;
}

/* --- Portfolio Navigation ------------------- */

ul.navigation {
  list-style:none;
  margin:0;
  padding:0;
  overflow:auto;
  width:280px;
  float:left;
}

ul.navigation li {
  display:block;
  margin:0;
  padding:0;
}

ul.navigation a {
  display:block;
  text-decoration:none !important;
  margin:0 0 0 20px;
  padding:10px 20px 10px 19px;
  border-left:1px solid #FFF;
}

ul.navigation a:link, ul.navigation a:visited {
  color:#02245C;
  background:#FFF;
  border-color:#DDD;
}

ul.navigation a:hover, ul.navigation a:active {
  color:#02245C;
  background:#EEE;
}

ul.navigation a.selected {
  color:#02245C !important;
  background:#EEE !important;
}

ul.navigation a em {
  display:block;
  color:#999;
}

ul.navigation a strong {
  display:block;
  text-transform:uppercase;
}