* {
    margin: 0px;
    padding: 0px;
}

body {
    background-image: url("images/background.jpg");
    background-color: #161527;
    background-repeat: no-repeat;
    background-position: 50% 0px;
    font-family: "Lucida Grande", arial, verdana, sans-serif;
    padding: 0px;
}

body.frontpage {
    background-image: url("images/background_frontpage.jpg");
}

/**********************************************************
 *  HEADER STYLES
 **********************************************************/

#header {
    width: 100%;
    height: 62px;
    background-image: url("images/login_background.png"); 
    color: #FFF;
    font-family: verdana;  
    font-size: 10pt;
    background-position: left bottom;
}

#header.logged_in {
    height: 37px;   
}

#header_main {
    width: 750px;
    height: 48px;
    margin: auto;
    padding: 7px 0px;   
}

#header.logged_in #header_main {
    height: 23px;
}

#header_main .left {
    float: left;   
}

#header_main .right {
    float: right;
    width: 325px; 
    height: 40px;  
}

#header.logged_in #header_main .right {
    text-align: right;   
    margin-top: -8px;
    height: 10px;
    vertical-align: middle;
}

#header_main a {
    color: #FFF;
    text-decoration: none;
    font-size: 9pt;   
}

#header_main a:hover {
    text-decoration: underline;   
}

#header_main input {
    font-family: verdana; 
    margin-bottom: 5px;  
    color: #666;
}

#header.logged_in #header_main input {
    margin-top: 5px;   
}

#header_main.forum input {
    font-size: 8pt;
    vertical-align: baseline;   
}

#header_main label {
    font-size: 8pt;  
    color: #FFF;
}

#header_main .login_button {
    margin-top: -20px;
    margin-left: 90px;
}

#header_main .logout_button, #header_main .login_button {
    color: #000;   
}

/**********************************************************
 *  MAIN STYLES
 **********************************************************/
 #top {
    margin: auto;
    width: 800px;
 }
 
 #top.forum {
    position: relative;
    top: 0px;  
 }
 
 #top a img {
    border: none;
    margin-left: 25px;
    margin-top: 6px;
 }
 
 #top .main_logo {
    float: left;  
 }
 
 body.frontpage #top a img {
    margin-left: 5px;
 }
 
 body.frontpage #top .site_description {
    font-family: "Lucida Grande", arial, verdana, sans-serif;
    font-weight: bold;
    line-height: 30px;
    font-size: 15pt;
    color: #0D0D0D; 
    margin-left: 13px;
 }
 
 body.frontpage #top .left {
    margin-left: 13px; 
    margin-top: 25px;   
 }
 
 body.frontpage #top .left a {
    background-image: url("images/what_is_totem.png");
    display: block;
    width: 273px;
    height: 42px;
    text-indent: -10000em;  
    margin-top: 5px;
    font-size: 0px;
    text-decoration: none;
 }
 
 body.frontpage #top .left a:hover {
    background-position: 0px 42px;
 }
 
 #top .right {
    float: right;   
 }
 
 #top .right a {
    background-image: url("images/main_signup.png");
    display: block;
    width: 185px;
    height: 35px;
    text-indent: -10000em;  
    font-size: 0px;
    margin-right: 20px;
    margin-top: 10px;
 }
 
 #top.logged_in .right a {
    margin-top: 10px;
 }
 
 #top .right a:hover {
    background-position: 0px 35px;
 }
 
 body.frontpage #top .right {
    margin-bottom: -20px;  
 }
 
 body.frontpage #top .right a {
    background-image: url("images/signup.png");
    display: block;
    width: 288px;
    height: 55px;
    text-indent: -10000em;  
    font-size: 0px;
    margin-right: 20px;
    margin-top: 40px;
    margin-bottom:12px;
 }
 
 body.frontpage #top .right a:hover {
    background-position: 0px 55px;
 }
 
 body.frontpage #top .donate {
    float:right;
    margin-right: 15px;  
 }
 
 #top .bodydonate {
    margin-top: 16px;  
 }
 
