/************** Page Body ID  **************/
#homepage {}

#content {}

#gallery {}

/************** Key & Homepage Layout Containers **************/
#header {
background:url(../images/bg_header.gif) no-repeat 20px 0;
height:106px;
}

#intro_index {
clear:both;
height:165px;
}

#stage_index {
background:url(../images/bg_stage.gif) repeat-y 0 0;
}

	#stage_top {background:url(../images/bg_stagetop.gif) no-repeat 0 0; height:280px; padding:0 20px; clear:both;}
		#feature_left {width:606px; padding: 0 22px 0 0; float:left;}
		#feature_right {width:292px; float:left;}
		
	#stage_btm {background:url(../images/bg_stagebtm.gif) no-repeat bottom center; clear:both;}
		#stage_left {width:292px; padding-left:20px; float:left;}
		#stage_mid { width:292px; padding:0 22px; float:left;}
		#stage_right {width:292px; padding-right:20px; float:left;}
	
#content_btm {padding-top:10px; clear:both; background:#FFFFFF;}	
	#content_left {width:292px; padding-left:20px; float:left;}
	#content_mid {width:292px; padding:0 22px; float:left;}
	#content_right {width:292px; padding-right:20px; float:left;}

#footerwrap {background:#000000 url(../images/bg_footertop.gif) repeat-x; width:100%; clear:both; padding:25px 0 0 0; margin-top:10px;}

	#footer {width:920px; margin: 0 auto; padding:0 20px;}
		#footer_left {width:292px; float:left;}
		#footer_mid {width:292px; padding:0 22px; float:left;}
		#footer_right {width:292px; float:left;}
		

/************** Subpage Layout Containers **************/

#breadcrumbs {padding:0 20px; height:37px; clear:both;}

#contentwrap {clear:both;}	
	#sortby {height:39px; text-align:right; padding-top:0px;}	
	#content_area {width:960px;}	
	#content_fullcol {width:920px; padding:0 20px 0 20px;}
	#content_fullcol2 {width:920px; padding:0 20px 0 20px;}	
	#content_leftcol {width:237px; padding-right:22px; padding-left:20px; float:left;}
	#content_rightcol {width:638px; padding-right:20px; padding-left:22px; float:left;}

#contentwrap_sub_btm {clear:both;}
	#content_area_btm {width:960px;}
	#content_leftcol_sub {width:237px; padding-right:22px; padding-left:20px; float:left;}
	#content_rightcol_sub {width:638px; padding-right:20px; padding-left:22px; float:left;}	
		
/************************
|	 Header Elements    |
************************/

#header h1 {background:url(../images/logo_phokki.gif) no-repeat 0 10px; text-indent:-9999px; padding:10px 0 0 0; margin:0 0 0 48px;}
#header h1 a {display:block; width:205px; height:61px;}
#header h1 a:hover {display:block; width:205px; height:61px; background: url(../images/icons_home.gif) bottom right no-repeat;}

ul#nav_main {padding:0; margin:0; position:absolute; top:23px; margin:0 0 0 295px;}
#nav_main li {height:39px; float:left;}
#nav_main li a {display:block;}

#nav_main .nav_browse a {background:url(../images/nav_main.gif) no-repeat 0 0; width:89px; height:39px; text-indent:-9999px;}
#nav_main .nav_how a {background:url(../images/nav_main.gif) no-repeat -89px 0; width:135px; height:39px; text-indent:-9999px;}
#nav_main .nav_about a {background:url(../images/nav_main.gif) no-repeat -224px 0; width:80px; height:39px; text-indent:-9999px;}

#nav_main .nav_browse a:hover, #nav_main .nav_browse a.active {background:url(../images/nav_main.gif) no-repeat 0 -39px; width:89px; height:39px; text-indent:-9999px;}
#nav_main .nav_how a:hover, #nav_main .nav_how a.active {background:url(../images/nav_main.gif) no-repeat -89px -39px; width:135px; height:39px; text-indent:-9999px;}
#nav_main .nav_about a:hover, #nav_main .nav_about a.active {background:url(../images/nav_main.gif) no-repeat -224px -39px; width:80px; height:39px; text-indent:-9999px;}

