/*-----------------------------------------------------------------------------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
-----------------------------------------------------------------------------*/

/* =Gallery Sliding Doors Nav
-----------------------------------------------------------------------------*/

ul#gallerynav {
    margin: 0;
    padding: 0;
    float: left;
    width: 720px;
    list-style: none;
}

ul#gallerynav li {
    float: left;
    width: 134px;
    height: 43px;
    text-align: center;
    margin: 0;
    padding: 0;
}


/* Hack to make IE/Mac play nice */
#gallerynav li a {
    background: #86CAC8 url(/media/images/buttons/gallery-tab-clear.gif) no-repeat top left;
    padding: 9px 0 0 0;
    text-decoration: none;
    color: #fff;
    width: 134px;
    height: 43px;
    text-align: center;
    font-family: times, serif;
    margin: 0;
    display: block;
}

/* turn on highlighting of active one, and hover image too */
#Transformation1 ul#gallerynav li.transformation a,
#Transformation2 ul#gallerynav li.transformation a,
#Celebration ul#gallerynav li.celebration a,
#Leadership ul#gallerynav li.leadership a,
#Commissions ul#gallerynav li.wordwrap a,
#Voices_of_Women ul#gallerynav li.voices a,
ul#gallerynav a:hover {
    background: #fff url(../images/buttons/gallery-tab-clear.gif) no-repeat top left;
    color: #86CAC8;
}

ul#gallerynav.faded {
	background-color: #ffffff;
	/* the filter attribute is recognized in
	Internet Explorer and should be a percentage */
	filter: Alpha(opacity=50);
	/* the -moz-opacity attribute is recognized by 
	Gecko browsers and should be a decimal */
	-moz-opacity: .5;
	/* opacity is the proposed CSS3 method, supported
	in recent Gecko browsers */
	opacity: .5;
}

/* layout of the wall - the art grid */

ul#gallerywall {
    margin: 0 0 0 -20px;
    padding: 0;
    float: left;
    width: 720px;
    list-style: none;
}

ul#gallerywall li {
    float: left;
    width: 144px;
    text-align: center;
    margin: 17px 0 12px 0;
}

ul#gallerywall li.col2 {
    margin: 17px 75px 12px 75px;
}

ul#gallerywall li div.imgbox {
    height: 160px;
    width: 144px;
    display: block;
}

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

#maincontent p {
    padding: 5px 35px 0px 5px;
}

div.gallerybox {
    margin-left: 24px;
    width: 680px;
    text-align: center;
}

div.pagenumbers {
    text-align: right;
    margin: 22px 100px 0 0 ;
    padding-right: 0;
}

div.pagenumbers a,
div.pagenumbers u {
    padding: 0 0 0 5px;
}


/* =Artbox styling
-----------------------------------------------------------------------------*/

#viewlayer {
	position: absolute;
	top: 200px;
	left: 150px;
}

.wrap1, .wrap2, .wrap3 {
    display:inline-table;
    /* \*/display:block;/**/
  }
.wrap1 {
  float:left;
  background:url(../images/gallery_shadow.gif) right bottom no-repeat;
    margin-top: 15px;
  }
.wrap2 {
  background:url(../images/gallery_corner.gif) left bottom no-repeat;
  }
.wrap3 {
  padding:0 4px 4px 0;
  background:url(../images/gallery_corner.gif) right top no-repeat;
  }

.wrap3 img {
    display: block;
}

#gallerybox {
margin-left: 67px;
}

#artbox {
    text-align: center;
    width: 533px;
    margin: 0;
    border: 1px solid #999;
}

#artbox a {
    cursor: pointer;
}

#artbox div.arttop {
    background: #fff url(../images/shadetop500.gif) no-repeat;
    height: 15px;
    clear: both;
}

#artbox div.artbot {
    background: #fff url(../images/shadebot500.gif) no-repeat;
    height: 19px;
}

#artbox div.artbody {
    background: #fff url(../images/shadeside500.gif) repeat-y;
    margin: 0;
}

#artbox div.artbody img {
    padding-left: 20px;
    z-index: 1;
}

#artbox h2,
#artbox h3 {
    margin: 0 0 0 20px;
    text-align: left;
    font-weight: normal;
    font-size: 12px;
    font-family: Times, serif;
	z-index: 10;
}

#artbox h2 {
    margin-top: 0px;
    padding-bottom: 5px;
}

#artbox h3 {
}

#artbox a.topbutton {
    float: right;
    font-size: 11px;
    margin-right: 10px;
}

#artbox p {
    text-align: left;
    margin: 10px 30px 0 30px;
    padding: 0;
}


#orderbox {
    display: block;
}

#orderbox div.artversion {
    margin: 0 0 2px 10px;
    }

#orderbox .artsize,
#orderbox .wordwrapsize,
#orderbox .artdim,
#orderbox .artprice,
#orderbox .artbtn {
    width: 40px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    margin: 0 0 5px 0;
    float: left;
    height: 19px;
    padding: 0 0 0 8px;

}

#orderbox .artsize {
    padding: 0 8px 0 8px;
    width: 45px;
    margin-left: 130px;
}

#orderbox .wordwrapsize {
    padding: 0 8px 0 8px;
    width: 70px;
    margin-left: 102px;
}


#orderbox .artbtn {
    width: 90px;
    padding: 0 8px 0 8px;

}

#orderbox table {
    margin: 0 auto 10px auto;
    font-size: 11px;
}

#artbox div.imgnav {
    font-size: 11px;
    text-align: center;
    padding-bottom: 5px;
}

#artbox div.imgnav img {
    padding-bottom:1px;
}

#artbox a.prevbtn {
    background: url(../images/cyan-bullet-l.gif) no-repeat left 50%;
    padding-left: 10px;
}

#artbox a.nextbtn {
    background: url(../images/cyan-arrow-r.gif) no-repeat right 50%;
    padding-right: 10px;
}

#artbox a.inactive {
    color: #333;
}

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


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

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

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

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

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

div#subnav {
    width:500px;
}