/**********************************************************
 *  NAVBAR STYLES
 **********************************************************/
 
 #navbar {
  
    width: 800px;
    margin: auto;
    padding-right: 80px;
 }
 
 
 #main_nav {
    float: right;
    margin-top: -15px;
    margin-right: -20px;
    position: relative;
    width: 820px;
 }
 
 body.frontpage #main_nav {
    margin-top: 14px;  
 }
 
  
 body.frontpage #navbar.logged_in #main_nav{
    margin-top: 39px;  
 }
  
 #main_nav a {
    display: block;
    background-image: url("images/navbar.png");
    background-repeat: no-repeat; 
    height: 36px;
    position: relative;
    z-index: 10;
 }
 
 #main_nav a#navbar_world_map {
    width: 115px;
    height: 36px;     
 }

 
 #main_nav li {
    float: right;
    font-size: 0px;
    list-style: none;  
    width: auto;
    overflow: visible;
 }
 
 #main_nav li .navbar_mainnav {
    text-indent: -1000px;
 }
 
 #main_nav a#navbar_my_account {
    background-position: -115px 0px; 
    width: 119px;
 }
 
 body.my_account #main_nav a#navbar_my_account {
    background-position: -115px bottom;  
 }
 

 #main_nav a#navbar_community{
    background-position: -234px 0px; 
    width: 115px; 
 }
 
 body.community #main_nav a#navbar_community, #navbar.forum #main_nav a#navbar_community {
    background-position: -234px bottom;  
 }
 

 #main_nav a#navbar_help {
    background-position: -349px 0px;  
    width: 58px;
 }
 
 body.help #main_nav a#navbar_help {
    background-position: -349px bottom;  
 }
 

 
 #navbar .navbar_subnav {
    display: none;
    background-image: url("images/subnav.png");
    background-repeat: no-repeat;
    position: absolute;
    right: 9px;
    margin-top: -8px;
    z-index: 0;
    width: auto;
    overflow: visible;
    text-align: center;
 }
 
 #navbar #main_nav .navbar_subnav li {
    font-size: 10pt;
    text-indent: 0px;
    line-height: 36px; 
    display: inline; 
    overflow: visible;
    text-indent: 0px;
    
 }
 
 #navbar .navbar_subnav a {
    display: inline;
    background-image: none; 
    padding: 0px 10px;
    text-decoration: none;
    text-indent: 0px;
 } 
 
 #navbar .navbar_subnav a:hover {
    text-decoration: underline;  
 }
 
 #navbar .navbar_subnav a:visited {
    color: #00C;  
 }
 
 #navbar .navbar_subnav a:link {
    color: #00C;
 }
 
 #navbar .navbar_subnav .last {
    background-image: url("images/subnav_end.png");
    background-repeat: no-repeat;
    background-position: top right; 
    margin-right: -8px; 
 }
 
 #navbar .navbar_subnav .last a {
    padding: 0px 2px 0px 10px;
    margin-right: 8px;  
 }
 
 #navbar #nav_filler {
    float:right;
    width: 20px;  
 }

 /**********************************************************
 *  MAIN STYLES
 **********************************************************/
 #main {
    width: 800px;
    margin: auto;
    min-height: 300px;  
    margin-top: -19px;
    background-image: url("images/default_banner.png");
    background-repeat: no-repeat;
    padding-top: 66px;
 }
 
 #main.forum {
    background-image: none;  
    margin-top: -30px;
    padding-top: 0px;
 }
 
 body.community #main {
    background-image: url("images/community.png");
 }
 
 body.my_account #main {
    background-image: url("images/my_account.png");
 }
 
 body.help #main {
    background-image: url("images/my_account.png");
 }
 
 .frontpage #main {
    padding-top: 57px;
    background-image: url("images/frontpage_corners_top.png"); 
 }
 
 #main_wrapper {
    background-color: #FFF;  
 }
 
 #maincontent {
    background-color: #FFF;
    width: 460px;
    min-height: 300px;
    padding: 20px 20px 20px 20px;
	color: #000000;
	font-size: 10pt;
 }
 
 body.frontpage #maincontent {
    margin-right: 0px;
    padding: 1px 20px 5px 20px;
    width: 760px;
    font-size: 11pt;
 }
 
 #maincontent  p {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	font-size: 10pt;
	line-height: 14pt;
}
#maincontent  h1 {
	padding: 0px;
	color: #066472;
	font-size: 22pt;
	font-weight: lighter;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 25px;
	margin-left: 0px;
}
#maincontent h2 {
	color: #421406;
	font-size: 10pt;
	font-weight: bold;
	padding-top: 25px;
	padding-right: 0px;
	padding-bottom: 10px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-left: 0px;
	letter-spacing: .3em;
	text-transform: uppercase;
	background-image: url(images/maincontent_h2.gif);
	background-repeat: no-repeat;
	background-position: left 18px;
}

/* maincontent h5 is used on the Submitting Art / Art FAQ page to give a different look. */

#maincontent h5 {
	font-size: 12pt;
	color: #647F27;
	margin-top: 35px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	font-weight: normal;
}

#maincontent table {
	font-size: 9pt;
}


#maincontent ul, #maincontent ol {
    margin-top: 11px;
    padding-left: 40px;   
}

/* These are some maincontent classes that are used here and there. */

#maincontent .text {
	margin-bottom: 10px;
	margin-left: 20px;
	margin-top: 0px;
	font-size: 9pt;
}

/*  .error controls how error message look when someone, for isntance, tries to sign up with an invalid email address. */

#maincontent .error {
	color: #BB0000;
}


