/*
Theme Name: Saplo
Theme URI: http://saplo.com/
Description: Saplo Theme.
Version: 1.0
Author: Joakim Stenberg
Author URI: http://saplo.com/
Tags: one column, two columns
*/



/******************************************************************************************
HTML
******************************************************************************************/

/* Needed in order to push footer to bottom of page */
* {
	margin: 0;
}
html {
	height: 100%;
}
hr {
	display: none;
}
small {
	font-size: 10px;
	line-height: 20px;
}
a img {
	border: none;
}
p img {
	max-width: 100%;
	padding: 0;
}

/******************************************************************************************
HTML / Links
******************************************************************************************/

a {
	color: #1067b5;
	text-decoration: underline;
}
a:hover {
}
a:visited {
}

/******************************************************************************************
HTML / Headlines
******************************************************************************************/

h1, h2, h3 {
	margin: 0;
	padding: 0 0 10px 0;
	color: #333;
	font-family: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	text-decoration: none;
}
h1 {
	font-size: 36px;
}
h2 {
	font-size: 22px;
}
h3 {
	font-size: 18px;
}
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited {
	color: #333;
	text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	text-decoration: underline;
}

/******************************************************************************************
Body
******************************************************************************************/

body {
	height: 100%; /* Needed in order to push footer to bottom of page */
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	color: #333;
	font-size: 14px;
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}

/******************************************************************************************
Page
******************************************************************************************/

/*	The negative value of the margin is the same number as the height 
	of .footer. The negative margin should always equal to the full 
	height of the footer (including any padding or borders). */
#page {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -200px;
	background-color: #FFFFFF;
}

/******************************************************************************************
Menu
******************************************************************************************/

#menu {
	clear: both;
	height: 80px;
	background-color: #333333;
}
.menu-front {
}
.menu-standard {
	border-bottom: 5px solid #89B53D;
}
#menu-content {
	width: 1000px;
	margin: 0 auto;
}
#menu-logo {
	float: left;
	width: 120px;
	height: 80px;
}
#menu-logo img {
	margin-top: 10px;
}
#menu-options {
	float: left;
	margin-top: 44px;
}
#menu-options ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu-options li {
	display: inline;
	margin: 0;
}
#menu-options a {
	float: left;
	padding-right: 15px;
	padding-left: 15px;
	color: #FFFFFF;
	font-family: Helvetica, Verdana, Arial, Sans-Serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
}
#menu-options a:hover {
}
#menu-options .current_page_item a {
	background-color: #89B53D;
	border-top: 1px solid #89B53D;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
}
#menu-search {
	float: right;
	width: 215px;
	height: 30px;
	margin-bottom: 10px;
}
#menu-search #s {
	width: 155px;
	padding: 4px 5px;
	background-color: #333;
	border: 1px solid #DFDFDF;
	color: #FFF;
	font-size: 12px;
}
#menu-search #searchsubmit {
	float: right;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent url(images/search/submit-search.png) no-repeat center top;
	text-indent: -1000em;
	cursor: pointer; /* hand-shaped cursor */
	cursor: hand; /* for IE 5.x */
}
#menu-lang {
	float: right;
	width: 260px;
	margin-top: 20px;
	color: #FFF;
	font-size: 10px;
	text-align: right;
}
#menu-lang img {
	margin-right: 5px;
}
#menu-lang ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#menu-lang li {
	display: inline;
	margin-right: 10px;
}
#menu-lang a {
	color: #FFF;
	font-size: 10px;
	text-decoration: none;
}

/******************************************************************************************
Banner
******************************************************************************************/

#banner {
	clear: both;
	background-color: #89B53D;
}
#banner-content {
	width: 1000px;
	margin: 0 auto;
}
#banner-content .banner-text {
	width: 900px;
	height: 140px;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
}
#banner-content .banner-text h1 {
	padding: 0;
	color: #FFFFFF;
	font-size: 62px;
}
#banner-content .banner-text p {
	padding-top: 10px;
	color: #FFFFFF;
	font-size: 18px;
}

