/*
 * Style layout for Fuzzwich and the Fuzzwich Animator Pages
 * c Habit Industries
 * made by Devin
 */

/******************/
/*     GLOBALS    */
/******************/

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,
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-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

body {
    line-height: 1;
    color: black;
    background: white;
}

ol, ul {
    list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}

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

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

/******************/
/*     COMMON     */
/******************/

/* Hide styles */
.fz_ghost{
    width: 0px;
    height: 0px;
    display: none;
}

/* Spacers */
.fz_defaultSpacer{
    clear: both;
    height: 18px;
}

.fz_zeroSpacer{
    clear: both;
    height: 0px;
}

.fz_defaultVerticalSpacer{
    width: 18px;
    height: 10px;
}

.fz_smallVerticalSpacer{
    width: 9px;
    height: 10px;
}

/* Padding */
.fz_defaultPadding{
    padding: 18px;
}

.fz_halfPadding{
    padding: 9px;
}

/* Floats */
.fz_floatLeft{
    float: left;
}

.fz_floatRight{
    float: right;
}

/****************/
/****************/
/*     TYPE     */
/****************/
/****************/

/* Its our body container! */
body{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
}

/* Paragraph systems */

p{
    margin-bottom: 9px;
    line-height: 1.5em;
}

/* Default link styles */

a {
    color: #00a0f0;
    cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #c34cc2;
}

#fz_reason a{ color: #6dd0f7; }
#fz_reason a:hover { color: #c34cc2; }

.fz_navigationTab a{ color: #363636; } 
.fz_navigationTab a:hover { color: #c34cc2; }

#fz_feedbackTag a{ color: #363636; } 
#fz_feedbackTag a:hover { color: #fdfbfb; }


/* So pretty! */
em {
    font-style: italic;
}

/* Title styles */

h2 {
    font-size: 18px;
    font-weight: bold;
    
    line-height: 1em;
    letter-spacing: -.6pt;
    margin-bottom: 9px;
}

.fz_titleBox h2 {
    color: #fdfbfb;
    margin: 0px;
}

.fz_titleBox h3 {
    color: #fdfbfb;
}

form h2{
    font-size: 18px;
    font-weight: normal;
    line-height: 1em;
}

h2.fz_superHeading{
    font-size: 18pt;
    font-weight: bold;
    
    line-height: 1em;
    letter-spacing: -1pt;
    margin-bottom: 9px;
}

h3 {
    text-transform: uppercase;
    font-size: .8em;   
    line-height: 1em;
}

.fz_navigationTab h3{
    letter-spacing: -.2pt;
}

hr {
    /* We use the hr only on sectioned forms, mostly in the dashboard */
    /* In otherwords, on pages where there is more than one form idea */
    
    background: transparent url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/serratedGrey.gif) repeat-x;
    
    border-color: none;
    border-style: none;
    border-width: 0px;
    height: 6px;
    margin: 9px 0px;
}

.fz_subtext{
    font-family: Georgia, Times, serif;
    font-style: italic;
    text-align: center;
    font-size: 7pt;
}

.fz_navigationTab{
    height: 13px;
    padding: 9px;
    margin-left: 9px;
    
    }


/* These guys are used in the collapsed ticket view */

.fz_frontTitle{
    color: #fdfbfb;
    
    font-size: 18px;
    
    line-height: 1.5em;
    letter-spacing: -.4pt;
    
    padding: 4px 4px;
    
    background: #363636;
}

/******************/
/******************/
/*     LAYOUT     */
/******************/
/******************/

/* background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/fuzzwichBackground.gif) repeat-x #636363; */

/* Our bodies */
.fz_body_default{
	background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_body_community{
	background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_body_exhibit{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_body_animator{
	background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_body_dashboard{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_body_minivid{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_body_portfolio{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}
.fz_noHeader{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/nightBackground.jpg) repeat-x #00a0f0 top left;
}

/**************************/
/* COMMON LAYOUT ELEMENTS */
/**************************/

/* Standard div layout classes*/
.fz_fullPadding{
    padding: 0px 18px 0px 18px;
}

.fz_halfColumnExternal{
    /* half the width of the content column external to its normal bounds */
    width: 333px;
}

.fz_halfColumn{
    /* Half the width of our content column, with padding + margin alotted in */
    ;
        width: 312px;
    }

.fz_halfColumn + .fz_halfColumn{
    /* The second cloud box gets a slight push */
    /* IE will ignore this selector, so the selector before hand takes care of that */
    margin: 0px 0px 0px 18px;
}

.fz_contentFooterBox{
    /* The float box for all footer items, woop */
    color: #aab;
    width: 190px;
}

/* Serrated box styles */
/* Sadly, to preserve transperency, every single page needs its own style*/
.fz_ctaTitle{
    width: 333px;
    height: 60px;
    
    }

.fz_defaultTopBorder{
    /** This container has the serrated background on top */
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/serratedUpWhite.gif) repeat-x top left;
}

.fz_defaultTopBorder > div:first-child{
    /** And this div sits inside with the parent div, and fills it with color! */
    margin-top: 4px;
}

/* Corner Border Style */
/* This style is used mainly for page title snippets */
.fz_borderPadding{
    /* The padding used in the corner border type to offset it's contents */
    padding: 0px 9px 0px 9px;
}

.fz_cornerExternalBorderTop{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerBorder_topright.gif) transparent no-repeat 100% 0pt;
    
    height: 9px;
}

.fz_cornerExternalBorderTop div{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerBorder_topleft.gif) transparent no-repeat 0pt 0pt;
    
    height: 9px;
}

.fz_cornerExternalBorderBottom{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerBorder_bottomright.gif) transparent no-repeat 100% 0pt;
    
    height: 9px;
}

.fz_cornerExternalBorderBottom div{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerBorder_bottomleft.gif) transparent no-repeat 0pt 0pt;
    
    height: 9px;
}

/* And this one for interior boxes */

.fz_cornerContentBorderTop{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerContentBorder_top.gif) transparent no-repeat 100% 0pt;
    
    height: 9px;
}