#maincontent  .calloutb {
	font-weight: bold;
	color: #f2630b;
}

/* img.pose is used in the Art FAQ/ Submit Art for adding some padding and floating images to the left. */

#maincontent  img.pose {
	float: right;
	margin-left: 10px;
}




/* These are the classes used to organize the submission thumbnails and make them into a block of thumbs. */


#maincontent ul.submissions {
	margin: 0px;
	padding: 0px;
}
#maincontent ul.submissions li {
	margin: 0px;
	float: left;
	list-style-type: none;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#maincontent ul.submissions li p {
	text-align: center;
	font-size: 8pt;
}

/**********************************************************
 *  FRONTPAGE STYLES
 **********************************************************/
#news_slideshow {
    float: left;
    width: 220px;
    height: 290px;
    margin-top: 5px;
    padding: 10px;
    background-image: url("images/news_slideshow.gif");
    background-repeat: no-repeat;
    overflow: hidden;
}

#main #news_slideshow a {
    text-decoration: none;
    border: none;   
}

#news_slideshow img {
    border: none;
}

#news_1, #news_2, #news_3 {
    display: none;
}

#news_slideshow .controls {
    width: 220px;   
    position: relative;
    padding-top: 5px;
}

#news_slideshow .dots {
    width: 62px;
    height: 6px;
    background-image: url("images/news/dots.gif");
    background-position: 0px 0px;  
    background-repeat: no-repeat;
    margin-left: 66px;
    margin-top: 6px;
    position: absolute;
}

#news_slideshow .left_arrow {
    text-indent: -10000em;  
    font-size: 0px; 
    border: none;
    background-image: url("images/news/arrows.gif");
    background-position: top left;
    background-repeat: no-repeat;
    height: 17px;
    width: 15px;
    cursor: pointer;
    float:left;
}

#news_slideshow .left_arrow:hover {
    background-position: bottom left;
}

#news_slideshow .right_arrow {
    text-indent: -10000em;   
    font-size: 0px;
    border: none;
    background-image: url("images/news/arrows.gif");
    background-position: top right;
    background-repeat: no-repeat;
    height: 17px;
    width: 15px;
    cursor: pointer;
    float: right;
}

#news_slideshow .right_arrow:hover {
    background-position: bottom right;
}

#news_slideshow .pause_play {
    text-indent: -10000em;
    font-size: 0px;
    border: none;
    position: absolute;
    background-image: url("images/news/play_pause.gif");
    height: 14px;
    width: 13px;
    background-repeat: no-repeat;
    background-position: top right;   
    margin-left: 138px;
    margin-top: 2px;
    cursor: pointer;
}

#news_slideshow .pause_play:hover {
    background-position: bottom right;
}

#news_slideshow ul {
    height: 250px;
    overflow: hidden;  
    padding: 0px;
    margin: 0px; 
}

#news_slideshow ul li {
    list-style: none; 
    text-align: center;
}

#news_slideshow h1 {
    color: #06C;
    font-size: 11pt;
    text-transform: uppercase;
    font-weight: bold;   
    margin: 0px 0px 5px;
}

#news_slideshow p {
    font-size: 9pt; 
    color: #666;    
}

#main #sharebox {
    margin-left: 271px;
    margin-top: 5px;  
    text-decoration: none;
    border: none; 
}

#main #sharebox a {
    text-decoration: none;
    border: none; 
}

#screenshots {
    margin-top: -40px;   
    margin-left: 250px;
}

#screenshots h2 {
    margin-left: 200px;   
    padding-top: 19px;
    background-position: left 12px;
    margin-bottom: 3px;
}

#main #screenshots a {
    margin-left: 22px;
    text-decoration: none;
    border: none;
}

#screenshots img {

    border: none;
}

#community {
    width: 479px;
    height: 205px; 
    margin-left: 273px;  
    margin-top: 10px;
    overflow: hidden;
}

#community .left {
    float: left;
}

#community .right {
    float: right;
}

#community .box {
    height: 90px;
    width: 225px;
    margin-bottom: 25px;
    cursor: pointer;
}

#community .box .detail_text {
    font-size: 9pt;
    padding: 8px 10px;
    line-height: 14pt;
    color: #FFF;  
    text-indent: -10000px; 
}

#community_artists_market {
    background-image: url("images/community_images.jpg");
    background-repeat: no-repeat;   
}

#community_forums {
    background-image: url("images/community_images.jpg");
    background-repeat: no-repeat;   
    background-position: -223px 0px;
}

#community_quick_start {
    background-image: url("images/community_images.jpg");
    background-repeat: no-repeat;   
    background-position: -447px 0px;
}

 /**********************************************************
 *  FOOTER STYLES
 **********************************************************/
 #footer {
    text-align: center;
    margin: auto;
    width: 800px;
    height: 30px;
    padding-top: 15px;
    font-size: 8pt;
    color: #666;  
    background-image: url("images/main_corners.png");
    background-repeat: no-repeat;
    background-position: 0px -8px;
 }
 
 /* - - - SIDEBAR 
This div comes before the #maincontent div and both of them are within the "main" div - - - */