ul#nav_memberspanel {padding:0; margin:0; position:absolute; top:6px; margin:0 0 0 680px;}
#nav_memberspanel li {float:left;}
#nav_memberspanel li a {display:block;}

#nav_memberspanel .nav_login a {background:url(../images/nav_login.gif) no-repeat 0 0; width:54px; height:26px; text-indent:-9999px; margin-top:26px;}
#nav_memberspanel .nav_joinnow a {background:url(../images/nav_joinnow.gif) no-repeat 0 0; width:228px; height:53px; text-indent:-9999px;}

ul#member_welcome {padding:15px 0 0 0; margin:0; position:absolute; top:6px; margin:0 0 0 670px; color:#FFFFFF; font-size:0.9em;}
#member_welcome li {}
#member_welcome li a { font-size:0.8em; color:#FFCC00;}


#loginpanel {
	background: url(../images/login_bg.gif) no-repeat 0 0;
	position: absolute;
	padding: 30px 15px 0 18px;
	width:215px;
	height:81px;
	top:57px;
	float:right;
	margin-left:677px;
}

#loginpanel label {width:70px; float:left; padding-top:2px; color:#FFFFFF;}
#loginpanel input {width: 140px; padding:2px; font-size:12px; float:left; margin-bottom:5px;}
#loginpanel p {clear:both;}
#loginpanel span {float:left; font-size:11px; font-weight:bold; padding-top:5px;}
#loginpanel span a {color: #FFFFFF;}

/* Sub Navig for sub pages, please check | Content Area Elements |*/

/*****************************
|	 Intro Index Elements    |
*****************************/

#searchpanel {
	background: url(../images/bg_search.gif) no-repeat 5px 0;
	width:282px;
	height:70px;
	position:absolute;
	top:53px;
	padding:20px 0 0 20px;
	margin: 0 0 0 650px;
}
#searchpanel #searchfield { background: #EBEBEB; width:170px; padding:5px; float:left; margin-right:5px;}
#searchpanel p {margin:0; padding:0 0 5px 0;}
#searchpanel span {font-size:11px; clear:both; margin-left:-4px; height:18px; display:block;}

#intro_index h2 {background:url(../images/h_welcome.gif) no-repeat 0 0; width:455px; height:87px; margin:0 0 0 110px; padding:0; text-indent:-9999px;}

ul#instructions {margin:0; padding:0;}
#instructions li {width:210px; padding:0 14px; float:left;}

#instructions li h3 {margin:0; padding:0 0 12px 0;}
#instructions li p { padding:0; margin:0;}

#instructions .h_browse {background:url(../images/h_steps.gif) no-repeat -5px 0; text-indent:-9999px;}
#instructions .h_choose {background:url(../images/h_steps.gif) no-repeat -241px 0; text-indent:-9999px;}
#instructions .h_confirm {background:url(../images/h_steps.gif) no-repeat -475px 0; text-indent:-9999px;}
#instructions .h_track {background:url(../images/h_steps.gif) no-repeat -710px 0; text-indent:-9999px;}

/*****************************
|	 Stage Index Elements    |
*****************************/

/*** Stage Top ***/
#feature_left {}
/*#img_original {background:url(../images/img_id01_original.jpg) no-repeat center center;}
#img_styled {background:url(../images/img_id01_styled.jpg) no-repeat -50px -25px;}*/


#feature_right {margin-top:50px;}
#feature_right h2.h_aboutstyle {background:url(../images/h_aboutstyle.gif) no-repeat 0 0; width:218px; height:39px; text-indent:-9999px; margin:0; padding:0;}

#feature_right h3.h_pricetitle {background:url(../images/h_price.gif) no-repeat; text-indent:-9999px; margin:0; padding:0; width:53px; height:20px;}
#feature_right .price {font-size:1.5em; font-weight:bold; color:#fd0225; padding:0;}

