﻿/* Banjo Kazooie Photo Mode css 

	1.0 stuff
		
*/

/* 1.0 STUFF ___________________________________________________________*/

.hide {
	display:none;
	}
	
.clear {
	clear:both;
	}
	
/* 1.1 THINGS ___________________________________________________________ */

#photos {
	background-image:url(/images/photomode/photomode_frame_bg.jpg);
	background-repeat:no-repeat;
	width:900px;
	position:relative;
	/* For Firefox */
    padding-top:1px;
	min-height:897px;
	height:auto!important;
	height:897px;
	margin: -2px 0 0 83px;
	padding-right: 0px;
	padding-left: 0px;
	}
	
.vr { /* adds a vertical dashed rule to the right hand side */
	background:url(/images/photomode/vr.gif) top right repeat-y;
	}
	
.hr { /* adds a horizontal dashed rule to the bottom */
	background:url(/images/photomode/hr.gif) bottom left repeat-x;
	}
	
/* sidebar */

#sidebar {
	width:191px;
	float:left;
	padding:0;
	margin:56px 0 0 63px;
	text-align:left;
	position:relative;
	}
	
#sidebar a {
	color:#f7d859;
	text-decoration:underline;
	font-weight:bold;
	}
	
#sidebar h2.searchoptions {
	margin:0 0 32px 0;
	padding:0;
	text-indent:-1000000px;
	overflow:hidden;
	width:186px;
	height:24px;
	background:url(/images/photomode/header-searchoptions.gif) top left no-repeat;
	}

#sidebar .searchbox {
	height:25px;
	width:155px;
	background:url(/images/photomode/search-bg-blue.jpg) top left no-repeat;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	margin:0;
	border:0;
	display:block;
	position:relative;
	float:left;
	padding:4px 2px 0 8px;
	}
	
#sidebar .searchbutton {
	float:left;
	height:24px;
	width:26px;
	display:block;
	margin:0;
	outline:none;
	text-indent:-1000000px;
	background:url(/images/photomode/search-icon-blue.jpg) top left no-repeat;
	}
	
#sidebar .searchbutton:hover {
	background-position:bottom left;
	}
	
#sidebar h3 {
	color:#d5ecfc;
	font-size:12px;
	font-weight:bold;
	clear:both;
	margin:0;
	padding:0;
	}
	
#sidebar .advancedsearch {
	display:block;
	margin-top:33px;
	}
	
#sidebar blockquote {
	padding:18px 0 0 0;
	margin:76px 0 0 0;
	width:187px;
	background:url(/images/photomode/hr.gif) top left repeat-x;
	position:relative;
	}	
	
#sidebar blockquote p {
	margin:0;
	padding:0 0 18px 0;
	background:url(/images/photomode/hr.gif) bottom left repeat-x;
	color:#d5ecfc;
	font-weight:bold;
	line-height:18px;
	font-size:12px;
	}

/* dropdown */

.dropdown,  #sidebar .dropdown_expanded{
	color:#fff;
	font-size:12px;
	font-weight:bold;
	width:156px;
	height:20px;
	background:url(/images/photomode/dropdown-bg.jpg) top left no-repeat;
	padding-left:8px;
	padding-right:26px;
	padding-top:4px;
	float:left;
}

#sidebar .dropdown{
    margin-top:33px;
    background:url(/images/photomode/expand.jpg) top left no-repeat;
}

#sidebar .dropdown_expanded{
    margin-top:33px;
    background:url(/images/photomode/contract.jpg) top left no-repeat;
}

#sidebar a:hover.dropdown, #sidebar a:hover.dropdown_expanded{
    background-position:bottom left;
}

#sidebar a.dropdown, #sidebar a.dropdown_expanded{
    color:#fff;
    text-decoration:none;
}   


#sidebar .dropdownmenu {
	position:relative;
	top:0;
	left:0;
	width:188px;
	background:#206ba4;
	border-left:1px solid #33a2e5;
	border-right:1px solid #33a2e5;
	max-height:425px;
	overflow:auto;
	overflow-x:hidden;
	}

	
