/*
Theme Name: Lola Design
Theme URI: http://www.loladesign.ca
Description: Lola Design
Version: 1.0
Author: Josh Poulain
Author URI: http://www.grownbynature.ca
*/

body {margin: 0; padding: 0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; background: #fff;}

img {border: none;}

.clear {clear: both;}

#top-spacer {width: 100%; height: 150px; background: #981B37;}

#container {width: 1040px; margin: 0 auto;}

#side-contact {width: 210px; float: left; background: #fff; padding-top: 35px;}

#side-contact img {margin-bottom: 15px;}

#side-contact p {font-size: 13px; color: #991A36; font-weight: regular; line-height: 17px; margin-left: 18px;}

#side-contact p a {color: #991a36; text-decoration: none;}

#side-contact p a:hover {text-decoration: underline;}

#content {width: 805px; margin-left: 20px; float: right;}

/* Navigation */

#nav {width: 100%; height: 25px; background: #333333; padding-top: 10px;}

ul.IR li {
  position: relative;
  top: -15px;
  overflow: hidden;
  font-size: 0.9em;
  margin-bottom: 17px;
}

.IR em {
  display: block;
  position: absolute;
  top: 0; left: 0;
  z-index: 999;
}

/* For IE5.x mac only */
* html>body .IR {
  position: static;
  overflow: hidden;
  font-size: 10px;
}

* html>body .IR em  { position: static; }

.nav { list-style: none; }
.nav li { float: left;}
.nav li, .nav li em { width: 147px; height: 17px; }
.nav li, .nav li a {color: #333333;}

.home em, .portfolio em, .blog em, .services em, .contact em {
  background: url(images/nav/nav.png) no-repeat;
  cursor: pointer;
}

.home em { left: 0; }
.home em {
  background-position: 0 0px;
  max-height: 16px;
  max-width: 62px;
}
.home:hover em {
  background-position: 0 -18px;
}
.portfolio { left: -30px; }
.portfolio em {
  background-position: -57px 0;
  max-height: 18px;
  width: 75px;
  margin-left: -56px;
}
.portfolio:hover em {
  background-position: -57px -18px;
}
.blog { left: -43px; }
.blog em {
  background-position: -214px 0;
  margin-left: -41px;
}
.blog:hover em {
  background-position: -214px -18px;
}
.services { left: -127px; }
.services em {
  background-position: -318px 0;
}
.services:hover em {
  background-position: -318px -18px;
}
.contact { left: -108px; }
.contact em {
  background-position: -494px 0;
}
.contact:hover em {
  background-position: -494px -18px;
}

/* Home Page */

#home-left {width: 365px; float: left; color: #59595C;}

#home-left h2 {margin-top: 30px; color: #009B9B;}

#home-left h3 {color: #009B9B; margin: 0; font-weight: normal;}

#home-left a {color: #009B9B;}

.divide {width: 345px; height: 30px; background: #fff; margin-bottom: 5px;}

#home-sideimg {float: right; margin-top: -25.5px;}

/* Portfolio */

#portfolio-content {width: 805px; float: left; color: #59595C;}

#portfolio-content h2 {color: #009B9B; margin-top: 30px; margin-bottom: 10px;}

.anythingSlider                         { width: 760px; height: 360px; position: relative; margin: 0 auto 15px; }
.anythingSlider .wrapper                { width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; }

                                       /* Width below is max for Opera */
.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0px; background: #eee; border: 3px solid #ccc; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; margin-left: -50px; padding: 0; height: 317px; width: 650px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }

#thumbNav                               { position: relative; top: 323px; text-align: center; }
#thumbNav a                             { color: #fff; font: 7px; display: inline-block; padding: 1px 4px 8px 4px; height: 16px; margin: 0 3px 0 0; background: #ccc url(../images/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover                       { background-image: none; }
#thumbNav a.cur                         { background: #A83347; }

#start-stop                             { background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { background-color: red; }
#start-stop:hover                       { background-image: none; }

/*
  Prevents
*/
.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }

/*
    This stuff is for the TitleBlock Plugin
*/
.image                                  { position: relative; margin-bottom: 20px; width: 100%; }
.image h2                               { position: absolute; top: 220px; left: 0; width: 100%; }
.image h2 span                          { color: white; font: bold 30px/40px Helvetica, Sans-Serif; letter-spacing: -1px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); padding: 6px 8px; }
.image h2 span.spacer                   { padding: 0 2px; background: none; }


/*
    For Specific Slides
*/
#textSlide                              { padding: 10px 30px; }
#textSlide h3                           { font: 20px; }
#textSlide h4                           { text-transform: uppercase; font: 15px; margin: 10px 0; }
#textSlide ul                           { list-style: disc; margin: 0 0 0 25px; }
#textSlide ul li                        { display: list-item; }

#quoteSlide                             { padding: 30px; }
#quoteSlide blockquote                  { font: italic 24px/1.5; text-align: center; color: #444; margin: 0 0 10px 0; }
#quoteSlide p                           { text-align: center; }

/* pages */

#page-left {width: 525px; float: left; margin-right: 20px; color: #59595C;}

#page-left h2 {color: #009B9B; margin-top: 30px; margin-bottom: 10px;}

#page-left h3 {color: #009B9B; margin: 0; font-weight: normal;}

span.meta {font-size: 12px;}

span.meta a {color: #009B9B;}

#page-left p {font-size: 14px;}

#page-left p img {float: left; margin-right: 20px;}

#page-right {width: 260px; float: right; color: #59595C;}

#page-right h3 {color: #009B9B; margin-top: 30px; font-weight: normal;}

#page-right ul {list-style: none; margin-left: -40px; font-size: 15px; color: #59595C;}

#page-right ul li {margin-bottom: 5px;}

#page-right a {color: #991a36; text-decoration: none;}

/* Blog */

#blog-left {width: 625px; float: left; margin-right: 20px; color: #59595C;}

#blog-left h2 {color: #009B9B; margin-top: 30px; margin-bottom: 10px;}

#blog-left h3 {color: #009B9B; margin: 0; font-weight: normal;}

#blog-left h3 a {color: #009B9B; text-decoration: none;}

#blog-left h3 a:hover {color: #009B9B; text-decoration: underline;}

#blog-left p {font-size: 14px;}

#blog-left p img {float: inherit; padding-left: 20px; margin-right: 20px;}

#blog-right {width: 160px; float: right; color: #59595C;}

#blog-right h3 {color: #009B9B; margin-top: 30px; font-weight: normal;}

#blog-right ul {list-style: none; margin-left: -40px; font-size: 15px; color: #59595C;}

#blog-right ul a {text-decoration: none; color: #59595C;}

#blog-right ul a:hover {text-decoration: underline; color: #59595C;}

#blog-right ul li {margin-bottom: 5px;}