/******************************************************************************************
Header / Frontpage
******************************************************************************************/

.front-info {
	clear: both;
	background-color: #ffff99;
	border-bottom: 1px solid #DFDFDF;
}
.front-info .content {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.front-info .content p {
	padding: 10px 0;
	font-size: 16px;
}

/******************************************************************************************
Main
******************************************************************************************/

#main {
	clear: both;
	width: 1000px;
	margin: 0 auto;
}

/******************************************************************************************
Content
******************************************************************************************/

#content {
}
#content.narrow {
	float: right;
	width: 670px;
	padding: 40px 0;
}
#content.wide {
	width: 1000px;
	padding: 40px 0;
}
#content.index {
	width: 940px;
	padding: 30px 20px 40px 20px;
}
#content h1.pagetitle {
	margin: 0 0 20px 0;
}
#content .entry {
	font-size: 14px;
	line-height: 21px;
}
#content .entry ul {
	list-style-type: disc;
}
#content .entry ol {
	margin: 0;
	padding: 0 0 0 35px;
}
#content .entry ol li {
	margin: 0;
	padding: 0;
}
#content .entry .space {
	clear: both;
	padding: 20px 0;
}
#content .entry img.border {
	padding: 10px;
	border: 1px solid #ccc;
}
#content .entry h2 {
	padding-top: 20px;
}
#content .entry p {
	padding: 7px 0;
}
#content .post {
	margin: 0;
}
#content .post hr {
	display: block;
}
#content .postmetadata {
	clear: both;
	margin: 30px 0;
	padding: 10px 0;
	border-top: 1px solid #DFDFDF;
	border-bottom: 1px solid #DFDFDF;
	font-size: 10px;
	text-align: center;
}
#content .postmetadata ul, #content .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
}
#content .navigation {
	display: block;
	margin-top: 10px;
	margin-bottom: 60px;
	text-align: center;
}
#content .navigation a {
	font-size: 16px;
}

/******************************************************************************************
Content / AddThis
******************************************************************************************/

#content .addthis_container {
	margin-top: 20px;
}
#content .addthis_toolbox {
	margin: 30px 0;
	font-size: 12px;
}
#content a.addthis_button_compact {
	font-size: 12px;
	line-height: 16px;
	text-decoration: none;
}

/******************************************************************************************
Content / Frontpage
******************************************************************************************/

#content .front-top {
	clear: both;
	width: 100%;
	color: #666;
	font-size: 14px;
	line-height: 21px;
}
#content .front-top .firstcol {
	float: left;
	width: 270px;
	margin-right: 3px;
	padding: 10px 19px 20px 19px;
}
#content .front-top .secondcol {
	float: left;
	width: 270px;
	margin: 0 3px;
	padding: 10px 19px 20px 19px;
}
#content .front-top .thirdcol {
	float: left;
	width: 270px;
	margin-left: 3px;
	padding: 10px 19px 20px 19px;
}
#content .front-middle {
	clear: both;
	width: 100%;
	margin-top: 20px;
	padding-top: 30px;
	border-top: 1px solid #DFDFDF;
}
#content .front-middle h2 {
	padding: 0 0 10px 0;
}
#content .front-left {
	float: left;
	width: 450px;
}
#content .front-left .front-why-saplo {
}
#content .front-left .front-why-saplo-content {
	margin-bottom: 30px;
	color: #666;
}
#content .front-left .front-why-saplo-content p {
	font-size: 14px;
	line-height: 21px;
}
#content .front-left .front-why-saplo-content img {
	float: left;
	padding: 0 20px 5px 0;
}
#content .front-right {
	float: right;
	width: 450px;
}
#content .front-right .front-comments-saplo {
	width: 450px;
	margin-bottom: 30px;
	background-color: #F3F3F3;
}
#content .front-right .front-comments-saplo-content {
	padding: 30px;
}
#content .front-right .front-comments-saplo-content p {
	font-size: 14px;
	font-style: italic;
	line-height: 21px;
}
#content .front-right .front-comments-saplo .front-comment-by {
	padding-top: 20px;
	color: #333;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
}
#content .front-right .front-awards-saplo {
	width: 450px;
	background-color: #F3F3F3;
}
#content .front-right .front-awards-saplo-content {
	padding: 30px;
	text-align: center;
}
#content .front-right .front-awards-saplo-content p {
	font-size: 14px;
	line-height: 21px;
}
#content .front-right .front-awards-saplo-content h2 {
}
#content .front-right .front-award {
	padding-top: 20px;
}
#content .front-right .front-awards-saplo .front-award-by {
	padding-bottom: 20px;
	font-style: italic;
	font-weight: bold;
	text-align: center;
}
#content .front-bottom {
	clear: both;
	width: 100%;
	margin-top: 40px;
	margin-bottom: 10px;
	padding-top: 20px;
	border-top: 1px solid #DFDFDF;
}
#content .front-customers {
	width: 650px;
	margin: 0 auto;
	text-align: center;
}
#content .front-customers a {
	float: left;
	width: 300px;
	height: 100px;
	margin: 20px 5px 10px 5px;
	border: 1px solid #DFDFDF;
	text-decoration: none;
}
#content .front-customers a:hover {
	border-color: #CCCCCC;
}

