/*
Theme Name: Blue Shades! 
Theme URI: http://juicyfreshbites.com
Description: My own Thematic Child Theme
Author: Stephanie Chung
Author URI: http://juicyfreshbites.com
Template: thematic
Version: 0.1
.
This work is released under the GNU General Public License 2:
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/

/* 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 */
@import url('../thematic/library/styles/default.css');

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


#blog-title a {
display:block; /* We do this so we can add a background image */
text-indent:-9000px; /* Hides the text--but not from search engines */
height: 102px; /* height of your logo, like 180px */
width: 940px; /* width of your logo, like 940px */
background:url("images/logo1.jpg") no-repeat top center; /* adds in the logo image */
}

/*hide blog description 
#blog-description {
position:absolute;
left:-9000px;
}*/


/* apply a background color to the whole page
body {
	background-image: url(images/stretchedray.jpg);
	background-repeat: no-repeat;
} */ 

/* apply a background image to the content area */
#main {
	background-image: url(images/content4.jpg);
}

#branding {
padding-top: 10px; padding-bottom: 10px;
}

body {
background-color: #D2E8FF;
}

/* thick pale blue borders to header and footer */
#header {
border-bottom:10px dashed #D2E8FF;
}
#footer {
border-top:10px solid #D2E8FF;
margin-top:0px; /* remove the default top margin on footer */
}

/*overwrite the default grey line in default.css*/
#access {
border-bottom:1px solid #D2E8FF;
}

/* thin borders on top and bottom borders of content area*/ 
#main {
border-bottom:1px solid #4B8AA9;
border-top:1px solid #4B8AA9;
border-left: 1px solid #4B8AA9;
border-right: 1px solid #4B8AA9;
}

/* add a border to separate posts */
div.post{
border-bottom:2px dashed #BA66CD;
}

/* too much space between end of post and the border caused by the div.entry-utility margin: we clear the margin*/
div.entry-utility{
margin-bottom:0;
}
/* we add some top margin to .entry-title to separate them from the above borders*/
.entry-title{
margin-top:22px;
}
/* since we have added top margin to .entry-title we reduce a little the #main top padding */
#main {
padding-top:0px; /* default is 66px */
padding-bottom:0px;
}

/* remove the border on sigle post pages */
body.single div.post{
border-bottom:none;
}

/* apply background colour and border to navigation areas */
.navigation {
background-color:#C7EDF0;
padding:10px;
border: 1px solid #AECED2;
}

/*adjusting the width of navigation areas */
#nav-above, #nav-below {
width:auto;
}

#nav-above {
margin-bottom:24px;
}
#nav-below {
margin-top:24px;
}

.paged #nav-above {
padding:18px; /* to reset the default */
}

/* common styles (both #primary and #secondary have .main-aside class*/
.main-aside h3.widgettitle{
font-weight:bold;/* bold */
text-transform:uppercase;/* uppercase */
font-style:normal;/* overwrite the default italic style */
margin-bottom:7px; /* a small margin on the bottom */
}

/* primary is blue */
#primary h3.widgettitle{
color:#113242;/* color blue (same color of header background) */
border-bottom:1px solid #113242;/* a thin blue line on the bottom */
}

/* secondary is blue */
#secondary h3.widgettitle{
color:#113242;/* color blue */
border-bottom:1px solid #113242;/* a thin blue line on the bottom */
}

/* common text styles */
.main-aside{
font-size:0.8em;
color:#1A4E66;
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
}

.main-aside a{
text-decoration:none;/* links on both primary and secondary are not underlined */
font-weight:none;
}
.main-aside a:active, .main-aside a:hover {
text-decoration:underline; /* but they are underlined on mouse over */
}

/* links on primary are blue */
#primary a{
color:#1A4E66;
}
#primary a:active, #primary a:hover{
color:#113242;
}
/* links on secondary are also blue */
#secondary a {
color:#1A4E66;
}

