/*---------------------------------------------------------------
 Freakatars Core Styles
 Author:    Fontaine Shu
 Web:       http://www.freakatars.com
 Updated:   November 29, 2008
 --------------------------------------------------------------
/* Yahoo! Helpers -----------------------------------------------*/

@import url(reset-fonts.css);

/* General Styles -----------------------------------------------*/

body {
	text-align: center; /* to center page on screen */
	font-family: 'arial rounded','arial rounded mt bold',arial,clean,sans-serif;
	background: transparent url(http://media.freakatars.com/images/bkg_gradient.jpg) repeat-x top left;
}
.clear { clear: both; }
.hide { display: none; }
.last { border-right: 0 !important; margin-right: 0px !important; }
.floatL { float: left !important; }
.floatR { float: right !important; }
.uppercase { text-transform: uppercase; }
.alignL { text-align: left; }
.alignR { text-align: right; }
.noBreak { white-space: nowrap; }
a {
    text-decoration: none;
    outline: none;
    font-weight: bold;
	color: #636363;
}
a:hover {}

strong { font-weight: bold; }
em { font-style: italic; }

h2 { font-size: 16px; font-weight: bold; text-transform: uppercase; }
h3 { font-size: 14px; font-weight: bold;}

ul.showBullets li {
	margin-left: 20px;
	list-style: disc;
}

ol li { 
	margin-left: 20px; 
	list-style-type: decimal; 
}

/* forms */
input, textarea {
    margin-bottom: 8px;
    border: 1px solid #000;
}
label {
    text-transform: uppercase;
    color: #373737;
    display: block;
    font-weight: bold;
}
legend { display: none; }
.error { color: #ff0000; font-size: 0.8em; display: block; }


/* Header Styles -----------------------------------------------*/

#header {
    margin: 0px auto 15px;
    width: 930px; height: 90px;
    position: relative;
    z-index: 200;
}
    #header h1 {    /* not actually displayed, here for SEO purposes */
        float: left;
        text-indent:-9999px;
    }
    
#header #logo {
    position: absolute;
    top: 14px; left: 0px;
    display: block;
    width: 269px; height: 62px;
}


    #mainNav a { color: #fff; display: block; z-index: 5;}

	ul#mainNav {
		width: 324px; 
		height: 80px;
		margin: auto;
		position: relative;
		display: block;
	}
		ul#mainNav li {
			float: left;	
		}
		a.nav-myfreakatars {
			background:transparent url(http://media.freakatars.com/images/global/01-myfreakatars.gif) no-repeat scroll 0 0;
			display:block;
			height:81px;
			text-indent:-9999px;
			width:146px;
		}
		a.nav-myfreakatars:hover {
			background-position:0 -81px;
		}
		
		a.nav-create {
			background:transparent url(http://media.freakatars.com/images/global/02-create.gif) no-repeat scroll 0 0;
			display:block;
			height:81px;
			text-indent:-9999px;
			width:68px;
		}
		a.nav-create:hover {
			background-position:0 -81px;
		}
		
		a.nav-community {
			background:transparent url(http://media.freakatars.com/images/global/03-community.gif) no-repeat scroll 0 0;
			display:block;
			height:81px;
			text-indent:-9999px;
			width:109px;
		}
		a.nav-community:hover {
			background-position:0 -81px;
		}
	
	
#userNav {
    position: absolute;
    top: 5px; right: 0px;
    width: 275px;
}

	#userNav a: {
		color: #8C1717;
	}
	
	#userNav a:hover {
		color: #FFF;
	}
	
	#userNav ul.usernav{
		width: 275px;
	}
	
    #userNav ul li { float: left; font-weight: bold; white-space: nowrap; }
    #userNav ul li.nav-signout { clear: both; }

    #userNav ul li.nav-welcome {
        margin-bottom: 8px;
        color: #fff;
        font-size: 17px;
		text-align: right;
		width: 275px;
    }
	#userNav ul li.nav-sign-up div{
		background: transparent url(http://media.freakatars.com/images/nav_signup_btn.gif) no-repeat top center;
		width: 149px;
		height: 49px;
		margin-top: -30px;
		cursor: pointer;
    }
	#userNav ul li.nav-cart {
		background:transparent url(http://media.freakatars.com/images/nav_cart.png) no-repeat scroll left center;
		cursor:pointer;
		height:29px;
		margin:-10px 10px 0px 20px;
		padding-top:10px;
		position:relative;
		text-indent:32px;
    }
	
    #userNav ul li.nav-freakies {
		display: block;
        padding-left: 20px;
        float: right;
        color: #f9f2a6;
		position: relative;
    }
	#userNav ul li.nav-freakies .freakiesHolder{
		display: inline;
    }
	
	#userNav ul li.nav-freakies .freakiesHolder .freakiesCoin{
		width: 30px; 
		height: 24px;
		position: absolute;
		top: -5px; 
		left: -10px;
		display: block;
    }
	
	#userNav ul li.nav-freakies span,
	span.freakiesIcon{
		background: transparent url(http://media.freakatars.com/images/freakies_icon.png) no-repeat top left;
		width: 15px; height: 15px;
		position: absolute;
		top: 0px; left: 0px;
		display: block;
    }

#header .searchFormWrapper {
	margin: 8px 0px;
}


.searchFormWrapper .searchForm input {
	
}


/* Main Body Styles --------------------------------------------*/

#page {
    margin: 0 auto;
    width: 959px;
    text-align: center;
}

/* default color set up is a white fill */
#content {
    padding: 0px 25px;
    min-height: 500px;
    background: transparent url(http://media.freakatars.com/images/body_border_MID.png) repeat-y top center;
		text-align: left;
		position: relative;
		background-color: #FFFFED;	/* change background color by using a pageWrapper class with fillers below */
}

