@charset "UTF-8";/*
Theme Name: Julie Ann Smith, Harpist
Theme URI: http://www.harpjas.com/
Description: The personal website of Harpist, Julie Ann Smith.
Version: 1.0
Author: 180byDesign
Author URI: http://www.180bydesign.com/
Tags: harpist, san diego, los angeles, symphony, weddings, music, events, hire

	Julie Ann Smith, Harpist v1
	http://www.harpjas.com/

	This site is protected by copyright laws. Do not copy or reproduce in whole or in part the contents, images, fonts, or any other materials
	contained herein without explicitly written consent by the owner.

*/

/* CSS RESET */
/* ---------------------------------------------------------------------------------------------------*/
* {margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, 
q:before, q:after{content:''; content:none}

:focus{outline:0}

ins{text-decoration:none}
del{text-decoration:line-through}

table{border-collapse:collapse; border-spacing:0}

/* GLOBAL DEFINITIONS */
/* ---------------------------------------------------------------------------------------------------*/
body {color: #000;background-color: #fff;font: 62.5% Georgia, Times, serif; overflow: hidden; margin: 0;}
a {color: #666;}
a:hover {color: #000;}
.hide {display: none !important;}
.clear {clear:both;}
h1 .cufon {position: relative; z-index: 5;}
.fade {height: 663px; position: absolute; bottom: 0;}

/* MAIN NAVIGATION */
/* ---------------------------------------------------------------------------------------------------*/
#dresscircle {max-width: 98em;min-width: 72em;width: auto; height: 5.6em;margin: 0 auto;border-bottom: 1px solid #dcdcdc;}
.logo {float:left; margin-top: 2em;}
.navigation {float: right; font-size:1.8em; height: 3.1em; position: relative;}
.navigation li {float: left; margin-left: 1.5em;}
.navigation li a {color: #999;text-decoration: none; height: 2em; display: block; padding-top: 1em;}
.navigation li.active a {border-bottom: solid 3px #000; color: #000;}
.navigation li a:hover {color:#000;}
.navigation .player {padding-top: 1.3em; position: relative;}
.navigation .player a {display: block; float: left; background: url(uploads/images/player.gif) no-repeat 0 0; padding: 0 4px 0 0;}
#player-prev {width: 6px; height: 9px; background-position: 0 0;}
#player-prev:hover {background-position: 0 -9px;}
#player-eq {width: 17px; height: 9px; background-position: -13px 0; }
#player-eq:hover {background-position: -13px -9px;}
#player-next {width: 6px; height: 9px; background-position: -37px 0; padding-right: 0;}
#player-next:hover {background-position: -37px -9px;}
.navigation .track {position: absolute; text-align: right; font: 12px Arial, sans-serif; color: #999; right: 0; padding-top: 4px; background: url(uploads/images/player.gif) no-repeat 100% -21px; bottom: -20px; display: none;}
.navigation .track span {display: block; background-color: #000; padding: .8em;}

/* CONTENT AREA */
/* ---------------------------------------------------------------------------------------------------*/
#arena {position: relative;padding: 1.6em 0; height: 70em; width: 100%;}
#snaps {width: 1280px;height: 700px;position: absolute;top: 1.6em; left: 50%; margin-left: -640px; z-index:1;}
.set1 #snaps {background: url(uploads/snaps/set1/1.jpg) no-repeat 0 50%;}
#snaps .fade {width: 100%;height: 100%; background-color: #fff; display: none;}
#snaps-nav {position:relative;z-index: 2; max-width: 1280px; width: 100%; height: 700px; margin: 0 auto;}
#snaps-nav .hoverstate-left {width:450px;height: 100%;position: absolute;top: 0;left:0;}
#snaps-nav .hoverstate-right {width:450px;height: 100%;position: absolute;top:0;right:0;}
#snaps-nav span.next, #snaps-nav span.prev {display: block;width: 15.1em;height: 100%;background: url(uploads/images/half.png) repeat 0 0;position: absolute;}
#snaps-nav span {text-indent: -1000em;width:100%;height:100%;display:block;}
#snaps-nav .next {right:0;}
#snaps-nav .next span {background: url(uploads/images/arrow-right.png) no-repeat 50% 50%;}
#snaps-nav .prev {left: 0;}
#snaps-nav .prev span {background: url(uploads/images/arrow-left.png) no-repeat 50% 50%;}
#stage {position: absolute; top: 1.6em; z-index: 3; width: 735px; height: 685px; left: 50%; margin-left: -489px;}
.home #stage {width: 490px; margin-left: -489px;}
#content {height: 663px; background-color: #fff; position: relative;}
.home #content {background-color: #000;}
#content .loading {background: url(uploads/images/loading.gif) no-repeat 50% 50%; height: 100%;}
#controls a {display: block; width: 32px; height: 22px; background: url(uploads/images/controls.png) no-repeat 0 0; float: left; margin-right: 1px;}
#controls a:hover {background-position: 0 -23px;}
#controls.closed #toggleStage {background-position: 0 -46px;}
#controls.closed #toggleStage:hover {background-position: 0 -69px;}
#controls #toggleInfo {background-position: -33px 0;}
#controls #toggleInfo:hover {background-position: -33px -23px;}
.bottomline {border-bottom: 1px solid #dcdcdc; width:98em; height:2px; position:absolute; top:715px; left:150px;}


/* SITE INFO */
/* ---------------------------------------------------------------------------------------------------*/
#info {width: 735px; height: 663px; background: url(uploads/images/shade-95.png) repeat 0 0; position: absolute; top: 0; left: 0; z-index: 50; font-size: 1.4em; line-height: 2em; overflow: hidden;}
#info .close {font-size: 1em; color: #999; text-decoration: none; background: url(uploads/images/close.png) no-repeat right center; padding-right: 18px; float: right; margin: 15px 15px 0 0;}
#info .close:hover {color: #fff;}
#info ul {float: left; width: 185px; margin-top: 4em; margin-right: 6em;}
#info ul li a {color: #999; padding: .3em 1em; text-decoration: none; border-bottom: 1px solid #222; display: block;}
#info ul li a.active, #info ul li a:hover {color: #fff;}
#info div {float: left; margin-top: 1em; color: #666; width: 432px;}
#info h2 {color: #fff; font-size: 1.4em;}
#info h3 {color: #fff; font-style: italic;}
#info p, #info div ul {margin-bottom: 2em; line-height: 1.4em;}
#info a:hover {color: #fff;}

/* PAGES */
/* ---------------------------------------------------------------------------------------------------*/
/* Home */
#hometop {text-align: center; padding-top: 5em;}
#homebottom {text-align: center; clear: both;}
#quotes {color: #fff; font: 30px Eaves, Arial, sans-serif; font-style: italic; padding: 1em 2em; height: 0; overflow: hidden; visibility: hidden; background-color: #000;}
#quotes #welcome {text-align: center;}
#quotes ul {padding: 1em 0 .5em;}
#quotes .source {font: .4em Georgia, serif; padding: 2em 0 0 15em; font-style: normal;}
#quotes .title {color: #666;}
#listen {padding: 2em;}
#listen a {display: block; margin: 0 auto; width: 156px; height: 52px; background: url(uploads/images/music-button.gif) no-repeat 0 0; text-indent: -1000em;}
#listen a:hover {background-position: 0 100%;}
#listen.active a {background-position: -156px 0;}
#listen.active a:hover {background-position: 100% 100%;}
.homeevents {color: #fff; position: absolute; bottom: 0; width: 412px; margin: 3.4em;}
.homeevents .title {color: #999; font: 1.8em Eaves, serif; padding-bottom: .5em; border-bottom: solid 1px #353535;}
.homeevents .event-prev, .homeevents .event-next {display: block; width: 7px; height: 11px; text-indent: -1000em; background: url(uploads/images/home-events.gif) no-repeat 0 0; float: left; margin-left: 1.5em; margin-top: .8em;}
.homeevents a.event-next {background-position: 100% 100%;}
.homeevents span.event-next {background-position: 100% 0;}
.homeevents a.event-prev {background-position: 0 100%;}
.homeevents span.event-prev {background-position: 0 0;}
.homeevents .eventnavigation {float: right;}
.homeevents .calendar-event {font-size: 1.4em; margin-top: .5em;}

/* Content */
#content .content-left {float: left; width: 185px; margin-right: 6em;}
#content .sidephoto {background: url(uploads/images/emblem.gif) no-repeat 50% 100%; padding-bottom: 24px; }
#content .sidephoto img {max-width: 185px;}
#content .sidetext {font-size: 1.2em; color: #666; font-style: italic; padding: 1em 0 1em 2em;}
#content .sidetext p {margin-bottom: 1em}
#content .content-right {float: left; width: 42.8em;}
#content h1.title {font: 5.6em Eaves, sans-serif; font-style: italic; padding: .8em 0;}
#content .text {color: #666; font-size: 1.4em; line-height: 1.8em;}

/* Submenus */
.sidemenu ul {border-top: solid 1px #dcdcdc;}
.sidemenu li {border-bottom: solid 1px #dcdcdc;}
.sidemenu a {color: #9F9F9F; text-decoration: none; padding: 1em; display: block; font-size: 1.4em; text-transform: capitalize;}
.sidemenu li.active a, .sidemenu a:hover {color: #000;}

/* Pagination */
#paginated ul {left: auto; float: none; background: url(uploads/images/boxes.gif) repeat-x 0 -63px;}
#paginated li {right: auto; padding: 0; background-color: transparent; border: 0;}
#paginated li a {background-color: transparent; border: 0;width: 32px; height: 32px; text-align: center; line-height: 32px;}
#paginated li.ui-state-default a {background: url(uploads/images/boxes.gif) no-repeat 0 0; color: #999;}
#paginated li.ui-state-active a {background: url(uploads/images/boxes.gif) no-repeat 0 -32px; color: #000;}
#paginated .ui-tabs-panel {height: 33em;}

/* Recordings */
.albuminfo {float: right; width: 16.5em;}
.albuminfo .art img {max-width: 158px; border: solid 1px #dcdcdc;}
.albuminfo .buynow {text-align: center;}
.albuminfo .buynow a {display: block; width: 156px; height: 52px; background: url(uploads/images/buynow.gif) no-repeat 0 0; margin: 5px auto 2px; text-indent: -10000em;}
.albuminfo .buynow a:hover {background-position: 0 100%;}
.albuminfo .buynow span {color: #999; font-size: 1.1em;}
.albuminfo .hr {border: none; display: block; width: 157px; height: 11px; background: url(uploads/images/or.gif) no-repeat center center; margin: 1em auto;}
.albuminfo .itunes a {display: block; width: 77px; height: 30px; background: url(uploads/images/secondary.gif) no-repeat 0 0; text-indent: -1000em; float: left; margin-right: 5px;}
.albuminfo .cdbaby a {display: block; width: 77px; height: 30px; background: url(uploads/images/secondary.gif) no-repeat -77px 0; text-indent: -1000em; float: left;}
.recordingcontent {width: 25em;}
.recordingcontent h3 {color: #000; font-style: italic; font-size: 1.1em; font-weight: lighter; padding-bottom: 1.2em;}
.recordingcontent ol {list-style-type: decimal; list-style-position: inside; font-size: .85em;}
.recordingcontent ol li {border-bottom: solid 1px #dcdcdc;}
.recordingcontent li.trackplay {background: url(uploads/images/trackplay.gif) no-repeat 100% 6px; padding-left: 11px; cursor: pointer;}
.recordingcontent li.trackplay.active {background-position: 100% -70px;}
.recordingcontent span{padding:0px 18px 0px 0px; position:relative;}

/* FORMS */
/* ---------------------------------------------------------------------------------------------------*/
#content #contact {margin-top: 2em; border-top: 1px solid #dcdcdc; padding-top: 2em;}
#content form label {display: block; color: #121212;}
#content form input {width: 14em; border: 1px solid #ccc; color: #666; font-size: 1em; padding: .2em;}
#content form input:focus, #content textarea:focus {border-color: #000;}
#content form div.input {border: solid 1px #ccc; padding: 2px; float: left;margin-bottom: .5em;}
#content form .name, #content form .email {float: left;}
#content form .name {margin-right: .3em;}
#content form .organization {clear: both;}
#content form .organization input {width: 29.2em;}
#content .contactform textarea {font: 1em Arial, sans-serif; color: #666; padding: 5px 0 5px 3px; width: 29.4em; border: solid 1px #ccc;}
#content form div.submit {clear: both;}
#content form div.submit input {width: 156px; height: 52px; text-indent: -1000em; text-align: left; background: url(uploads/images/send.gif) no-repeat 0 0; border: 0; padding: 0; cursor: pointer; display: block; color: #000;}
#content form div.submit input:hover {background-position: 0 100%;}
.sending {font-size: 2em; font-style: italic; text-align: center;}
#contact h2 {text-align: center; font-size: 1.6em;}
#contact .after {fonts-style: italic; padding: .5em 0; text-align: center;}

/* NEWS AND EVENTS */
/* ---------------------------------------------------------------------------------------------------*/
/* News */
.NewsSummaryPostdate {color: #9f9f9f; font-size: .9em; border-bottom: solid 1px #dcdcdc; padding-bottom: .5em;}
.NewsSummaryLink {font-size: 1.4em; color: #000; padding: .5em 0;}
.NewsSummaryField {float: right; padding: 1em 0;}
.NewsSummaryContent {width: 19em;}
.counter {padding-top: 1em;}
.counter a {font-size: 1.28em; color: #000; text-decoration: none; font-style: italic; margin-right: .5em;}
.counter a:hover {text-decoration: underline;}
.counter .next {background: url(uploads/images/pagination-next.gif) no-repeat 0 50%; padding-left: 10px;}
.counter .prev {background: url(uploads/images/pagination-prev.gif) no-repeat 100% 50%; padding-right: 10px;}

/* Events */
.cal-nextevent {margin-bottom: 4em;}
.cal-nextevent .shortdesc {font-size: 1.4em; font-style: italic; padding-bottom: .5em}
.cal-nextevent .dateouter {background-color: #000; float: left;}
.cal-nextevent .dateinner {margin: 4px; border: solid 1px #333; width: 7.2em; height: 70px; text-align: center;}
.dateinner .month {color: #fff; text-transform: uppercase; font-size: 12px; padding-top: 10px;}
.dateinner .day {color: #fff; font-size: 48px; margin-top: -10px;}
.eventinfoouter {float: left; width: 333px; height: 70px; border: solid 1px #dcdcdc; border-left: none; padding: 4px;}
.eventinfo {background: url(uploads/images/nextevent.gif) no-repeat 50% 50%; width: 100%; height: 100%}
.eventinfo .top {font-size: 2.2em; padding: .4em 0 0 .5em;}
.eventinfo .bottom {font-size: 1.4em; padding-left: 1em; color: #666;}
.eventscontainer {margin-top: 5em;}
.eventscontainer .description {padding-bottom: .5em; }
.events {font-size: 1.2em; color: #666; clear: both;}
.events table {width: 100%;}
.events table th {color: #000; padding: .6em; border-top: solid 1px #000; border-bottom: solid 1px #000; font-size: .84em;}
.events td {padding: .6em; border-bottom: solid 1px #dcdcdc;}
.events .private td {background-color: #f6f6f6; color: #999;}
.edate {width:40px; text-align:left;}
.ecity {width:100px; text-align:left;}
.evenue {width:200px; text-align:left;}
.etime {width:52px; text-align:left; text-transform:lowercase;}

#info-3 ul li {font-weight:bold; font-size:17px; margin: 15px 0px;}
#info-3 ul li a {border:none; color:#999999; display:block; text-decoration:none;padding:0px;}
#info-3 ul li ul {line-height:1.4em; margin:0px;}
#info-3 ul li ul li {font-size:15px; margin-left:10px;}