/*
 *  Copyright ©2009 TwinAct LLC (info@twinact.com). All Rights Reserved.
 *  Filename: headzzup.css
 *  Description: Style Sheet for Head Puppets eCard Editor
 */

body { margin: 0px; text-align: center; background-color: #474c60; }
a { color: #3b5998; text-decoration: none; }
a:hover { text-decoration: underline; }

input.text { width: 200px; font-size: 8pt; }

/* Site architecture */
#sitebg { margin: 0px auto; width: 980px; font-family: Verdana, Geneva, Arial, Helvetica; font-size: 9pt; } /* height: 100%; min-height: 100%; */
/* #sitebg td { font-family: Verdana, Geneva, Arial, Helvetica; font-size: 9pt; } */

#banner { width: 980px; height: 80px; text-align: left; background-image: url(../images/headpuppetsbanner1.jpg);}
#banner a { font-size: 8pt; color: #3b5998; }
#banner a:hover { text-decoration: underline; }  

#frame { overflow: auto; background-color: #d1dae3; width: 950px; padding: 10px 15px; } /* height: 100%; min-height: 100%; */
#main { clear: left;  float: left; width: 620px; text-align: left; margin-right: 15px; }
#inset { float: left; width: 315px; text-align: left;  } 
/* #inset { clear: right;  float: right; width: 300px; text-align: left;  } */
div.insetbox { padding: 10px; background-color: #fcfcfc; }
div.profilebox { padding: 10px; margin-bottom: 10px; background-color: #e3effd; }
div#related { margin-top: 10px; padding: 0px 0px 5px 0px; background-color: #fcfcfc; }
div.insetswf { margin-bottom: 10px; margin-left: 8px; }

div#homegallery { height: 230px; padding: 10px 0px 10px 30px; overflow: hidden; }
div#related div#gallery { height: 340px; padding: 10px 0px 10px 25px; overflow: auto; }
div#xgallery { border: 1px solid #cccccc; padding: 10px; height: 300px; overflow: auto; }
div#actorgallery { padding: 0px 30px; }
div#cgallery { padding: 0px 10px; }

#navpanel { background-color: #f7bd4d; height: 32px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; padding: 0px 15px; }
a.tab { color: #333333; font-weight: bold; display: block; height: 32px; line-height: 32px; float: left; padding: 0px 12px; text-align: center; text-decoration: none; border-right: 1px solid #dddddd; }
a.tabon { color: #333333; font-weight: bold; display: block; height: 32px; line-height: 32px; float: left; padding: 0px 12px; text-align: center; text-decoration: none; border-right: 1px solid #dddddd; background-color: #f9ce7a; }
a.tab:hover {  color: #333333; text-decoration: none; background-color: #f9ce7a; }
a#create { color: #cc0000; /* margin-left: 180px; border-left: 1px solid #dddddd; */}

form#searchform { display: block; float: right; margin-top: 4px; }
input#keywords { float: left; width: 140px; border: 1px solid #bbb; margin-right: 4px; padding-left: 18px;  color: #333; background: #ffffff url(../images/master-v3.gif) no-repeat 0px 0px; }
input#keywords:focus { border-color:#666666;  } /* background-position: 0px -16px; */

#swfpanel{ width: 620px; padding: 10px 0px; text-align: left; background-color: #59718d; }
#swf { width: 400px; margin: 0px auto; height: 250px; border: 2px solid #666666; }

div#grouppanel { width: 620px; background-color: #ffffff; } /* IE likes width */
div#commentpanel { margin-top: 10px; background-color: #ffffff; }
div#content { text-align: left; padding: 10px; background-color: #ffffff; }
div#box { width: 518px; text-align: left; border: 1px solid #9397a2; background-color: #ffffff; /*#f4f5f7; */ }
div#subnav { line-height: 20px; padding: 10px 20px 10px 20px; }
div#subnav a:hover { text-decoration: underline; }

div.data { display: none; }
#footer { clear: left; background-color: #e5ecf4; font-size: 8pt; }
#ads { height: 20px; padding: 10px 10px; } /* height: 60px */
#ads div.box { display:inline; float: left; height: 60px; width: 234px; margin-left: 5px; }
#copy { padding-bottom: 10px; }

div.separator { clear: both; border-bottom: 1px dashed #999999; }

/* see also class overview */
h1 { color: #444444; font-size: 16pt; margin-top: 0px; font-family: "Trebuchet MS"}
h3 { color: #444444; font-size: 11pt; margin-top: 15px; margin-bottom: 10px; font-family: "Trebuchet MS" }
h5 { color: #444444; font-size: 9pt; margin-top: 10px; margin-bottom: 0px; }
h5.top { margin-top: 0px; }
#inset h3 { margin-top: 0px; }
#inset h5 { margin-top: 0px; }
div.subheader { color: #444444; font-size: 9pt; margin-top: 10px; margin-bottom: 0px; }
div.center { text-align: center; }
div.clear { clear: both; }

div.faq { color: #444444; font-size: 9pt; font-weight: bold; margin-top: 10px; margin-bottom: 0px; }
div.answer { margin: 10px 15px 0px 15px; } /* faqs */

/* Forms */
#share label { display: block; float: left; text-align: right; padding: 3px 5px 0px 0px;  width: 60px; }
#signinform label { display: block; float: left; text-align: right; padding: 3px 5px 0px 0px;  width: 100px; }
#signupform label { display: block; float: left; text-align: right; padding: 3px 5px 0px 0px;  width: 120px; }
#usernamefeedback { color: #cc0000; font-size: 8pt; }

div.hover { background-color: #eeeeee; }
div.unhover { background-color: #ffffff; }

img.starport { background-image: url(../images/star.gif);  height: 10px; overflow: hidden; }

img.close{ float: right; margin-top: 5px; }
#extrapanel { display: none; position: relative; margin-top: 1px; padding: 5px 10px; width: 598px; border: 1px solid #b7c3cf; background-color: #e5ecf4; }
#extramsg { padding: 5px 0px; }
div#shares { padding: 5px 0px; font-size: 8pt; }
a.share { margin-left: 16px; padding-left: 18px; background: transparent url(../images/master-v3.gif) no-repeat 0px -396px; }
a#myspace { background-position: 0px -396px; }
a#facebook { background-position: 0px -409px; }
a#twitter { background-position: 0px -422px; }
a#digg { background-position: 0px -435px; }
a#delicious { background-position: 0px -448px; }
a#stumbleupon { background-position: 0px -461px; }

div#ratingstars { padding: 5px 0px; height: 20px; }

#alertpanel { position: relative; margin-bottom: 10px; padding: 5px 10px; border: 1px solid #cc6666; background-color: #ffffdd; }
#alertmsg {  padding: 5px 0px;  color: #cc0000; }
#ratingpanel { margin-top: 5px; padding: 0px 10px; width: 598px; border: 1px solid #b7c3cf; background-color: #e5ecf4; }
#views { display: block; float: right; }
#ratinglabel { display: block; float: left; padding-top: 4px; }
#ratingstars a.star { display: block; float: left; width: 20px; height:20px; background: url(../images/star_rating.gif) no-repeat; text-decoration:none; }
#ratingpanel a:active, #ratingpanel a:focus { border: 0px; }
#ratingcount { display: block; float: left; padding-top: 4px; color: #bbbbbb; }
#viewcount { display: block; float: right; padding-top: 4px; }
#newspanel { margin: 5px 0px; padding: 0px 10px; width: 598px; border: 1px solid #b7c3cf; background-color: #e5ecf4; }

div.overview { color: #444444; font-size: 13pt; font-weight: bold; text-align: left; padding: 5px 10px; background: url('../images/greydot.gif') left bottom repeat-x; }
#inset div.overview { color: #444444; font-size: 9pt;  font-weight: bold; text-align: left; }
.comment { position: relative; margin-bottom: 10px; border: 1px solid #cccccc;}
.commenttail { position: absolute; top: 5px; left: -20px; }
.commentheader { padding: 5px 10px 0px 10px; font-size: 10pt; color: #0066cc; text-align: left;  }
.commentbody { padding: 5px 15px; font-size: 8pt; color: #333333; text-align: left;  }
.commentdate { color: #999999; font-size: 8pt; }
.commentflag { float: right; color: #999999; font-size: 8pt; }
#commentform { padding: 0px 15px 10px 15px; }
#commentform textarea { height: 40px; width: 490px; font-size: 8pt; font-family: Verdana, Geneva, Arial, Helvetica; }

div.galleryclip { width: 120px; height: 120px;  overflow: hidden; float: left; margin-right: 4px;}
div.gallerytext { padding: 0px 5px; font-size: 8pt; text-align: left; }
a.gallerytitle {  }
a.galleryswf { display: block; width: 110px; height: 69px; padding: 5px; float: left; background-color: transparent; }
a.galleryswf:hover { background-color: #9dc6f5; }
/* div.galleryswfhover { width: 110px; height: 69px; padding: 5px; float: left; background-color: #eeeeee; cursor: hand; cursor: pointer; } */

div.historyclip { clear: left; height: 84px; border-bottom: 1px solid #cccccc; margin-top: 4px; }
a.historyswf { display: block; float: left; width: 110px; height: 69px; padding: 5px; margin-right: 10px; background-color: transparent; cursor: hand; cursor: pointer; }
a.historyswf:hover { background-color: #9dc6f5; }
/* div.historyswfhover {  float: left; width: 110px; height: 69px; padding: 5px; margin-right: 10px; background-color: #9dc6f5; cursor: hand; cursor: pointer; } */
.historydata { margin-top: 5px; font-size: 10pt; text-align: left; }
.historytitle { color: #0066cc; font-weight: bold; }
.historyauthor { color: #666666; margin-top: 2px; }
.historydate { margin: 0px 10px; color: #666666; font-size: 8pt; }

div.subscribed { margin: 10px 20px; }

div.link { display: inline; cursor: hand; cursor: pointer; }

div.pagenav { clear: both; height: 20px; padding: 10px 10px 2px 0px; font-size: 6pt; font-weight:bold; border-top: 0px dashed #999999; text-align: right; }
table#pagenav { float: right; font-size: 6pt; border-collapse: separate; }
td.navlabel { color: #666666; background-color: #f2f2f2; }
td.pagenav {  border: 1px solid transparent; }
td#currentpage { color: #666666; border: 1px solid #3b5998; }

div.more { float: right; padding-top: 6px; font-size: 8pt; font-weight:bold; text-align: right; }
#inset div.more { float: right; padding-top: 0px; font-size: 8pt; font-weight:bold; text-align: right; }
#inset div.extra { display: none; }
div#related a.smbutton { display: none; }
div#related a.actionlink { display: none; }
a.actionlink { float: right; margin-top: 10px; }

/* creator */
#popgrid { position: absolute; display: none; top: 496px; width: 600px; height: 380px; background-color: #f8f8f8; border: 1px solid #666666; }
div#creategroupxxx { width: 460px; height: 62px; margin: 5px; border: 0px solid #9397a2; }
div#gallery { padding: 10px 60px; }

/* create panel elements */
a.element { width: 110px; height: 62px; margin: 0px 2px 5px 2px; float: left; text-align: center; text-decoration: none;  }
a.element:hover { background-color: #9dc6f5; }
a.element img { margin-top: 5px; border: 1px solid #eeeeee; }
img#cur_char { border: 0px; }
/* width: 85px; height: 97px; */
a.actor { width: 70px; height: 82px; margin: 0px 5px 5px 0px; float: left;  text-align: center; text-decoration: none;  }
a.actor:hover { background-color: #9dc6f5;  }
a.actor img { margin-top: 5px; } 
div.actorname { font-size: 8pt; }
/* width: 130px; height: 72px; */
a.back { width: 110px; height: 62px; margin: 0px 5px 5px 0px; float: left; text-align: center; text-decoration: none; }
a.back:hover { background-color: #9dc6f5;  }
a.back img { margin-top: 5px; border: 1px solid #eeeeee; }
/* a.mess { display: block; text-align: left; padding: 5px; border-bottom: 1px dashed #999999; text-decoration: none; }
a.mess:hover { background-color: #eeeeee; } */
input#title { width: 245px; font-size: 8pt; font-family: Verdana, Geneva, Arial, Helvetica; }
textarea#message { height: 80px; width: 288px; font-size: 8pt; font-family: Verdana, Geneva, Arial, Helvetica; }
textarea.message { height: 80px; width: 288px; font-size: 8pt; font-family: Verdana, Geneva, Arial, Helvetica; }

/* outline:none; will remove the outline but this is useful for tabbing? */
div#minitabpanel { padding: 10px 10px 0px 10px; height: 26px; }
a.minitab { width: 90px; text-align: center; color: #666666; font-weight: bold; background: transparent url(../images/minitab-v3.gif) no-repeat 0px -30px;  text-decoration: none; display: block; float: left; padding: 6px 0px; margin: 0px 2px; }
a.minitabon { width: 90px; text-align: center; color: #333333; font-weight: bold; background: transparent url(../images/minitab-v3.gif) no-repeat 0px 0px; text-decoration: none; display: block; float: left; padding: 6px 0px; margin: 0px 2px; }
a.minitab:hover { color: #333333; text-decoration: none; }

input.closebox { position: absolute; right: 5px; top: 5px; background-color: #cccccc; }
input.closebox:hover { background-color: #999999; }
form#loginform { display: inline; }
form#loginform input.text { width: 80px; font-size: 9pt; color: #333333; }
#loginbox { position: absolute; z-index: 51; top: 0px; margin: 25px auto; background-color: #ffffff; width: 250px; height: 300px; border: 1px solid #000000;  }

/* If this is created outside of sitebg - font-family: Verdana, Geneva, Arial, Helvetica; font-size: 9pt; */
#feedbox { width: 420px; background-color: #fafafa; display: none; }
#feedbox h3 { text-align: left; margin-top: 0px; }
textarea#feedback { width: 380px; height: 160px; overflow: auto; }

/* Rating panel */
span.act { margin-left: 20px; color: #cccccc; }
a.act { margin-left: 20px; line-height: 18pt; padding-left: 18px; padding-top:2px;  background: transparent url(../images/master-v3.gif) no-repeat; }
a#rate { background-position: 0px -236px; }
a#rate:hover { background-position: 0px -252px; } 
a#send { background-position: 0px -268px; }
a#send:hover { background-position: 0px -284px; } 
a#share { background-position: 0px -300px; }
a#share:hover { background-position: 0px -316px; } 
a#fav { background-position: 0px -332px; }
a#fav:hover { background-position: 0px -348px; } 
a#flag { background-position: 0px -364px; }
a#flag:hover { background-position: 0px -380px; }

a.fav_off { line-height: 18pt; padding-left:18px; padding-top:2px; background: url(../images/greyheart.gif) no-repeat; }
a.fav_off:hover { background: url(../images/redheart.gif) no-repeat; } 
a.fav { line-height: 18pt; padding-left:18px; padding-top:2px; background: url(../images/redheart.gif) no-repeat; }
a.fav:hover { background: url(../images/greyheart.gif) no-repeat; } 

a.smbutton { background: transparent url(../images/master-v3.gif) no-repeat 0px -176px;  
    color: #333;
    display: block;
    float: left;
    text-align: center;
    font: normal 10px arial, sans-serif;
    height: 20px;  width: 72px; line-height: 20px; }
a.smbutton:hover { background-position: 0px -196px; cursor: default; }
a.smbutton:active { background-position: 0px -216px; outline: none; }

a.newbutton { background: transparent url(../images/master-v3.gif) no-repeat 0px -32px;
    color: #333;
    display: block;
    float: left;
    text-align: center;
    font: normal 12px arial, sans-serif;
    height: 24px;  width: 72px; line-height: 24px; }
a.newbutton:hover { background-position: 0px -56px; cursor: default; }
a.newbutton:active { background-position: 0px -80px; outline: none; }

a.widebutton { background: transparent url(../images/master-v3.gif) no-repeat 0px -104px;
    color: #333;
    display: block;
    float: left;
    text-align: center;
    font: normal 12px arial, sans-serif;
    height: 24px;  width: 112px; line-height: 24px; }
a.widebutton:hover { background-position: 0px -128px; cursor: default; }
a.widebutton:active { background-position: 0px -152px; outline: none; }

/* jqModal base Styling courtesy of; 
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */
	
.jqmWindow {
    display: none;
    position: fixed;
    top: 17%;
    left: 50%;
    margin-left: -210px;
    width: 420px;
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}