/* fillers for background-color, override with pageWrapper class, eg: home */
.content-top-filler,
.content-bottom-filler { 
	background-color: #FFFFED;
}
.content-top-filler {
	position: absolute;
	z-index: 1;
	width: 934px; height: 22px;
	top: -22px; left: 13px;
}
.content-bottom-filler {
	position: absolute;
	z-index: 1;
	width: 934px;
	height: 22px;
	bottom: -22px;
	left: 13px;
}

#content-top {
    margin-top: -5px;
    height: 35px;
    background: transparent url(http://media.freakatars.com/images/body_border_TOP.png) no-repeat top center;
		position: relative;
		z-index: 2;
}

#content-bottom {
		clear: both;
    height: 35px;
    background: transparent url(http://media.freakatars.com/images/body_border_BOTTOM.png) no-repeat top center;
		position: relative;
		z-index: 2;
}

.colLeft { float: left; }
.colRight { float: right; }


/* Home Styles -------------------------------------------------*/

#pageWrapper.home .islandBG {
    background: transparent url(http://media.freakatars.com/images/main_bkg1120.jpg) no-repeat top center;
}
    #pageWrapper.home #content, #pageWrapper.home #content-top, #pageWrapper.home #content-bottom { 
		background: 0; 
		padding: 0px;
		margin:0px auto;
	}
	
    #pageWrapper.home #content-bottom { 
		display: none; 
	}

#pageWrapper.home #page
{
	width: 100%;
}

#pageWrapper.home #footer
{
	width: 903px;
	margin: 0px auto;
}

#homeIsland {
	margin-top:-100px;
}

#island {
    margin-top:-120px; /* to force the image closer to header */
    height: 638px;
    position: relative;
}


/* various links on island with hover states */
.islandHovers { display: block; position: absolute; font-size: 0; line-height: 0; }

#island-balloon, #island-balloon:hover, #island-balloon:visited {
    width: 174px;
	height: 135px;
    top: -115px; 
	right: -191px;
}
    #island-balloon:hover,
	#island-factory:hover #island-balloon { background: transparent url(http://media.freakatars.com/images/create_blimp_OVER.png) no-repeat top left; }

#island-factory, #island-factory:hover, #island-factory:visited {
    width: 430px; 
	height: 243px;
    top: 202px; 
	left: 226px;
}
    #island-factory #island-factoryDoor {
        width: 97px; 
		height: 85px;
        top: 165px; 
		left: 173px;
    }
    #island-factory:hover #island-factoryDoor { background: transparent url(http://media.freakatars.com/images/factory_frontd_OVER.png) no-repeat top left; }

#island-home, #island-home:hover, #island-home:visited {
    width: 170px;
	height: 120px;
    top: 309px; 
	right: 35px;
}
    #island-home #island-homeSign {
        width: 45px; 
		height: 74px;
        background: transparent url(http://media.freakatars.com/images/home_sign_UP.png) no-repeat top left;
        top: 40px; 
		right: 20px;
		display: none; /* so it doesnt show up right away) */
    }
    #island-home:hover #island-homeSign { display: block; background: transparent url(http://media.freakatars.com/images/home_sign_OVER.png) no-repeat top left; }
    #island-home #island-homeWindow {
        width: 23px;
		height: 23px;
        top: 30px; 
		right: 103px;
    }
    #island-home:hover #island-homeWindow { background: transparent url(http://media.freakatars.com/images/home_window_OVER.png) no-repeat top left; }

#island-waterTower, #island-waterTower:hover, #island-waterTower:visited {
    width: 100px;
	height: 295px;
    top: 100px; 
	left: 96px;
}
    #island-waterTower #island-community {
        width: 74px; 
		height: 99px;
        top: 159px; 
		left: 0px;
    }
    #island-waterTower:hover #island-community { background: transparent url(http://media.freakatars.com/images/watertwr_btn_OVER.png) no-repeat top left; }


/* Beta Invite Styles ------------------------------------------*/

#pageWrapper.betaInvite #content { padding-top: 80px; text-align: center; background: 0; }
#pageWrapper.betaInvite #content-top, #pageWrapper.betaInvite #content-bottom { display: none; }

#betaContainer {
	margin: 0px auto;
	width: 750px;
	height: 500px;
}
#betaFrame {
	float: left;
    padding: 45px 45px 0px 45px;
    width: 446px; height: 311px;
    background: transparent url(http://media.freakatars.com/images/beta_frame_bkg.jpg) no-repeat top center;
}
#betaFrame #logo {
	width: 269px;
	height: 62px;
	background-image: url(http://media.freakatars.com/images/logo_beta.png);
	margin: auto;
	position: static;
}

#betaContents {
    padding: 30px 20px 0px 20px;
    text-align: left;
    font: normal 18px arial;
}
    #betaContents p { padding: 0px 20px; }
    #betaContents p > strong { font-weight: bold; }
    #betaContents form { padding-top: 20px; }
    #betaContents input.inputField {
        margin: 10px 8px 0px 0px;
        width: 320px; height: 36px;
        float: left;
    }
    #betaContents label { text-transform: none; color: inherit; }
    #betaContents a.go, #betaContents a.go:hover, #betaContents a.go:visited, #betaContents a.go:active {
        display: block;
        width: 69px; height: 58px;
        background: transparent url(http://media.freakatars.com/images/go_btn_UP.png) no-repeat center center;
        float: left;
    }
        #betaContents a.go:hover { background: transparent url(http://media.freakatars.com/images/go_btn_OVER.png) no-repeat center center; }
        #betaContents a.go:active { background: transparent url(http://media.freakatars.com/images/go_btn_DOWN.png) no-repeat center center; }