#feature_right p.wantthis {background:url(../images/btn_iwantthis.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0 0 5px 0;}
#feature_right p.showmore {background:url(../images/btn_showmemore.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0;}
#feature_right p.wantthis:hover {background:url(../images/btn_iwantthis_over.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0 0 5px 0;}
#feature_right p.showmore:hover {background:url(../images/btn_showmemore_over.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0;}

#feature_right .wantthis a, #feature_right .showmore a {display:block; width:166px; height:26px;}

/*** Stage Btm ***/

#stage_left h2.h_popular {background:url(../images/h_popular.gif) no-repeat 0 0; width:140px; height:39px; text-indent:-9999px; padding:0 0 8px 0; margin:0;}
#stage_left img {margin:0 11px 11px 0; border: #666666 solid 1px;}
#stage_left img:hover {border: #222222 solid 1px;}

#stage_mid h2.h_gifts {background:url(../images/h_gifts.gif) no-repeat 0 0; width:229px; height:39px; text-indent:-9999px; padding:0 0 8px 0; margin:0;}

#stage_right h2.h_artist {background:url(../images/h_artist.gif) no-repeat 0 0; width:173px; height:39px; text-indent:-9999px; padding:0 0 8px 0; margin:0;}

#stage_right p.offermystyle {background:url(../images/btn_offermystyle.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0; clear:both;}
#stage_right p.offermystyle:hover {background:url(../images/btn_offermystyle_over.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0; clear:both;}
#stage_right p.offermystyle a {display:block; width:267px; height:26px;}


/*****************************
|	 Content Btm Elements    |
*****************************/
#content_btm h3 {}
#content_btm p {margin:0; padding:0 0 8px 0;}

#content_left h3 {margin:0; padding: 16px 0 8px 0;}
#content_mid h3 {margin:0; padding: 16px 0 8px 0;}
#content_right h3.h_getupdates {background:url(../images/h_getupdates.gif) no-repeat 0 0; width:120px; height:39px; text-indent:-9999px; margin:0; padding:0;}
#content_right label {display:none;}
#content_right input {background:#999999;}
#content_right #getupdates {background:url(../images/input_getupdates.gif) no-repeat; padding:10px 20px; width:225px;}


/*****************************
|	   Footer Elements       |
*****************************/

#footer {color:#FFFFFF;}
#footer h3 {margin:0; padding:0 0 16px 0;}

#footer ul {list-style: disc; list-style-position:outside; padding:0 0 0 25px;}
#footer li {font-size:0.7em; padding-bottom:6px;}

p.copyright {font-size:0.7em; text-align:center; clear:both; padding-top:30px;}


/************************
| Breadcrumbs Elements  |
************************/

#breadcrumbs p {font-size:1.5em; color:#333333; font-weight: bold; margin:0; padding:0;}


/******************************
| Content Bg classes |
******************************/

/*Template with side column - Full width grey frame*/
.bg_contenttop {background:url(../images/bg_contenttop.gif) no-repeat 0 0;}
.bg_contentrow {background:url(../images/bg_stage.gif) repeat-y 0 0;}
.bg_contenttop #content_leftcol {margin-top:60px; border-right: 1px #666666 dotted;}
.bg_contenttop #content_rightcol {margin-top:0;}

/*Template with no side column - Full width grey frame eg Summary Style, artwork details*/ 
.bg_contenttop_b {background:url(../images/bg_contenttop.gif) no-repeat 0 0;}
.bg_contenttop_b #content_fullcol {}
.bg_contenttop_b #content_leftcol {border-right: 1px #FFFFFF dotted;}
.bg_contenttop_b #content_rightcol {margin-top:0;}

/*Template with left column grey frame*/
.bg_contentlefttop {background:url(/images/bg_contentlefttop.gif) no-repeat 0 0;}
.bg_contentleftrow {background:url(/images/bg_leftcol.gif) repeat-y 0 0;}
.bg_contentlefttop #content_leftcol {margin-top:45px;}
.bg_contentlefttop #content_rightcol {margin-top:25px;}

/*Template with Papertop eg. artwork details*/
.bg_contenttop_work {background:url(../images/bg_contenttop_work.gif) no-repeat 0 0;}

