/*
Theme Name: sparkamindprod
Theme URI: http://www.sparkamind.com/
Description: Modification of Stardust Wordpress Theme for Accessibility Lovers by <a href="http://www.tomstardust.com">Tommaso Baldovino</a>.
Author: Margaret Blauvelt
Author URI: http://www.sparkamind.com/
Tags: white, blue, purple, orange, right-sidebar, threaded-comments, flexible-width, translation-ready
Version: 1.0
Released under <a href="http://www.opensource.org/licenses/gpl-license.php">GPL license</a>.
*/
body {
 /* Where the bar comes from under the header */ 
  background: #006; /* Becomes the background to the upper left of #wrapper, #content IF you use background-radius on #wrapper and #content. mjb 9/3/12 */
	color: #000;
	font-family: Arial, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	font-size:105%; 
}
/* 9/20/2014 mjb Added generic "bigger" font below */
.bigger{
  font-size: 120%;
 }
.smaller{
  font-size: 90%;
}
.skip, hr {
	position: absolute;
	left: -9999px;
}
a:link, a:visited {
	color: #007; 
	text-decoration: underline;
}
a:visited {
	color: #906; 
	text-decoration: underline;
}
a:hover, a:active {
	color: #c08; 
	text-decoration: none;
}

a img {
	border: none;
}
acronym, abbr {
	border-bottom: 1px dashed #333;
}
acronym, abbr, span.caps {
/*	font-size: 90%; */
	letter-spacing: .07em;
}
acronym, abbr {
	cursor: help;
}
blockquote {
	background: url(images/quote.png) no-repeat;
	margin-left: 1.5em;
	padding: 1px 0 0 40px;
	border-top: 3px double #ddd;
	border-bottom: 3px double #ddd;
}
cite {
	font-size: 100%;
	font-style: normal;
}
h1{
	font: 260%/1.15 Georgia, serif;
	letter-spacing: -0.2px;
	margin: 0;
	padding: 40px 0 5px 160px;
}
#header h1 {
  font-size: 280%;
}
#header h1 a:hover, #header h1 a:active{
	text-decoration: none;
	color: #f81;
}
#header p.payoff {
    font-size: 133%;
 }
#header h1 span {
  color: #0ff;
}
#header h1 span#orange {
  color: #f60;
}
#header h1 span#white {
  color: #fff;
}
#header h1 span#green {
  color: #0f3;
}

/* subheading */
p.payoff{
	margin: 0 0 25px 160px;
	padding: 0;
	color: #fd7; /* #fff; /* #fc5; 11/18/11 */
	font: 120% Georgia, serif;
}
h2 {
	font: 185% Georgia, serif;
	letter-spacing: -0.2px;
	margin: 15px 0 2px 0;
  padding-bottom: 5px;
}

h3 {
	font: 120% Georgia, serif; /* mjb 9/2/12 changed from 130% */
	margin-top: .75em; /* 18px; mjb 9/2/12 */ /* 9/29/11 was 0px before */
  margin-bottom: .75em; /* -2px; mjb 9/2/12 */
	color: #222;
}

ol#comments li p {
	font-size: 100%;
}

p, li, .feedback {
  font: Arial, Verdana, sans-serif; 
	letter-spacing: 0;
}

/* classes used by the_meta() */
ul.post-meta {
	list-style: none;
}
ul.post-meta span.post-meta-key {
	font-weight: bold;
}
/* Comments link, invisible below on 4/9/12. */
.feedback {
	color: #ccc;
	text-align: right;
	clear: both;
	border-top: 1px solid #eee;
	visibility: hidden; /* 4/9/12 */
}
.feedback a{
	color: #000077;
}

