/* Global utility stylesheet */
/* This is stuff that is common across all oc pages and should work fine in all modern browsers */
/* $Id: layout_macie5.css 30875 2006-04-16 01:12:08Z brian $ */


/* Global utility classes and IDs */
#main {
}
#tribe {
  border: none;
  margin-right: 180px;  
}
#masthead {
  padding: 1.5em 1em;
}
#footer {
  padding: 1.5em;
  text-align: center;
}
#footer p {
  margin: 0;
}

#ad {
  position: absolute;
  right: 0;
  top: 10px;
  width: 180px;
  text-align: center;
}

#unsupportedBrowsers {
  margin-right: 180px;  
}

.left {
}

.right {
}

.clear,.spacer {
  clear:both;
}

.text_center, .centered {
  text-align: center;
}

.text_left {
  text-align: left;
}

.text_right {
  text-align: right;
}

/* utility links (deprecated: title-links) are the little links that appear in title bars such as "View All >" or "Back >" */
.utility-link a:link, .utility-link a:visited, .title-link a:link, .title-link a:visited, .pagination a:link, .pagination a:visited { color:#000; }
a.utility-link:link, a.utility-link:visited, a.title-link:link, a.title-link:visited { color:#000; }


/* Default Tabs */
/* Other types of tabs are defined after this section or inline */

#tabs .text {
	padding: 1em 0em 1.5em;
	text-align: center;
}

#tabs .tabs {
	clear: both;
	padding-left: 10px;
	font-size: 12px;
	border-bottom: 2px solid #999;
	margin-bottom: 10px;
}
#tabs .tabs .tab {
	display: inline;
	background: url("/tribe/images/redesign/tabs/configure_off_left.gif") no-repeat left top;
	margin: 0;
	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-right: 2px;
}
html>body #tabs .tabs .tab { 			/* IE 4+ doesn't see this */
	padding-top: 2px;
	padding-bottom: 2px;
}
#tabs .tabs .tab a {
	background:url("/tribe/images/redesign/tabs/configure_off_right.gif") no-repeat right top;
	margin: 0;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	text-decoration:none;
	font-weight:bold;
	color:#FFFFFF;
}
#tabs .tabs .current {
	background-image:url("/tribe/images/redesign/tabs/configure_on_left.gif");
}
#tabs .tabs .current a {
	background-image:url("/tribe/images/redesign/tabs/configure_on_right.gif");
	color:#000000;
}
#tabs .tabbed-content {
	padding-top: 1em;
}
	#tabs .tabbed-content .current {
		display: block;
	}
	#tabs .tabbed-content .hidden {
		display: none;
	}

.container {
  display: block;
  clear: both;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 0 8px 8px 8px;
}

.first {
  margin-top: 10px;
}

/* Module Classes */

.configureModule, .removeModule, .moduleToggle, .moduleTitle {
  display: inline;
}

.moduleControls {
  float: right;
}

.moduleControls .configureModule img {
  background: url("/tribe/images/redesign/module_configure.gif") no-repeat ;
  margin-top: 2px;
  width: 13px;
  height: 10px;
}
.moduleControls .removeModule img {
  background: url("/tribe/images/redesign/module_close.gif") no-repeat ;
  margin-top: 2px;
  width: 11px;
  height: 11px;
}	

h2.moduleTitle {
  margin-bottom: 1em;
}

img.moduleCollapsed {
	background: url("/tribe/images/redesign/mod_collapsed.gif") no-repeat ;
	width: 12px;
	height: 12px;
}
img.moduleExpanded {
	background: url("/tribe/images/redesign/mod_expanded.gif") no-repeat ;
	width: 12px;
	height: 12px;
}

div.moduleBody {
  clear:both;
  margin-top: 1em;
}

.moduleHeaderContent .backLink {
	text-align: right;
	float: right;
}

.moduleHeaderContent .backLink a {
  color: #000;
}


/* mugshots */

.mugshot {
 width: 52px;
 height: 82px;
 font-weight: normal;
 font-family: 'Lucida Grande', Lucida, Arial,  sans-serif;
 font-size: 10px;
 border: 1px solid #C0C0C0;
 background: #FFF;
 padding: 2px 0px;
 white-space: nowrap;
 text-align: center;
 }
 
.mugshot a, .mugshot a:link, .mugshot a:visited, #columns .mugshot a, #contentArea .mugshot a { 
 color: #000000;
 font-weight: normal;
 }

