/*-----------------------------------------------------------------------------
cynthiajoba.com base stylesheet

This is slightly customized by browser, but since I hate hacks, I've made
it simply deliver the tweaked version.

File:      cssbase.php
version:   2.0
author:    Bruce Kroeze
email:     bruce@kroozio.com
website:   http://cynthiajoba.com
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
    margin: 0;
	padding: 0;
}

/* Put it back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
    margin: 1em 0;
}

/* Class for clearing floats */
.clear {
	clear:both;
}

/* Remove border around linked images */
img {
	border: 0;
}

/* =Typography
-----------------------------------------------------------------------------*/

html {
    font-size: 100%; /* IE hack */
}

body {
    font: 12px Arial, Helvetica, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
    color: #333;
}

.titled {
    line-height: 16px;
}

.less {
    font-size:11px;
}

.lesser {
    font-size:10px;
}

.lesser2 {
    font-size: 10px;
}

#maincontent {
    line-height: 16px;
}


/* =Headings
-----------------------------------------------------------------------------*/

h1 {
    font-size: 15px;
    color: #999;
    font-weight: normal;
    font-family: times, serif;
}

h2 {
    color: #333;
    font-size: 13px;
}

h3 {
    font-size: 12px;
}

h4 {
    font-size:12px;
}

h5 {
    text-decoration: underline;
    font-weight: normal;
    font-size:12px;
    margin: 0;
    padding: 0;
}


/* =Links
-----------------------------------------------------------------------------*/

a {
    text-decoration: none;
    color: #6cc;
    font-weight: bold;
}



/* =Branding
-----------------------------------------------------------------------------*/




/* =Top Nav and Logo
-----------------------------------------------------------------------------*/

.logo {
    width: 141px;
    height: 100%;
}

#topNav {
    background-image: url(../images/mainlogo.jpg);
    background-repeat: no-repeat;
    height: 77px;
    padding-top: 8px;
    height: 77px;
}

#topNav .logo {
    margin-top: 3px;
    float: left;
}

#topmenu {                         /* menu list container */
    list-style-type: none;      /* disable the display of the list item bullets */
    padding: 0px;               /* space within the list container */
    position: static;           /* need this so that the z-index stuff works correctly */
    background-color: #fff;     /* the default background color within the main menu container */
    color: #000;                /* the default font color (not links) within the main menu container */
    z-index: 20;                /* push the menu up in the layer order a bit so it isn't hidden behind anything */
    /* Browser plug-ins like Flash or Quicktime may not allow you to overlap then with this menu! */

    margin: 0px 5px 0px 0px;
    float: right;
    font-size: 11px;
}

#topmenu li {                      /* top-level menu element */
    list-style-type: none;      /* disable the display of the list item bullets */
    float: left;                /* this is to allow for the horizontal main menu */
    background-color: #fff;     /* main menu item background color */
    color: #000;                /* main menu item font color (not links) */
    display: block;
    width: 65px;   /* the width of each main menu item */
    margin: 0;
    padding: 0 0 0 0;
    border: 1px solid #fff;
    float: left;
}

#topmenu li#aboutmenu {
    margin-right: 9px;
}

#topmenu ul {                     /* third-level (or greater) menu element list elements */
    position: absolute;         /* this is so that it doesn't push that page content around on hover */
    margin: 1px 0 0 0;                /* space around the list container */
    padding: 0px;               /* space within the list container */
    list-style-type: none;      /* disable the display of the list item bullets */
    display: none;
    width: 75px;   /* should be the same as #topmenu li width */
    background-color: #fff;     /* sub-menu default background color */
    /* border-top: #ccc solid 1px; */ /* the border around the sub-menu list */
    color: #ccc;                /* sub-menu default font color (not links) */
    z-index: 99;                /* want to be sure this is above the rest of the menu */
}

#topmenu ul li{                   /* second-level or greater menu element links */
    background-color: #fff;     /* default background color for sub-menu container */
    color: #000;                /* default font color (not links) for sub-menu container */
    margin: 1px;                /* spacing between sub-menu containers */
    padding: 0px;               /* This is for padding between menu items in the drop-downs */
    width: 75px;               /* (padding*2) must be subtracted from #topmenu li width and set for this one, or borders won't display properly. */
}