.fz_cornerContentBorderTop div{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerContentBorder_top.gif) transparent no-repeat 0pt 0pt;
    
    width: 9px;
    height: 9px;
}

.fz_cornerContentBorderBottom{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerContentBorder_bottom.gif) transparent no-repeat 100% 100%;
    
    height: 9px;
}

.fz_cornerContentBorderBottom div{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerContentBorder_bottom.gif) transparent no-repeat 0pt 100%;
    
    height: 9px;
}

.fz_cornerContentBorderRight{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerContentBorder_right.gif) transparent no-repeat 100% 0pt;
}

.fz_cornerContentBorderLeft{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/cornerContentBorder_right.gif) transparent no-repeat 0pt 0pt;
}

/* Title box styles */

.fz_titleBox {
    /* This is the class that defines some unique attributes of all title boxes */
    margin: 0px 0px 0px 134px;
    width: 274px;
}

.fz_halfBox{
    width: 274px;
}

/* Content Title Box. The boxes used inside of the content column for descret sections. See fourms for usage example*/

.fz_contentTitleBox{
    position: relative;
    
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/contentTitleBoxBg.gif) transparent no-repeat top left;
    
    width: 304px;
    height: 49px;
}

.fz_contentTitleBox h2{
    position: absolute;
    
    left: 6px;
    top: 19px;
    
}

.fz_contentTitleBox div{
    background: #ddd;
    
    position: absolute;
    left: 0px;
    top: 61px;
    
    width: 300px;
    
    height: 100px;
}

/* Form element styles */

.fz_formBox{
    /* This form box spans across by itself */
    background: #ddd;
}

.fz_cloudBox{
    margin-right: 9px;
    margin-bottom: 9px;
}

.fz_formBoxAlert{
    /* This style is used when emphasis needs to be added to the form box */
    background: #fd9595;
}

.fz_formBoxConfirmation{
    /* This style is used when emphasis needs to be added to the form box */
    background: #cbffc1;
}

.fz_input{
    /* the class that almost all input boxes use */
    font-size: 18px;
    letter-spacing: -.8pt;
}

.fz_miniInput {
    padding: 2px;
    font-size: 9pt;
}

.fz_label{
    /* the class that almost all input boxes use */
    font-size: 18px;
    letter-spacing: -.8pt;
}

.fz_button{
    font-size: 18px;
    letter-spacing: -.8pt;
}

.fz_checkList{
    margin-right: 18px;
    letter-spacing: -.8pt;
}

.fz_miniTextArea {
    padding: 4px;
    font-size: 9pt;
    font-family: Helvetica, Arial, sans-serif;
    
    width: 400px;
    height: 18px;
}

/* Portfolio styles: classes specific to thumbnails and descriptions */
.fz_thumbnailBox{
    /* This is the class for the box that holds our fun little java script thumbnails */
    width: 256px;
    overflow: hidden;
}

.fz_descriptionBox{
    width: 374px;
}

.fz_thumbnailContent{
    padding: 0px 9px;
}

.fz_descriptionContent{
    padding: 0px 9px;
}

/** Table types **/
.fz_listTable {
    width: 100%;
}

.fz_listTable td {
    background: #fdfbfb;
    padding: 9px 9px 9px 9px;
    border-bottom: 1px #ddd solid;
}

/** Number box. Grate for showing some bumber, boldly! */

.fz_numberBox{
    text-align: center;
    
}

.fz_numberBox h2{
    font-size:24px;
    font-weight: bold;
    letter-spacing: -1pt;
    text-align: center;
    margin: 2px 0px 0px 0px;
}