.betaLoginPane {
		behavior: url(/styles/iepngfix.htc)
		position: relative;
		float: right;
        width: 193px;
        height: 210px;
        background-color: transparent;
        background-image: url(http://media.freakatars.com/images/beta_invite_login_pane_bg.png);
        background-repeat: no-repeat;
        background-position: center center;
  
}

        .betaLoginPane #loginForm {
                width: 156px;
                height: 128px;
                padding-top: 47px;
                padding-right: 20px;
                padding-bottom: 0px;
                padding-left: 20px;
        }

        .betaLoginPane #loginForm label {
                padding-left: 5px;
                font-size: 0.9em;
        }

        .betaLoginPane #loginForm  > input {
                height: 20px;
                background-color: #e5e5e5;
        }

		
/* Sign Up / Login Styles --------------------------------------*/

#pageWrapper.signUp #content-top,
#pageWrapper.signUp #content-bottom { /* so border goes over the background-image */
    position: relative; z-index: 1;
}
#pageWrapper.signUp #content {
		padding: 0 40px;	/* override default padding */
}

#pageWrapper.signUp .content-top-filler,
#pageWrapper.signUp .content-bottom-filler {
    background-color: transparent;
}

#signUpWrapper {
    margin: -22px 0px -27px -27px;
    background: transparent url(http://media.freakatars.com/images/signup_bkgv2.jpg) no-repeat top center;
    width: 934px; height: 631px;
    float: left;
    position: relative;
}

#registerPane {
    width: 600px; height: 568px;
    position: absolute;
    top: 30px; left: 40px;
    position: relative;
}

	#registerPane .registrationMessage {
        margin-top: 26px;
        margin-right: 22px;
        float: right;
        color: #fff;
        width: 350px;
        font-size: 14px;
        font-weight: bold;
		text-align: center;
    }
    #registerPane form {
        float: left;
        margin-top: 52px;
        margin-left: 35px;
        width: 525px;
    }
    #registerPane div.left {
        margin-right: 15px; margin-bottom: 10px;
        width: 200px;
        text-align: right;
        font-style: italic;
        float: left;
        clear: left;
    }
    #registerPane div.right {
        margin-bottom: 10px;
		margin-left: 5px;
        width: 283px;
        float: left;
    }
    #registerPane form .button {
        margin-right: 15px;
    }
    #registerPane div.left label { float: right; padding-top: 3px; white-space: nowrap; }
    #registerPane div.left label.topSpace { padding-top: 16px; }
    #registerPane div.right label, #registerPane select { float: left; clear: both; }
    #registerPane div.right label { font-size: 0.85em; }
    #registerPane div.right option, #registerPane div.right select { text-transform: uppercase; }
    #registerPane div.right div.floatL { margin-right: 12px; }
    #registerPane div.right input { margin-bottom: 3px; float: left; clear: both; width: 248px; height: 20px;}
    #registerPane div.right input.halves { width: 117px; }
    #registerPane div.right input.thirds { width: 74px; }
	#registerPane div.right #birth-date { width: 50px; }
	#registerPane div.right #birth-year { width: 80px; }
	
	#registerPane .realNameMsg {
		color: #000; 
		font-size: 0.8em; 
		display: block;
		width: 250px;
	}

#loginPane {
    padding: 47px 20px 0px 75px;
    width: 156px; height: 138px;
    position: absolute;
    top: 110px; right: 44px;
}
    #loginPane label {
        padding-left: 5px;
        font-size: 0.9em;
    }
    #loginPane > input {
        height: 20px;
        background-color: #e5e5e5;
    }
	#loginPane .forgotLink 
	{
        color: #333333;
		font-size: 10px;
		text-align: center;
		margin-top: 20px;
    }
	
	

/* My Freakatars Styles ----------------------------------------*/
.myFreakatarsUserMetadataWrapper {
	margin-bottom: 15px;
}

#pageWrapper.myFreakatars .myFreakatarsHeader {
	position: relative;
	height: 76px;
	margin-bottom: 30px;
}

#pageWrapper.myFreakatars .myFreakatarsHeader .my-freakatars-banner {
	background: transparent url(http://media.freakatars.com/images/your_freakbanner.jpg) no-repeat top center;	
	width: 404px;
	height: 65px;
	display: block;
	position: absolute;
	bottom: 0px;
	left: 265px;
}

#pageWrapper.myFreakatars .myFreakatarsHeader .leftAd {
	background: transparent url(http://media.freakatars.com/images/break_thebank_AD3.gif) no-repeat top center;	
	width: 180px;
	height: 76px;
	display: block;
	position: absolute;
	bottom: 0px;
	cursor: pointer;
}

#pageWrapper.myFreakatars .myFreakatarsHeader .rightAd {
	background: transparent url(http://media.freakatars.com/images/break_thebank_AD4.gif) no-repeat top center;	
	width: 180px;
	height: 44px;
	display: block;
	position: absolute;
	bottom: 0px;
	right: 0px;
	cursor: pointer;
}

#pageWrapper.myFreakatars .colLeft {
	margin: 25px 0px 0px 10px;
	*margin-top: 0px;
	/*margin-left: 10px; margin-top: 5px;*/
}
#pageWrapper.myFreakatars .colRight {
	margin-top: 25px;
	/* width: 698px; Commented out to allow rows/cols to wrap */
	*width: 100%;
	*margin-top: 0px;
}
#pageWrapper.myFreakatars h2 {
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 22px;
}
#pageWrapper.myFreakatars #content {
	background-color: #FFFFED;
	padding: 0 20px; /* override the default padding size */
}
#pageWrapper.myFreakatars ul.pagination {
	margin-right: 10px;
}

