/*
Theme Name: Pants Theme
Theme URI: http://wordpress.org/
Description: The default Pants theme.
Version: 1.0
Author: Arnold A
Author URI: http://www.agirlnamedpants.com/
Tags: purple, custom header, fixed width, two columns, widgets

*/


/* IMPORTS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
@import url('_reset.css');
@import url('_global.css');
@import url('_core-layout.css');

html {background: #e6f7ff /* #36C #99CCFF */ url('images/bg-clouds.png') repeat-x /* #471f5D #41587A #F3F4F4 */; margin: 0 0 1px 0; height: 100%; } /* force Moz to show scrollbar to prevent page jumping */
body { font:13px "Comic Sans MS", Arial, Helvetica, sans-serif; /* padding-bottom: 50px; background:url('images/footer-bg.png') no-repeat 50% 100%; */ }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
a:link	  { color: #00F; text-decoration:none; }
a:visited { color: #06C; text-decoration:none; }
a:hover	  { color: #F00; text-decoration:underline; }
a:active  { }


/* Headings
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
h1 { font-size:1.8em; padding-bottom: 7px; margin: 10px 0 20px 0; border-bottom: 1px solid #CCC; }
h2 { font-size:1.6em; margin-bottom: 10px; }
h3 { font-size:1.4em; }
h4 { font-size:1.2em; }
h4,h5 { font-weight:bold; margin: 10px 0; padding-bottom:5px; }


/* Paragraphs and quotes
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
p {	margin-bottom:1em; }

blockquote { font: 1em/1.6em Georgia, "Times New Roman", Times, serif; }
blockquote cite { font-size:.9em; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
ul, ol { padding-top:0; }


/* Lists > menus
----------------------------------- */
ul.menu { list-style:none;  padding-bottom: 190px; margin: 0 0 50px -10px; background: url('images/sidebar-bg-btm.gif') no-repeat left bottom;}
ul.menu li { background: url('images/sidebar-bg-mid.gif') repeat-y left top; }
ul.menu li a { display:block; width: 100%; }
ul.menu li a:hover,
ul.menu li.selected a { background: url('images/menu-arrow.gif') no-repeat 100% 50%; }


/* Lists > menus > submenus
----------------------------------- */
ul.menu ul { list-style:none; margin:0; }
ul.menu ul li a { padding: 5px 0; }
ul.menu ul li a { padding-left:30px; }

ul.inline { clear:both; display: block; width: 100%; overflow:hidden; margin: 20px 0 0 20px; }
.inline li { float: left; margin-right:15px; }
.tabbed a { padding: 10px; float: left; background: #FC0; color: #333; font-weight: bold; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-radius-topleft: 10px; -webkit-border-radius-topright: 10px;}

.current-cat a { background: #E877E8; }

 
/* Definition Lists
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
dl { margin: 0.5em }
dl dd {	margin-left:1em; }


/* Boxes
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.box {
	margin-bottom:20px;
	padding:10px 10px 1px 10px;
	background:#F8F8F8;
	color:#000;
	_width: 98%; /* IE6 */
	overflow: hidden;
}
.box h2 {
	margin:-13px -10px 10px -10px;
	padding:6px 12px;
	font-size:1em;
	font-weight:bold;
	color:#FFF;
	background:#993399;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
}
.box h2 a,
.box h2 a.visible {
	color:#fff;
	background:#333;
	display:block;
	padding:6px 12px;
	margin:-6px -12px;
	border:none;
}

.box ul { 
	margin:-10px -10px 0px -10px; 
	border-right:1px solid #E6E6E6; 
	border-left:1px solid #E6E6E6;
	background: #FFF; 
}
.box ul li { 
	border-bottom:1px solid #E6E6E6;
	text-indent: 5px;
}


/* Tables									(generic tables)
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
table {
	width:100%;
	border-collapse: collapse;
	text-align: left;
}

caption { text-align: left; font-weight: bold; color:#C00; }

th { font-weight: bold; }

th, td { padding: 2px 5px; vertical-align:top; }

th.currency,
td.currency {
	text-align:right;
}

td.num { width: 15px; }


	/* Tables > Result Table				(for showing data)
	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
	.rs-table { 
		border-top:1px solid #EEE;
		border-left:1px solid #EEE;
		background:#FFF;
	}
	
	.rs-table thead tr.header { background: #D6E3E3; cursor: pointer; }
	
	.rs-table thead tr th,
	.rs-table tfoot tr th {
		border-right:1px solid #CCC;
		border-bottom:1px solid #CCC;
		background: #EEE;
		color: #333;
	}
	
	.rs-table tbody th{
		border-right: 1px solid #DDD;
		border-bottom: 1px solid #DDD; 
	}
	
	.rs-table thead tr .sortUp { background: #8DBDD8 url('images/arrow-up.gif') no-repeat 96% 50%; cursor: pointer; }
	.rs-table thead tr .sortDown { background: #8DBDD8 url('images/arrow-down.gif') no-repeat 96% 50%; cursor: pointer; }
	
	.rs-table td {	
		border-bottom:1px solid #EEE;
		border-right:1px solid #EEE;
	}
	
	.rs-table tr td .highlight {
		background: #3D3D3D;
		font-weight: bold;
	}
	
	.rs-table h4 { margin: 0 }
	.rs-table p{
		font-family: Verdana;
		font-size:11px;
		margin-bottom: 0.5em;
	}
	
	.rs-table .date, 
	.rs-table .byuser{
		display:block;
		font-size:11px;
		color:#999;
		white-space:nowrap;
	}	





/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
/* 	- Apply the class ".inline" to a fieldset whenever you want the 
	  label and it's matching input field to be on the same line. 
	  
	  i.e: <fieldset class="inline"> aligns labels & fields next to each other. 
	  
	- Default, label on top of matching input field
*/	

form { overflow:hidden; }

fieldset {
	padding:10px;
	position:relative;
	background:#F2F2F2;
	margin-bottom:10px;
	border:1px solid #CCC;
	-moz-border-radius:4px; 
}
legend {
	margin-bottom: 1em;
	padding:.2em .8em;
	font-weight: bold;
	background:#FFF;
	border:1px solid #CCC;
	-moz-border-radius:4px;
}

fieldset p label {
	width:98%;
}
fieldset p input {
	width:98%;
}
fieldset p select {
	width:99%;
}

fieldset.inline p {
	margin-bottom:1em;
	margin-top:0pt;
	clear:both;
}
fieldset.inline p label {
	float:left;
	line-height:2em;
	margin-right:2%;
	text-align:right;
	width:33%;
}
fieldset.inline p input {
	width:60%;
	padding: 2px;
}
fieldset.inline p select {
	width:61.5%;
	padding: 2px;
}
fieldset.inline input.btn {
	margin-left:35%;
}
form p.notice {
	font-weight:bold;
}
input.search.text {
	width:66%;
}


.btn{
    display:block;
    background-color:#41587a;
    border:1px solid #056898;
    padding:4px 7px;
    _padding:3px 7px 1px 7px; /* IE6 */
	-moz-border-radius: 4px;
    font-weight:bold;
    color:#FFF;
    cursor:pointer;

	/* fix double padding stacking in IE6 */
    width:auto; 
    overflow:visible;
}

.btn img, .btn a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

.btn:hover, .btn a:hover{
    background-color:#0781C5;
}



#wpcf label {
	clear: both;
	display: block;
	float: left;
	width: 150px;
}
#wpcf input {
	float: left;
	width: 200px;
	padding: 1px;
	margin: 2px 5px 2px 0;
}
#wpcf textarea {
	width: 350px;
	height: 100px;
	padding: 1px;
	margin: 0 5px 10px 0;
}
#wpcf #contactsubmit {
    display:block;
    border:1px solid #555;
	margin-left: 300px;
    padding:4px 7px;
    _padding:3px 7px 1px 7px; /* IE6 */
	-moz-border-radius: 4px;
    font-weight:bold;
    background-color:#FC0;
	color: #333;
	
    cursor:pointer;

	/* fix double padding stacking in IE6 */
    width:auto; 
    overflow:visible;
}
#wpcf #contactsubmit:hover{
    background-color:#0D0;
	color: #FFF;
}