#topmenu li a {                    /* top-level menu element links */
    text-align: center;         /* text alignment in main menu item links */
    display: block;
    color: #333;
    width: 65px;               /* set this to #topNav #topmenu ul width */
    text-decoration: none;
    font-weight: normal;
}

#topmenu ul a {                   /* all the other level menu link elements */
    text-align: left;
    padding: 1px;
    margin: 0px;
    width: 73px;   /* (padding*2) must be subtracted from #topmenu ul li width and set for this one, or borders won't display properly. */
    display: block;
}

/* #topmenu li:hover, */
#topmenu li.over {            /* top-level hovering properties */
    display: block;
    border: 1px solid #ccc;
}

#topmenu ul li a:hover,
#topmenu ul li.over {             /* higher level hovering properties */
    display: block;
    margin: 0px;
    padding: 1px;
    background-color: #fff;
    color: #75C4C5;
}

#topmenu ul ul{                   /* higher-level list containers */
    display: none;              /* don't display by default */
    position: absolute;
    margin-left: 73px;         /* this should be the width of #topmenu ul li */
    margin-top: -2em;           /* this will push the sub-menu up to the level of it's parent */
}

/* only non-MSIE browsers use this */
#topmenu ul li>ul,
#topmenu ul ul li>ul{
    margin-top: -2em;           /* should be set to the same as #topmenu ul ul margin-top */
}

/* additional sub-menu levels in the next 2 blocks. (For up to 5 levels of drop menus) */
#topmenu li.over ul ul,
/* #topmenu li:hover ul ul, */
#topmenu li.over ul ul ul,
/* #topmenu li:hover ul ul ul, */
#topmenu li.over ul ul ul ul,
#topmenu li:hover ul ul ul ul,
#topmenu li.over ul ul ul ul ul,
#topmenu li:hover ul ul ul ul ul{
    display:none;
}

#topmenu li.over ul,
/* #topmenu li:hover ul, */
/* #topmenu ul li:hover ul, */
#topmenu ul li.over ul,
/* #topmenu ul ul li:hover ul, */
#topmenu ul ul li.over ul,
#topmenu ul ul ul li:hover ul,
#topmenu ul ul ul li.over ul,
#topmenu ul ul ul ul li:hover ul{
    display:block;
    /* border: 1px solid #ccc; */
}

li>ul {
    top: auto;
    left: auto;
}

.content {                      /* This is used for the content that will appear below the menu */
    clear: left;
}


/* =Main Nav
-----------------------------------------------------------------------------*/

#navwrapper {
    text-align: center;
    min-width: 754px;
}

#mainNav {
    margin: 0px auto 5px auto;
    width: 754px;
    border: 1px solid #ccc;
}

#mainNav li a img {
    border: none;
}


/* ---- Drop Down Menus ---- */
#mainmenu{                         /* menu list container */
    list-style-type: none;      /* disable the display of the list item bullets */
    padding: 0px;               /* space within the list container */
    position: static;           /* need this so that the z-index stuff works correctly */
    background-color: #fff;     /* the default background color within the main menu container */
    color: #000;                /* the default font color (not links) within the main menu container */
    z-index: 20;                /* push the menu up in the layer order a bit so it isn't hidden behind anything */
    /* Browser plug-ins like Flash or Quicktime may not allow you to overlap then with this menu! */

    margin: 0px auto 5px auto;
    padding: 0;
    list-style: none;
    height: 32px;
    background: #fff;
    text-align: center;
}

#mainmenu li{                      /* top-level menu element */
    list-style-type: none;      /* disable the display of the list item bullets */
    float: left;                /* this is to allow for the horizontal main menu */
    background-color: #fff;     /* main menu item background color */
    color: #000;                /* main menu item font color (not links) */
    display: block;
    width: 123px;               /* the width of each main menu item */
    margin: 3px 0px 3px 0px;
    /* margin: 0; */
    padding: 0;
    border: 1px solid #fff;
    float: left;
}