#latestFreakatar {
	background: transparent url(http://media.freakatars.com/images/latest_freakatar.png) no-repeat top center;
	width: 164px; height: 24px; 
}





#profile-box {
	/* reset margins and textalign */
	margin: 0px auto;
	text-align: left;
    width: 213px; height: 318px;
    background: transparent url(http://media.freakatars.com/images/profile_panel.jpg) no-repeat top center;
	border: 1px solid #333333;
}
    #profile-box h3 {
        text-align: center;
    }
	
	#profile-box .userdata {
		padding: 45px 25px;
	}
	
	#profile-box .meta-info {
		padding: 0px 0px 0px 28px;	
		margin-top: -5px;
		color: #FFF;
		font-size: 10px;
		font-weight: normal;
		clear: both;
	}
		#profile-box .meta-info a {
			color: #FFF;
			font-weight: bold;
			text-decoration:underline
		}
    
		
	
/* My favorites */
/* My Freakatars Styles ----------------------------------------*/
#pageWrapper.myFavorites .colLeft {
	margin-left: 10px; margin-top: 16px;
}
#pageWrapper.myFavorites .colRight {
	width: 698px;
}
#pageWrapper.myFavorites h2 {
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 22px;
}
#pageWrapper.myFavorites #content {
	padding: 0 15px; /* override the default padding size */
}
#pageWrapper.myFavorites ul.pagination {
	margin-right: 15px;
}

/* User Data */

ul.userdata li {
	margin-top: 3px;
	padding: 7px 3px;
    font-family: arial;
	display: block;
}

ul.userdata li span.metaLabel {
    padding-left: 10px;
	padding-right: 5px;
    font-weight: bold;
	float: left;
}

ul.userdata li span.metaLabel a {
    text-decoration: underline; 
	color: #000;
}



ul.userdata li var {
	padding-right: 0.5em; 
}
ul.userdata li var+a {
	margin-top: 1px;
    font-size: 9px;
    text-transform: uppercase;
    text-decoration: underline;
    color: #E43860;
    float: right;
}

/* Freakatars heading view */
ul.userdata.freakatarsView {
	float: left;
}
		ul.userdata.freakatarsView li {
			padding: 0;
			text-transform: uppercase;
			font-weight: bold;
			font-size: 14px;
			color: #333;
		}
		ul.userdata.freakatarsView li.meta-membership {
			
		}
		ul.userdata.freakatarsView li.meta-freakatars,
		ul.userdata.freakatarsView li.meta-freakies {
			padding-left: 9px;
			float: left;
		}
			ul.userdata.freakatarsView li.meta-freakatars span.metaLabel,
			ul.userdata.freakatarsView li.meta-freakies span.metaLabel {
				padding-left: 3px;
			}
		ul.userdata.freakatarsView li.meta-url var {
			color: #A8728C;
			font-weight: bold;
		}
		
		ul.userdata.freakatarsView li.meta-url-info {
			font-size: 9px;
			color: #888;
			padding-left: 15px;
			margin-top: 0px
		}


/* Bullet Icon Styles ------------------------------------------*/
ul.userdata li.meta-freakatars span.icon {
	margin-top: 2px;
	background: transparent url(http://media.freakatars.com/images/freakatars_icon.png) no-repeat top left;
	width: 15px; height: 15px;
	display: block;
	float: left;
}
	
ul.userdata li.meta-freakies span.icon {
	margin-top: 2px;
	background: url(http://media.freakatars.com/images/freakies_icon.png) no-repeat top left;
	width: 15px; height: 15px;
	display: block;
	float: left;
}

ul.userdata li.meta-favorites span.icon {
	background: url(http://media.freakatars.com/images/favorites_icon.png) no-repeat top left;
	width: 15px; height: 15px;
	display: block;
	float: left;
}



h4.freakatar-name { }


/* Overlay Styles ----------------------------------------------*/

.panel {	/* dimensions: 600x459 including border */
    text-align: center;
	overflow: visible;
	background: #8DBBBF url(http://media.freakatars.com/images/visitor_frame.jpg) no-repeat top center;
	width: 600px; height: 459px;
	position: relative;
}
	.panel .panel-contents {
		padding: 45px 50px;
		float: left;
		overflow: visible;
	}
    .panel .close {
		padding: 1px 5px;
		position: absolute;
		top: 5px; right: 10px;
		background: #6B645B;
		color: #fff;
    }
	
.panel.small {	/* dimensions: 539x459 including border */
	background: transparent url(http://media.freakatars.com/images/visitor_frame.jpg) no-repeat top center;
	height: 459px;
}
	.panel.small .panel-contents { height: 389px; }
	
.panel.large {	/* dimensions: 600x556 including border */
	background: transparent url(http://media.freakatars.com/images/feeder_bg.jpg) no-repeat top center;
	width: 600px; height: 556px;
}
	.panel.large .panel-contents {
		padding: 27px 27px 28px 28px; 
		width: 535px; height: 535px; 
	}

/* Food Panel */
.panel .feeder-panel-contents {
	float: left;
	height: 600px;
	width: 556px;
}



/* Visitor to MyFreakatars page overlay */

.myFreakatarsVisitorUserMetadataWrapper {
	margin-bottom: 15px;
}

#panel-myFreakatarsVisitor .freakatar-card {
	width: 220px;
	height: 220px;
	background: url(http://media.freakatars.com/images/visitor_cageframe.jpg) no-repeat top center;
	display: inline-block;
}

#panel-myFreakatarsVisitor .freakatar-card,
#panel-myFreakatarsVisitor .freakatar-info {
	margin-top: 50px;
}

#panel-myFreakatarsVisitor .freakatar-card img {
	behavior: url(/styles/iepngfix.htc)
	padding: 10px;
}

#panel-myFreakatarsVisitor .freakatar-info {
	padding: 30px 25px;
	background: transparent url(http://media.freakatars.com/images/visitors_freak_info.jpg) no-repeat top center;
	width: 176px; height: 151px;
	float: right;
}
	#panel-myFreakatarsVisitor .freakatar-info h2 {
		font-size: 18px;
	}
	#panel-myFreakatarsVisitor .freakatar-info p {
		margin-top: 23px;
		font-size: 16px;
		text-transform: uppercase;
		font-weight: bold;
	}
	#panel-myFreakatarsVisitor .freakatar-info p.birthdate {
		color: #707070;
		font-weight: normal;
	}
	