/******************************************************************************************
Content / Contact
******************************************************************************************/

#content .contact {
	clear: both;
	width: 100%;
	font-size: 14px;
	line-height: 21px;
}
#content .contact .detailscol {
	float: left;
	width: 400px;
	margin: 0 3px;
	padding: 0 19px 40px 19px;
}
#content .contact .detailscol .detailsContent {
	padding-bottom: 25px;
}
#content .contact .mapcol {
	float: left;
	width: 450px;
	margin: 0 0 40px 3px;
	padding: 0 19px 20px 19px;
}
#content .contact .firstcol {
	float: left;
	width: 270px;
	margin: 0 3px 10px 0;
	padding: 0 19px 20px 19px;
}
#content .contact .secondcol {
	float: left;
	width: 270px;
	margin: 0 3px;
	padding: 0 19px 20px 19px;
}
#content .contact .thirdcol {
	float: left;
	width: 270px;
	margin: 0 0 20px 3px;
	padding: 0 19px 20px 19px;
}

/******************************************************************************************
Content / API
******************************************************************************************/

#content #api-content {
	float: left;
	width: 500px;
}
#content #api-form {
	float: right;
	width: 460px;
}

/******************************************************************************************
Sidebar
******************************************************************************************/

#sidebar {
	float: left;
	padding: 40px 0;
}

/******************************************************************************************
Sidebar / Submenu
******************************************************************************************/

#submenu {
	width: 240px;
	padding: 20px;
	background-color: #f3f3f3;
}
#submenu h3 {
	margin-bottom: 10px;
	padding: 0 0 10px 0;
	color: #666;
	border-bottom: 1px solid #ddd;
}
#submenu h3 a {
	color: #666;
	text-decoration: none;
}
#submenu .arrow {
	float: right;
}
#submenu ul li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#submenu li {
	border-bottom: 1px solid #ddd;
}
#submenu ul, #submenu ul ol {
	margin: 0;
	padding: 0;
}
#submenu ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
}
#submenu ul ul, #submenu ul ol {
	margin: 5px 0 0 10px;
}
#submenu ul ul ul, #submenu ul ol {
	margin: 0 0 0 10px;
}
#submenu ul ul li, #submenu ul ol li {
	margin: 3px 0 0;
	padding: 0;
}
#submenu ul ul li:before {
	content: "\00BB \0020";
}
#submenu ul ul li, #submenu ul ol li {
	color: #777;
}
#submenu .page_item a, #submenu .cat-item a {
	color: #666;
	font-size: 14px;
	line-height: 28px;
	text-decoration: none;
}
#submenu .page_item a:hover, #submenu .cat-item a:hover {
	color: #89B53D;
}
#submenu li.current_page_item a {
	color: #89B53D;
}
#submenu li.current-cat a {
	color: #89B53D;
}

