/*   
Theme Name: htwenty child theme for thematic
Theme URI: 
Description: A child theme based off of Thematic
Author: Jenn Chen
Author URI: http://www.htwentyinc.com
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
*/

/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');

/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');

/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');

/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');

/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
@import url('../thematic/library/styles/default.css');

/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');

/* Custom CSS changes! */


/* Body & Layout
-------------------------------------------------------------- */

body {
	background-color: #99CBCC;
	min-width: 850px;
}

body, input, textarea {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 12px;
	line-height:20px;
}

body a {
	color: #06C;
}

.clear {
	clear: both;
}

#wrapper {
	clear: both;
	width: 850px;
	height: auto;
	background-color: #FFF;
}

#bg-stripe {
	height: 200px;
	position: absolute;
	width: 100%;
	background:url(images/gradient.gif) repeat top; 
	z-index: -1;
	margin-top: -21px;
}


/* Content Wrapper (rounded cornered div)
-------------------------------------------------------------- */

#content-wrapper{
	width: 850px;
	height: auto;
	margin: 20px auto;
}
.rounded-wrapper {
	display: block;
}
.rounded-wrapper *{
  display:block;
  height:1px;
  overflow:hidden;
  font-size:.01em;
  background:#FFFFFF}
.rounded-wrapper1{
  margin-left:3px;
  margin-right:3px;
  padding-left:1px;
  padding-right:1px;
  border-left:1px solid #e1e1e1;
  border-right:1px solid #e1e1e1;
  background:#f2f2f2}
.rounded-wrapper2{
  margin-left:1px;
  margin-right:1px;
  padding-right:1px;
  padding-left:1px;
  border-left:1px solid #d1d1d1;
  border-right:1px solid #d1d1d1;
  background:#f5f5f5}
.rounded-wrapper3{
  margin-left:1px;
  margin-right:1px;
  border-left:1px solid #f5f5f5;
  border-right:1px solid #f5f5f5;}
.rounded-wrapper4{
  border-left:1px solid #e1e1e1;
  border-right:1px solid #e1e1e1}
.rounded-wrapper5{
  border-left:1px solid #f2f2f2;
  border-right:1px solid #f2f2f2}
.rounded-wrapperfg{
  background:#FFFFFF}


/* Header
-------------------------------------------------------------- */
#header {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#blog-title {
	margin-bottom: 0;
	width: 214px;
}

#blog-title a {
	background:url(images/logo_smaller.jpg) no-repeat top left;
	display:block;
	text-indent:-9000px;
	width: auto;
	height: 150px;
	clear: both;
}

#blog-description {
	visibility: hidden;
	height: 0px;
}

#branding {
	padding: 10px 0 0;
	margin-bottom: 10px;
	text-align: left;
}


/* Menu
-------------------------------------------------------------- */

.skip-link {
    display:none;
}

#access {
	width: auto;
    border-top: 1px solid #FAFACC;
	border-bottom: 1px solid #FAFACC;
	background-color: #FAFADD;
}

.sf-menu {
	margin-right: 1px;
	border: none;
	position: absolute;
	right: 0px;
}

.sf-menu a {
	font-size: 14px;
	background-color: #FAFADD;
	border-left: none;
	border-top: none;
	border-bottom: none;
}

.sf-menu li ul {
    display:none!important;
}

.sf-menu .current_page_parent a, .sfmenu .current_page_ancestor a {
	font-weight: bold;

}

.sf-menu .current_page_parent li a{
	font-weight: normal;
}

.sf-menu li:hover, .sf-menu li.sfHover, 
.sf-menu a:focus, .sf-menu a:hover, 
.sf-menu a:active {
	background: #FAFAFA;
}

.sf-menu ul a {
    background: #FFFFFF;
}

.sf-menu ul a {
    background:#fafafa;
	border-bottom:none;
}


/* S3Slider - Index Page Image Slideshow
-------------------------------------------------------------- */

#s3slider {
   width: 800px; /* important to be same as image width */
   height: 350px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
   margin: 20px auto;
}

#s3sliderContent {
   width: 800px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage a {
	text-decoration: none;
}

.s3sliderImage span {
   position: absolute; /* important */
   right: 0;
   left: 0px;
   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
   font-size: 12px;
   padding: 10px;
   width: 400px;
   background-color: #000;
   filter: alpha(opacity=75); /* here you can set the opacity of box with text */
   -moz-opacity: 0.75; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.75; /* here you can set the opacity of box with text */
   opacity: 0.75; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0px;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.s3sliderImage span h1 {
	font-size: 18px;
	font-weight: bold;
	line-height: 28px;
}

/* Main layout - content stuff
-------------------------------------------------------------- */

#main {
	width: 800px;
	padding-top: 20px;
}

#container {
	width: 575px;
	margin-right: 10px;
}

#content {
	width: auto;
	margin: 0;
}

.hentry {
	padding: 0px;
}

.entry-title {
	font-size: 18px;
	font-family: Georgia, serif;
}


/* Primary Sidebar
-------------------------------------------------------------- */

#sidebar_wrapper a {
	text-decoration: none;
	font-size: 12px;
}

#sidebar_wrapper ul li {
	
}

.main-aside {
	width: auto;
}

#primary {
	padding:  0px;
	border: none;
	border-left: 1px solid #CCCCCC;
	width: 200px;
	right: 0;
}


.aside h3 {
	font-style: normal;
	font-weight: bold;
	font-size: 12px;
}

.aside a {
	color: #06C;
}

#siteinfo { 
	padding: 10px 0;
}

#footer {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}