#panel-myFreakatarsVisitor .favorites-panel {
	margin-top: 7px; padding: 18px 0 0 30px;
	background: transparent url(http://media.freakatars.com/images/favorites_panel.png) no-repeat top center;
	width: 198px; height: 46px;
	float: right; 
}

a#addToFavorites, a#addToFavorites:hover, a#addToFavorites:visited, a#addToFavorites:active {
	padding-top: 5px;
	padding-left: 40px;
	height: 25px;
	color: #000;
	display: block;
	text-align: left;
	float: left;
	font-size: 14px;
	position: relative;
}
a#addToFavorites span {
	display: block;
	width: 35px;
	height: 30px;
	background: transparent url(http://media.freakatars.com/images/favorites_icon_UP.png) no-repeat center left;
	position: absolute;
	top: 2px;
	left: 2px;
}
a#addToFavorites:hover {color: #c63838;}
a#addToFavorites:hover span { 
	background: transparent url(http://media.freakatars.com/images/favorites_icon_OVER.png) no-repeat center left;
}
    

/* Button Styles -----------------------------------------------*/
/* based off of http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php */

.center {
	margin: auto;
	display:-moz-box;
	display:inline-block;
	zoom:1;
	*display:inline
}

a.button, span.button, del.button {
    display:-moz-inline-box;
    display:inline-block;
    cursor: pointer;
    border: none;
    vertical-align: middle;
    background-position: 0 0;
    background-repeat: no-repeat;
    font-size:0;
    line-height:0;
    width: 70px; height: 29px;
}
span.button button, span.button input {
    line-height: 2.5px;
}
a.button span, span.button button, span.button input, del.button span {
    white-space:nowrap;
    cursor:pointer;
    letter-spacing:0 !important;
    font-size: 12px;
    font-weight: bold;
    border:none;
    vertical-align:center;
    color: #fff;
    text-transform: uppercase;
}
a.button:focus,
span.button button:focus, a.button:focus span,
span.button button:focus span {
    outline: none;
}

/* confirm button */
button.submit {
	background:transparent url(http://media.freakatars.com/images/submit-btn.gif) no-repeat scroll 0 0;
	display:block;
	height:28px;
	text-indent:-9999px;
	width:70px;
	border-style: none;
	margin: 0px 10px;
	cursor: pointer;
}
button.submit:hover {
	background-position:0 -28px;
}

/*a.button span, span.button button, span.button input, del.button span {
    background: transparent url(http://media.freakatars.com/images/green_btn_UP.png) no-repeat top center;
    width: 70px; height: 29px;
}
a.button:hover span, span.button:hover button, a.button:focus span, span.button:hover input {
	background-image: url(http://media.freakatars.com/images/green_btn_OVER.png);
	text-decoration:none;
}
*/

/* cancel button */

button.cancel {
	background:transparent url(http://media.freakatars.com/images/cancel-btn.gif) no-repeat scroll 0 0;
	display:block;
	height:28px;
	text-indent:-9999px;
	width:70px;
	border-style: none;
	margin: 0px 10px;
	cursor: pointer;
}
button.cancel:hover {
	background-position:0 -28px;
}

/*a.button.cancel span, span.button.cancel button, span.button.cancel input, del.button.cancel span {
    background: transparent url(http://media.freakatars.com/images/brown_btn_UP.png) no-repeat top center;
    width: 70px; height: 29px;
}

a.button.cancel:hover span, span.button.cancel:hover button, a.button.cancel:focus span, span.button.cancel:hover input {
	background-image: url(http://media.freakatars.com/images/brown_btn_OVER.png);
	text-decoration:none;
}
*/

/* view all freakatars button */
a.view-all {
		background:transparent url(http://media.freakatars.com/images/view-all-btn.gif) no-repeat scroll 0 0;
		display:block;
		height:39px;
		text-indent:-9999px;
		width:216px;
		margin: 0px auto;
	}
	a.view-all:hover {
		background-position:0 -39px;
	}
	


/* Corporate Styles ---------------------------------------------*/
/* background color setup */
/* -- begin: no longer needed, here in case the layouts aren't updated with the new
  filler divs that are used globally -- */
#pageWrapper.corporate #content-top,
#pageWrapper.corporate #content-bottom {
	position: relative;
	z-index: 2;
}
#pageWrapper.corporate #content,
.corporate-content-top,
.corporate-content-bottom { 
	background-color: #FFF; 
	position: relative;
}


.corporate #page #content .content-top-filler, 
.corporate #page #content .content-bottom-filler {
	background-color: #FFF;
}
	
.corporate-content-top {
	position: absolute;
	z-index: 1;
	width: 934px; height: 22px;
	top: -22px; left: 13px;
}
.corporate-content-bottom {
	position: absolute;
	z-index: 1;
	width: 934px; height: 22px;
	bottom: -20px; left: 13px;
}
/* -- end: no longer needed (see above) -- */

/* corporate general styles */
#pageWrapper.corporate div.left {
	position: relative;
}
#pageWrapper.corporate div.right {
	margin-right: 45px;
	width: 530px;
}
	#pageWrapper.corporate div.right h3, #pageWrapper.corporate h2.title,
	#pageWrapper.corporate h3.uppercase {
		margin: 40px 0px 20px 0px;
		font-size: 24px;
		text-transform: uppercase;
		font-weight: bold;
		color: #636363;
	}
	#pageWrapper.corporate div.right h3.first {
		margin-top: 25px;
	}