.feedback a:hover, .feedback a:active{
	text-decoration: none;
}
.feedback p{
	padding: 0 25px;
	background: url(images/comment.gif) top right no-repeat;
}
/* Links for next and previous blog posts (mjb added 9/3/12 see http://blog.deconcept.com/2005/02/07/wordpress-next-previous-post-links/ and http://stackoverflow.com/questions/11334239/this-there-a-smarter-way-to-use-php-next-previous-post) */
.nextprev {
    height: 1.5em;
    padding:5px;
    margin-bottom:85px;
    text-align: center;
    width: 100%;
}
.nextprev .prev {
    float: left;
}
.nextprev .next {
    float: right;
}
.meta {
	font-size: .75em;
}
/* Don't show the user and time posted, but if you do, put it on the right.  Changed 7/3/11. */
.meta {
/*  position: relative; */
/*  float: right; */
  font-size: .001em; /* because it seems to take space even when hidden */
  visibility: hidden;
}
.meta li, ul.post-meta li {
	display: inline;
}
.meta ul {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
.meta, .meta a {
	color: #999; 
	font-weight: normal;
	letter-spacing: 0;
}
.meta a{
	color: #007;
	text-decoration: underline;
}
.meta a:hover, .meta a:active{
	text-decoration: none;
}
.meta .tags{
	background: url(images/tag.gif) 0 0 no-repeat;  /* test this */
	padding-left: 20px;
}
.meta .user{
/*	background: url(images/user.gif) 0 0 no-repeat; */ /* keep this OUT */
	padding-left: 20px;
}
/* Set up for special notes within posts; could be used elsewhere */
div#mynotes{
        margin-left:-15px;
        margin-right:-15px;
        padding-left:15px;
        padding-right:15px;
        border:1px solid #009;
        border-top: 2px solid #009;
        border-left: 3px solid #009;
        background-color:#fd9; /* #ffa; */
        border-radius:10px 10px 15px 15px;
}
.post{
	margin-bottom: 40px;
	z-index:0;
}
.post hr{
        position:relative;
        left:0;
        width:90%;
        color: #009;
        background-color: #009;
        height: 3px;
}
.post ul{
	margin: 0;
	padding: 0;
}
.post ul li{
	margin: 0;
	padding: 0.2em 20px;
  background: transparent url(images/list.png) 0 4px no-repeat; /* Bullets within post */
	list-style: none;
}
.post ol{
	margin: 0 25px;
	padding: 0;
}
.post ol li{
	margin: 0;
	padding: 0.2em 0;
	background: transparent;
	list-style: decimal;
}
.storytitle {
	margin: 0;
	font-size: 120%;
	padding-top: 10px;
}
.storytitle a {
	text-decoration: none;
}
.storytitle a:link, .storytitle a:visited{
	color:  #931;
	text-decoration: none;
}
.storytitle a:hover, .storytitle a:active{
	color: #c08;  /* This is the heading within the main body, which goes to the page you're already on. */
}
.storycontent {
  z-index:0;
}
.storycontent p {
  line-height: 1.3;
}
/* For a link on the top of the page, e.g., Products page subpages links */
div.storycontent div.shortcut {
  margin-left:5%;
  margin-bottom:0.5em;
  padding-left:5%;
  padding-bottom:0.5em;
} 
/* For cross-reference to other pages, shown at the top of a page */
div.storycontent div.shortcut-p {
  text-align:center;
  margin-top:-1em;
  padding-top:-0.4em;
  font-size:80%;
}
/* The sequence of div's below only happens on the "Our Shop" page */
div.page-description div.shortcut-p {
  margin-top:0.4em;
  margin-bottom:0.5em;
  padding-top:0.4em;
  padding-bottom:0.5em;
}
/* -- Sticky Posts -- */
.sticky h2 {
  font-size: 220%;
  margin-bottom: 5px;
}
.sticky .meta {
  margin-bottom: 10px;
}
.sticky .storytitle a {
  padding: 2px 5px;
}
.sticky .storytitle a:link, .sticky .storytitle a:visited{
/*	background: #fff; /* doesn't seem to do anything 9/3/12 */
	color: #fff;
}
.sticky .storytitle a:hover, .sticky .storytitle a:active{
	background: #D70606;
	color: #fff;
}
#respond{
  clear: both;
}
#commentform #author, #commentform #email, #commentform #url, #commentform textarea {
	background: #fff;
	border: 1px solid #444;
	padding: .2em;
}
#commentform textarea {
	width: 95%;
}
#commentform textarea:focus {
  border: 1px solid #D70606;  /* change here */
}
.commentlist {
  clear: both;
}
.commentlist li {
  border-top: 1px solid #eee;
  padding-top: 10px;
  margin-top: 5px;
}
.commentlist li ul {
	font-size: 110%;
	list-style-type: none;
}
.commentlist .children li, .commentlist .children .children .children li {
  list-style-type:lower-latin;
}
.commentlist .children .children li, .commentlist .children .children .children .children li, .children div.commentbody ol li{
  list-style-type:decimal;
}
body div.commentbody ul li{
  list-style-type: disc;
}