/* Pagination						(previous 1, 2, 3...10, 11 next)
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.pagination { margin: 1em 0; text-align:right; }
.pagination a, 
.pagination a:visited { 
	padding: 3px 11px 4px; 
	text-decoration: none; 
	font-weight: bold; 
	border: .1em solid #DDD; 
	text-shadow: 0 1px 1px #fff; 
	-moz-border-radius:3px; 
	-webkit-border-radius: 3px;
}
.pagination a:hover { 
	color: #fff; 
	text-shadow: 0 -1px 1px #007d9a; 
	background: #ff5c00; 
	border: .1em solid #D45500;
}
.pagination .disabled { color: #BBB; }
.pagination .current { padding: 4px 12px 5px; color: #666; font-weight: bold; }
.inactive { color: #666; }
.pagination .prev_page, 
.pagination .next_page { margin: 0 2em 0 2em; }


/* Zebra Stripes
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.odd  { background:#F8F8F8; } /* onMouseOver, jQuery addClass("odd") */
.over { background:#F6F6F6; } /* onMouseOver, jQuery addClass("over") */


/* ERROR MESSAGES AND ALERTS
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	First display a generic alert box using ".alert" 
	then specify the alert type to be displayed
	
	Example usage:
	<div class="alert warning">
		<h2>Alert Title</h2>
		<p>	The page you are looking for died last week.</p>
	</div>
*/
.alert {
	margin: 10px 0;
 	padding: 5px 10px 5px 40px;
	border: 1px solid #EAECED;
	background: #F0EEE1 url('images/icons/information.png') no-repeat 15px 50%;
	color: #000;
}

.alert p { margin: .5em 0; }

.error 	 { background:#FFE7EB url('images/icons/exclamation.png') no-repeat 15px 50%; border: 1px solid #EFCDD7; }
.warning { background:#FFFFE7 url('images/icons/exclamation.png') no-repeat 15px 50%; border: 1px solid #EFE9CD; }
.success { background:#EEFFE7 url('images/icons/information.png') no-repeat 15px 50%; border: 1px solid #DCEFCD; }
.info 	 { background:#E7F5FF url('images/icons/information.png') no-repeat 10px 50%; border: 1px solid #CDE5EF; }
.cart 	 { background:#E7F5FF url('images/icons/cart.gif') no-repeat 10px 50%; border: 1px solid #CDE5EF; }
.announcement 	 { background:#EFEBE0 url('/images/icons/mic.png') no-repeat 10px 50%; padding: 5px 20px 5px 70px; }

.error h2 	{ color:#C00; }
.warning h2 { color:#B63; }
.success h2 { color:#080; }
.info h2 	{ color:#36C; }


/* Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.tabContent {
	width: 100%;
	overflow: hidden;
	margin-bottom: 20px;
	background: #FC0 url('images/bg-yellow-stripes.gif');
}

.tabContent h2,
.tabContent h3 { margin-top: 0; padding: 10px 0; }

.tabContent div {
	clear: both;
	display: block;
	padding: 1%;
	width: 100%;
	overflow: hidden;
}

/*
.tabNavigation li { font-family: "Comic Sans MS", Georgia; font-size:1.15em; font-weight:bold; }

ul.tabNavigation li a {
	padding: 10px 5px;
	margin: 5px 0;
	display: block;
	width: 100%;
	color: #111;
}

ul.tabNavigation li a.selected,
ul.tabNavigation li a:hover {
	background: url('images/menu-arrow.gif') no-repeat right 50%;
	color: #FFF;
	text-decoration: none;
}
*/

ul.tabNavBooks { clear:both; display: block; width: 100%; overflow:hidden; }
ul.tabNavBooks li { float: left; margin-right:15px; }
ul.tabNavBooks li a { padding: 10px; float: left; background: #060; color: #FFF; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
ul.tabNavBooks li a.selected,
ul.tabNavBooks li a:hover { background: #FFF; color: #333; text-decoration: none; }

ul.tabNavBooks li.readBook { }
ul.tabNavBooks li.illustrations { }
ul.tabNavBooks li.coloringPages { }
ul.tabNavBooks li.bookVideo { }


ul.arc { display: block; float: left; height:200px; overflow:hidden; }
.arc li { float:left; text-indent: -999999px; }
.arc li a { display: block; width: 137px; height:200px; background-image:url('images/books-arc.png'); }

.apants a 	 { background-position: 0 0; }
.ateam a 	 { background-position: -136px 0; }
.abully a 	 { background-position: -272px 0; }
.apoor a 	 { background-position: -408px 0; width:144px; }
.abusiness a { background-position: -552px 0; }
.amall a 	 { background-position: -688px 0; }
.avictory a  { background-position: -824px 0; }

.apants a:hover,
.apants a.selected { background-position: 0 200px; }

.ateam a:hover,
.ateam a.selected { background-position: -136px 200px; }

.abully a:hover,
.abully a.selected { background-position: -272px 200px; }

.apoor a:hover,
.apoor a.selected { background-position: -408px 200px; }

.abusiness a:hover,
.abusiness a.selected { background-position: -552px 200px; }

.amall a:hover,
.amall a.selected { background-position: -688px 200px; }

.avictory a:hover,
.avictory a.selected { background-position: -824px 200px; }



/* Video
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.video {
	display: block;
	margin: 0 0 30px 0;
	padding: 30px 20px;
	background: #FC0 url('images/bg-pink_stars.gif') left top;
	text-align: center;
	overflow:hidden;
}

.tv {
	padding:35px 40px 50px 30px;
	background:url('images/tv.png') no-repeat 50%;
}

#videolist {
	width:100%;
	float:left;
	background: #FCC;
}

.videoitem {
	width:295px;
	height:60px;
	margin:10px 0 0 5px;
	overflow: hidden;
}

.videoitem h3 { font-size: 90%; }
.videoitem a:link,
.videoitem a:visited { color:#006; }

.altvideowrap {
	padding: 0 0 10px 0;
	border-bottom: 1px solid #000000;
}

.altvideoitem {
	width:280px;
	overflow: hidden;
	padding: 0 10px 0 10px;
	margin: 10px 0 0 0;
}

.videoitem img, 
.altvideoitem img {
	width:102px;
	height:56px;
	float:left;
	margin:1px 8px 0 0;
	border:1px solid #3C3C3C;
}

.videoitem a:hover img, 
.altvideoitem a:hover img {
	border:1px solid #FFFFFF;
}


/* Thumbnail view 
------------------------------*/
ul.display {
	float: left;
	width:100%;
	border-right: 1px solid #FF9900;	/* darker color */
	background: #FC0 url(images/bg-yellow-stripes.gif);
}
ul.display li {
	float: left;
	width: 23.7%;
	padding: 5px;
	border-top: 1px solid #FFFF00;		/* lighter color */
	border-right: 1px solid #FFFF00;	/* lighter color */
	border-bottom: 1px solid #FF9900;	/* darker color */
	border-left: 1px solid #FF9900;		/* darker color */
}
ul.display li a {
	color: #333;
}
ul.display li .content_block {
	padding: 5px;
	text-align: center;
	height: 150px;
}

ul.display li .content_block a img {
	padding: 5px;
	background: #FFF;
}

ul.display li .content_block h3 {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 1em;
}

ul.display li .content_block p { display: none; } /* hide the <p> without using display:none */

/* List view 
------------------------------ */
ul.list_view li { width: 689px; }
ul.list_view li p{ display: block; float: left; }



/* Purple Box
------------------------------ */
.purple_box {
	clear:both;
	background:url(images/purple_box.gif) no-repeat top left;
	overflow:hidden;
}

.purple_box h3 { 
	padding: 15px 0 30px 210px;
	color: #FFF;
}


/* Switch view link
------------------------------*/
a.switch_view {
	float: right;
	width: 122px;
	height: 26px;
	line-height: 26px;
	display: block;
	background: url('images/switch.gif') no-repeat bottom left;
	text-indent: -9999px;
}
a:hover.switch_view {
	filter:alpha(opacity=90);
	opacity:.90;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
a.swap { background-position: top; }


/* Books
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
ul.column{
	width: 100%;
	padding: 0;
	margin: 10px 0 50px;
	list-style: none;
}
ul.column li {
	float: left;
	width: 220px;
	_width: 200px;
	margin: 5px 0;
	display: inline;
}
.block {
	height: 400px;
	font-size: 1em;
	margin-right: 10px;
	padding: 20px;
}
.block h3 {
	padding: 10px 0;
	min-height: 40px;
	font-size: 16px;
	font-weight: bold;
}
.block img {
	width: 89%;
	padding: 5%;
	margin: 0 auto;
	background:#fff;
	-ms-interpolation-mode: bicubic;
	display: block;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}


/* Page Add-Ons
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.readmore {
	clear:both;
	background:#ed1c24;
	float: right;
	font-size: 90%;
}
.readmore a:link,
.readmore a:visited { color: #FFF; padding:8px; }
	
.promo { 
	margin-bottom: 50px; 
	padding:20px 0 0; 
	background: #e7f5ff; 
	border-top: 1px solid #CCC; 
	border-bottom: 1px solid #CCC; 
	width:100%; 
	overflow: hidden;
}

.promo .task {
	margin-top: 40px;
	width: 100%;
}

.promo .task h2 { margin-bottom: 10px; }
.promo .task a { margin: 0 8px; }

.ads { margin-top: 30px; padding-bottom: 50px; width: 210px; background: url('images/ads-btm.gif') no-repeat left bottom; text-align: center; color:#666666;  }
.ads h4 { margin:0; padding: 50px 0; background: url('images/ads-top.gif') no-repeat left top; }

.right-col { border-left:1px solid #CCC; }

h4.readbook { clear: both; height: 130px; text-indent: -999999%; background:url('images/sign-readbook.png') no-repeat left top; }


#breadcrumbs {
	display: block;
	margin: 10px 0;
 	padding: 5px 10px;
	border: 1px solid #EAECED;
	background: #EEECDE;
	color: #000;
}


/* Posters
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.shelf li { float: left; display: block; height:180px; width: 150px; margin: 0 40px; text-align:center; }
.shelf li a { display: block; width: 100%; padding:40px 0; }
.shelf li a:hover { padding: 25px 0; }