/*
Theme Name: Reading Raven
Theme URI: http://readingraven.com/
Description: The official theme for the Reading Raven iPad app.
Version: 1.0
Author: Matthew Stephens
Author URI: http://uxdoneright.com
Tags: Reading Raven
*/



html,body,div,span,h1,h2,h3,h4,p,blockquote,a,cite,img,ul,li{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ul{list-style:none}blockquote{quotes:none}:focus{outline:0}cite{font-style:normal;font-weight:normal}h1,h2,h3,h4{line-height:1}img{border-style:none}a{text-decoration:none}

body, html, #container { font-family: Arial, Helvetica, sans-serif; width: 100%; background: #0077be; /* Old browsers */
background: -moz-linear-gradient(top, #45aaf5 0%, #d4c2f5 75%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45aaf5), color-stop(75%,#d4c2f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45aaf5 0%,#d4c2f5 75%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45aaf5 0%,#d4c2f5 75%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45aaf5 0%,#d4c2f5 75%); /* IE10+ */
background: linear-gradient(top, #45aaf5 0%,#d4c2f5 75%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45aaf5', endColorstr='#d4c2f5',GradientType=0 ); /* IE6-9 */
margin: 0; 
 }

.clear { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }

.alignleft { 
    float: left;
    margin: 0 15px 15px 0; border: 8px solid #063765; }
.alignright { float: right; margin: 0 0 15px 15px; border: 8px solid #063765; }

	
#top-container { width: 100%; background-image: url(img/bg-hills.png); background-position: bottom left; background-repeat: repeat-x; overflow: hidden; position: relative; }

#top { 
	height: 820px; 
	margin: 0 auto;
	position: relative; 
	width: 1100px;
	}
	
#cloud1 { position: absolute; top: 20px; left: -100px; z-index: 0; }
#cloud2 { position: absolute; top: -20px; right: 0px; z-index: 0; }
#cloud3 { position: absolute; top: 256px; right: 260px; z-index: 0; }
#logo { position: absolute; top: 24px; left: 106px; }
#top-container h4 { position: absolute; top: 210px; left: 152px; top: 210px; font-size: 20px; color: #084682; }
#top-list-container { -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: white; background-color: #222425; padding: 20px 20px 30px 20px; width: 540px; height: 173px; position: absolute; left: 20px; top: 248px; }
h2 { font-size: 31px; font-weight: normal;  }
ul#top-list { margin-top: 16px; padding-left: 14px;  }
ul#top-list li { background-image: url(img/bullet-arrow.png); background-repeat: no-repeat; background-position: 0 3px; padding: 0 0 10px 4px;  padding-left: 22px; margin-bottom: 8px; font-size: 17px;  }
ul#top-list li a { color: black; }

ul#nav { position: absolute; right: 0; top: 40px; width: 600px; }
ul#nav li { float: right; margin-left: 12px; }
ul#nav li a { 
	background: #084784; /* Old browsers */
	background: -moz-linear-gradient(top, #084784 0%, #06315a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#084784), color-stop(100%,#06315a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #084784 0%,#06315a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #084784 0%,#06315a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #084784 0%,#06315a 100%); /* IE10+ */
	background: linear-gradient(top, #084784 0%,#06315a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#084784', endColorstr='#06315a',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 15px 20px; 
	color: white;
	font-size: 24px;
	
	}

	#find-us { width: 260px; position: absolute; right: 160px; top: 93px; }
	#find-us span { display: block; float: right; margin-right: 8px; margin-top: 7px; font-size: 24px; }
	#find-us a { display: block; float: right; }
	#find-us #icon-facebook { margin-right: 4px; }


#button-download { position: absolute; left: 161px; bottom: 90px; }

#ipad-carousel { position: absolute; right: 0; top: 130px; width: 500px; }
.coda-slider { margin-left: 67px; width: 840px; }
.panel-container { width: 400px; overflow: hidden; }
.panel { width: 400px; float: left;  }
.coda-nav-left, .coda-nav-right { float: none; z-index: 9999; cursor: pointer; }
.coda-slider-wrapper { width: 450px; overflow: hidden; }
.coda-nav-left a { display: block; background-image: url(img/arrow-left.png);  position: absolute; left: 0; top: 200px; height: 108px; width: 108px; }
.coda-nav-right a { display: block; background-image: url(img/arrow-right.png); position: absolute; right: -21px; top: 200px; height: 108px; width: 108px; }

#share-links { position: absolute; right: 127px; top: 610px; width: 218px; }
#button-app-store { display: block; padding-bottom: 20px; margin: 0 auto; }
#share-links iframe, #share-links a.a2a_dd, .twitter-share-button  { display: block; float: left; margin: 0 2px; }


#section2 { background-color:#0084e7; padding: 20px 0;  }
#section2-container { width: 1100px; margin: 0 auto; }
h3 { font-size: 80px; font-weight: normal; color: white; text-shadow: 0px 0px 16px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0); margin: 0 0 20px 0; padding-top: 20px;  }

#photo-row { position: relative; height: 330px; }
#photo-row img { position: absolute; }
#photo1 { left: -30px; top: 0; }
#photo2 { left: 355px; top: 0; }
#photo3 { right: -30px; top: 0; }

#section2-content { color: white; font-size: 24px; line-height: 29px; }
#section2-content ul { margin: 20px 0 0 20px;  }
#section2-content li { background-image: url(img/bullet-star.png); background-repeat: no-repeat; background-position: 0 6px; padding: 0 0 10px 27px; margin-bottom: 0;  }
#section2-content p {  margin-top: 20px; }
#section2-content p#p3, #section2-content p#p4 {width: 610px; float: right; margin-top: 40px; }

#photo4 { float: right; margin-left: 30px; }
#photo5 { float: left; margin-left: -30px;  }
#button-ptguide { margin: 30px auto; display: block;  }

#ages-3 , #ages-4 , #ages-5 { padding-top: 30px; }
#ages-3 div, #ages-4 div, #ages-5 div { float: left; display: block; width: 270px;  text-align: center; }
#ages-3 div p, #ages-4 div p, #ages-5 div p { margin-top: -10px; font-size: 16px;  }


#footer { padding: 30px 0; margin: 0 auto; width: 760px; height: 30px; background-color:#0084e7; text-align: center; }
#footer li { float: left; margin-right: 10px; padding-right: 18px; background-image: url(img/bullet.png); background-position: right 3px; background-repeat: no-repeat; }
#footer li a { color: white; }
#footer p { margin: 16px 0; }
#footer p small { font-size: 14px; color: #A8DAFF; }

.entry { margin-bottom: 30px; font-size: 20px;  }
.entry h3 a { font-weight: bold; }
#page-content .entry h3 { margin: 0; font-size: 26px; }

.subscribe-link { 
	background-image: url("http://readingraven.com/wp-content/uploads/2012/01/feedicon.png");
	    background-repeat: no-repeat;
	    color: white;
	    font-size: 20px;
	    padding: 3px 0 3px 36px;
	    position: absolute;
	    right: 0;
	}
#commentform a { color: white; }

#video { float: right; margin-left: 30px;  }
#video iframe { height: 360px; width: 480px; }
#video iframe { border: 10px solid white; display: block; box-shadow: 0 0 20px #000000; }
#video p { margin: 0 0 6px 0; font-size: 20px; }
#p6, #p7, #p8 { font-size: 28px; font-weight: bold; }

#footer li.page-item-145 { background: none; padding-right: 0; }
#recent-posts-3 a { color: white; font-size: 20px; }

#disqus_thread a { color: white; }
#page-content a { color: white; text-decoration: underline; }


/* iPad Styles */
@media only screen and (device-width: 768px) {
  #top-container, #section2 { width: 1280px; overflow: hidden;  }
#top-container { position: relative; }
	#top, #section2-container  { width: 1100px; }
}


/* iPhone Styles */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#top-container, #section2 { width: 1280px; overflow: hidden;  }
#top-container { position: relative; }
#top, #section2-container  { width: 1100px; }