 /*
Theme Name: Mobile theme
Theme URI: http://ipopcolor.com
Description: author site
Version: 1
Author: Tessa Elwood
Tags: book

## BASICS */
* {margin: 0;}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,body {margin:0px;padding:0px;
height:100%;} 
html {box-sizing: border-box;}
body {
position: relative;min-height: 100%;
text-align:center;  /* because IE7 is picky */
}

#inbg {
  background: url(i/inbg2.jpg) no-repeat top center;
  background-size: 100% auto; 
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #inbg {
    background-image: url(i/inbg2@2x.jpg);
    background-size: 100% auto; 
  }
}

#bg { 
position:fixed; 
height:100%;width:100%;
  background: url(i/spbgcloud.jpg) no-repeat top left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.i/spbgcloud.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='i/spbgcloud.jpg', sizingMethod='scale')";
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #bg {
    background-image: url(i/spbgcloud@2x.jpg);
    background-size: cover;
     -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  }
}
p {margin-bottom:20px;}	
.clearfix:after {
content: "";
display: block;
height: 0px;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}

#katname {
position: absolute;
left:7%;
  bottom: 50%;
width:90%;
}

#inkatname {
position: relative;
left:4%;
width:90%;
}

#spfooter {
  position: fixed;
  right: 0;
  bottom: -8%;
  left: 0; 
  width:100%;
}

#tree {
position: fixed;
background: url(i/tree.png) no-repeat bottom left;
background-size: 77px 96px;
left:0;
bottom: 0;
width:77px;
height:96px;
}

/* ## LINKS */
a, a:visited {color: #7e00c6;text-decoration: none;}
a img {border: none;}
a:hover {color: #4ebaca;text-decoration: none;}
#navtxt a, #navtxt a:visited, #spnavtxt a, #spnavtxt a:visited {color:#feff8a;}
#innavtxt a:hover, #spnavtxt a:hover {color:#795526;}
#spicons a, #spicons a:visited {color:#fff;}
 #spicons a:hover {color:#aac2ff;}


h2 a:visited, h2 a {color:  #feff8a;text-decoration: none;}
h3 a:visited, h3 a {color:  #37008a;text-decoration: none;}
h2 a:hover {color:  #4ebaca;text-decoration: none;}

#blogpost h2 a:visited, #blogpost h2 a {color:  #7e00c6;text-decoration: none;}


#spicons {text-align:center;margin:0 auto;
color:#fff;
font-size:2em;
position: absolute;
width:100%;
  bottom: 35%;}
#spicons i {margin:0 5px;}  


/* ## LAYOUT */

#everything {z-index:5;}

.star {display:inline-block;
height:28px;width:28px;
 background-image: url(i/star.png);
    background-size: 28px 28px;}
    
#topstuff {position:relative;width:100%;top:14%;padding-bottom:15%;}
		
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

.txtstuff {
font-family: 'BernhardGothicBQ-Light';
font-size:1.2em;
color:#000;
letter-spacing:1px;
line-height:1.5em;
text-align:left;}

#navtxt a, #spnavtxt a {margin:0px 5px;}

#spnavtxt, #navtxt {
color:#feff8a; 
margin:0 auto;
font-family: 'KGShakeitOff';
font-size:.8em;text-transform:uppercase;
text-align:center;
letter-spacing:0px;}

#spnavtxt {
font-size:1em;
position: absolute;
left:0;
text-align:center;
  bottom: 85%;
width:100%;
}

/* begin menu */

#spnavtxt ul, #navtxt ul {
 font-family: 'KGShakeitOff';
font-weight:normal;font-size:1.1em;
color:#fff;
text-align:center;
letter-spacing:0px;
line-height:1.7em;
text-transform:uppercase;
margin:0;
	}
	
	#navtxt li, #spnavtxt li {display: inline-block;
	 font-family: 'KGShakeitOff';
	    line-height: 30px; 
	    height: 30px; 
	    margin: 0; padding: 0 0; 
	    position: relative;
	}
	#spnavtxt li {font-size:.8em;}
	#navtxt li a, #spnavtxt li a  {
	    display: block;
	    height: 30px;
	    line-height: 30px;
	   padding: 0 1px;
	}
	#navtxt .current-menu-item a:visited, #navtxt .current_page_item a:visited, #navmenu a:visited {	    
	color: #fff;}	
	
	#navtxt .current-menu-item a:hover, #navtxt .current_page_item a:hover, #navtxt a:hover {	    
	color: #aac2ff;}
	
		#spnavtxt .current-menu-item a:visited, #spnavtxt .current_page_item a:visited, #spnavmenu a:visited {	    
	color: #fff;}	
	
	#spnavtxt .current-menu-item a:hover, #spnavtxt .current_page_item a:hover, #spnavtxt a:hover {	    
	color: #aac2ff;}
	
	#navtxt ul ul, #spnavtxt ul ul { 
   display: none;
	    position: absolute;
	    font-family: 'KGShakeitOff';
	    top: 25px;
	    padding:10px 0 0 0; 
	    margin-left:0;
	    font-size:1.1em;
	z-index:100;}
	#navtxt ul ul li, #spnavtxt ul ul li { 
	    float: none; display:block;
	    width: 220px;
	    background: #0055a2;
	    border-bottom: solid 1px #aac2ff;
	    border-left:solid 3px #aac2ff;