img.avatar {
  margin: 0 5px 0 0;
  padding: 1px;
  border: 1px solid #eee;
}
div.commentbody {
	margin: 10px 60px 10px 30px;
	padding: 25px 0 0 10px;
	background: #eee url(images/comment-top.png) no-repeat;
	font-size: 13px;
}
div.commentbody div{
	padding: 0 5px 5px 0;
	background: #eee url(images/comment-bottom.png) bottom right no-repeat;
}
div.commentbody .reply {
  background: transparent; 
  padding: 0; 
  font-size: 75%;
}
div.bottomleft { 
	background: url(images/microscope33Transparent.png) no-repeat;
	position: relative;
	min-height: 103px;
	min-width: 64px;
}
/* Did I remove references to #container? Is that where the robot went? */
#container{
	width: 100%;
/*	min-width: 750px; /* 770px; */
  background: url(images/roboA20Transparent.png) bottom right no-repeat; /* stopped working when I did an absolute position somewhere, methinks. */
/*	background: url(images/flowers.png) bottom right no-repeat; */ /* Could replace with my own image */
/*	min-height: 1000px; */ /* That threw it below the footer.  Obviously the wrong approach. */
/*	padding-bottom: 50px; */ /* Made lower too. */
}
#wrapper{
/*	float: left; removed 11/11/11 */
	width: 100%;
/*	margin-left: -330px; removed 11/11/11 */
	position: absolute; /* 11/12/11 */
	top: 181px; /* This positions the content under the horizontal menu. If you make it smaller, content obscures menu. orig added 11/12/11  */
	left: 0; /* 11/12/11 */
	z-index:0; /* 11/12/11 */
  border-top: 6px solid #707; /* this is the purple line just under the horizontal navigation tabs */
  border-bottom: 1px solid #fff; /* I want to be able to curve it, so I need a border. */
  border-radius: 25px 0 25px 0; /* mjb 9/3/12 */
	background: #eec; /* #931 was nice... #eec; *//* this is the background that is only seen behind the side menu (or any place in main content that doesn't have its own background) */ 
	/*  min-width: 70em; /* This keeps the right menu area from floating away to the bottom if you enlarge the text. */
/*	margin: 0; /* test - no effect - put in and took out again. mjb 9/3/12 */
/*	padding: 0; /* test - no effect - put in and took out again. mjb 9/3/12 */
}
#content {
	margin: 0;
  padding: 0 2% 0 5%; /* 0 25px 0 55px;*/
 /*	background: transparent; */
	background: #fff; /* You need this if #wrapper is a different color */
	width: 65%; /* added 11/15/11 */
	position:relative;
	float: left;
  border-top: 2px solid #a8a; /* This adds a gray line under the purple line, just inside the #wrapper, which is just under the horizontal menu. */ 
  border-radius: 25px 0 25px 25px; /* mjb 9/3/12 */
	z-index:0;
  min-height:35em;
}

