/*
THEME NAME: Knit and Pearls theme based on sandbox
THEME URI: http://www.knitandpearls.com
DESCRIPTION: Custom Theme for Knit and Pearls built on modified Sandbox Skeleton
VERSION: 1.6
AUTHOR: <a href="http://www.jmwest.com">JM West</a> 
AUTHOR URI: http://www.jmwest.com
TAGS: knit pearls
*/
@import url('styles/default.css');
@import url('styles/navbar-inheader.css');
@import url('styles/layout2CL.css');


/* CSS Document */
/*** OVERALL PAGE LAYOUT POSITIONING  ***************************************************************************/
/* fluid width page */
/* #wrapper {min-width:760px; max-width:960px; width:auto !important; width:960px; text-align:left; margin:0 auto; position: relative;} */
/* .pagewidth {min-width:760px; max-width:960px; width:auto !important; width:960px; text-align:left; margin:0 auto; position: relative;} */
/* fixed width page */
.pagewidth {width: 980px; margin: 0 auto; position: relative; }
#main .pagewidth {padding-bottom: 25px;}
div#container {margin:0 0 0 -310px;  /* negative side margin makes room for sidebar and gutter */ }
div#content {margin:0 20px 0 310px; /* side margin should be same as negative margin in container */ padding: 20px 20px;}
div.sidebar {width:260px; /* width of sidebar = negative margin - gutter */ padding:0 15px;}

/*** Header area - set same height for #header, #header .pagewidth, #header-left, & #header-right ***/
/*** Set width of #header-left and #header-right to sum of page-width or 100% ***/
#header, #header .pagewidth, #header-left, #header-right {height: 11em;}
#header {width: 100%; position: relative; /*overflow:auto;*/z-index: 100;} 
/*#header .pagewidth {overflow: auto; }*/
#header-left {width: 25% ; position: absolute; left:0; top:0;}
#header-right {width: 75%; position: absolute; right:0; top:0; padding: 20px 0 0 0; text-align:right; }
#logo1 {position: absolute; width: 109px; height:243px; left: 24px; top: 14px; z-index:200}
#logo2 {position: absolute; width: 401px; height:75px; left: 52px; top: 23px; z-index:210}

#navbar {width: 840px;}
#navbar, div#menu {height: 3em;}
div#menu ul, div#menu ul ul { line-height:1em; list-style:none; margin:0; padding:0; }
div#menu ul li {float:right;}
div#menu ul a { padding:1.5em 1em .5em 1em; }
div#menu ul a:hover {background: url(../images/kp-hover-yarn.png) no-repeat center top; color: blue;} /* menu item hover style */

/*** Main content area ***/
#main {margin:0 auto; padding:0; overflow:auto; z-index:50; text-align: left; } /* navbar z-index 100 */
#main .pagewidth {overflow: auto; } /* so as not to have to clear */
img.circles {position: absolute; right: 0; top: -14em; z-index: 180;}
img.circle-home {position: absolute; right: 1em; top: -16em; z-index: 180;}
#yarnpage img {float: right; position: relative; margin: 8px 40px 5px auto; }
#yarnpage p, #yarnpage h3, #yarnpage h4 {}
#yarnpage hr {clear: both;}
#yarnpage img.circles {position: absolute; right: 0; top: -14em; z-index: 180; margin:0;}

#main .sidebar, #main .sidebar h1, #main .sidebar h2, #main .sidebar h3, #main .sidebar h4, #main .sidebar h5 {color: #413aa4; margin-top:.75em; }
.sidebar, #primary {margin-bottom: 0; padding-bottom: 0;}
ul.xoxo {list-style: none; margin: 0; padding: 0; padding-left: 10px;}
.indetail, a:link.indetail, a:visited.indetail {font-weight:bold; font-size:1.4em; color: #3c3c3c; font-family:"Comic Sans MS", sand, sans-serif; line-height: 1.6em;}
ul.xoxo li { padding: 0 25px 15px 25px;}
#primary ul.xoxo li { padding-bottom: 5px;}
#secondary ul.xoxo li {border-top: 1px solid #9e3997;}
ul.xoxo li#whatsnew {background: #ffffff url(images/kp-whatsnew.png) left top no-repeat; }
ul.xoxo li#whatsnew h3 {margin-top: 0; padding-top: 37px;}

/*** Footer area ***/
#footer {width: 100%; position: relative; text-align: center; font-size:.9em; padding: 10px 0; }
#footer p {text-align: center;}


/*** BACKGROUNDS & COLORS ***************************************************************************/
body { background: url(images/kp-bg.jpg) repeat left top; color: #444444;}
h1, h2, h3, h4, h5 {color: #9e3997;}
h1 {font-size: 2em;} h2 {font-size: 1.8em;} h3 {font-size: 1.2em;} h4 {font-size: 1em;}
#main .sidebar h4 {font-size: 1.2em; margin-top: .5em;}
h2.entry-title {margin-top: 4.5em; background: url(images/kp-entrytitle-ul.png) bottom left repeat-x; padding-bottom: 12px;}
h1.entry-title {margin-top: 4.75em; background: url(images/kp-entrytitle-ul.png) bottom left repeat-x; padding-bottom: 12px;}
#primary h3.widgettitle {font-size: 1.8em; font-weight: normal; margin-top:120px; margin-bottom: .5em;}
#header {}
div#navbar {background: none; border:none; color: #c8f1a8; } /*bar across screen or wrapper*/
div#menu {background:none; /*border: 1px solid #666666;*/ } /*bar across pagewidth*/
div#menu ul a {background: none; border: none; color: #c8f1a8;  font-weight: bold; text-transform:uppercase;} /* menu items style */
div#menu ul a:hover {background: url(images/kp-hover-yarn.png) no-repeat center top; color: #c8f1a8;} /* menu item hover style */
#main {background-color: #b9f68a; border-top: 4px solid #b551ae; border-bottom: 4px solid #b551ae; } /* background for main middle section of page - nothing will take on body bg */
#main .pagewidth {background:#ffffff url(images/kp-mainpg-bg.png) repeat-y left top;}
#main .sidebar, #main .sidebar h1, #main .sidebar h2, #main .sidebar h3, #main .sidebar h4, #main .sidebar h5 {color: #413aa4; }
div#primary {margin-top:140px;}
#secondary {margin-top: 0;}
#footer {color: #c8f1a8; padding-top: 20px;} /*background for footer. If page is short, make sure bg of footer blends with body/wrapper bg.*/
#footer a, #footer a:link, #footer a:visited {color: #c8f1a8; text-decoration: none;}
blockquote {border-left: thick solid #999999;}
input, select, textarea {border-color: 1px solid #666666;}
input[type=file], input[type=image], input[type=radio]{ border: none;} /*not all browsers understand so may need to manually fix */
a, a:link, a:visited { color: #9e3997;}    /* default link text color */
hr {border-top: 1px solid #666666;}