#pageWrapper.corporate h3.uppercase {
	margin: 0px 0px 7px 0px;
	font-size: 14px;
}
#pageWrapper.corporate h4 {
	color: #636363;
}
#pageWrapper.corporate p,
#pageWrapper.corporate div.right p,
#pageWrapper.corporate ul.showBullets,
#pageWrapper.corporate ol {
	padding-bottom: 20px;
	color: #999999;
}
#pageWrapper.corporate ul.showBullets li,
#pageWrapper.corporate ol li { padding: 5px 0px; }

#pageWrapper.corporate div.right p {
	padding-left: 7px;
}
#pageWrapper.corporate p.orange {
	padding-bottom: 10px;
	color: #FC981E;
	font-size: 18px;
	text-transform: uppercase;
}


#aboutUs-panel, #contact-panel { /* 206x202 */
	padding: 62px 0px 0px 25px;
	background: transparent url(http://media.freakatars.com/images/about_us_panel.png) no-repeat top center;
	width: 181px; height: 140px;
	position: absolute; z-index: 3;
	top: -25px; left: 40px;
}
	#aboutUs-panel h2, #contact-panel h2 { margin-bottom: 15px; color: #863811; font-weight: bold; font-size: 16px; }
	#aboutUs-panel li {
		margin: 0 0 7px 14px;
		list-style: circle;
		text-transform: uppercase;
	}
	#aboutUs-panel a { color: #7F6558; }
	#contact-panel { 
		padding: 62px 30px 0px; 
		width: 146px; 
		left: 630px; 
		text-align: center;
		font-size: 13px;
		text-transform: uppercase;
	}
	#contact-panel p { padding-left: 2px; color: #707070 !important; }

#contact-form {
	margin-left: 30px;
	float: left;
	width: 450px;
}
	#contact-form input {
		margin-right: 3px;
		margin-bottom: 15px;
		padding-top: 3px;
		width: 210px; height: 22px;
	}
	#contact-form textarea {
		margin-bottom: 15px;
		width: 445px; height: 120px;
	}

div.clear.to-top {
	margin-bottom: 40px;
	padding-right: 30px;
	text-align: right;
}
	div.clear.to-top a { color: #838383; }

/* microformat styles */
dl.vcard {
	margin: 0px 0px 10px 0px;
	clear: both;
	float: left;
	width: 530px;
}
dd.image {
	margin-right: 5px;
	width: 80px; height: 100px;
	background: #fff;
	float: left;
	border: 0px;
}
dd.fn {
	margin-top: 34px;
	font-size: 14px;
	font-weight: bold;
}
dd.email a { color: #838383; font-weight: normal; }
dd.note {
	margin-top: 15px; padding-left: 7px;
	color: #999999;
}


/* Creator Styles ----------------------------------------------*/
#pageWrapper.create #content {
	padding: 0px;
}
#flashAlternateContent {
	background: transparent url(http://media.freakatars.com/images/no_flash.gif) no-repeat center center;
	width: 958px; height: 541px;
	cursor: pointer;
}

/* Hide border on page */
#pageWrapper.create #content, #pageWrapper.create #content-top, #pageWrapper.create #content-bottom { background: 0; }
    #pageWrapper.create #content-bottom, #pageWrapper.create #content-top { display: none; }
	

/* Pagination Styles -------------------------------------------*/

.paginationWrapper {
	position: relative;
	*margin-top: 10px;
	*margin-bottom: 10px;
}			

ul.pagination {
	float: right;
	text-transform: uppercase;
	font-size: 12px;
}
	ul.pagination li {
		margin: 0px 1px;
		float: left;
	}
	ul.pagination li a {
		text-decoration: underline;
	}
	ul.pagination li a,
	ul.pagination li strong {
		margin-top: 33px;
		padding: 2px;
		display: block;
	}
	
	
	ul.pagination li.next a {
		margin: 0;
		padding: 3px;
		display: block;
		background: transparent url(http://media.freakatars.com/images/global/pagination-next-btn.gif) no-repeat scroll 0 0;
    	height: 42px;
		width: 38px; 
		text-indent:-9999px;
	}
	ul.pagination li.next a:hover {
		background-position:0 -52px;
	}
	
	ul.pagination li.previous a {
		margin: 0;
		padding: 3px;
		display: block;
		background: transparent url(http://media.freakatars.com/images/global/pagination-previous-btn.gif) no-repeat scroll 0 0;
    	height: 42px;
		width: 38px; 
		text-indent:-9999px;
	}
	ul.pagination li.previous a:hover {
		background-position:0 -52px;
	}

/* Footer Styles -----------------------------------------------*/

#footer {
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9em;
	position: relative;
}
    #footer a { color: #aaa; }
    #footer a:hover { text-decoration: underline; }
    #footer ul {
        margin: auto;
        display:-moz-box;
        display:inline-block;
        zoom:1;
        *display:inline
    }
    #footer ul li {
        margin: 0px 12px;
        float: left;
		white-space: nowrap;
    }
    #footer p {
        clear: both;
        margin: 20px 0px;
        color: #d0d0d0;
    }
	
	#footer .kidzui-logo {
		width: 91px;
		height: 59px;
		position: absolute;
		right: 50px;
	}
	