/* remove bullet on list inside widgets */
#primary .widgetcontainer ul li {
list-style-type: none;
}
#secondary .widgetcontainer ul li {
list-style-type: none;
}

/* we remove the default border around #primary */
#primary {
border:none;
}

/* Widget Titles have same color of blog-description, text and links are white*/
#subsidiary  h3.widgettitle{
color: #113242;
}
#subsidiary, #subsidiary a{
color: #FFF;
}

/* we move the 1st Subsidiary (#subsidiary #first) on the header, where we can put search box or banners or whatever else*/
#subsidiary #first {
position:absolute;
right:25px;
top:5px;
z-index:1000; /* we put it on top, elsewhere it stays on the back and it doesn't appear*/
}

/* add a different backround and some borders to the 1st Subsidiary*/

#subsidiary #first {
background-color: #FFF;
border: 1px solid #1D5570;
padding:5px;
}

/* font styles for post titles */

.entry-title {
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
font-size:24px;
font-weight:normal; /*400 = normal, 700 = bold*/
color: #1A4E66; 
}

/* color must be defined also on links */
.entry-title a{
color:#3366FF; /*default: #113242*/
}

/*color of Post Header and Post Footer*/
.entry-utility, .entry-utility a, .entry-meta, .entry-meta a {
color:#4A7D85; 
}

/* change the hover color of all general links*/
a:active, a:hover {
color:#19ACFF !important/* light blue as for links on #primary is for ALL links*/
}

/* but this overwrite also our previous defined styles so we have to rewrite them in that way */
#secondary a:active, #secondary a:hover, #subsidiary a:active, #subsidiary a:hover, #blog-title a:active, #blog-title a:hover{
color:#113242 !important
}
#siteinfo a:active, #siteinfo a:hover {
color:#113242 !important ;
}

/*the following deals with the drop-down menu at the top*/
/*same width of #main to have menu left-aligned with it*/
.menu {
width:960px;
}

/*items have same background color of #subsidiary #first*/
.sf-menu li {
background-color:#D2E8FF;
}
/*no bottom borders on items. left borders has color used for #subsidiary #first border*. Top border is just a little darker than header background*/
.sf-menu a {
border-top-color:#7FDAFF;
border-left-color:#7FDAFF;
border-bottom-color: #7FDAFF;
}
/*same color must be applied to the end-of-menu border*/
.sf-menu {
border-right-color:#7FDAFF;
}

/*change font style for the menu*/
.sf-menu {
font-size:14px;
font-variant:small-caps;
}
.sf-menu a, .sf-menu a:visited {
color:#113242;
}

/*on mouse over*/
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background-color:#B3E4E9;
}
.sf-menu li:hover a, .sf-menu li.sfHover a {
color: #113242;
}
/*sub-items*/
.sf-menu ul, .sf-menu ul a {
border-color:#4B8AA9;
}

.sf-menu ul a {
background-color:#B3E4E9;
height:auto;
color: #113242;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
top:34.5px;
left:1px;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul a:focus, .sf-menu ul a:hover, .sf-menu ul a:active {
background-color:#CEF0F2;
}

/*I forgot to style the comment area!*/
#respond {
background-color:#AEE2E8;
padding:18px;
border: 1px dashed #4A7D85;
}
#comments h3 {
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
}

/*my own doodles begins*/

/* change the color of blog description to dark blue */
#blog-description  {
color:#113242;
}

/*change font color of navigation area*/
.navigation a {
color: #113242;
}
/*change the default color of links in entry content area*/
.entry-content a:link {
color: #19ACFF;
text-decoration:none;
}

/*change font of entry content*/
#content .entry-content {
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
font-size: 1em;
}

/*change setting for h1 headings, font & padding*/
#content .entry-content h1 {
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
padding: 10px 0 5px;
}

/*change setting for h2 headings, font & padding*/
#content .entry-content h2 {
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
padding: 10px 0 5px;
}

/*overwrite h3 heading being italic on default*/
#content .entry-content h3 {
font-style: normal;
padding: 10px 0 5px;
}