#mainmenu ul {                     /* third-level (or greater) menu element list elements */
    position: absolute;         /* this is so that it doesn't push that page content around on hover */
    margin: 0px;                /* space around the list container */
    padding: 0px;               /* space within the list container */
    list-style-type: none;      /* disable the display of the list item bullets */
    display: none;
    width: 123px;               /* should be the same as #mainmenu li width */
    background-color: #fff;     /* sub-menu default background color */
    background-image: none;
    border: #75C4C5 solid 1px;     /* the border around the sub-menu list */
    color: #ccc;                /* sub-menu default font color (not links) */
    z-index: 99;                /* want to be sure this is above the rest of the menu */
}

#mainmenu ul li{                   /* second-level or greater menu element links */
    background-color: #75C4C5;     /* default background color for sub-menu container */
    background-image: none;
    color: #000;                /* default font color (not links) for sub-menu container */
    border: 1px solid #75C4C5;
    margin: 0;                  /* spacing between sub-menu containers */
    padding: 3px;               /* This is for padding between menu items in the drop-downs */
    width: 117px;               /* (padding*2) must be subtracted from #mainmenu li width and set for this one, or borders won't display properly. */
}

#mainmenu li a {                    /* top-level menu element links */
    text-align: center;         /* text alignment in main menu item links */
    display: block;
    color: #333;
    width: 123px;               /* set this to #topNav #mainmenu ul width */
    height: 32px;
    text-decoration: none;
    font-weight: normal;
}

#mainmenu ul a {                   /* all the other level menu link elements */
    text-align: left;
    padding: 1px;
    margin: 0px;
    width: 115px;               /* (padding*2) must be subtracted from #mainmenu ul li width and set for this one, or borders won't display properly. */
    display: block;
    height: auto;
    font-size: 12px;
}

/* #mainmenu a:hover, */                 /* top-level hovering properties */
#mainmenu li.over {
    display: block;
}

#mainmenu ul li a:hover,
#mainmenu ul li.over            /* higher level hovering properties */
{
    display: block;
    width: 115px;  /* should be set to the same value as #topNav #mainmenu ul li width */
    margin: 0px;
    background-color: #C6E7E7;
    padding: 1px 0 1px 1px;}

#mainmenu ul ul{                   /* higher-level list containers */
    display: none;              /* don't display by default */
    position: absolute;
    margin-left: 117px;         /* this should be the width of #mainmenu ul li */
    margin-top: -2em;           /* this will push the sub-menu up to the level of it's parent */
}

/* only non-MSIE browsers use this */
#mainmenu ul li>ul,
#mainmenu ul ul li>ul{
    margin-top: -2em;           /* should be set to the same as #mainmenu ul ul margin-top */
}

/* additional sub-menu levels in the next 2 blocks. (For up to 5 levels of drop menus) */
/*#mainmenu li:hover ul ul,
#mainmenu li:hover ul ul ul,
#mainmenu li.over ul ul ul ul,
#mainmenu li.over ul ul ul ul ul{ */
#mainmenu li.over ul ul,
#mainmenu li.over ul ul ul,
#mainmenu li.over ul ul ul ul,
#mainmenu li.over ul ul ul ul ul{
    display:none;
}

/* #mainmenu li.over ul,
#mainmenu ul li.over ul,
#mainmenu ul ul li.over ul,
#mainmenu ul ul ul li.over ul,
#mainmenu ul ul ul ul li.over ul{ */
#mainmenu li.over ul,
#mainmenu ul li.over ul,
#mainmenu ul ul li.over ul,
#mainmenu ul ul ul li.over ul,
#mainmenu ul ul ul ul li.over ul{
    display:block;
}

/* --- end dropdown -- */

#mainNav li.fineart {
    margin-left: 2px;
}

#fineart #mainNav .fineart a,
#serenity #mainNav .serenity a,
#music #mainNav .music a,
#storytelling #mainNav .storytelling a,
#licensing #mainNav .licensing a,
#news #mainNav .news a {
    cursor: default;
    background-repeat: no-repeat;
    color: #fff;
}

