* { padding: 0; margin: 0; }

a:active, a:focus, a:visited { outline: none; }

html {
  background: #e8e8e8;
}

body {
  color: #313131;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 12px;
  font-size-adjust: none;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 24px;
  background: #fff;
}

body#home {
  background: url(../images/body-bg.png) left top repeat-x #fff;
}

/**** Generic styles ****/
a, a:visited, a:active { color: #2b76ca; outline: none;  }
a:hover { color: #0e478a;  }

p { margin-bottom: 1em; }

p.large {
  font-size: 12pt;
  color: #666;
  margin-bottom: 2em;
}

strong { font-weight: bold; }

h1 {
  font-size: 26pt;
  line-height: 40px;
  font-weight: bold;
  text-align: left;
}

h2 {
  font-size: 18pt;
  line-height: 30px;
  text-align: left;
  margin-bottom: 0.5em;
}

h3 {
  font-size: 14pt;
  line-height: 30px;
  text-align: left;
  margin-bottom: 0.5em;
}

h4 {
  font-size: 10pt;
  text-align: left;
  margin-bottom: 0.5em;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.left { float: left; }
.right { float: right; }

.container {
  text-align: center;
  margin: 0 auto;
  width: 960px;
}

.small { font-size: 8pt; color: #858585; }

.shaded-box-sm { background: #f3f3f3; padding: 5px 10px; margin-bottom: 1em; }
.shaded-box-sm p.category { padding: 0; margin: 0; }

/**** List styles ****/
ul.values { padding-left: 2em; }
ul.values li { padding-left: 25px; background: url(../images/icon-check.png) left center no-repeat; }

/**** Icons ****/
.icon-expense { background: url(../images/icon-expense.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-leave { background: url(../images/icon-leave.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-time { background: url(../images/icon-time.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-asset { background: url(../images/icon-asset.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-report { background: url(../images/icon-report.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-card { background: url(../images/icon-card.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-security { background: url(../images/icon-security.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-getstarted { background: url(../images/icon-getstarted.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-admin { background: url(../images/icon-admin.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}


.icon-info { background: url(../images/icon-info.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-processinfo { background: url(../images/icon-processinfo.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-refresh { background: url(../images/icon-refresh.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-support { background: url(../images/icon-support.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-world { background: url(../images/icon-world.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-newsletter { background: url(../images/icon-newsletter.png) left top no-repeat; padding-left: 60px; padding-bottom: 5px;}
.icon-tag { background: url(../images/icon-tag.png) left -5px no-repeat; padding-left: 60px; padding-bottom: 0; margin-bottom: 0; }
.icon-posts { background: url(../images/icon-posts.png) left -5px no-repeat; padding-left: 60px; padding-bottom: 0; margin-bottom: 0; }
.icon-twitter { background: url(../images/icon-twitter.png) left top no-repeat; padding-left: 60px; padding-bottom: 0; margin-bottom: 0; }


/**** Navigation ****/
#navigation { background: #333; width: 100%; }
#navigation ul { background: #333; height: 40px; margin: 0; padding: 0; list-style: none; float: left; margin-left: 0; font-size: 11pt; }
body#inner-page #navigation ul, body#feature-page #navigation ul, body#blog-page #navigation ul { margin-left: -15px; }
#navigation ul li { float: left; position: relative; z-index: 99; }
#navigation ul a { display: block; float: left; padding: 0 15px; padding-top: 9px; height: 35px; text-decoration: none; line-height: 18px; color: #fff; }
#navigation ul .cap { width: 5px; height: 35px; display: block; position: absolute; top: 8px; right: 0 }
* html #navigation ul .cap { right: -1px }
#navigation ul .selected .cap, #navigation ul a.selected:hover .cap { background: url("../images/nav-selected-cap.gif") 0 0 no-repeat; width: 8px }
#navigation ul a.selected, #navigation ul a.selected:hover { background: url("../images/nav-selected.gif") 3px 8px no-repeat; color: #fff; }
#navigation ul a.free-trial, #navigation ul a.free-trial:hover { color: #a5d108; }
#navigation ul a:hover { background: url("../images/nav-hover.gif") 3px 8px no-repeat; color: #fff; }
#navigation ul a:hover .cap { background: url("../images/nav-hover-cap.gif") 0 0 no-repeat; width: 8px }


/**** Page header ****/
#page-header { padding: 1em 1em 0; background: #cfe7fa; }
#page-header h1 { float: left; font-size: 20pt; }
#page-header h2.logo { cursor: hand; cursor: pointer; float: right; width: 128px; height: 38px; background: url(../images/medley-logo-sm.png) left top no-repeat; }
#page-header h2.logo span { display: none; }

/**** Promo ****/
#promo { height: 425px; }
#promo .left { width: 45%; text-align: left; }
#promo .right { width: 50%; height: 425px; }
#promo .right div#main-screenshot { padding-top: 60px; width: 100%; height: 356px; background: url(../images/screenshot.jpg) left 50% no-repeat; cursor: hand; cursor: pointer; }
#promo .right div#main-screenshot:hover { background: url(../images/screenshot_hover.jpg) left 50% no-repeat; }
#promo .left h1.logo { margin-top: 30px; width: 202px; height: 60px; background: url(../images/medley-logo.png) left top no-repeat; }
#promo .left h1.logo span { display: none; }
#promo .left h1 { font-family: Arial, sans-serif; margin: 15px 0 15px; color: #000; }
#promo .left h2 { font-size: 16pt; font-family: Georgia; margin: 0 0 10px; }
#promo .actions { margin-top: 70px; }

/**** Page Content ****/
body#home .page-content { background: url(../images/page-content-bg.png) left top repeat-x #fff; padding-top: 0em; padding-bottom: 5em; }

/**** Inner Page ****/
body#inner-page .page-content { padding-top: 2em; background: #fff; padding-bottom: 5em; }
body#inner-page .page-content .left { width: 650px; text-align: left; }
body#inner-page .page-content .left .wrapper { padding-right: 4em; }
body#inner-page .page-content .right { width: 260px; text-align: left; }
body#inner-page .page-content .right .wrapper { }

body#inner-page .page-content .shaded-box { background: #f3f3f3; margin-bottom: 2em; }
body#inner-page .page-content .shaded-box .wrapper { padding: 1.5em 2em; }
body#inner-page .page-content .shaded-box p { line-height: 18px; }
body#inner-page .page-content .shaded-box h3 { padding-bottom: 20px; }


/**** Feature Page ****/
body#feature-page .page-content { padding-top: 2em; background: #fff; padding-bottom: 5em; }
body#feature-page .page-content .left { width: 230px; height: 782px; min-height: 782px; background: url(../images/feature-page-bg.jpg) right top no-repeat #fff; text-align: left; margin-top: -2em; }
body#feature-page .page-content .left ul { padding-top: 2em; }
body#feature-page .page-content .left ul li { border-style: none none solid none; border-width: 1px; border-color: #e0e2e4; }
body#feature-page .page-content .left ul li.top { border-bottom: solid 1px #e0e2e4; }
body#feature-page .page-content .left ul li a { font-size: 1.1em; text-decoration: none; color: #666; padding: 10px 0 10px 45px; display: block; position: relative; width: 190px; }
body#feature-page .page-content .left ul li a:hover { background: #f1f0f0; width: 185px; }
body#feature-page .page-content .left ul li.selected { border: none; font-weight: bold; }
body#feature-page .page-content .left ul li.selected a { background: url(../images/sidenav-selected.png) left top no-repeat #fff; color: #fff; padding-right: 10px; }
body#feature-page .page-content .left ul li.selected a:hover { width: 190px; }

body#feature-page .page-content .right { width: 690px; text-align: left; }
body#feature-page .page-content .right h2 { line-height: 28px; margin-bottom: 0.5em; color: #000; font-weight: bold; }
body#feature-page .page-content .right h3 { color: #000; }

body#feature-page .page-content .left ul li span.icon { height: 34px; width: 34px; }
body#feature-page .page-content .left ul li span.expenses { background: url(../images/icon-expense-sm.png) left top no-repeat; display: block; position: absolute; left: 5px; }
body#feature-page .page-content .left ul li span.leave { background: url(../images/icon-leave-sm.png) left top no-repeat; display: block; position: absolute; left: 5px; }
body#feature-page .page-content .left ul li span.time { background: url(../images/icon-time-sm.png) left top no-repeat; display: block; position: absolute; left: 5px; top: 4px; }
body#feature-page .page-content .left ul li span.assets { background: url(../images/icon-assets-sm.png) left top no-repeat; display: block; position: absolute; left: 5px; top: 4px; }
body#feature-page .page-content .left ul li span.reporting { background: url(../images/icon-report-sm.png) left top no-repeat; display: block; position: absolute; left: 13px; top: 4px; }
body#feature-page .page-content .left ul li span.details { background: url(../images/icon-card-sm.png) left top no-repeat; display: block; position: absolute; left: 10px; top: 4px; }
body#feature-page .page-content .left ul li span.administration { background: url(../images/icon-admin-sm.png) left top no-repeat; display: block; position: absolute; left: 5px; top: 4px; }
body#feature-page .page-content .left ul li span.overview { background: url(../images/icon-overview-sm.png) left top no-repeat; display: block; position: absolute; left: 5px; top: 4px; }

body#feature-page .feature-banner { padding-bottom: 1em; }

/* Overview */
body#feature-page .page-content .right ul.overview li { padding-bottom: 3em; }
body#feature-page .page-content .right ul.overview li div.screenshot { float: left; width: 250px; }
body#feature-page .page-content .right ul.overview li div.screenshot img { border: solid 1px #e0dfdf; }
body#feature-page .page-content .right ul.overview li div.text { float: left; width: 440px; }
body#feature-page .page-content .right ul.overview li div.text h3 { color: #000; line-height: 18px; margin-bottom: 0.7em; }

body#feature-page .page-content .right ul.overview-sm { font-size: 0.9em; }
body#feature-page .page-content .right ul.overview-sm li { float: left; width: 340px; }
body#feature-page .page-content .right ul.overview-sm li .wrapper { padding: 0 20px 0 0; }
body#feature-page .page-content .right ul.overview-sm li h4 { font-weight: bold; color: #000; line-height: 40px; }

div.free-trial { background: #E2F9E3; border: solid 1px #b8e1ba; margin-bottom: 1em; }
div.free-trial .wrapper { padding: 1em 1.5em; }
div.free-trial .wrapper a { display: block; text-align: right; text-decoration: none; color: #056A05; font-size: 1.5em; }

/**** Blog Page ****/
body#blog-page .page-content { padding-top: 2em; background: #fff; padding-bottom: 5em; }
body#blog-page .page-content .left { width: 650px; text-align: left; }
body#blog-page .page-content .left .wrapper { padding-right: 4em; }
body#blog-page .page-content .right { width: 260px; text-align: left; }
body#blog-page .page-content .right .wrapper { }

body#blog-page .page-content .shaded-box { background: #f3f3f3; margin-bottom: 2em; }
body#blog-page .page-content .shaded-box .wrapper { padding: 1.5em 2em; }
body#blog-page .page-content .shaded-box p { line-height: 18px; }
body#blog-page .page-content .shaded-box h3 { padding-bottom: 20px; }

body#blog-page .page-content .left ul li { list-style-type: disc; margin-left: 4em; padding-bottom: 1em; }

body#blog-page ul.recent-posts li, body#blog-page ul.blog-categories li { background: url(../images/icon-page-sm.png) left 5px no-repeat; padding-left: 22px; }


body#blog-page div.pagination { padding-left: 140px; padding-top: 3em; }
body#blog-page div.pagination a, body#blog-page div.pagination strong, body#blog-page div.pagination span { display: block; float: left; margin-right: 3px; padding: 0 10px; }
body#blog-page div.pagination a { border: 1px solid #e5e5e5; color: #0d488a; text-decoration: none; }
body#blog-page div.pagination span.current { background: #0d488a; color: #fff; }
body#blog-page div.pagination a:hover { border: 1px solid #8b96a4; text-decoration:none}
body#blog-page div.pagination strong { background-color: #2173af; border:1px solid #2173af; color:#fff; font-weight: normal; }
body#blog-page div.pagination .disabled { display: none; }

/* Blog entry & post */
body#blog-page div.blog-post { padding: 1em 0; border-style: solid none none; border-color: #cfe7fa; border-width: 1px; }
body#blog-page div.blog-post div.body { float: left; width: 530px; }
body#blog-page div.blog-post div.body .wrapper { padding: 0 0 0 20px; }
body#blog-page div.blog-post div.body a.title, body#blog-page h1.title { display: block; font-size: 22pt; line-height: 30px; text-align: left; margin-bottom: 0.5em; text-decoration: none; color: #0d488a; font-weight: normal; }
body#blog-page div.blog-post h1 { border-bottom: solid 1px #cfe7fa; padding-bottom: 1em; }
body#blog-page div.blog-post div.body div.summary { margin-bottom: 1.5em; }
body#blog-page div.blog-post div.body p.category { font-weight: bold; background: url(../images/icon-tag-sm.png) left top no-repeat; padding-left: 30px; }
body#blog-page div.blog-post div.body p.category a { font-weight: normal; text-decoration: none; }
body#blog-page div.blog-post div.date { float: left; width: 120px; }
body#blog-page div.blog-post div.date p.date { font-size: 1.1em; font-weight: bold; margin-bottom: 0em; }
body#blog-page div.blog-post div.date p.author { background: none; }
body#blog-page div.blog-post div.date a.comments { display: block; background: url(../images/icon-comment.png) left center no-repeat; padding-left: 30px; }

body#blog-page div.comments { padding-top: 2em; }
body#blog-page div.comments h3 { padding-left: 140px; font-weight: bold; color: #0d488a; }
body#blog-page div.comments div.comment { border-style: solid none none; border-color: #cfe7fa; border-width: 1px; }
body#blog-page div.comments div.comment .wrapper { padding: 1em 0; }
body#blog-page div.comments div.comment div.author { float: left; width: 120px; background: #fff; font-weight: bold; }
body#blog-page div.comments div.comment div.author a { text-decoration: none; }
body#blog-page div.comments div.comment div.author .date { font-weight: normal; color: #818181; line-height: 14px; }
body#blog-page div.comments div.comment div.content-html { float: left; width: 530px; }
body#blog-page div.comments div.comment div.content-html .wrapper { padding: 0 0 0 20px; }
body#blog-page div.comments div.comment div.flash-success { padding: 7px 20px 0 50px; background: url(../images/icon-tick.png) 20px 7px no-repeat #E2F9E3; border: solid 1px #60A657; color: #056A05; }

body#blog-page #comment-form { background: #f3f3f3; margin-top: 2em; margin-left: 140px; }
body#blog-page #comment-form .wrapper { padding: 2em; }
body#blog-page #comment-form form .input-row { width: 350px; }
body#blog-page #comment-form form .input-row input { width: 338px; }



/**** Features ****/
.features { padding: 2em 0; }
.features .tile { width: 240px; float: left; text-align: left; }
.features .tile .wrapper { padding-right: 20px; }
.features .tile h2 { font-size: 14pt; line-height: 20px; margin-bottom: 10px; }
.features .tile p { color: #646464; }

/**** Testimonials ****/
.testimonial { width: 750px; background: #cee7fa; text-align: center; margin: 0 auto; border: solid 1px #2789bc; margin-bottom: 1em; }
.testimonial .wrapper { padding: 1em; }
.testimonial .photo { width: 100px; text-align: left; }
.testimonial .text { width: 550px; text-align: left; }
.testimonial .text p { font-size: 12pt; }
.testimonial .text p.small { font-size: 9pt; color: #505050; }

/**** Footer ****/
.footer { height: 50px; background: #e8e8e8; }
.calls-to-action { text-align: center; margin: 1em auto 2em; }

/*.footer { background: #e8e8e8; }
.footer .container { background: red; }
.footer .call-to-action { padding-bottom: 2em; }
.footer .wrapper { height: 50px; background: #e8e8e8; } 
*/
/**** Form Styles ****/
fieldset { margin-bottom: 0.5em; }
form label { text-align:left; width:auto; float: left; font-weight: bold; }
form em { float: right; }
form em.error { background: url(../images/icon-error.png) left top no-repeat; padding-left: 20px; float:none; margin-left:0px; width:auto; color: #b41010; }
form .input-row { width: 262px; }
form .input-row input { width: 250px; }
form .input-row select { width: 262px; }
form .buttons { margin: 0 0 0 0}
.input-row { padding-bottom: 20px; }
.text-field, .textarea, .select-field { border: solid 1px #c4c4c4; padding: 5px; }
.input-row em { color: #86919e; font-size:11px; font-style:normal }
.input-row em.required { color: #ff6666; }
/*.buttons { border-top: solid 1px #b1b1b1; padding-top: 1em; }*/
.buttons {  }
.buttons .image { padding: 0; }


form#newsletter input.submit { width: 50px; }
form#newsletter input.text-field { width: 150px; font-weight: normal; }