#sidebar .dropdown a,
#photocontent .dropdown a {
	color:#fff;
	text-decoration:none;
	}
	
.dropdownmenu {
	position:absolute;
	top:222px;
	left:63px;
	width:188px;
	background:#206ba4;
	border-left:1px solid #33a2e5;
	border-right:1px solid #33a2e5;
	}
	
.dropdownmenu a {
	display:block;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:7px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	border-bottom:1px solid #33a2e5;
	}
	
.dropdownmenu a:hover {
	background:#5aa072 url(/images/photomode/dropdown-bg-hover.jpg) top left no-repeat;
	color:#f7d859;
	}

/* main photo mode content area */

#contentwrap {
	width:546px;
	border:2px solid #33a2e5;
	margin:56px 0 0 23px;
	float:left;
	}

#photocontent{
	padding:18px 18px 0;
	width:510px;
	background:#00487b url(/images/photomode/bg-grid.gif) top left;
	}
	
.photocontent2 {
	padding:0 18px 18px;
	width:510px;
	background:#00487b url(/images/photomode/bg-grid.gif) top left;
	}

#photocontent .toggle{
	margin:0;
	padding:0;
	float:left;
	list-style:none;
	height:34px;
	}
	
#photocontent .toggle li{
	float:left;
	margin:0;
	height:21px;
	padding:6px 0 0 0;
	}
	
#photocontent .toggle li a{
	display:block;
	text-indent:-1000000px;
	outline:none;
	background-position:top left;
	background-repeat:no-repeat;
	}
	
#photocontent .toggle li a.mygallery {
	width:111px;
	height:19px;
	margin-left:18px;
	background:url(/images/photomode/toggle-mygallery.gif);
	}
	
#photocontent .toggle li a.allphotos {
	width:106px;
	height:19px;
	margin-right:18px;
	background:url(/images/photomode/toggle-allphotos.gif);
	}
	
#photocontent .toggle li a:hover,
#photocontent .toggle li a.on {
	background-position:bottom left;
	}


#photocontent .switchview {
	margin:0;
	padding:0;
	list-style:none;
	float:right;
	width:202px;
	}
	
#photocontent .switchview li {
	list-style:none;
	margin:0;
	padding:0 9px;
	float:left;
	color:#d5ecfc;
	font-weight:bold;
	line-height:51px;
	}
	
#photocontent .switchview li a {
	height:51px;
	width:55px;
	background-repeat:no-repeat;
	background-position:top left;
	outline:none;
	display:block;
	}
	
#photocontent .switchview li a.full {
	background-image:url(/images/photomode/switchview-full.gif);
	text-indent:-1000000px;
	overflow:hidden;
	}

#photocontent .switchview li a.thumbs {
	background-image:url(/images/photomode/switchview-thumbs.gif);
	text-indent:-1000000px;
	overflow:hidden;
	}
	
#photocontent .switchview li a:hover,
#photocontent .switchview li a.on {
	background-position:bottom left;
	}

/* top filter area */

#filter {
	background:url(/images/photomode/filter-bg.gif) top left no-repeat;
	width:512px;
	height:55px;
	padding:12px 0 0 0;
	margin:8px 0 0;
	position:relative;
	}
	
#filter .ddlabel {
	color:#d5ecfc;
	font-weight:bold;
	margin:0 0 4px 0;
	display:block;
	}
	
#filter .column {
	float:left;
	width:199px;
	margin-right:18px;
	}
	
/* go button */

.gobutton {
	display:block;
	outline:none;
	margin:18px 0 0 0;
	width:46px;
	height:24px;
	text-indent:-1000000px;
	background:url(/images/photomode/gobutton.jpg) no-repeat;
	background-position:0 0;
    float:left;
	}
	
.gobutton:hover {
	background-position:0 -48px;
	}
	
.gobutton:active {
	background-position:0 -24px;
	}
	
/* photo sizes */