#fineart #mainNav li.fineart,
#serenity #mainNav li.serenity,
#music #mainNav li.music,
#storytelling #mainNav li.storytelling,
#licensing #mainNav li.licensing,
#news #mainNav li.news {
    cursor: default;
    background-repeat: no-repeat;
    color: #fff;
}


#mainNav #mainmenu li ul li a {
    background-image: none;
}

#mainNav li.fineart a {
    background-image: url(../images/buttons/cynthia.gif);
}

#mainNav li.fineart a:hover {
    background-image: url(../images/buttons/cynthia-on.gif);
}

#mainNav li.serenity a {
    background: url(../images/buttons/serenity.gif) 0 0;
}
#mainNav li.serenity a:hover {
    background-image: url(../images/buttons/serenity-on.gif);
}

#mainNav li.music a {
    background-image: url(../images/buttons/music.gif);
}
#mainNav li.music a:hover {
    background-image: url(../images/buttons/music-on.gif);
}

#mainNav li.storytelling a {
    background-image: url(../images/buttons/storytelling.gif);
}

#mainNav li.storytelling a:hover {
    background-image: url(../images/buttons/storytelling-on.gif);
}

#mainNav li.licensing a {
    background-image: url(../images/buttons/licensing.gif);
}
#mainNav li.licensing a:hover {
    background-image: url(../images/buttons/licensing-on.gif);
}

#mainNav li.news a {
    background-image: url(../images/buttons/news.gif);
}
#mainNav li.news a:hover {
    background-image: url(../images/buttons/news-on.gif);
}

/* =Sub Nav
-----------------------------------------------------------------------------*/
div#subnav {
    margin: 0 0 0 14px;
}

#subnav .desc {
    float: left;
    margin: 42px 0 15px 0;
}

#subnav .desc h1 {
    font-family: Times, serif;
    font-size: 17px;
    color: #333;
    margin: 0;
}


#subnav h2 {
    font-family: Times, serif;
    font-weight: normal;
    font-size: 12px;
    color: #999;
    margin: 0 0 5px 0;
}

#subnav .links {
    float: left;
    padding-left: 10px;
    margin: 55px 0 0 4px;
    border-left: 1px solid #999;
}

#subnav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
}

#subnav ul li {
    margin: 0 0 0 0;
    background: url(../images/cyan-bullet.gif) no-repeat 0 50%;
    padding-left: 10px;
}

#subnav ul li a:hover {
    color: #6cc;
}


#subnav ul li.on a {
    cursor: default;
    font-weight: bolder;
    color: #000;
}

#subnav ul li a {
    color: #333;
    font-weight: normal;
}

/* #subnav ul li.on a, */
#subnav ul li.on a:hover,
#subnav ul li a:hover {
    color: #6cc
}

#subnav ul li.on a:hover {
    cursor: default;
}

/* =Main Content
-----------------------------------------------------------------------------*/

body {
    background-color: #333;
    text-align: center;
}


div.pagecontent {
    padding: 0px 0px 4px 0px;
    width: 778px;
    background-color: #fff;
    margin: 0 auto;
    text-align: left;
    border-left: 11px solid #666;
    border-right: 11px solid #666;
}


div.pagebody {
    background: #fff url(../images/pagebody_swish.jpg) no-repeat;
    min-height: 472px;
    padding: 0px 10px 0px 38px;
    position: relative;
}

/* for Internet Explorer */
/*\*/
* html div.pagebody {
    height: 472px;
}
/**/


/* =Secondary Content
-----------------------------------------------------------------------------*/

.adtop {
    background: #fff url(../images/shadetop200.gif) no-repeat;
    height: 15px;
}

.adbot {
    background: #fff url(../images/shadebot200.gif) no-repeat;
    height: 15px;
}

.adbox {
    background: #fff url(../images/shadeside200.gif) repeat-y;
    margin-bottom: 10px;
}

.adbox p {
    padding: 0px 10px 0px 87px;
    margin-top: 0px;
    font-size: 11px;
}

