/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/forms.css";


/* Site
-------------------------------------------------------------- */

/*

Brown: #542017
Orange: #fc6044
Blue: #44e1fc

Pale Blue: #b4f3fe
Link Blue: #35b5da
Link Blue (visited): #057697

Light Orange: #fd8873
Pale Orange: #febfb4

Dark Gray: #444
Light Gray: #666;

*/


/* Body
-------------------------------------------------------------- */

html { margin: 0; padding: 0; background: url(../../images/bg.jpg) top left repeat-x; text-align: center; }

html body { font-size: 87.5%; color: #444; margin: 0 auto; padding: 0; background: transparent; text-align: left; }

html body #container { margin: 0 auto; padding-top: 3.429em; min-width: 53.571em; max-width: 68.571em; background: transparent; position: relative; }

/* Links */
a:link { color: #35b5da; }
a:visited { color: #057697; }
a:hover { border-bottom: 1px solid #fc6044; text-decoration: none; }

#lightbox a {border-bottom: none; }

/* html body { background: url(../../images/grid.png); } */


/* Branding
-------------------------------------------------------------- */

h1#logo { font-size: 1.714em; font-weight: normal; position: relative; height: 48px; width: 220px; color: #000; margin: 0; padding-left: 0.417em; }
h1#logo a:link span, h1#logo a:visited span { position: absolute; height: 100%; width: 100%; background: url(../../images/logo.gif) top left no-repeat; }
h1#logo a:hover span { background-position: -239px 0; }

/* Navigation Main
-------------------------------------------------------------- */

#navigation-main { position: absolute; right: 10px; top: 0; list-style: none; display: block; margin: 0; width: 55.729%; height: 3.429em; text-align: right; padding-top: 3.429em; }
#navigation-main li { display: inline; text-transform: uppercase; margin-left: 1.167em; line-height: 3.429em; }
#navigation-main a:link, #navigation-main a:visited { color: #fc6044; }
#navigation-main a:hover { text-decoration: none; color: #444; }


/* Content Main 
-------------------------------------------------------------- */

/*  Widths based on 960px total width.  */

#content-main { padding-left: 1.042%; position: relative; }
#content-main h2 { font-size: 2.571em; margin-top: 1.333em; margin-left: 0; margin-bottom: 0; line-height: 1.333em; }
#content-main h3 { font-family: Georgia,"Times New Roman"; font-style: italic; font-size: 1.714em; text-transform: none; line-height: 1em; margin-bottom: 0.5em; /* padding-left: 0.167em; padding-right: 0.167em; */ color: #fc6044; font-weight: bold; /* letter-spacing: -0.042em; */ }
#content-main h4 { font-size: 1em; line-height: 1.7143em; margin-bottom: 0; margin-top: 1.714em; /* padding-left: 0.214em; padding-right: 0.214em; */ }

p+h3 { margin-top: 1.333em; }
p { line-height: 1.714em; margin-bottom: 0.857em; /* padding-left: 0.214em; padding-right: 0.214em; */ color: #444; }
#content-main p.lead { font-weight: bold; margin-top: 0.214em; width: 23.333%; }
p+p { /* text-indent: 1.111em; */ }


/*  Home page  */
#content-main.home-page h2 { line-height: 2em; font-size: 1.714em; margin-top: 2em; font-weight: bold; margin-bottom: 0; width: 20em; margin-left: 2.708em; text-transform: uppercase; color: #000; }
#content-main.home-page h2 span { font-family: Georgia, "Times New Roman", serif; color: #fc6044; font-size: 0.75em; font-style: italic; text-transform: lowercase; position: relative; bottom: 0.167em; }
#content-main.home-page p.lead { font-size: 1.286em; line-height: 1.333em; font-weight: normal; width: 50%; margin-left: 3.611em; margin-bottom: 0; margin-top: 0; color: #444; font-family: "Lucida Sans", "Trebuchet MS", Helvetica, sans-serif; padding: 0; }
ul#features { list-style-type: none; margin-left: 0; padding-left: 0; line-height: 1.714em; width: 100%; position: relative; margin-top: 6.857em; display: block; margin-bottom: 6.857em; }
ul#features li { display: block; width: 23.958%; }
ul#features li#build { position: absolute; left: 25.263%; top: 0; }
ul#features li#mywork { position: absolute; top: 0; left: 50.526%; width: 48.958%; margin-right: 0; }
ul#features li#contactme { position: absolute; top: 0; left: 75.789%; }
div#feature-quote { width: 36.458%; font-size: 0.857em; line-height: 1.5em; position: absolute; top: 1em; right: 0; }
div#feature-quote blockquote { margin-left: 0; margin-bottom: 0; padding-left: 4.583em; background: url(../../images/quote.gif) top left no-repeat; }
div#feature-quote p.testamonial { margin-bottom: 0; color: #fc6044; font-style: italic; margin-left: 6em; }
div#feature-quote > p+p { text-indent: 0; }
div#feature-quote blockquote p { margin: 0; color: #444; font-style: normal; line-height: 1.5em; }

#content-main.home-page ul#other-sites { list-style: none; margin: 0; position: relative; width: auto; margin-top: -2px; }
#content-main.home-page ul#other-sites li { float: left; margin-right: 10px; margin-bottom: 24px; width: auto; font-size: 0.857em; }
#content-main.home-page ul#other-sites li a { display: block; border-bottom: none; }
#content-main.home-page ul#other-sites li a img { padding: 4px; margin: 0; width: auto !important; height: auto; }

#content-main.home-page ul#other-sites li.morelink { clear: left; padding: 5px; padding-bottom: 0; }
#content-main.home-page ul#other-sites li.morelink a:link, #content-main.home-page ul#other-sites li.morelink a:visited { color: #444; padding: 0 0.357em; border: 1px solid #666; }
#content-main.home-page ul#other-sites li.morelink a:hover { border-color: #fc6044; color: #fc6044; }

/*
#content-main.home-page ul#other-sites li a:link span, #content-main.home-page ul#other-sites li a:visited span { position: absolute; top: -5%; right: -75%; z-index: 10; display: inline; font-size: 0.857em; padding: 4px; color: #fc6044; background-color: #fff; border: 1px solid #fc6044; visibility: hidden; }
ul#other-sites li a:hover span {}
*/

#content-main.home-page #other-sites a:link img, #content-main.home-page #other-sites a:visited img { border: 1px solid #ccc; display: block; width: 64.7887%; overflow-x: hidden; }
#content-main.home-page #other-sites a:hover img { border-color: #666; }

/*  About page  */
#content-main.about-page { margin-bottom: 1.714em; }
h2#about { position: absolute; width: 109px; text-align: center; height: 1.333em; margin-bottom: 0; margin-top: 0; left: 0; margin-left: 10px; padding: 0; }
h2#about span { position: absolute; height: 100%; width: 100%; background: url(../../images/about.gif) top left no-repeat; }
/*
#content-main.about-page p { width: 23.333%; }
#content-main.about-page p#learning-web-2 { position: absolute; left: 26.042%; top: 25.714em; text-indent: 0; margin-top: 0.214em; }
#content-main.about-page p#learning-web-3 { position: absolute; left: 51.042%; top: 25.714em; text-indent: 0; margin-top: 0.214em; }
#content-main.about-page div#background-info { position: absolute; left: 76.042%; top: 3.429em; text-indent: 0; padding-top: 0.214em; width: 23.333%; }
#content-main.about-page div#background-info p { width: 100%; }

#content-main.about-page #about-photo { width: 48.958%; overflow-x: hidden; position: absolute; top: 3.429em; left: 26.042%; }
#content-main.about-page #about-photo .photo-title { width: 100%; font-size: 0.857em; font-weight: bold; line-height: 1.5em; margin-bottom: 0; clear: right; }
#content-main.about-page #about-photo .photo-caption { width: 100%; font-size: 0.857em; line-height: 1.5em; text-indent: 0; }
#content-main.about-page #about-photo img { float: right; margin-bottom: 0.25em; }
*/

#content-main.about-page div { width: 74.737%; position: relative; left: 25.263%; padding-top: 20.571em; margin-top: 3.429em; background: url(../../images/bright-lights.jpg) top right no-repeat; overflow-x: hidden; background-position: 0 3.429em; }
#content-main.about-page p.lead { position: absolute; margin-top: 3.429em; width: 23.333%; top: 0; }
#content-main.about-page h3, #content-main.about-page p { width: 66.197%; padding: 0; }
#content-main.about-page p.content-sub { font-size: 0.857em; line-height: 1.5em; width: 24.648%; position: absolute; right: 0; top: 26em; color: #999; }


/*  Services page  */
#content-main.services-page { margin-bottom: 1.714em; }
h2#services { position: absolute; width: 155px; text-align: center; height: 1.333em; margin-bottom: 0; margin-top: 0; left: 0; margin-left: 5px; padding: 0; }
h2#services span { position: absolute; height: 100%; width: 100%; background: url(../../images/services.gif) top left no-repeat; }

#content-main.services-page div { width: 74.737%; position: relative; left: 25.263%; padding-top: 3.429em; margin-top: 3.429em; overflow-x: hidden; }
#content-main.services-page p.lead { position: absolute; margin-top: 3.429em; width: 23.333%; }
#content-main.services-page h3, #content-main.services-page p { width: 100%; padding: 0; }
#content-main.services-page p.content-sub { font-size: 0.857em; line-height: 1.5em; width: 24.648%; position: absolute; right: 0; top: 26em; color: #999; }

#content-main.services-page ul#services { list-style-type: none; margin-left: 0; padding-left: 0; width: 100%; }
#content-main.services-page ul#services li { padding-right: 17.143em; }

#content-main.services-page ul#services li#design { background: url(../../images/design.jpg) 92.361% 0 no-repeat; }
#content-main.services-page ul#services li#standards { background: url(../../images/standards.jpg) 92.361% 0 no-repeat; }
#content-main.services-page ul#services li#users { background: url(../../images/users.jpg) 92.361% 0 no-repeat; }
#content-main.services-page ul#services li#cms { background: url(../../images/cms.jpg) 92.361% 0 no-repeat; }
#content-main.services-page ul#services li#social { background: url(../../images/social.jpg) 92.361% 0 no-repeat; }


/*  Portfolio landing page  */
#content-main.portfolio-landing-page { margin-bottom: 1.714em; }
h2#portfolio { position: relative; width: 161px; height: 1.333em; margin-bottom: 0; float: left; }
h2#portfolio span { position: absolute; height: 100%; width: 100%; background: url(../../images/portfolio.gif) top left no-repeat; }
#content-main.portfolio-landing-page p.lead { float: left; clear: left; }
ul#projects { width: 74%; list-style: none; margin: 0; padding: 0; float: right; }
li.launchpad { width: 100%; height: 216px; position: relative; margin: 0; display: block; margin-bottom: 1em; }
.launchpad img { padding: 4px; position: absolute; top: 0; left: 0; float: left; }
.launchpad a:link img, .launchpad a:visited img { border: 1px solid #ccc; display: block; width: 64.7887%; overflow-x: hidden; }
.launchpad a:hover img { border-color: #666; }
.launchpad a.lightbox-link:hover { border-bottom: none; }
div.project-info { font-size: 0.857em; width: 31.831%; position: relative; left: 67.606%; padding-top: 0.25em; }
div.project-info h3 { font-size: 1.5em !important; }
div.project-info h4 { padding: 0.25em; margin-bottom: 0; font-size: 1em; display: inline; }
div.project-info p { margin-top: 0; margin-bottom: 0.5em; line-height: 1.5em; }
div.project-info p.more { text-indent: 0; }


/*  Profile page  */
h2#portfolio.profile { position: relative; width: 161px; height: 1.333em; margin-bottom: 0; float: left; }
h2#portfolio.profile span { position: absolute; height: 100%; width: 100%; background: url(../../images/portfolio.gif) top left no-repeat; }

div#content-sub { float: left; clear: left; width: 23.333%; margin-top: 1.714em; position: relative; }
#content-main.portfolio-profile-page p { width: 100%; }
#content-main.portfolio-profile-page ul#other-sites { list-style: none; margin: 0; position: relative; width: 100%; margin-top: -2px; }
#content-main.portfolio-profile-page ul#other-sites li { float: left; margin-right: 10px; margin-bottom: 24px; }
#content-main.portfolio-profile-page ul#other-sites li a { display: block; border-bottom: none; }
#content-main.portfolio-profile-page ul#other-sites li a img { padding: 4px; margin: 0; width: auto !important; height: auto; }

#content-main.portfolio-profile-page ul#other-sites li a:link span, #content-main.portfolio-profile-page ul#other-sites li a:visited span { position: absolute; top: -5%; right: -75%; z-index: 10; display: inline; font-size: 0.857em; padding: 4px; color: #fc6044; background-color: #fff; border: 1px solid #fc6044; visibility: hidden; }
ul#other-sites li a:hover span {}

#content-main.portfolio-profile-page div#profile { width: 74.658%; float: right; padding-top: 0.214em; }
#content-main.portfolio-profile-page div#profile img { padding: 4px; float: left; margin-bottom: 1.929em; }

#content-main.portfolio-profile-page h3 { font-weight: bold; margin-bottom: 1em; line-height: 1em; }

#content-main.portfolio-profile-page a:link img, #content-main.portfolio-profile-page a:visited img { border: 1px solid #ccc; display: block; width: 64.7887%; overflow-x: hidden; }
#content-main.portfolio-profile-page a:hover img { border-color: #666; }
#content-main.portfolio-profile-page a.lightbox-link:hover { border-bottom: none; }

#content-main.portfolio-profile-page div.project-info { float: right; left: 0; }

#content-main.portfolio-profile-page div#notes { clear: left; width: 66.197%; }


/* Contact page */
#content-main.contact-page { margin-bottom: 3.429em; }
h2#contact { position: relative; width: 142px; text-align: center; height: 1.333em; margin-bottom: 0; margin-top: 48px; left: 0; margin-left: 0; padding: 0; }
h2#contact span { position: absolute; height: 100%; width: 100%; background: url(../../images/contact.gif) top left no-repeat; }
#content-main.contact-page > div { width: 100%; position: relative; margin-top: 1.714em; margin-bottom: 0; overflow-x: hidden; }
#content-main.contact-page p.lead { position: absolute; margin-top: 0; width: 23.333%; }
#content-main.contact-page h3, #content-main.contact-page p { width: 66.197%; padding: 0; }
#content-main.contact-page p.content-sub { font-size: 0.857em; line-height: 1.5em; width: 24.648%; position: absolute; right: 0; top: 26em; color: #999; }



/* Site Information
-------------------------------------------------------------- */

#site-information { background: url(../../images/footer-bg.jpg) top left repeat-x; font-size: 0.857em; padding-bottom: 2em; padding-top: 2em; width: 100%; clear: both; height: 144px; }
#site-information p { color: #ddd; line-height: 2em; margin-bottom: 0; margin-left: 0.833em; text-indent: 0; }
#site-information abbr, #site-information acronym {border-bottom-color: #eee; }

#site-information ul { list-style-type: none; margin: 0 auto; padding-left: 0; line-height: 1.714em; min-width: 62.5em; max-width: 80em; position: relative; margin-top: 0; display: block; }
#site-information ul li { display: block; width: 23.958%; }
#site-information ul li#copyright { display: block; width: 47.916%; }
#site-information ul li#build { position: absolute; left: 25.263%; top: 0; }
#site-information ul li#mywork {position: absolute; top: 0; left: 50.526%; }
#site-information ul li#contactme { position: absolute; top: 0; left: 75.789%; }


/* Sticky footer
-------------------------------------------------------------- */


* { margin: 0;}
html, body { height: 100%; }
#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -192px; }
#site-information, #push { height: 144px; }