img.large {
	background:url(/images/photomode/photoframe-lg.gif) top left no-repeat;
	padding:11px;
	clear:both;
	margin:0 0 10px 0;
	}

img.thumb {
}
	
/* full view styles */

h2.gamertag {
	margin:0 ;
	padding:10px 0 0 0;
	font-size:15px;
	line-height:20px;
	color:#f7d859;
	}
	
.photocontent2 h2.gamertag{
    background:url(/images/photomode/filter-bg.gif) top left no-repeat;
}

h2.gamertag a{
    color:#f7d859;
}
	
h3	{
	color:#d5ecfc;
	font-size:13px;
	font-weight:bold;
	margin:0;
	padding:0;
	line-height:18px;
	}
	
.flag {
	background:url(/images/photomode/icon-flag.gif) top left no-repeat;
	width:40px;
	height:40px;
	display:block;
	outline:none;
	text-indent:-1000000px;
	float:right;
	margin:-35px 0 0 0;
	}

/* comments section */

#commentsmeta {
	background:#1067a4;
	padding:18px;
	color:#d5ecfc;
	}
	
.comments {
	width:260px;
	float:left;
	background:url(/images/photomode/vr.gif) top right repeat-y;
	padding:0 16px 0 0;
	}
	
.comments textarea {
	width:256px;
	height:112px;
	border:2px solid #00487b;
	margin:0;
	}
	
.comments .comment {
	font-size:11px;
	overflow:hidden;
	}
	
.meta {
	margin-left:16px;
	width:206px;
	font-size:12px;
	float:left;
	font-weight:normal;
	}
	
.meta a {
	color:#f7d859;
	text-decoration:underline;
	}

/* rating */

.photocontent2 div.rate-lg {
	width:133px;
	height:21px;
	}
	
div.rate-sm {
	width:86px;
	height:14px;
	float:left;
	}
		
div.rate-sm div {
	margin-right:4px;
	}

.photocontent2 div.rate-lg div span,
div.rate-sm div span {
	display:block;
	overflow:hidden;
	outline:none;
	text-indent:-100000px;
	}

.filledRatingStar_lg {
	background:url(/images/photomode/rate-full.gif) top left no-repeat;
	width:21px;
	height:21px;
	}

.filledRatingStar_User_lg {
	background:url(/images/photomode/rate-full.gif) top left no-repeat;
	width:21px;
	height:21px;
	}

.emptyRatingStar_lg {
	background:url(/images/photomode/rate-empty.gif) top left no-repeat;
	width:21px;
	height:21px;
	}

.filledRatingStar_sm {
	background:url(/images/photomode/rate-full-sm.gif) top left no-repeat;
	width:13px;
	height:14px;
	}

.filledRatingStar_User_sm {
	background:url(/images/photomode/rate-full-sm.gif) top left no-repeat;
	width:13px;
	height:14px;
	}

.emptyRatingStar_sm {
	background:url(/images/photomode/rate-empty-sm.gif) top left no-repeat;
	width:13px;
	height:14px;
	}
	
.ratingStar_sm{
    width:17px;
}

.ratingStar_lg{
    width:25px;
}
		
.photocontent2 .fullview div.rate-lg  {
	position:absolute;
	bottom:8px;
	left:15px;
	}
	
.thumbnailview div.rate-sm {
	position:relative;
	float:left;
	margin:4px 0 0 0;
	}
	
/* my gallery specific */

.mygallerymeta {
	width:auto;
	height:60px;
	background:url(/images/photomode/vr.gif) top left repeat-y;
	}

.mygallerymeta .webrating,
.mygallerymeta .datetaken,
.mygallerymeta .viewscomments,
.mygallerymeta .type {
	float:left;
	background:url(/images/photomode/vr.gif) top right repeat-y;
	text-align:left;
	color:#d5ecfc;
	font-weight:normal;
	width:92px;
	padding:2px 10px; 
	height:56px;
	margin:0 0 10px 0;
	font-size:11px;
	}

.mygallerymeta .viewscomments,	
.mygallerymeta .webrating{
    font-weight:bold;
}