text-align:left;
height:auto;	}
#navtxt ul ul li:hover {background:#0055a2;}
	#navtxt ul ul li .star {display:block; float:left;
height:20px;width:20px;
    margin:8px 5px 0 0;}
	#navtxt ul ul li a { padding: 1px 5px; 
font-size:.6em;
/* border-bottom:dotted 1px #e4e4e4; */}
	#navtxt ul li:hover > ul {  display: block; }
	#navtxt ul ul li ul { top: -10px;left: 220px; }	     

#spnavtxt ul ul li:hover {background:#0055a2;}
	#spnavtxt ul ul li .star {display:block; float:left;
height:20px;width:20px;
    margin:8px 5px 0 0;}
	#spnavtxt ul ul li a { padding: 1px 5px; 
font-size:.6em;
/* border-bottom:dotted 1px #e4e4e4; */}
	#spnavtxt ul li:hover > ul {  display: block; }
	#spnavtxt ul ul li ul { top: -10px;left: 220px; }	

/* end menu */



/* ## BASIC LAYOUT */

#content {position:relative;
margin:20px auto;
width:90%;
font-family:verdana,Tahoma,Arial, Helvetica, sans-serif;
font-size:.9em;
color:#000;
letter-spacing:1px;
line-height:1.7em;
text-align:left;
padding-bottom:70px;
}

#innertext {
padding:0px 5px 60px 5px;
}

#innertext p {margin-bottom:20px;}	

#blogpost img {max-width:100%;height:auto;}