#header {
  background: #007 url(images/header9.png) no-repeat; /* repeat-x; changed 9/3/12 after I saw it repeat on Stan's. This goes behind my website name and logo */
 /* border-radius: 50px; /* mjb 9/3/12 fun, but no. */	
	font: italic normal Georgia, serif;
	letter-spacing: -0.2px;
	margin: 0;
	padding: 0;
	padding-bottom:0px;
	position:absolute;  /* 11/12/11 changed from relative; */
	top:0;
	left:0;
	width:100%;
	min-width:52em; /* Keeps the blue behind the kid with the test tubes and also keeps right column below from getting squeezed to bottom */
}
#header a {
	color: #fd7; /* #fff; /* #fc5;  11/18/11 */
	text-decoration: none;
}
#headerrightimage{
  position: absolute;
  top: 50px;
  left: 52em;
}

#searchform{
	position: absolute;
	right: 5px;
	top: 30px;
}
#searchform label{
	position: absolute;
	left: -9000px;
}
#searchform input{
	width: 100px;
}
#searchform button{
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
	color: #fff;
}
p#rss{
	position: absolute;
	right: 75px; /* was 80px; before 11/15/11 except my.css had it at 75px; */
	top: 5px; /* was 55px; before 11/15/11 except my.css had it at 5px; */
	margin: 0;
	padding: 0;
  visibility: hidden; /* 7/26/11 */
}
.textwidget{
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%; /* 80%; */
	font-style: normal;
	font-weight: normal;
}

#menu {
  float: left; /* right; /* 11/12/11 removed and put back */
	display: inline;  /* 11/12/11 removed and put back */
  width: 28%; /* 20%; /* 25%; */
  margin: 0; /*  0 5% 0 3%; /* 11/12/11 */
  padding: 0; /* 0 50px 0 30px; /* 11/12/11 */
	min-height: 200px;
	background: #eec; /* This is the background behind the cuttlefish and behind all widgets. added so I could change background in #wrapper mjb 9/3/12 */ 
  min-width: 6em; 
  border-top: 2px solid #a8a; /* This adds a bit of space above the right section, inside the #wrapper.  It is a gray line, and was also found in the #content:  border-top: 2px solid #a8a; Then it gets curved below */
 }

#menu form {
	margin: 0 0 0 13px;
}

#menu input#s {
	width: 80%;
	background: #eee;
	border: 1px solid #999;
	color: #000;
}

#menu ul {
	color: #444;
	font-weight: bold;
	list-style-type: none;
	margin: 0; /* 0 0 20px 0; */
	padding: 0; 
/*	height: 1%; apparently this doesn't do anything? */
}

#menu ul li, #menu ul li h3.widget_heading {
	font: italic bold 110% Georgia, Times, serif; 
	letter-spacing: 0;
	margin: 0; /* 20px 0 0 0; */
	padding: 20px 30px; /* 0 0 5px 0;  */
	background: transparent;
}
#menu ul li h3.widget_heading {
	padding: 0;
        color: black;
	font-size: 100%;
}
#menu ul ul {
	font-variant: normal;
	font-weight: normal;
	line-height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: left;
	border: none;
}
/* Covers FIRST/parent line of navigation on the right. */
#menu ul ul li {
	border: 0;
	font: bold normal 70%/1.7em Arial, Verdana, sans-serif; /* mjb 9/2/12 changed weight to bold from normal */
	letter-spacing: 0;
	margin-top: 0;
	padding: 0;
	padding-left: 20px;
/*	background: url(images/list.png) 0 3px no-repeat; *//* mjb 9/2/12 */
}
/* Covers child lines of navigation on the right. mjb 9/2/12 */
#menu ul ul li ul li {
  font-weight: normal;
  background: url(images/list.png) 0 3px no-repeat; 
}
#menu ul ul ul{
	border: none;
}
#menu ul ul ul li{
	font-size: 100%;
}
#menu ul ul li a {
	color: #007; /* #D70606; /* where is this? */
	text-decoration: none;
}

#menu ul ul li a:hover, #menu ul ul li a:active {
  color: #c08; 
	border-bottom: 1px solid #fc0; /* The underline under the links on the right */
}