.mygallerymeta .type {
    line-height:12px;
    padding:0 10px;
    height:60px;
}

.mygallerymeta .type strong{
    margin-top:4px;
    display:block;
}


.mygallerymeta .viewscomments a,
.mygallerymeta .type a {
	color:#f7d859;
	text-decoration:underline;
	}

.mygallerymeta .webrating {
	width:154px;
	}

.mygallerythumbs {
	background:#1067a4;
	clear:both;
	width:auto;
	padding:10px;
	width:526px;
	margin:0 0 -18px -18px;
	}

.arrow-left,
.arrow-right {
	display:block;
	float:left;
	width:32px;
	height:48px;
	text-indent:-100000px;
	overflow:hidden;
	background-position:top left;
	background-repeat:no-repeat;
	margin-top:14px;
	}

.arrow-left {
	background:url(/images/photomode/arrow-left.gif);
	margin-right:16px;
	}

.arrow-right {
	background:url(/images/photomode/arrow-right.gif);
	}

.arrow-left:hover,
.arrow-right:hover {
	background-position:bottom left;
	}

.arrow-left_stop,
.arrow-right_stop {
	background:none;
	}

.splitphoto {
	width:111px;
	float:left;
	margin:0;
	text-align:left;
	}

.splitphoto a img {
	border:1px solid #f7d859;
	}

.splitphoto a:hover img {
	border:1px solid #fff;
	}
	
.splitphoto a img.expires {
	border:1px solid #bf0808;
	}

.splitphoto a:hover img.expires {
	border:1px solid #fff;
	}

.splitphoto div{
	height:14px;
}

.splitphoto p {
	margin:0;
	padding:0;
	color:#d5ecfc;
	font-size:10px;
	}

/* thumbnail view specific */

#thumblist {
	background:#1067a4;
	padding:0;
	margin:-1px 0 0 0;
	width:100%;
	}

#thumblist .gamertag {
	color:#f7d859;
	font-size:9px;
	font-weight:bold;
	margin-bottom:4px;
	display:block;
	}

#thumblist .thumb {
	width:93px;
	float:left;
	margin:18px 21px;
	text-align:left;
	}

#thumblist .thumb a img {
	border:1px solid #f7d859;
	}

#thumblist .thumb a:hover img {
	border:1px solid #fff;
	}

#thumblist .thumb p {
	margin:0;
	padding:0;
	color:#d5ecfc;
	font-size:11px;
	}
	
.ratingHover{
    background:url(/images/photomode/bg-grid.gif);
    min-height:50px;
    min-width:150px;
    font-size:11px;
    font-weight:normal; 
    line-height:16px;
    color:#d5ecfc;
    border:solid 1px #40769c; 
    z-index:10;  
}

.ratingHover #PopupPlaceHolder{
    margin:5px;
}

.thumbfoot {
background:url(/images/photomode/hr.gif) top left repeat-x;
padding:10px 18px;
margin:0;
clear:both;
height:50px;
text-align:center;
}

.thumbfoot .paginate {
list-style:none;
margin:0;
padding:0;
text-align:center;
}

.thumbfoot .paginate {
list-style:none;
margin:0 4px 0 0;
padding:0;
text-align:center;
}

.thumbfoot .paginate a {
color:#fff;
font-size:11px;
font-weight:bold;
}

.thumbfoot .paginate a.on {
color:#f7d859;
}

a.backtomain {
float:right;
position:relative;
color:#f7d859;
font-size:13px;
font-weight:bold;
text-decoration:underline;
}

/* advanced search page specific */

.advancedsearchwrap {
}

.advancedsearchwrap h2.advancedsearch {
	text-indent:-10000000px;
	display:block;
	width:516px;
	overflow:hidden;
	background:url(/images/photomode/header-advancedsearch.gif) top left no-repeat;
	height:21px;
	margin:45px 0 27px 0;
	padding:0;
	}

.advancedsearchwrap .column {
width:160px;
height:319px;
float:left;
padding:0 0 0 10px;
margin:0 0 10px 0;
}