.smallGreyText {
	color: #333333;
	font-size: 9px;
}

.smallGreyText a:hover {
	text-decoration: underline;
	cursor: pointer;
}


/* Freakatar Card Styles------------------------------------------*/

.freakatar-card {
	width: 213px;
	height: 318px;
	background: #999;
	display: inline-block;
	border: 1px solid #333;
	margin: 0px auto;
}

	.freakatar-card .freakatarImage {
		margin: 5px auto;
		width: 200px;
		height: 200px;
		border: 1px solid #333333;
		background: url(http://media.freakatars.com/images/cage_bg.jpg) no-repeat top center;
	}
	
	.freakatar-card .cryostasisImage {
		margin: 5px auto;
		width: 200px;
		height: 200px;
		border: 1px solid #333333;
		background: url(http://media.freakatars.com/images/cryo_bkg.jpg) no-repeat top center;
	}
	
	.freakatar-card .cryostasisImage .cryostasisOverlay {
		behavior: url(/styles/iepngfix.htc);
		background: url(http://media.freakatars.com/images/cryo_overlay.png) no-repeat top center;
		width: 200px;
		height: 200px;
		position: absolute;
	}


	.freakatar-card .freakatarImage img {
		behavior: url(/styles/iepngfix.htc);
		display: block;
		width: 200px; height: 200px;
	}


/* Rating and  Views */
	
	.freakatar-card .ratingHungerWrapper .hungerMeterWrapper {
		display:block;
		position:relative;
		left: 6px;
		top: 10px;
	}

		.freakatar-card .ratingHungerWrapper .hungerMeterWrapper .hungerMeterBG {
			width: 126px;
			height: 18px;
			position: absolute;
			background: url(http://media.freakatars.com/images/health_bar_bkg.png) no-repeat top center;
			behavior: url(/styles/iepngfix.htc);
		}
		
		.freakatar-card .ratingHungerWrapper .hungerMeterWrapper .hungerMeterFill {
			width: 126px;
			height: 18px;
			position: absolute;
			background: url(http://media.freakatars.com/images/health_bar_overlay.png) no-repeat top center;
			behavior: url(/styles/iepngfix.htc);
		}
		
		.freakatar-card .ratingHungerWrapper .hungerMeterWrapper .hungerMeterText {
			font-size: 11px;
			font-weight: bold;
			color: #FFF;
			position: absolute;
			top: 2px;
			left: 10px;
		}
	
	.freakatar-card .ratingHungerWrapper .ratingWrapper {
		padding: 0px;
		position: relative;
		font-size: 10px;
		right: 6px;
		top: 2px;
	}
		.freakatar-card .ratingHungerWrapper .ratingWrapper img {
			behavior: url(/styles/iepngfix.htc);
		}

/* Feed and Print Buttons */
.freakatar-card .feedPrintWrapper {
	display: inline-block;
	width: 175px;
	margin: 0px auto;
}
	.freakatar-card .feedPrintWrapperVisitor {
		display: inline-block;
		width: 195px;
		margin: 0px auto;
	}
	.freakatar-card .printWrapperCenter {
		display: inline-block;
		margin: 0px auto;
		width: 30px;
	}
	
	.freakatar-card .feedPrintWrapper .printWrapper {
		margin: 0px 5px;
	}
	
	
	/* New Styles */
	a.card-feed {
		background:transparent url(http://media.freakatars.com/images/feed-btn.png) no-repeat scroll 0 0;
		display:block;
		height:22px;
		text-indent:-9999px;
		width:67px;
	}
	a.card-feed:hover {
		background-position:0 -22px;
	}
	
	a.card-getit {
		background:transparent url(http://media.freakatars.com/images/getit-btn.png) no-repeat scroll 0 0;
		display:block;
		height:22px;
		text-indent:-9999px;
		width:67px;
	}
	a.card-getit:hover {
		background-position:0 -22px;
	}
	
	a.card-print {
		background:transparent url(http://media.freakatars.com/images/print-btn.png) no-repeat scroll 0 0;
		display:block;
		height:22px;
		text-indent:-9999px;
		width:30px;
	}
	a.card-print:hover {
		background-position:0 -22px;
	}
	
	a.card-favorite {
		background:transparent url(http://media.freakatars.com/images/favorite-btn.gif) no-repeat scroll 0 0;
		display:block;
		height:22px;
		text-indent:-9999px;
		width:87px;
	}
	a.card-favorite:hover {
		background-position:0 -22px;
	}
	
	
	
	a.favoritedButton, a.favoritedButton:visited, a.favoritedButton:active {
		display: block;
		width: 87px; height: 22px;
		background: transparent url(http://media.freakatars.com/images/favorited_btn.png) no-repeat center center;
	}
    a.feedButtonGlow, a.feedButtonGlow:visited, a.feedButtonGlow:active {
		display: block;
		width: 67px; height: 22px;
		background: url(http://media.freakatars.com/images/feed_btn_glow.gif) no-repeat center center;
	}
				
							
.freakatar-card .ratingWrapper {
	font-weight:bold;
	padding:5px 5px 0;
}

	.searchResultsWrapper .freakatar-card .ratingWrapper, .myFreakatars .freakatar-card .ratingWrapper {
		width: 203px;
	}
	
	.myFreakatars .freakatar-card .myFreakatarsRatingWrapper {
		width: 70px;
	}

	

	.freakatar-card .ratingWrapper .ratingSelector {	/* wraps stars and text, can't put text inside of ratingWrapper because contents get altered in the JS */
		padding-left: 5px;
	}
	
	.freakatar-card .ratingWrapper .ratingMessage {	/* to help with centering inside the card */
		font-size: 12px;
		/*padding-left: 15px;*/
	}

/* Add padding to adjust for letter g in rating making div taller */
#ratingGraphic img {
	padding-bottom:1px;
	vertical-align:bottom;
}

/* User Data Text Styles */
.freakatar-card .userData {
	text-align: center;
	vertical-align: middle;
	display: block;
	text-transform: uppercase;
	background: #ccc;
	margin: 5px;
	width: 202pxl
	height: 45px;
	padding: 3px;
	border: 1px solid #333;
}

.freakatar-card .userData .freakatarName {
	font-size:12px;
	font-weight: bold;
	color: #333333;
}

.freakatar-card .userData .creatorName, .freakatar-card .userData .bornOnDate {
	font-size:10px;
	color: #333;
}

.cardListWrapper {
	width: 100%;
}

ul.cardList {
	clear: both;
    float: left;
	width: 100%;
}
    ul.cardList #cardWrapper {
		margin: 0px 0px 15px 0px;
		float: left;
		text-align: center;
		width: 24.9%;
		height: 318px;
		display: inline;
    }

/* Ratings - main styles are in ui.f.css */

.ratingWrapper {
	float: left;
}

.printWrapper {
	float: right;
}

a.print, a.print:hover, a.print:visited, a.print:active {
	display: block;
	width: 80px; height: 30px;
	background: transparent url(http://media.freakatars.com/images/print_btn_UP.gif) no-repeat center center;
}
a.print:hover { background: transparent url(http://media.freakatars.com/images/print_btn_OVER.gif) no-repeat center center; }




/* Community Search Page Listing Styles ----------------------*/
#pageWrapper.search #content {
	padding: 0 20px; /* override the default padding size */
}

#pageWrapper.searchResultsWrapper #content {
	padding: 0 20px; /* override the default padding size */
}
#pageWrapper.searchResultsWrapper #content ul.pagination {
	margin-right: 9px;
}
#pageWrapper.searchResultsWrapper #content .searchWrapper {
	margin-left: 9px;
}

/* Search Box Style */

/*.searchWrapper .searchFormWrapper {
	width: 260px;
	height: 60px;
	border: solid #000000 2px;
	background-color: #808ea8;
	display: table-cell;
	vertical-align: middle;
}

.searchWrapper .searchFormWrapper .searchForm {
	margin: 0px auto;
	width: 210px;
}
.searchWrapper .searchFormWrapper .searchForm input { 
	margin-bottom: 0px; 
	float: left; 
	height: 20px;
}*/
/*.searchWrapper .searchFormWrapper .searchForm input#query { height: 17px; }*/

.searchWrapper label {
	margin-left: 28px;
	color: #fff;
	font-weight: normal;
	font-size: 12px;
	text-align: left;
}


/* Community Styles ------------------------------------------*/

.community #content {
	background-color: #ffffed; 
	position: relative;
}

.community .content-top-color {
	background-color: #ffffed;
}

.community .pageWrapper {
	width: 100%;
	height: 100%;
	padding-top: 20px;
	background-color: #ffffed;
}

.community .pageWrapper .left {
	float: left;
	width: 582px;
}

.community .pageWrapper .right {
	float: right;

}

.community .pageWrapper .bottom {
	margin: 35px auto 0px auto;
}

.community .pageWrapper .bottom .newest {
	background-color: #aeae8b;
	border: solid #000000 2px;
	padding: 20px 0px 20px 30px;
}

.community .pageWrapper .bottom .newest .creatureWrapper {
	margin: 15px 0px 10px 0px;
	display: inline-block;
	height: 420px;
}


.community .pageWrapper .text {
	font-family: arial,clean,sans-serif;
	font-size: normal; 
}

.community .pageWrapper .text .footer {
	font-variant: small-caps;
	line-height: 5.00;
}

.community .pageWrapper .text h3 {
	font-size: large;
	line-height: 3.00;
}

.community .pageWrapper .communityLeft hr {
	color: #ccccbe;
	height: 1px;
}


#freaky-weekly-banner {
	margin-bottom: 20px;
}

#community-post-icon {
	vertical-align: middle;
	margin: 10px;
}


#community-springy-ad {
	width: 264px;
	height: 171px;
	cursor: pointer;
}

.community .bottom #community-newest-freakatars {
	width: 907px;
	height: 20px;
	padding-bottom: 5px;
}

.community .bottom .creature {
	width: 200px;
	height: 200px;
	border: solid #6b684d 2px;
	float: left;
	margin: 3px; 
	display: block;
	background: transparent url(http://media.freakatars.com/images/freakweek_cage.jpg) no-repeat top left;
}

.community .bottom .creature img {
	behavior: url(/styles/iepngfix.htc);
}

.communityCol h2 {
	padding-bottom: 10px;
}


/* Community winners */
.monthlyWinners {
	width: 630px;
	display: block;
	position: relative;
	margin-top: 20px;
}

.monthlyWinners li {
	display: block;
	float: left;
	margin-right: 10px;
	width: 160px;
}

.monthlyWinners li img {
	border: solid 2px #ffcc00;
	background:transparent url(http://media.freakatars.com/images/freakweek_cage.jpg) no-repeat scroll left top;
	width: 100px;
	height: 100px;
}

.monthlyWinners h4 {
	text-transform: uppercase;
}



/* Search Results Page Styles */

.searchResultsMessage {
	margin-leftL 9px;
	margin-top: 10px;
	color: #333;
	margin: 8px 0 10px 9px ;
}

.searchResultsMessage h2 {
	font-size: 20px;
}

.searchResultsMessage var {
	color: #993333;
}