.pibot {margin-top:30px;}
.postinfo {font-family: 'KGShakeitOff';
text-transform:uppercase;
font-size:.6em;
color:#000;
letter-spacing:0px;margin-bottom:20px;
border-bottom:solid 3px #86d7c7;}
.postinfo img {width:18px;height:18px;}

/* ## HEADER */
h1 {
font-family: 'Sweetly Broken';
font-size:9em;
padding:70px 0 10px 0;
text-shadow: 1px 1px 9px rgba(150, 150, 150, 1);
text-align:center;}

h2 {
font-family: 'ARBONNIE';
font-weight:normal;font-size:2.5em;
margin:45px 0 25px;
line-height:1.2em;
padding-bottom:5px;
border-bottom:solid 3px #86d7c7;
color:#37008a;
letter-spacing:1px;
text-transform:uppercase;}

#blogpost h2 {margin-bottom:5px;font-size:2.5em;}

h3 {
font-family: 'ARBONNIE';
text-transform:uppercase;
font-size:1.1em;
margin:35px 0 5px 0;
line-height:.9em;
color:#37008a;
letter-spacing:1px;
text-transform:none;
font-weight:normal;}

h5 {
font-family: 'ARBONNIE';
text-transform:uppercase;
font-size:3em;
padding:35px 0 5px 0;
line-height:1em;
color:#37008a;
font-weight:bold;
font-weight:normal;}

.avatar {float:left;
margin:2px 5px 0px 0px;
border:solid 3px #fff;}

/* ############################################################## Posts */
.wp-pagenavi {
text-transform:uppercase;
font-size:.9em;
letter-spacing:2px;
color:#fff;
font-weight:normal;}
/* ############################################################ more stuff */	
.metatalk {
/* margin:0px 0px 20px 10px;
padding-left:10px; */
text-align:left;
line-height:13px;
color:#000;
/* border-left: solid 7px #000; */
font-size:9px;}
.comtalk {
margin:10px 0px 30px 30px;
text-align:left;
padding-left:5px;
line-height:13px;
border-left: solid 7px #5dabb2;
font-size:10px;}
.avatar {float:left;
margin:2px 5px 0px 0px;
border:solid 3px #fff;}
.postnav {height:20px;}
/* ################################################## image, form, & extras */
hr {
border:0px;
border-bottom:dotted 1px #a9ecf1;
margin:60px 0px;}


#btnSearch, #searchsubmit{
background-color:#b52f2f; 
border: 1px solid; 
text-transform:uppercase;
border-color: #09556b; 
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
height:22px;
font-size:1em;
padding:0px 3px;}
#searchsubmit {
font-size:0.6em;
visibility:hidden;}
#submit {
background-color:#76005c; 
border: 1px solid; 
text-transform:uppercase;
border-color: #09556b; 
color:#fff;
font-family: 'ARBONNIE';
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
padding:5px;}

input.textbox, input#s {
padding:5px;
width:135px;
height:12px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;}
input#s{width:160px; background:#fff;}
textarea{
width: 95%;
padding:5px;
height: 15em;
border: 1px solid #09556b;	
background:#f9f9f9;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;}
input{
width: 50%;
padding:5px;
border: 1px solid #09556b;	
background:#f9f9f9;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
    margin: 0 0 10px 0;}
div.mc-field-group label {width:30px;}    
.wpcf7-submit, #submit {background:#09556b;
color:#fff; text-transform:uppercase;
font-family: 'ARBONNIE';
font-size:1.2em;}  
      
    
input.textbox:focus, textarea:focus {
background:#fff;
border:#999 1px solid;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* ################################################################# Lists */
ul {
list-style: none;
margin:0 0 8px 0;
padding:0;}
ul li {font-family:verdana,Tahoma,Arial, Helvetica, sans-serif;
font-size:.75em;
color:#000;
letter-spacing:1px;}

ul.faqstyle {list-style:disc;margin:0 0 8px 40px;}
ul.faqstyle li {font-size:1em;}
.mg_item_text p {font-family:verdana,Tahoma,Arial, Helvetica, sans-serif;
font-size:.8em;
color:#000;
line-height:1.5em;
letter-spacing:1px;}
small {line-height:15px;}
.realrelations {
text-transform:uppercase;
font-weight:bold;
font-size:1.2em;}
ol {margin:20px 0;}
ol li {margin-bottom:15px;}
ol li p {padding:0px; margin:0px;}
#contentpro ol li {font-family:verdana,Tahoma,Arial, Helvetica, sans-serif;
font-size:.85em;
color:#000;
letter-spacing:1px;
line-height:1.7em;}
/* ################################################################## Original */
acronym, abbr {border-bottom: 1px dashed #333;}
acronym, abbr, span.caps {
font-size: 90%;
letter-spacing: .07em;}
acronym, abbr {cursor: help;}
blockquote {
padding: 3px 0px 10px 45px;
margin-left:5px;
font-style:normal;
font-size:.9em;
color:#b80d0d;}
cite {
font-size: 90%;
font-style: normal;}
.wp-caption img {border: solid 3px #e6abab;}
.wp-caption-text, .wp-caption {text-align:center; font-style:italic;}
/* Captions & aligment */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;}
.alignleft {float: left;
margin:0px 8px 0px; 0px}
.alignright {float: right;
margin:0px 0px 0px 5px;}
.bites {border:solid 4px #000;
margin-left:-2px;}
b, strong {font-weight:bold;}