h3.picturetype,
h3.vehicleclass,
h3.gameworld {
text-indent:-10000000px;
overflow:hidden;
background-position:top left;
background-repeat:no-repeat;
height:14px;
margin:0 0 27px 0;
}

h3.picturetype {
width:97px;
background:url(/images/photomode/header-picturetype.gif);
}

h3.vehicleclass {
width:110px;
background:url(/images/photomode/header-vehicleclass.gif);
}

h3.gameworld {
width:95px;
background:url(/images/photomode/header-gameworld.gif);
}

.advancedsearchwrap ul {
list-style:none;
margin:0 0 23px 0;
padding:0;
}

.advancedsearchwrap ul li {
margin:0 0 23px 0;
padding:0;
list-style:none;
}

.advancedsearchwrap label {
color:#d5ecfc;
font-size:12px;
font-weight:bold;
margin:0 0 0 10px;
}

.buttons {
clear:both;
height:30px;
margin:10px 0 0 0;
padding:10px 0 0 0;
text-align:left;
background:url(/images/photomode/hr.gif) top left repeat-x;
}

.buttons .button {
margin:0 10px 0 0;
float:right;
}

.button:hover {
color:#fff;
background:url(/images/photomode/button-hover-bg.gif) top left repeat-x;
}

a.button {
width:82px;
height:21px;
background:#025997;
border:1px solid #329fe3;
color:#f7d859;
font-size:12px;
font-weight:bold;
letter-spacing:1px;
line-height:21px;
text-align:center;
display:block;
}

.message {
clear:both;
margin:10px 0;
text-align:center;
width:100%;
color:#ecf3f8;
font-weight:bold;
}

.message h3 {
font-size:16px;
}

.faqbutton{
	background:url(/images/photomode/gallery_FAQ.gif) top left no-repeat;
	width:23px;
	height:23px;
	text-decoration:none;
	display:block;
	top:30px;
	right:75px;
	position:absolute;
}

a:hover.faqbutton{
	background-position:bottom left;
}

.faqbutton span{
	visibility:hidden;
}

/*The positioning on this might need to be adjusted based on the container*/
.deleteAlpha{
	color:#f7d859;
	text-decoration:underline;
	font-weight:bold;
	float:right;
	margin:-17px 0 0 0;
}

.deleteBeta{
	color:#f7d859;
	text-decoration:underline;
	font-weight:bold;
}

a:hover.deleteAlpha, a:hover.deleteBeta{
	color:#fff;
}

.ConfirmationDialog {
	position: absolute;
	text-align: center;
	top: 160px;
	left: 320px;
	width: 280px;
	height: 80px;
	border:solid 2px #33a2e5;
	padding:10px;
	font-size: 12px;
	font-weight:bold;
	z-index: 10001;
	color:#FFF;
    background:#00487b url(/images/photomode/bg-grid.gif) top left repeat;
	}

.ConfirmationDialog ul.buttons{
	width:280px;
	display:block;
	height:35px;
	color:#000;
	font-size:14px;
	font-weight:bold;
	line-height:35px;
	text-align:center;
	cursor:pointer;	
	}

.ConfirmationDialog ul.buttons li{
    display:inline;
}

.ConfirmationDialog ul.buttons li .ok{
    background:url(/images/photomode/ok.jpg) bottom left no-repeat;
    margin:10px;
}

.ConfirmationDialog ul.buttons li .cancel{
    background:url(/images/photomode/cancel.jpg) bottom left no-repeat;
    margin:10px;
}

.signinDialog{
    background-color:#1067a4;
    min-height:250px;
    height:auto!important;
    height:250px;
    text-align:center;
    padding:25px;
}

.resultsloading{
    z-index:4000;
    display:block;
    position:absolute;
    top:375px;
    left:555px;
}

.ajax__dropdown_arrow_wrapper{
    top:-1px!important;
}

.ajax__dropdown_arrow_wrapper img{
    top:0!important;
}