/*Template with side column - Full width paper frame eg.dashboard*/
.bg_contentpaper {background:url(../images/bg_contentpaper.gif) no-repeat 0 0;}
.bg_contentpaper #content_leftcol {margin-top:82px; width:280px; padding:0;}
.bg_contentpaper #content_rightcol {margin-top:36px;}

.bg_contentpaper_user {background:url(../images/bg_usercontentpaper.gif) no-repeat 0 0;}
.bg_contentpaper_user #content_leftcol {margin-top:82px; width:280px; padding:0;}
.bg_contentpaper_user #content_rightcol {margin-top:36px;}

/*********************************
| Content Area Elements - Bottom |
*********************************/
/*To be used if graphics background needed*/

/* Browse Page Sub nav - Browse */
#browse_sub {position:absolute;top:52px;padding:10px 10px 10px 300px;}

#browse_sub ul {margin:0; padding:0;}
#browse_sub li {float:left; margin:0; font-size:14px;}

#browse_sub li a {background:url(../images/nav_subbg.gif) no-repeat 0 -43px; text-decoration:none; color:#FFFFFF; display:block; padding:6px 0; width:82px; text-align:center;}
#browse_sub li a:hover {background:url(../images/nav_subbg.gif) no-repeat 0 -95px; text-decoration:none;}
#browse_sub li a.active {background:url(../images/nav_subbg.gif) no-repeat 0 0; font-weight:bold; text-decoration:none; padding:10px 0;}

/* Browse Page Elements */

#sortby ul {margin:0; padding:0;}
#sortby li { float:right; font-size:12px; padding-right:8px;}
#sortby li a {color:#000000; display:block; padding:2px 10px 7px 10px;}
#sortby li a.active { background:#000000;color: #FFFFFF; text-decoration:none; font-weight:bold;}

.pagination {text-align:right; clear:both; padding:0 20px 0 0; font-size:0.8em;}

#leftnav_gallery {}
#leftnav_gallery ul {margin:0; padding:0;}
#leftnav_gallery li {text-align:right; font-size:0.75em; margin-bottom:4px;}

ul.gallery_listing {margin:0; padding:25px 0 0 0; width:100%;}
.gallery_listing li {float:left; margin-bottom:25px; width:139px; margin-right:16px;}
.gallery_listing li p { margin:0; padding: 0 0 5px 0; font-size:0.70em;}