#menu ul ul ul.children {
	font-size: 100%;
	padding-left: 4px;
}
/* text box on right side */
#menu ul li.widget_text, #menu ul li.widget_products{
  background: #fd9; /* #9cf; /* #fa6; /* 11/12/11 */
  border: 1px solid #009; /* #909; /* mjb 9/3/12 */
  border-left: 3px solid #009; /* #909; /* mjb 9/3/12 */
	border-radius:20px; /* mjb 9/3/12 */
	font-size: 100%;
	color:#000;
}
#menu ul li.widget_pages{
	background: transparent url(images/CuttlefishETransparent.png) no-repeat;
  border: 1px solid #009; /* mjb 9/3/12 */
  border-left: 3px solid #009; /* mjb 9/3/12 */
  border-radius:20px; /* mjb 9/3/12 */
}
#wp-calendar {
	border: none;
	empty-cells: show;
	font-size: 14px;
	margin: 0;
	width: 90%;
}

#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}

#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}

#wp-calendar a {
	display: block;
	text-decoration: none;
	color: #000077; /* #D70606; */
	font-weight: bold;
}

#wp-calendar a:hover {
	background: #e0e6e0;
	color: #333;
}

#wp-calendar caption {
	color: #444;
	font: normal italic Georgia, serif;
	font-size: 120%;
	margin-bottom: 5px;
	text-align: left;
}

#wp-calendar td {
	color: #999;
	font: normal 100% Arial, Verdana, sans-serif;
	letter-spacing: normal;
	padding: 2px 0;
	text-align: center;
}

#wp-calendar td.pad:hover {
	background: #fff;
}

#wp-calendar td:hover, #wp-calendar #today {
	background: #eee;
	color: #bbb;
}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}
.menu1{
/*	height: 1%; */
	margin: 0 0 0 5%; /* 11/11/11 */
	display: block; /* 11/10/11
/*	border-bottom: 1px solid #096; */ /* this was my experiment.  Don't do this. */
  padding-bottom: 40px;
}
.menu1 ul{
	margin: 0;
	padding: 0;
}
.menu1 ul li{
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
}
.menu1 ul li a{
	padding: 0.3em 0.6em; /* 9/29/2011 */
	display: block;
	text-decoration: none;
	float: left;
	position: relative; /* 11/9/11 */
	width:auto;
	border-radius:15px 15px 0px 0px; /* mjb 9/3/12 */
 }
#header .menu1 ul li a:link, #header .menu1 ul li a:visited{
/*  background: #006; /* #119 */ /* ANY background here overrides a different background for the drop-down submenu. */  
/*	color: #ddd; /* 11/15/11 */ /* ANY color here overrides a different color for the drop-down submenu. */
	border-left: 1px solid #807; /* #C50; */
	border-right: 1px solid #807; /* #C50; */
	border-top: 1px solid #807; /* #C50; */
}
#header .menu1 ul li a:hover, #header .menu1 ul li a:active{
/*	background: #333 url(images/menu.png) 0 -100px repeat-x; */
  background: #f81;  /* Want */
	text-decoration: none;
	border-left: 1px solid #b09; 
	border-right: 1px solid #b09;
	border-top: 1px solid #b09; 
}
#header .menu1 ul li.current_page_item a:link, #header .menu1 ul li.current_page_item a:visited{
/*	background: #d70606 url(images/menu_in.png) top left repeat-x; */
  background: #c50;  /* Want */
	border-left: 1px solid #c08;
	border-right: 1px solid #c08;
	border-top: 1px solid #c08; 
}
.menu1 li{
  position:relative;
  list-style:none;
  margin:0;
  float:left;
 }
/* 11/9/11 */
.menu1 li ul{
 z-index:999; 
  position: absolute; 
  top: 1.68em;
  left: 0px; 
  display: none; /* block; */
}
.menu1 li li{
  width: auto;
  float: left;
 }
 /*Drop-down submenu */
 #header .menu1 ul li ul li a{
  width: 7em;
  color:#fd7; 
  background: #007;
  opacity:0.9;
  border-radius:0px 15px 15px 0px; /* mjb 9/3/12 */
  filter:alpha(opacity=95); /* For IE8 and earlier */
 }