.fz_numberBox h3{
    text-transform: none;
    font-size: 12px;
    font-style: italic;
    font-family: Georgia, serif;
    text-align: center;
    margin: 0px 0px 0px 0px;    
}



/** Specialized rank box, much like the number box, also see ticketPoints, which uses rank box */
.fz_rankBox{
    
}

.fz_rankBox h2{
    font-size:24px;
    font-weight: bold;
    letter-spacing: -1pt;
    text-align: center;
    margin: 2px 0px 0px 0px;
}

.fz_rankBox h3{
    text-transform: none;
    font-size: 12px;
    font-style: italic;
    font-family: Georgia, serif;
    text-align: center;
    margin: 0px 0px 0px 0px;
}

/** Portfolio / Exhibit / etc list view stuff **/

.fz_portfolioTicket{
    /* The wrapper for all this portfolio madness. */
    position: relative;
    padding-top: 101px;
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/portfolioTicketSerade.gif) left bottom repeat-x;
    
    height: 168px;
}

.fz_portfolioTicket p{
	
    margin: 9px 0px 0px 0px;
    
    padding: 9px;
    
    background: #363636;
    color: #fdfbfb;
}

.fz_portfolioPoints{
    position: absolute;
    top: 9px;
    right: 9px;
    
    width: 64px;
    height: 56px;   
    
    background: #363636;
    color: #fdfbfb;
}

.fz_previewTicket{
    /* The wrapper for all this madness. */
    position: relative;

			padding-top: 83px;
	    
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/previewTicketSerade.gif) right top repeat-y;
}



.fz_ticketPoints{
    position: absolute;
    top: 9px;
    right: 13px;
    
    width: 64px;
    height: 56px;   
    
    background: #363636;
    color: #fdfbfb;
}

.fz_ticketDetails{
    position: absolute;
    top: 9px;
    left: 9px;
    
    background: #363636;
    color: #fdfbfb;
}

.fz_portfolioDetails{
    width: 150px;
}

.fz_ticketMatte{
    /* This adds the grey out matte */
    background: transparent url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/ticketMatte.gif);
}

.fz_ticketColumn{
    /* Yop. We need some special padding / margin for us */
    margin: 9px;
    width: 306px;
}

.fz_saveTicket{
    /* The save ticket wrapper*/

	
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/previewTicketSerade.gif) right top repeat-y;
}

.fz_saveDetails{
	background: #363636;
    color: #fdfbfb;
}



/** Comments, in all their glory */

.fz_commentHeader{
    color: #aaa;
}

.fz_commentBody{
    
}

/** Error and focus page styles */
.fz_singleFocusContainer{
    
    margin: 128px auto 0px auto;
    width: 400px;
}

/**************************/
/* Unique Layout Elements */
/**************************/

#fz_rootContainer{
    /* This is the div that wraps our entire layout */
    width: 100%;
}

#fz_persistantMeta{
    /* This little guy holds a persistant log in / log out on all pages */
    height: 36px;
    
    color: #ffffff;
}

#fz_persistantMeta p{
    margin: 0px;
}

#fz_masterColumn{
    /* This is id of the div that wraps all three of our main columns: navigation, content, and sidebrand */
    width: 954px;
    
    margin: 0px auto;
    padding: 0px;
}

#fz_masthead{
    /* This is the id of the div that holds all the content that appear EXTERNAL to the usual content box. Things like titles. */
    /*width:684px;
    
    color: #fff;
    margin: 0px 135px;
    */
}

#fz_navigationColumn{
    /* This is the id of the column that contains our ribbon-eque navigation on the left for major section navigation */
    width: 135px;
    
    float: left;
}

.fz_topNavigationSpacer{
    /** A spacer used to bump down all the common elements in the global navigation columns */
    clear: both;
    height: 22px;
}

#fz_contentColumn{
    /* This is the id of the column that conatins all the shits on the page */
    width: 684px;

    float: left;
    padding: 0px;
}

#fz_sidebrandColumn{
    /* This is the column that contains the fuzzwich brand on the right */
    margin-top: 64px;
    width: 135px;
    
    float: left;
}

#fz_sideBrandLogo{
    /* This id is for the sidebrand image */
    margin: 18px 0px 18px 18px;
}

/** Content column unique id's */

#fz_contentNavigation{
    /* The navigation for the content columns subpages and whatnot */
    padding: 18px 0px 0px 0px;
}

#fz_contentBody{
    /* This is the white dude that holds all our central content.*/
    background: #fdfbfb;
    
    /* We need to always fill up pased out side items */
    min-height: 300px;
}

/* A little hack for ie5 - 6 */
/* mac hide \*/
* html #fz_contentBody{ height:300px }
/* end hide */

#fz_contentFooter{
    /* Our navigation + brand footer inside of the content column */
    background: #363636 url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/background/footerBackground.gif) top repeat-x;
    color: #fdfbfb;
}

