/*   
Theme Name: Critter Sitters
Description: A custom theme for Critter Sitters
Author: Colin Brady for Twenty3 Pixels
Author URI: http://www.twenty3pixels.com
Version: 0.1

-----------------------------------------------------------------------------------
	0.	CSS Reset & Clearfix
	1.	Document Setup (body, common classes, vertical rhythm, etc.)
	2.	Header styles and menu(s)
	3.	General content styles (content boxes, buttons, shortcodes etc.)
	4.	Page specific styles
	5.	Footer styles
	6.	Mobile styles
-----------------------------------------------------------------------------------*/

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Sticky footer */
body, html { height: 100%; }
body { 
  background: #fff url("images/bg.png");
  font-size: 14px;
  color: #686060; 
  width:100%;
  min-width: 1000px;
}
.row { width: 1000px; }

/* Base */
* { -webkit-font-smoothing: antialiased; }

fieldset { border: 1px solid #E4E4E4; padding: 20px; }
fieldset legend { padding: 10px; font-size: 26px; font-weight: bold; font-family: "Bulletin"; color: #110B0B; }

a:link, a:active, a:visited, a:hover {
  color: #110B0B;
  text-decoration: none;
  border-bottom: 1px solid #ACACAA;
  -webkit-transition:color .2s ease-in;  
   -moz-transition:color .2s ease-in;  
   -o-transition:color .2s ease-in;  
   transition:color .2s ease-in;
}
a:hover { color: #737373; }
small { color: #B9B9B9; font-size: 13px; }
b { font-weight: bold; }
.cl { clear: both; }
.ctr { text-align: center; }
.alg-rht { text-align: right; }
.flt-rt { float: right; margin: 0 0 20px 20px; }

/* Header */
header { min-width: 1000px; }
/* Menu styles */
div.menu .nav1 { float: left; width: 360px; }
div.menu .nav2 { float: right; }
.logo { margin: 0 auto; position: relative; margin-left: 25px; width: 211px; text-align: center; }
.logo a { display: inline-block; border: 0; position: absolute; top: -60px; height: 211px; width: 175px; margin: 0 auto; }
div.menu { margin: 15px auto 0; background: url("images/menu-white-bg.png") center center no-repeat; background-size: 100% 100%; width: 920px; }
div.menu ul { padding: 0px; margin: 0px 30px; list-style: none; }
div.menu ul li { display: inline; margin: 0; padding: 0; position: relative; }
div.menu ul li a:link,
div.menu ul li a:visited,
div.menu ul li a:active,
div.menu ul li a:hover {
  border: none;
  font-family: "Bulletin", Helvetica;
  color: #595454;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 100;
  text-decoration: none;
  display: inline-block;
  padding: 12px 10px;
  z-index: 1000;
  -webkit-transition: color .2s ease-in;  
  -moz-transition: color .2s ease-in;  
  -o-transition: color .2s ease-in;  
  transition: color .2s ease-in;
  border: 0;
}
div.menu ul li.hovered a { color: #120C0C; text-decoration: none;  }
div.menu ul li.current-menu-item a, div.menu ul li.current_page_item a, div.menu ul li.current-page-ancestor a { 
  color: #120C0C;
  text-decoration: none;
}

.headerimgs { width: 100%; min-width: 1000px; }
.headerimgs .headerimg { width: 100%; min-width: 1000px; }

div.menu ul.sub-menu {
  text-align: left;
  display: none;
  position: absolute;
  z-index: 1001;
  background: url("images/background-white.png");
  background-size: 100% 100%;
  width: 220px;
  left: 0;
  margin: 0;
  padding: 10px 0;
}
div.menu ul li ul.sub-menu li { float: none; margin: 0; display: block; }
div.menu ul li ul.sub-menu li a:link,
div.menu ul li ul.sub-menu li a:active,
div.menu ul li ul.sub-menu li a:visited,
div.menu ul li ul.sub-menu li a:hover {
  text-align: left;
  border: none;
  padding: 7px 18px;
  margin: 0;
  display: block;
  color: #595454;
  background-image: none;
}
div.menu ul li ul.sub-menu li:first-child a { border: none; }
div.menu ul li ul.sub-menu li a:hover,
div.menu ul li ul.sub-menu li.hovered a {
  color: #120C0C;
}
div.menu ul li.carrot a {
  background-image: url("images/carrot-down.png");
  background-position: center right;
  background-repeat: no-repeat;
  padding-right: 25px;
}



div.menu.ft { padding: 0; margin: 0 0 50px; text-align: left; width: auto; background: none; float: left; width: 45%; }
div.menu.ft ul { margin: 0; padding: 0; }
div.menu.ft ul li a { letter-spacing: 1px; display: block; text-transform: none; font-size: 15px; padding: 4px 0; color: #B9B8B8; }
div.menu.ft ul li.current-menu-item a, div.menu.ft ul li.current_page_item a, div.menu.ft ul li.current-page-ancestor a { 
  color: #D7D6D6; background: none; text-decoration: none;
}
div.menu.ft ul li a:hover { color: #fff; text-decoration: none; }
.legal { font-size: 13px; letter-spacing: 1px; color: #6B6868; margin: 60px 0 10px; text-align: center; font-family: "Bulletin" }
.legal a:link, .legal a:active, .legal a:visited, .legal a:hover { color: #6B6868; border: 0; text-decoration: underline; }

h1, h2, h3, h4, h5 { font-family: "Bulletin", Helvetica; color: #110B0B; font-weight: normal; margin: 0 0 10px 0; }
h1 { font-size: 33px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 15px; font-weight: bold; font-family: "Helvetica", sans-serif; }
.hsub { color: #80726B; font-size: 18px; margin-bottom: 10px; }
.smaller-margin { margin-bottom: 4px; }
section { margin-bottom: 20px; margin-top: 20px; }


.white-box1 { background: url("images/background-white.png"); background-size: 100% 100%; padding: 3px 33px; }
.brown-box1 { background-color: #312A1F; padding: 15px; color: #fff; }

#submit,
a.button, a:link.button, a:active.button, a:visited.button, a:hover.button {
  background: url("images/button-bg.png");
  background-size: 100% 200%;
  padding: 12px 25px;
  display: inline-block;
  color: #fff;
  font-family: "Bulletin", Helvetica;
  font-size: 19px;
  border: 0;
  cursor: pointer;
}
a.button:hover { background-position: 0 -100%; }

.intro { position: absolute; top:420px; }

.service-box { height: 200px; overflow: auto; text-align: left; padding-right: 5px; }

/* Let's get this party started */
.service-box::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
.service-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
.service-box::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #A3A3A3; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.service-box::-webkit-scrollbar-thumb:window-inactive {
	background: #A3A3A3; 
}



footer { padding: 20px 0; margin-top: 80px; background: black url("images/grey-bg.png"); }
.addr { background: url("images/footer-white-bg.png"); background-size: 100% 100%; height: 110px; font-family: "Bulletin"; font-size: 15px; }
.addr .pd { padding: 25px 35px; }
.addr.contact { margin-right: 15px; }
.addr.fb { margin-left: 15px; }


/* Form styles. */
.web-form textarea { height: 40px; }
.web-form .phone { width: 150px; }
textarea, input { 
  border: 3px solid #E7E6E5; padding: 8px; font-size: 15px;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
}
textarea, input, select { margin: 5px 0 15px; }

hr { height: 18px; border: none; background: url("images/hr.png"); margin: 40px 0; }

.box { background: url("images/box.png"); background-size: 100% 100%; padding: 15px 30px; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; }
.post .box { padding: 15px 10px; font-size: 14px; }

.web-form textarea { width: 90%; }

.testimonial { margin-bottom: 50px; background: url("images/box.png"); background-size: 100% 100%; padding: 25px 30px; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; }
.testimonial .quote { font-style: italic; margin-bottom: 15px; }
.testimonial .quote div {  margin:0; height: 200px; overflow: auto; }
.testimonial .pt { background: url("images/quote-pt.png"); width: 34px; height: 34px; margin-left: 25px; margin-bottom: 15px; }
.testimonial img { float: left; margin-right: 15px; }
.testimonial .author { font-weight: bold; padding-top: 15px; }

/* COMMON CLASSES */
.break { clear:both; }

/* HEADER */
#header { height:500px; margin-bottom: 50px; }
.ajax-loader { text-align: center; margin-top: 300px; }
.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:500px; position:absolute; }


/* NAVIGATION */
#nav-outer { height:110px; padding-top:11px; position:relative; top:40px; }

/* SEARCH */
#search { background-color:#051733; float:right; width:220px; padding:10px; }
#searchtxt { padding:3px; width:150px; }
#searchbtn { border:1px solid #eee !important; background-color:#CD2B3A; color:#eee; padding:3px; margin-left:5px; }

/* MENU */
#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }

/* HEADER TEXT */
#headertxt { width:960px; margin:0 auto; clear:both; position:relative; top:74px; }
#firstline { background-image:url("images/textbg.png"); color:#333; font-size:40px; padding:4px 13px 7px; float:left; display:block; }
#secondline { background-image:url("images/textbg.png"); color:#CD2B3A; text-decoration:none; font-size:60px; padding:0 13px 10px; float:left; display:block; clear:both; }
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured { background-color:#CC3333; color:#FFF; font-size:12px; padding:9px 16px; text-transform:uppercase; float:left; display:block; clear:both; margin-top:10px; }
.pictured a { font-size:16px; font-style:italic; letter-spacing:0; text-transform:none; color:#FFF; text-decoration:none; }
.pictured a:hover { text-decoration:underline; }

/* CONTROLS */
.btn { height: 30px; width: 30px; float: left; cursor: pointer; margin: 0 2px; opacity:.70; filter:alpha(opacity=70); filter: “alpha(opacity=70)”; }
.btn:hover {  opacity:1; filter:alpha(opacity=100); filter: “alpha(opacity=100)”; }
#back { background-image: url("images/btn_back.png"); }
#next { background-image: url("images/btn_next.png"); }
#control { background-image: url("images/btn_pause.png"); }

/* HEADER HAVIGATION */
#headernav-outer { position:relative; top:325px; margin:0 auto; width:960px; }
#headernav { padding-left:824px; }

/* CONTENT */
#content { color:#575757; background-color:#eee; }
#content p { padding:10px 20px; font-size:16px; width:960px; margin:0 auto; }
#content p a { text-decoration:none; color:#CD2B3A; }
#content p a:hover { text-decoration:underline; color:#7F000C; }





.google-map {
  background: url("images/gmap.png") top left no-repeat;
  width: 486px;
  height: 276px;
  padding: 20px;
}



div.entry-title { font-weight: bold; font-size: 16px; margin-bottom: 5px; }




/* Blog styles */
.navigation {
  margin-bottom: 15px;
}
div.post {
  margin-bottom: 30px;
}
div.entry-meta {
  color: #999999;
  font-size: 12px;
  margin-bottom: 15px;
}
div.entry-float-data {
  float: right;
  margin-top: 10px;
}
div.entry-comments {
  padding-top: 16px;
}
a.more-link {
  background: url("images/box.png"); 
  background-size: 100% 100%;
  border: 0;
  padding: 10px;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
  display: inline-block;
}
.post .entry-title {
  font-size: 29px;
  line-height: 130%;
  margin-bottom: 6px;
}
.post .entry-title a {
  color: #110B0B;
  border: 0;
  text-decoration: none;
}
.post .entry-title a:hover {
  border: 0;
  text-decoration: underline;
}
h1.page-title {
  font-size: 32px;
}
div.entry-utility,
div.entry-utility ul li ul li {
  background-color: #F0F0EC;
  text-shadow: 1px 1px 1px #fff;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
  -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  padding: 6px;
  font-size: 13px;
}

div.form-section {
  margin-top: 14px;
}
#form-allowed-tags {
  color: #C1B9B2;
  font-size: 12px;
}
.alignright {
  float: right;
  padding: 0px 0px 30px 30px;
}
.alignleft {
  float: left;
  padding: 0px 30px 30px 0px;
}
#comments {
  margin: 40px 0px;
}
.comments {
  margin: 40px 0px;
}
.comments ol,
.comments ul {
  list-style: none;
}
.comments ol li {
  font-size: 13px;
  margin: 70px 0px;
}
.comments ul.children {
  margin-left: 45px;
}
.comments .n {
  font-weight: 600;
}
.comments .comment-author {

}
.comments .comment-author img {
  float: right;
  width: 30px;
  height: 30px;
}
.comments .comment-meta {
  color: #C1B9B2;
  margin: 5px 0px 12px;
  font-size: 12px;
}
.comments .comment-content,
.comments .comment-reply-link,
.comments .unapproved {
  font-size: 14px;
}
.comments div.comment-reply-link {
  text-align: right;
  background: url("images/menu-bg-footer.png") center center no-repeat; 
  background-size: 100% 100%;
  padding: 10px 30px;
}
.comments .comment-reply-link a {
  border: 0;
}






/* Widget area */
div.widget-area ul.xoxo {
  list-style: none;
  margin: 0;
  padding: 0;
}
div.widget-area ul.xoxo h3 { 
  padding: 9px 12px;
  font-size: 22px;
}
div.widget-area ul.xoxo li.widget-container ul {
  padding: 10px 0;
  list-style: none;
  margin: 0;
}
div.widget-area ul.xoxo li.widget-container ul li {
  display: block;
  margin: 0;
  padding: 0 15px;
}
div.widget-area ul.xoxo li.widget-container > div {
  padding: 0 15px;
}
div.widget-area ul.xoxo li.widget-container ul li a {
  display: block;
  border: 0px;
  color: #110B0B;
  padding: 9px 0px 20px 0px;
  background: url("images/hr.png") bottom left repeat-x;
}
div.widget-area ul.xoxo li.widget-container ul li:first-child a {
  border: none;
}
div.widget-area ul.xoxo li.widget-container ul li a:hover {
  text-decoration: underline;
}
div.widget-area ul.xoxo li.widget-container {
  margin: 0 0 20px 0;
  padding: 0;
  display: block;
  line-height: 120%;
}
table#wp-calendar {}
table#wp-calendar tr td { background-color: #E4E3E0; padding: 4px; border: 1px solid #F6F5F2; text-align: center; }
table#wp-calendar tr td.pad, table#wp-calendar tr td#prev, table#wp-calendar tr td#next { background-color: transparent; }

/* Replace the recent posts list */
div.widget-area ul.xoxo li.widget-container.widget_recent_entries ul li a {
  background: url("images/icon-doc.png") 0px 12px no-repeat;
}

ul.news { list-style: none; padding: 0; margin: 0; }
ul.news li { background: url("images/icon-news.png") top left no-repeat; padding: 0px 0 2px 35px; margin: 15px 0; }

.ngg-album { 
  width: 230px; 
  float: left; 
  margin: 40px 40px 0 0; 
  background: url("images/box.png"); background-size: 100% 100%; 
  padding: 15px 30px; 
  -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; 
  border: 0;
}




/* Contact form */
div.wpcf7 {
	margin: 0;
	padding: 0;
}

div.wpcf7-response-output {
	margin: 2em 0.5em 1em;
	padding: 0.2em 1em;
}

div.wpcf7-mail-sent-ok {
  padding: 15px;
  border: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  color: #fff;
  background-color: #62B900;
}

div.wpcf7-mail-sent-ng {
	border: 2px solid #ff0000;
}

div.wpcf7-spam-blocked {
padding: 15px;
  border: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  color: #fff;
}

div.wpcf7-validation-errors {
  padding: 15px 15px 15px 45px;
  background: #FF0000 url("images/icon-error.png") 10px 10px no-repeat;
  border: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  color: #fff;
}

span.wpcf7-form-control-wrap {
	position: relative;
}

span.wpcf7-not-valid-tip {
	position: absolute;
	top: 20%;
	left: 20%;
	z-index: 100;
	font-size: 10pt;
	width: 280px;
	padding: 15px;
        background-color: #FF0000;
  border: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  -moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3);
  color: #fff;
}

span.wpcf7-not-valid-tip-no-ajax {
	color: #f00;
	font-size: 10pt;
	display: block;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
















.no-js .glossy,
.no-cssgradients .glossy {
    background: url("images/glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}