.menu1 ul ul li a:link, .menu1 ul ul li a:visited{
/*	background: #222 url(images/menu.png) top left repeat-x; */
  background: #11c;
  color: #000;
 }
/*Drop-down submenu but testing on 6/26/14 suggests this part really doesn't do anything. */
.menu1 ul li:hover ul {
   display: block;
   visibility: visible;
   position:absolute;
   top: 1.68em;
   left: 0;
   height:auto; 
   width:auto;
   z-index:999;
 }
 .menu1 ul li ul li a:hover {
   background: #f81;
   color: #000000;
  }

#footer{
	clear: both;
	background: #007;
	border-top: 2px solid #c08; 
	color: #fd7; /* #fff; */
	margin: 0;
  padding: 0; 
	text-align: center;
	min-height: 34px;
  display:block;
	width: 100%; 
}
#footer p{
	padding: 10px;
	margin: 0;
	font-weight: bold;
	font-family: Georgia, serif;
	font-size: 80%; /* 7/24/11 */
}
#footer p.credit {
  float: right; /* left; */
  display: inline;
  padding: 50px 0px 0px 0; /* 7/24/11 changed from 10px 0 */
  margin-right: -20px;
}
/* The is where the arrow and "Top" appear at the bottom, so you can jump back to the top. mjb 9/8/12 changed from floating to absolute */
#footer p.up{
  position: absolute;
  bottom: 4em;
  right: 5px;
}
#footer p.up a{
	padding-right: 20px;
	background: url(images/top.gif) top right no-repeat;  /* test */
}
#footer a:link, #footer a:visited{
	color: #fd7; /* #ddd; mjb 9/2/12 */
	text-decoration: underline;
}
#footer a:hover, #footer a:active{
	color: #fff;
	text-decoration: none;
}
/* -- Images & Caption Alignment -- */
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
.navigation {
  display: block; 
  clear: both;
}
.navigation .alignleft, .navigation .alignright {
  margin-bottom: 15px;
}
div.date p{
	background: #fff;
	color: #444;
	float: right;
	text-align: right;
  width: 17em; 
	height: 1em;
	margin: 0;
	padding: 0;
	padding-right: 1em;
	padding-top: 0.5em;
	font-size: 80%;
	font-style: italic;
	overflow: visible;
}
div.date span.mese{
	display: inline;
}
table.twocollist{
  font-size:90%;
  margin:0 0.5em;
  padding:0 0.5em;
 }
 table.twocollist td {
  padding-left:2em;
  padding-right:2em;
}


/* formatting for DAY of date */
/* div.date span.giorno{  */
/*	font-weight: bold;    */
/* }                      */


/* Search box in header id=#s */
#s {
    min-width:140px;
}
/* blog page and search results from index.php main index template */
p.sorry-no {
  margin-bottom:200px;
}
p.next-prev-page {
  width:10em;
  margin:0 auto 60px auto;
  padding:0 0 60px 35px;
}
p.wrap_login_logout{
  margin:0;
  padding:0;
  font-size:80%;
  color:#ca5;
  text-align:center;
}
#menu ul li#login_logout-2{
  border:solid 1px #606; 
  border-radius: 0 0 15px 15px;
  margin:-5px 0 0 0;
  padding:3px 1em;
  background:#707;
}
#menu ul li#login_logout-2 a:link, #menu ul li#login_logout-2 a:visited {
	color: #fd7; 
	text-decoration: underline;
}
#menu ul li#login_logout-2 a:visited {
	color: #fd7; 
	text-decoration: underline;
}
#menu ul li#login_logout-2 a:hover, #menu ul li#login_logout-2 a:active {
	color: #fff; 
	text-decoration: none;
}