/* We'd like to use multiple selectors like this:
	
	div[class=mugshot][class=online] {
   
   but it's not currently supported so instead we have do do this: */
	 .online .mugshot {
	   background-color: #C0C0C0;
	 }
	 .online .mugshot a, .online .mugshot a:link, .online .mugshot a:visited, #columns .online .mugshot a, #contentArea .online .mugshot a {
	 	font-weight: bold;
	 }
	 
.mugshot .name {
 margin-top: 0px;
 margin-bottom: 3px;
 }
 
.mugshot .photo {
  width: 48px;
  height: 48px;
  overflow: hidden;
  margin: 0 auto 0 auto;
  padding: 0;
 }
	.mugshot .photo img {
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 0;
	}
   
.mugshot .stats {
 white-space: nowrap;
 }
  
.mugshot .onlineIcon {
    text-align: center;
    float: left;
	width: 10px;
	height: 14px;
	margin-left: 4px;
	margin-top: 1px;
	background: url("/tribe/images/icon_offline.gif") no-repeat ;
}
	.mugshot .onlineIcon img {
		display: none;
	}
	.online .mugshot .onlineIcon {
		background: url("/tribe/images/icon_online_grey.gif") no-repeat ;
	}

.mugshot .friendCount {
 float: right;
 text-align: center;
 padding-right: 4px;
 }
   .mugshot .friendCount a {
     color: #000000;  
   }
 
.mugshot .anonymous {
 height: 10px;
 font-size: 8px;
 text-transform: uppercase;
 margin-top: 2px;
 margin-bottom: 0px;
 }
 

.friend .mugshot {
	margin: 0 9px 10px 0;
}

/* Global Button Definitions */
.buttons {
}
	.buttons .subtitle {
		font-size: 0.9em;
	}

/* Basic Button (secondary - no extra class needed) */
.button {
  clear: both;
	background:url("/tribe/images/redesign/buttons/secondary_left.gif") no-repeat left;
	margin: 0px;
	padding: 0 0 0 10px;
	height: 24px; /* match image height */
	overflow: hidden;
}
.button a {
	float:left;
	display:block;
	background:url("/tribe/images/redesign/buttons/secondary_right.gif") no-repeat right;
	padding: 0 15px 0 5px;
	font-size: 12px;		
	line-height: 24px;	
	text-decoration: none;
	text-transform: lowercase;
	font-weight: bold;
	color:#000;
}
  .button a:visited, .button a:hover { color:#000 }

.buttons.centered .button a {
  float: none;
  text-align: center;
}

/* Primary */
.buttons .primary {
	background:url("/tribe/images/redesign/buttons/primary_left.gif") no-repeat left;
}
.buttons .primary a {
	background:url("/tribe/images/redesign/buttons/primary_right.gif") no-repeat right;
	color:#FFF;
	font-size: 12px;	
}
  .buttons .primary a:visited, .buttons .primary a:hover { color: #FFF; }

.buttons .secondary a {
  color:#000;
	font-size: 12px; 
}

/* tertiary */
.buttons .tertiary {
	background:url("/tribe/images/redesign/buttons/tertiary_left.gif") no-repeat left;
	margin: 0px;
	padding-left: 9px;
	height: 15px; /* match image height */
	line-height: 15px;
	overflow: hidden;
}
.buttons .tertiary a {
	float:left;
	display:block;
	background:url("/tribe/images/redesign/buttons/tertiary_right.gif") no-repeat right;
	padding-left: 5px;
	padding-right: 14px;
	font-size: 11px;	
	line-height: 15px;		
	text-decoration: none;
	font-weight: bold;
	color:#FFF;
}
  .buttons .tertiary a:visited, .buttons .tertiary a:hover { color: #FFF }

.buttons .quaternary {
	background:url("/tribe/images/redesign/buttons/quaternary_left.gif") no-repeat left;
	margin: 0px;
	padding-left: 8px;
	height: 18px; 
	line-height: 18px;
	overflow: hidden;
}

.buttons .quaternary a {
	float:left;
	display:block;
	background:url("/tribe/images/redesign/buttons/quaternary_right.gif") no-repeat right;
	padding-left: 5px;
	padding-right: 15px;
	font-size: 10px;
	line-height: 18px;	
	text-decoration: none;
	font-weight: bold;
	color:#000;
}
  .buttons .quaternary a:visited,  .buttons .quaternary a:hover { 	color:#000; }

#pcard .module .buttons, #pcard .nextSteps .buttons {
	margin-top: 1.0em;
}