/* wordspeller.us - wordspeller.css
   Main CSS Stylesheet
   Jeremy Sarka, 03-20-2013 */

/* General Styles */
body {
 font-family: 'Open Sans', sans-serif;
   font-size: 14px;
    
}

a img {
   border: 0;
}

p {
    line-height: 16px;
}

h1 {
  /*font-family: 'Crete Round', serif;*/
    font-family: 'Merriweather', serif;
    font-style: italic;
  font-weight: 400;
   font-size: 17px;
   text-align: center;
   
   display: block;
}
h1 span {
	
   padding: 8px 16px;
   background-color: white;
   border: 2px solid black;
}
h1 span span {
   padding: 1px;
   border: none;
}

h2 {
  
   color: #800080;
   text-align: center;
}
h3 {
 
   color: #003366;
   text-align: center;
}
h4 {
   
   text-align: center;
}
h5 {
   
   text-align: center;
}

/* Special Purpose Styles */

.cp {
    display: inline-block;
  
   vertical-align: top;
    margin-top: -3px;
}

.quote {
   padding-left: 40px;
   padding-right: 40px;
}
.attr {
   text-align: right;
   font-style: italic;
  
   margin-top: -10px;
}
.smallprint {
   
}

.blue {
   color: #003366;
}
.purple {
   color: #800080;
}

.center {
   text-align: center;
}

.scrnshot {
   text-align: center;
}

.sidebar-link {
	
	
	padding: 5px;
	margin: 15px 3px 15px 0;
	background: #fff;
	border: 1px solid #ccc;
	
	
	display: block;
	
	
}



.sidebar-link > img {
    float: left;
    width: 46px;
  
}

.sidebar-link p {
    float: right;
    width: 85px;
     font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    font-style: italic;
	font-weight: bold;
	color: blueviolet;
    padding: 0 0 5px 5px;
    line-height: 11px;
    margin-top: 3px;

}

.sidebar-link a {
    width: 75%;
    margin: 0 auto;
}

.sidebar-link a img {
    width: 100%;
    margin-top: -10px;
} 

.scrnshot img {
   margin: 0px 20px;
}

.required {
   color: #CC0000;
}

/* Layout Styles */
.container {
    width: 100%;
   min-width: 769px;
    max-width: 960px;
   margin: 0 auto;
   
}
.top-nav {
   width: 100%;
   display: block;
    background-color: #9999cc;
	border-radius: 20px;
	padding: 20px 0;
}


.side-nav {
   width: 179px;
	
   text-align: center;
	margin-top: 15px;
	border-radius: 8px;
	
	height: 100%;
    
    position: absolute;
    top: 0;
    left: 0;
	
	
}

#facebook_banner {
    margin-bottom: 15px;
    
}

#facebook_banner img {
    width: 176px;
}
#content_box {
	width: 100%;
	overflow: hidden;
	position: relative;
	left: 0;
	top: 0;
	color: #000;
	font-family: "Open Sans", sans-serif;
}

.content {
	width: calc(100% - 250px);
	min-height: 1000px;
	float: right;
	padding: 10px 25px;
	color: #000;
	font-size: 14px;
}
.footer {
   width: 760px;
   padding-top: 5px;
   float: none;
   clear: both;
   background-color: white;
   text-align: center;
}
.clear {
	clear: both;
}

.side-nav a {
   display: block;
}

.badge {
   margin: 10px;
}

p.spacer {
   padding-top: 15px;
}

/* Menu Styles */
ul.nav {
   width: 720px;
    display: block;
   margin: 30px auto 5px; 
    padding: 0;
    background: #7c7cb1;
	border-radius: 16px;
    height 20px;
	line-height: 20px;
   list-style: none;
    text-align: center;
    
}
ul.nav li {
   display: inline-block;
   margin:5px 17px;
   text-align: center;
   font-family: 'Open Sans', sans-serif;
    font-style: italic;
   font-size: 14px;
   color: white;
    width: 50px;
}

ul.nav a, ul.nav a:link, ul.nav a:visited {
   text-align: center;
   text-decoration: none;
   color: white;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
   text-decoration: none;
   
   color: #c7f9fd;
}

ul.nav a span.off, ul.nav a:link span.off, ul.nav a:visited span.off {
  display:inline;
}
ul.nav a span.on, ul.nav a:link span.on, ul.nav a:visited span.on {
   display: none;
}

ul.nav a:hover span.off, ul.nav a:active span.off, ul.nav a:focus span.off {
   display: none;
}
ul.nav a:hover span.on, ul.nav a:active span.on, ul.nav a:focus span.on {
 display:inline; 
}

#app_ad {
    position: relative;
    width: 100%;;
    height: 320px;
    margin: 0 0 10px;
    background: url(images/app_ad_NEW.png) center no-repeat;
    background-size: 100%;
}

.ad-links {
    position: absolute;
    width: 110px;
    
    left: 18px;
}



#standard_ad {
    top: 168px;
}

#esl_ad {
    top: 309px;
}

.ad-links a {
    display: block;
    width: 80%;
    margin: auto;
    margin-top: 5px;
}

.ad-links a img {
    width: 100%;
    margin: auto;
}
.content div {
	font-size: 18px;
	color: #669966;
}

.thumbnail-container {
	width: calc(50% - 40px);
	padding: 10px 20px;
	text-align: center;
	
	
}

.thumbnail-container img {
	width: 100px;
	margin: 15px auto;
	
}

#demo_en {
	float: left;
}

#demo_es {
	float: right;
}

.category {
        border: 1px solid #ccc;
        border-radius: 16px;
        padding: 0 25px;
            margin-top: 15px;
}

.category .description {
    float: left;
    width: 70%;
    margin: 0;
}

.category img {
    float: right;
    width: 30%;
    margin: 15px 0 0;
}

.category h3 {
    font-size: 16px;
}

.category p, .category li, .category a {
    font-size: 12px;
}

a, a:visited {
    color: blue;
}

.footer {
    margin: auto;
}

.content img {
    display: block;
    margin: auto;
}

.top-ad {
    width: 772px;
    height: 146px;
    margin: 2px auto 15px;
    background: url(images/book_ad_NEW.png) center no-repeat;
    background-size: 100%;
    position: relative;
}

.buy-button {
  border-radius: 6px;
  background-image: -moz-linear-gradient( -90deg, rgb(227,198,96) 0%, rgb(255,181,28) 45%, rgb(250,166,8) 57%, rgb(238,151,9) 100%);
  background-image: -webkit-linear-gradient( -90deg, rgb(227,198,96) 0%, rgb(255,181,28) 45%, rgb(250,166,8) 57%, rgb(238,151,9) 100%);
  background-image: -ms-linear-gradient( -90deg, rgb(227,198,96) 0%, rgb(255,181,28) 45%, rgb(250,166,8) 57%, rgb(238,151,9) 100%);
  position: absolute;
  padding: 10px 25px;
  z-index: 8;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
  
    font-family: Arial;
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
    font-size: 12px;
    
}

.buy-button, .buy-button:hover, .buy-button:visited, .buy-butotn:active, .buy-button:focus {
    color: #540000;
}

.buy-button:hover {
  
  background: #ffcc00;
 

}

#app_buy_button {
    bottom: 20px;
   left: 11px;
}

#book_buy_button {
    bottom: 21px;
    right: 60px;
}

.featured-link, .featured-link:hover, .featured-link:visited, .featured-link:active, .featured-link:focus {
    font-weight: bold;
    color: red;
    text-align: center;
}