.adbox p.last {
    margin-bottom: 0px;
}

.adbox img.icon {
    float: left;
    margin: 5px 0px 0px 20px;
}

.adbox h3 {
    padding: 0 10px 0 87px;
    margin: 3px 0 0 0;
    font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans", "Trebuchet MS", Tahoma, Verdana, sans-serif;
    font-weight: bold;
    font-size: 11px;
}

.sidebox ul {
    list-style-type: none;
}

.sidebox ul li {
    background: url(../images/black-dot-sm.gif) no-repeat 0 5px;
    padding-left: 10px;
}

/* =Footer
-----------------------------------------------------------------------------*/

#mainFooter {
    font-size: 11px;
    text-align: center;
}

#mainFooter .rights {
    font-size:  10px;
}


/* =Forms
-----------------------------------------------------------------------------*/

/* IE Hack */
input,
select,
textarea {
    font-size: 100%;
}

/* Removes fieldset borders. even on Opera 7 */
fieldset {
  border: 1px solid #fff;
}

#simpleform {
    font-size: 12px;
}

#simpleform label {
    display: block;
}

#simpleform select,
#simpleform textarea,
#simpleform input {
    background-color: #fff;
    margin: 2px 0 10px 0;
    font-size: 12px;
}

#simpleform p {
    margin-left: 0px;
}

.error {
    color: red;
}

input.nobreak {
    float: left;
}

label.nobreak {
    padding-left: 20px;
    padding-bottom: 5px;
}

/* =Tables
-----------------------------------------------------------------------------*/

table {
    font-size: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    text-align: left;
	font-weight: normal;
}



/* =Misc 1
-----------------------------------------------------------------------------*/

.clear {
    clear: both;
}

.contact {
    line-height: 13px;
}


.spaced {
    line-height: 13px;
}

.spaced2 {
    line-height: 12px;
}

span.price {
    font-size: 15px;
    font-family: times, serif;
}


/* =Misc 2
-----------------------------------------------------------------------------*/

.narrow {
    letter-spacing: -.5px;
}

.hidden {
	display: None;
}

/*-----------------------------------------------------------------------------
cynthiajoba.com index page stylesheet

File:      cssindex.php
version:   2.0
author:    Bruce Kroeze
email:     bruce@kroozio.com
website:   http://cynthiajoba.com
-----------------------------------------------------------------------------*/

/* =General
-----------------------------------------------------------------------------*/

/* =Typography
-----------------------------------------------------------------------------*/

/* =Headings
-----------------------------------------------------------------------------*/

/* =Links
-----------------------------------------------------------------------------*/

/* =Branding
-----------------------------------------------------------------------------*/

/* =Main Nav
-----------------------------------------------------------------------------*/

/* =Sub Nav
-----------------------------------------------------------------------------*/

/* =Main Content
-----------------------------------------------------------------------------*/
#maincontent {
    padding-top: 42px;
    padding-left: 68px;
    width: 400px;
    float: left;
    line-height: 14px;
}

p.titled {
    padding-left: 0px;
}

#maincontent p {
    padding: 0px 35px 0px 17px;
    clear: both;
}

#maincontent p.quote {
    position: relative;
    height: 64px;
    background: url(../images/quotes/index-quote.gif) no-repeat 14px 0;
    margin: 0px;
}

/* #maincontent a.more {
    float: right;
    margin: 32px 36px 0 0;
    z-index: 20;
} */

#maincontent a.more {
    position: absolute;
    bottom: 2px;
    right: 72px;
}


/* =Secondary Content
-----------------------------------------------------------------------------*/

#sidecontent {
    float: right;
    width: 200px;
    padding: 0;
}

/* =Footer
-----------------------------------------------------------------------------*/

/* =Forms
-----------------------------------------------------------------------------*/

/* =Tables
-----------------------------------------------------------------------------*/

/* =Misc 1
-----------------------------------------------------------------------------*/

.featured {
    margin-bottom: 34px;
}

.quote {
    padding-left: 14px;
}

/* =Misc 2
-----------------------------------------------------------------------------*/