.gallery_listing img {border:#666666 0px solid;}

.gallery_listing .seperator { width:90%; padding:0; margin:0;}


/* Summary (Style) Page Elements */

#summary_stage {clear:both; width:920px;}

.style#summary_stage {padding-bottom:15px; margin-bottom:15px; border-bottom: 1px #666666 dotted;}
.style#summary_stage .infoleft {width:290px; float:left; padding-top:60px;}
.style#summary_stage .inforight {width:606px; padding-left:24px; float:left; padding-top:60px; clear:right;}

.style#summary_stage h2 {background:url(../images/h_aboutstyle_style.gif) no-repeat; width:248px; height: 35px; text-indent:-9999px; padding:0 0 10px 0;}

.style h3 {}
.style p.description {font-size:0.75em; padding-bottom:15px; padding-top:15px;}
.style .sharethis {font-size:0.7em; padding:0;}

span.style_cta {clear:both; width:485px; display:block; padding-left:121px;}
.style_cta p {float:left;}
.style p.wantthis {background:url(../images/btn_iwantthis.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0 10px 0 0;}
.style p.showmore {background:url(../images/btn_showmemore.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0 auto;}

.style .wantthis a, .style .showmore a {display:block; width:166px; height:26px;}

#artistinfo {}
#artistinfo h2 {background:url(../images/h_artist.gif) no-repeat 0 0; width:173px; height:39px; text-indent:-9999px; padding:0 0 8px 0; margin:0;}
#artistinfo img {clear:both; margin-bottom:10px;}

#inthisstyle { width:638px; }
#inthisstyle h2 {background:url(../images/h_inthisstyle.gif) no-repeat 0 0; width:167px; height:30px; text-indent:-9999px; padding:0 0 8px 0; margin:0;}

#inthisstyle .gallerylistleft {width:304px; padding-right:14px; float:left; border-right: 1px #666666 dotted;}
#inthisstyle .gallerylistright {width:304px; padding-left:15px; float:right;}

#inthisstyle .gallerylistleft p, #inthisstyle .gallerylistright p {padding-bottom:0;}

#inthisstyle .gallerylistleft p.browseall {padding-bottom:0; padding-right:15px; text-align:right;}
#inthisstyle .gallerylistleft h3 {padding-bottom:15px;}
.gallerylistleft img {margin:0 14px 14px 0; border: #666666 solid 1px;}

#inthisstyle .gallerylistright p.browseall {padding-bottom:0; text-align:right;}
#inthisstyle .gallerylistright h3 {padding-bottom:15px; padding-left:15px;}
.gallerylistright img {margin:0 0 14px 14px; border: #666666 solid 1px;}

.style_btm { padding:20px 0;}

#alsooffering {}
#alsooffering h2 {background:url(../images/h_alsooffering.gif) no-repeat 0 0; width:192px; height:44px; text-indent:-9999px; padding:0 0 8px 0;}
#alsooffering p {background: #E9E9E9; padding:8px; margin-bottom:5px; font-size:0.70em; clear:both; display:block; float:left; width:221px;}
#alsooffering img {margin-right:15px; float:left;}

/* Artwork (Details) Page Elements */
#artwork_stage {clear:both;}
.artwork#artwork_stage {}
.artwork#artwork_stage .infoleft {width:270px; float:left; padding-left:20px; padding-top:60px;}
.artwork#artwork_stage .inforight {width:576px; padding-left:24px; padding-right:30px; float:left; padding-top:60px; clear:right;}
.inforight img.work_styled  { background:url(../images/frame_styled_text.gif) no-repeat bottom center; margin-right:21px; padding-bottom:39px;} /*maximum width is 420px, height unlimited*/
.inforight img.work_unstyled  {width:135px; height:213px;}

.artwork#artwork_stage h2 {background:url(../images/h_artworkdetails.gif) no-repeat; width:254px; height: 35px; text-indent:-9999px; padding:0 0 10px 0;}

.artwork h3 {}
.artwork h4 {padding-top:5px;}
.artwork p.description {font-size:0.75em; padding-bottom:15px; padding-top:15px;}
.artwork .sharethis {font-size:0.7em; padding:0;}

span.artwork_cta {clear:both; width:485px; display:block; padding-left:121px;}
.artwork_cta p {float:left;}
.artwork p.wantthis {background:url(../images/btn_iwantthis.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0 10px 0 0;}
.artwork p.showmore {background:url(../images/btn_showmemore.gif) no-repeat 0 0; text-indent:-9999px; padding:0; margin:0 auto;}

.artwork .wantthis a, .artwork .showmore a {display:block; width:166px; height:26px;}

.gallerylistside { padding-bottom:20px;}
.gallerylistside p {padding-bottom:0;}
.gallerylistside h2 {background:url(../images/h_interested.gif) no-repeat; width:213px; height:25px; text-indent:-9999px; padding:0 0 10px 0;}
.gallerylistside p.browseall {padding-bottom:0; padding-right:15px; text-align:right;}
.gallerylistside h3 {padding-bottom:15px;}
.gallerylistside img {margin:0 7px 14px 7px; border: #666666 solid 1px;}

/* Dashboard Elements */
#dashboard_profile { margin-left:20px; margin-bottom:25px;}
#dashboard_profile h2 {background:url(../images/frame_artist_dbtop.gif) no-repeat 0 0; width:237px; height:87px; text-indent:-9999px; padding:0;}
#dashboard_profile dl {background:url(../images/frame_artist_dbbtm.gif) no-repeat 0 0; margin:0; padding:10px 22px 28px 20px; font-size:0.75em; }
#dashboard_profile dt {font-weight:bold; float:left; padding-right:6px;}
#dashboard_profile dd {padding-bottom:5px;}

#dashboard_profile_user { margin-left:20px; margin-bottom:25px;}
#dashboard_profile_user h2 {background:url(../images/frame_user_dbtop.gif) no-repeat 0 0; width:237px; height:87px; text-indent:-9999px; padding:0;}
#dashboard_profile_user dl {background:url(../images/frame_user_dbbtm.gif) no-repeat 0 0; margin:0; padding:10px 22px 28px 20px; font-size:0.75em; }
#dashboard_profile_user dt {font-weight:bold; float:left; padding-right:6px;}
#dashboard_profile_user dd {padding-bottom:5px;}

#dashboard_area {}

#dashboard_area h3 {background: #DADADA; padding:8px; margin-bottom:4px;}

#dashboard_area table {border-collapse:collapse; font-size:0.75em;}
#dashboard_area table th { padding:4px;background: #F3F3F3;}
#dashboard_area table tr {padding:4px;}
#dashboard_area table td {padding:4px; border-bottom: #DADADA solid 1px;}

#dashboard_area ol, #dashboard_area ul {font-size:0.75em;}
#dashboard_area ol li, #dashboard_area ul li { padding-bottom:5px;}

#dashboard_area label {font-weight:bold;}
#dashboard_area input.field {border: #666 solid 1px; padding:3px;}

#dashboard_area .olform { padding:0; margin:0;}
#dashboard_area .olform li {float:left;}

#dashboard_area .olform .label {width:200px; text-align:right; padding-right:10px;}
#dashboard_area .olform .fieldtext {width:350px;}
#dashboard_area .olform .button {clear:both; width:340px; padding-left:210px;}

#dashboard_area .withbullet {list-style:outside disc;}

/* Form Area Elements */
#ajaxformarea {float:left; width:640px;padding-left:280px; clear:both;}
#ajaxformarea2 {float:left; width:570px;padding-left:20px; } /* added by Sean */

#form_uploadpic { background:#fa0095; padding:10px; color:#fff;}
#ajaxformarea #form_uploadpic h2 {background:url(../images/h_stylemyphoto.gif) no-repeat 0 0; width:384px; height:37px; text-indent:-9999px; padding:0 0 8px 0;}

#form_uploadpic label {font-size:14px; font-weight:bold;}
#form_uploadpic .uploadfield {width:340px; padding:4px; font-size:14px;}
#form_uploadpic .nextstep {padding:4px; font-size:14px; margin-left:140px; width:180px; margin-top:5px;}
#form_uploadpic p {padding-bottom:8px;}

/* Comments Elements */

.bg_commentsarea { background-color: #fff6dd;}
#commentsarea { padding-top:16px; padding-bottom:20px;}
#commentsarea h2 {background:url(../images/h_commentsstyle.gif) no-repeat 0 0; width:325px; height:30px; text-indent:-9999px; padding:0 0 8px 0;}
#commentsarea p {padding:8px 8px 14px 8px; margin-bottom:10px; font-size:0.75em; clear:both; display:block; float:left; width:622px; border-bottom: 1px #666666 dotted;}
#commentsarea img {margin-right:15px; float:left;}

#commentsform {margin-top:20px;}

#commentsform .opencomments {background:url(../images/bg_comments_left.gif) no-repeat;}
.closecomments#commentsform  {background: url(../images/bg_comments_right.gif) no-repeat bottom right; padding-bottom:20px;}

#commentsform h3 {background:url(../images/h_sharecomments.gif) no-repeat 0 0; width:210px; height:39px; text-indent:-9999px;}

#commentsform p {clear:both; float:none; padding:0; border:none;}
#commentsform p label {font-size:12px; cursor: auto; font-weight:bold; width:140px; padding: 5px 10px 0 40px; display:block; text-align:right; float:left;}
#commentsform p input {padding:4px; font-size:12px; width:360px;}
#commentsform .field_commentsbox {width:360px; height:80px; padding:4px;}
#commentsform .btn_submit { margin-left:350px; font-weight:bold; padding:4px; display:block;}