/******************************************************************************************
Footer
******************************************************************************************/

/*	The height of push should equal to the full height 
	of the footer (including any padding or borders). */

#push {
	clear: both;
	height: 200px;
}
#footer {
	clear: both;
	height: 200px;
	padding: 0;
	background-color: #333;
}
#footer #footer-content {
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	color: #999;
}
#footer .foot-top {
	clear: both;
	width: 100%;
}
#footer .foot-quicklinks {
	float: left;
	width: 100px;
	margin-right: 20px;
}
#footer .foot-quicklinks h3, #footer .foot-contact h3 {
	color: #FFF;
	font-size: 12px;
	padding: 0;
}
#footer .foot-quicklinks ul, #footer .foot-contact ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer .foot-quicklinks li, #footer .foot-contact li {
	margin: 0;
	color: #999;
	font-size: 10px;
	line-height: 20px;
	text-decoration: none;
}
#footer .foot-quicklinks a, #footer .foot-contact a {
	display: block;
	color: #999;
	font-size: 10px;
	line-height: 20px;
	text-decoration: none;
}
#footer .foot-quicklinks a:hover, #footer .foot-contact a:hover {
	color: #CCC;
}
#footer .foot-quicklinks .current_page_item a {
	color: #89B53D;
}
#footer .foot-contact {
	float: right;
	width: 120px;
}
#footer .foot-terms {
	clear: both;
	padding-top: 55px;
}
#footer .foot-terms p {
	margin: 0;
	font-size: 10px;
	text-align: center;
}

/******************************************************************************************
Misc
******************************************************************************************/

.clear {
	clear: both;
}
.divider {
	width: 100%;
	height: 30px;
	margin-top: 30px;
	border-top: 1px solid #CCC;
}

/******************************************************************************************
Misc / Align
******************************************************************************************/

img.centered {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
img.alignright {
	display: inline;
	margin: 0 0 2px 7px;
	padding: 4px;
}
img.alignleft {
	display: inline;
	margin: 0 7px 2px 0;
	padding: 4px;
}
.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
.center {
	text-align: center;
}
div.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

/******************************************************************************************
Misc / Comments
******************************************************************************************/

.commentlist li, #commentform input, #commentform textarea {
	font: 12px 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li ul li {
	font-size: 14px;
}
.commentlist li {
	font-weight: bold;
}
.commentlist li .avatar { 
	float: right;
	padding: 2px;
	border: 1px solid #eee;
	background: #fff;
}
.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 12px;
}
.commentlist p {
	font-weight: normal;
	line-height: 15px;
	text-transform: none;
}
.commentmetadata {
	font-weight: normal;
}
#commentform input {
	width: 170px;
	margin: 5px 5px 1px 0;
	padding: 2px;
}
#commentform {
	margin: 5px 10px 0 0;
}
#commentform textarea {
	width: 100%;
	padding: 2px;
}
#respond:after {
	 clear: both;
	 content: ".";
	 display: block;
	 height: 0;
	 visibility: hidden;
}
#commentform #submit {
	float: right;
	margin: 0 0 5px auto;
}
.commentlist {
	padding: 0;
	text-align: justify;
}
.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;
}
.commentlist li ul li { 
	margin-right: -5px;
	margin-left: 10px;
}
.commentlist p {
	margin: 10px 5px 10px 0;
}
#commentform p {
	margin: 5px 0;
}
.nocomments {
	margin: 0;
	padding: 0;
	text-align: center;
}
.commentmetadata {
	display: block;
	margin: 0;
}
h3.comments {
	margin: 0;
	padding: 0;
}