#sidebar {
	float: right;
	width: 260px;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 20px;
	border-left-width: 1px;
	border-left-style: none;
	border-left-color: #CCCCCC;
	margin: 0px;
}
#sidebar p {
	font-size: 8pt;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-left: 10px;
	color: #333333;
	line-height: 13pt;
	margin-top: 0px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #CCCCCC;
}

/* These sidebar headers are used all over the place to give a different background image, just for some variety. */

#sidebar  h3.one {
	color: #003399;
	font-size: 12pt;
	font-weight: bold;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 21px;
	background-repeat: no-repeat;
	background-position: left 3px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -4px;
	margin-left: -10px;
	background-image: url(images/sidebar_h3_one.gif);
}

#sidebar  h3.two {
	color: #FF3300;
	font-size: 12pt;
	font-weight: bold;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 21px;
	background-repeat: no-repeat;
	background-position: left 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -4px;
	margin-left: -10px;
	background-image: url(images/sidebar_h3_two.gif);
}

#sidebar  h3.three {
	color: #660066;
	font-size: 12pt;
	font-weight: bold;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 21px;
	background-repeat: no-repeat;
	background-position: left 13px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: -4px;
	margin-left: -10px;
	background-image: url(images/sidebar_h3_three.gif);
}
#sidebar a:link {
	background-color: #DFEBFE;
}
#sidebar a:visited {
	background-color: #DFEBFE;
}
#sidebar a:hover {
	background-color: #FFFFFF;
}

#sidebar a:active {
	background-color: #DFEBFE;
}



 
 /**********************************************************
 *  MISC STYLES
 **********************************************************/

.clear {
    clear: both;   
}

/* Random classes that are used throughout the site. */

loadable{
	background-image: url(images/loadingpage.gif);
}




/* .details is the little blue text that appears on a lot of the forms. */

#maincontent .details {
	font-size: 8pt;
	color: #638A98;
	line-height: 10pt;
}


/* These classes make it so that linked images have no border or link decoration. */

#main_wrapper a:link img   {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#main_wrapper a:visited img {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#main_wrapper a:hover img {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#main_wrapper a:active img {
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}





.floatleft {
	float: left;
}

.floatright {
	float: right;
}

.popup {
    background-image: none;
}

.popup #wrapper {
    background-image: url(images/popup_top.gif);
    background-repeat: no-repeat;
    padding-top: 29px;
    width: 799px;
}

.popup #wrapper #maincontent {
    margin-right: 0px;
    padding-right: 25px;
    height: 510px;
    overflow: auto;
}

.popup #wrapper #main {
    padding: 0px;
}

#main #main_wrapper  a:link {
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #0066CC;
	color: #0066CC;
}
#main #main_wrapper  a:visited {
	text-decoration: none;
	color: #0066CC;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #0066CC;
}
#main #main_wrapper  a:hover {
	text-decoration: none;
	border-bottom-style: solid;
	color: #0066CC;
	border-bottom-width: 1px;
	border-bottom-color: #0066CC;
}
#main #main_wrapper  a:active {
	text-decoration: none;
	border-bottom-style: solid;
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-color: #0066CC;
}


#footer_main {
	font-size: 8pt;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 25px;
	padding-left: 2px;
	height: 150px;
	background-image: url(images/footer_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	color: #999999;
}
#footer_main ul {
	float: left;
	padding-left: 40px;
	margin-top: 11px;
}
#footer_main ul li {
	padding-top: 1px;
	padding-bottom: 1px;
}
#footer_main ul.copyright {
	list-style-type: none;
	margin-top: 10px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	padding-top: 20px;
	padding-bottom: 0px;
	padding-right: 35px;
	margin-left: 0px;
	padding-left: 25px;
	font-size: 7pt;
	margin-right: -15px;
}
#footer_main ul.preferences {
	list-style-image: url(images/bullets/red.png);
	font-weight: normal;
}
#footer_main ul.forums {
	list-style-image: url(images/bullets/yellow.png);
}
#footer_main ul.home {
	list-style-image: url(images/bullets/blue.png);
}
#footer_main ul.faq {
	list-style-image: url(images/bullets/green.png);
}
#footer_main ul.troubleshoot {
	list-style-image: url(images/bullets/magenta.png);
}
#footer_main a:link {
	text-decoration: none;
	color: #999999;
}
#footer_main a:visited {
	color: #999999;
	text-decoration: none;
}
#footer_main a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
#footer_main a:active {
	color: #FFFFFF;
	text-decoration: underline;
}