#fz_footerBorder{
    height: 4px;
    background: transparent url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/serratedDownFooter.gif) top left repeat-x;
}

/************************************/
/* Special Front Page Classes / Ids */
/************************************/

#fz_frontPageMasthead{
    /* The wrapper for all the elements on the front page. Time for some positioning! */
    position: relative;
    margin: 0px 0px 0px 135px;
    
    height: 348px;
}

#fz_ctaOne{
    position: absolute;
    left: 0px;
    top: 0px;
    
    background: transparent url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/front/cta_one.gif) top left no-repeat;
    width: 335px;
    height: 317px;
    
    padding: 69px 10px 0px 10px;
}

#fz_ctaTwo{
    position: absolute;
    left: 351px;
    top: 0px;

    background: transparent url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/front/cta_two.gif) top left no-repeat;
    width: 335px;
    height: 224px;
    
    padding: 69px 10px 0px 10px
}

#fz_ctaThree{
    position: absolute;
    left: 333px;
    top: 238px;
    
    background: transparent none;
    width: 467px;
    height: 87px;
}

.fz_ctaOneTitle{
    position: absolute;
    left: 18px;
    top: 36px;
    
    font-size: 18px;
    color: #ff000a;
}

.fz_ctaTwoTitle{
    position: absolute;
    left: 18px;
    top: 36px;
    
    font-size: 18px;
    color: #6dd0f7;
}

.fz_ctaThreeTitle{
    position: absolute;
    left: 35px;
    top: 18px;
    
    width: 298px;
    
    font-size: 18px;
    color: #363636;
}

.fz_ctaThreeTitle a{
    color: #fdfbfb;
}

.fz_ctaThreeTitle a:hover{
    color: #00a0f0;
}

#fz_reason{
    height: 18px;
    text-align: center;
    letter-spacing: .8pt;
}

#fz_titleAnimation{
    /* This is the id for the div that contains the big animation at the top of our page */
    width: 432px;
    height: 252px;
    
    overflow: hidden;
}

/
.fz_frontPageLogo{
    margin-top: 27px;
}

/** All the side nav tag styles **/


.fz_navigationTag{
    
	
    width: 117px;
    height: 22px;
    
    padding-left: 18px;
    padding-top: 14px;
    
    margin-bottom: 2px;
}

.fz_selectedNavigationTag{
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/navtags/tag_selected.gif) top left no-repeat;
    width: 135px;
    height: 22px;
    
    padding-left: 18px;
    padding-top: 14px;
    
    margin-bottom: 2px;
}

.fz_navigationTag a{
    color: #fdfbfb;
    margin-bottom: 0px;
}

.fz_selectedNavigationTag a{
    color: #fdfbfb;
    margin-bottom: 0px;
}

.fz_navigationTag h2{
    color: #fdfbfb;
    margin-bottom: 0px;
}

.fz_selectedNavigationTag h2{
    color: #fdfbfb;
    margin-bottom: 0px;
}

/** All the feedback stuff **/

#fz_feedbackContainer{
    /* This container holds all the feedback elements on our page */
    /*background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/serratedDownGreen.gif) transparent bottom left repeat-x;*/
}

#fz_feedbackTag{
    text-align: center;
    margin: 0px auto;
    width: 196px;
    padding-bottom: 4px;
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/serratedDownGreen.gif) transparent bottom left repeat-x;
}

#fz_feedbackTagInner{
    /* This id for the feedback image that appears on the front page */
    background: #ACD473;
}


.fz_feedbackPadding{
	padding: 9px 9px 4px 9px;
}

#fz_feedbackForm{
    margin: 0px auto;
	width: 333px;
	height: 212px;
    background: #ACD473;

	text-align: center;
}

.fz_feedbackTextArea{
	width: 100px;
	width: 315px;
}

.fz_feedbackEmailInput{
	width: 310px;
}



#fz_frontPageBlog{
    /* This is the id for the box on the front page that holds our current blag posts */
    width: 270px;
}

#fz_frontPagePotfolio{
    /* This is the id for the box in the front page that holds the login / create stuff */
    padding-left: 18px;
    width: 270px;
}

/** Unique styles for minivid */

#fz_minividCreateBadge{
	
			margin-right: 148px;
		
	
			margin-bottom: -48px;
		
	margin-top: -30px;
	
	z-index: 999;
}

#fz_minividMasthead{
    margin: 0px auto;
    width: 684px;    
    
    padding-bottom: 4px;
    background: url(http://fuzzwich.s3.amazonaws.com/web/themes/default/img/border/serratedDownGrey.gif) bottom left repeat-x transparent;
}

#fz_minividMastheadInner{
    background: #636363;
}

.fz_minividMastheadBottomBorder{
    
    height: 4px;
}