/* @override http://wow.joystiq.com/media/gallery.css */

/* 
- - - - - - - - - - - - - - - - - - - - - - - - - - -
	
	gallery.css

- - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* =RESET */
html, body, form, fieldset{ margin: 0;padding: 0; }
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address{ margin:0;padding: 0; }
a img, :link img, :visited img {border: 0;}
input, select, textarea	{ font-size:1em; }

dd, blockquote	{margin-left: 1em;}
form label 	{cursor: pointer;}
fieldset	{border: none;}
textarea 	{font-size:1.2em;font-family:arial,helvetica,sans-serif;}
ol, ul, ul li 	{list-style: none;}
table 		{border-collapse: collapse;border-spacing: 0;}
blockquote, q 	{quotes: none;}
:focus 		{outline: 0;}
ins 		{text-decoration: none;}
del 		{text-decoration: line-through;}
iframe          {margin: 0 !important; padding: 0 !important;}
/* =TYPOGRAPHY */
body          { font-size: .76em;font-family:arial, helvetica, sans-serif;}   /* IE */
html > body   { font-size: 12px; }  /* Other browsers */
h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, "Lucida Grande", sans-serif;color:#111; clear:both;}
h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; line-height:2; }
h4 { font-size: 1.2em; line-height:1.25; font-weight:bold; }
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1em; }
p           { margin: 0 0 1.5em 0; text-align:left; }
p.last      { margin-bottom:0; }
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */
ul, ol      { margin: 0 0 10px 1.5em; }
ol          { list-style-type: decimal; }
dl          { margin: 1.5em 0; }
dl dt       { font-weight: bold; }
a           { color: #0F84CB; text-decoration: none; outline: none; }
a:hover     { text-decoration: underline;}
blockquote  { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code        { font:0.9em Monaco, monospace; }
hr {background: #ddd; color: #ddd; clear: both; float: none; width: 100%; height: 0.1em; margin: 1em 0 1.4em 0; border: none; _margin: 0 0 1.2em 0; }
table   { margin-bottom: 1.4em;}
th,td   { }
th      { font-weight:bold; }
label     { font-weight: normal; }
textarea  { height: 180px; width: 300px; }
p.small   { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; }
p.large   { font-size: 1.2em; line-height: 2.5em; }
p.quiet   { color: #666; }
p.sponsored{ background:#ffffee; font-size:.9em; padding: 12px; margin: 0 0 3px; line-height: 1.4em;}

/* =LAYOUT  */
body {
background: #222 url(http://www.blogsmithmedia.com/wow.joystiq.com/media/bg-mystical-blue.jpg) no-repeat top center;
text-align: center; /* IE Fix */
margin:0;
}
#container {
position: relative;
width: 100%;
margin: 0 auto;
text-align: left; 
}
#main {
position: relative;
_border:0;
padding: 0;
}

* html #sidebar, * html #subcontent { overflow-x: hidden; } /* IE6 fix */

/* =HEADER  */

#header {
width: 100%;
position: relative;
height: 98px;
padding-bottom: 0;
zoom: 1;
}
.low-res #header {
/*width: 950px;  ***use this width if you need it constrained and centered***  */
margin: 0 auto;
}
#logo {
position: absolute;
top: 35px;
left: 0;
z-index: 9;
}
#logo a {
background: url(http://www.blogsmithmedia.com/wow.joystiq.com/media/wow-insider-logo-sm.png) no-repeat;
_background-image: url(http://www.blogsmithmedia.com/wow.joystiq.com/media/wow-insider-logo-sm.png);
display: block;
color: #333;
font-size: 28px;
text-transform: uppercase;
height /**/: 31px;
width: 225px;
overflow: hidden;
text-indent: -9000px;
margin-bottom:25px;
}
.gallery #topleader,
.gallery .topleader { 
width: 728px;
height: 90px; 
position: absolute;
right: 0;
top: 0;
margin: 0;
padding: 4px 0 0;
}

.bottomleader {
padding-bottom: 15px;
}
#header-middle {
position: relative;
height: 90px;
margin: 0 3px 0 37px;
}
.low-res #header-middle {
width: 970px;
margin: 0 auto;
}

#main {
width: 100%;
margin: 0 auto;
background: #111;
}
.low-res #main {
width: 970px;
}
#content {
position: relative;
color: #bbc0be;
margin: 0 auto;
padding: 0;
}
.low-res #content {
width: 640px;
margin:0;
float: left;
}
.hi-res #content {
float: left;
width: 650px;
}
#subcontent {
width: 300px;
position: relative;
_margin-top: 0;
_display: inline;
float: right;
padding: 15px 15px;
}

#content .all-galleries {
padding: 17px 0 0 20px;
} 
#content .list-gallery {
padding: 19px;
}
#content .list-gallery ul {
margin-left: 0;
}

/* =SHOW-IMAGE */
.show-image {
padding: 15px 0 11px 15px;
}
.hi-res .show-image {
padding: 11px 0 11px 0;
}
/* =UI CONTROLS */
#ui_controls2 {
padding-top: 14px;
}
ul.controls {
margin: 0; padding: 0 0 14px;
min-height: 24px;
display: block;
}
ul.controls li {
background: #2c2925;
float: left;
height: 24px;
line-height: 24px;
margin-left: 3px;
padding: 0 7px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul.controls li strong {
padding: 0 2px;
display: block;
height: 24px;
line-height: 24px;
text-decoration: none;
_float: left;
}
ul.controls li:hover {
cursor: pointer;
background-color: #FBB108;
}
ul.controls li:hover strong {
color: #fff;
}
ul.controls li strong {
font-weight: normal;
}
ul.controls li.home {
margin-left: 0;
}
ul.controls li.home a   {
text-indent: -9000px;
display: block;
width: 28px;
padding: 0;
}
ul.controls li.home a strong {
background: url(http://www.blogsmithmedia.com/www.switched.com/media/icon-home.gif) no-repeat center center;
display: block;
}
ul.controls li.deemphasize,
ul.controls li.deemphasize strong {
background: transparent;
}
ul.alpha,
h3.alpha {
float: left;
}
.hi-res ul.alpha,
.hi-res h3.alpha,
.hi-res .description {
padding-left: 15px;
}
ul.beta {
float: right;
}
.hi-res ul.beta {
padding-right: 15px;
}
ul.controls li.title a {
font: normal 1.2em/24px arial;
color: #fff;
padding-left: 5px;
}
ul.controls li.divider {
color: #282725;
}
ul.controls li a.backtopost {
background: url(http://www.blogsmithmedia.com/www.switched.com/media/gallery-arrow-lt.gif) no-repeat left center;
}
ul.controls li.previous {
background-color: #fff;
}
ul.controls li.previous strong {
display: block;
background: url(http://www.blogsmithmedia.com/www.switched.com/media/gallery-arrow-lt-black.gif) no-repeat left center;
padding-left: 9px;
}
li.previous strong,
li.next strong {
color: #0076a3;
}
ul.controls li.next {
background-color: #fff;
}
ul.controls li.previous:hover,
ul.controls li.next:hover {
background-color: #FBB108;
}
ul.controls li.next strong {
display: block;
background: url(http://www.blogsmithmedia.com/www.switched.com/media/gallery-arrow-rt-black.gif) no-repeat right center;
padding-right: 9px;
}
/* =PHOTO BODY  */
.photo-body {
background: #000;
padding: 0;
clear:both;
margin:0 auto;
min-height: 360px;
_height: 360px;
text-align: center;
}
.low-res .photo-body {
display: block;
_width:610px;
margin-left: 0;
}
.photo-body img {
border: 1px solid #050505;
margin: 0 auto;
position: relative;
-ms-interpolation-mode: bicubic;
}
.low-res .photo-body img {
max-width: 615px;
max-height: 500px; 
margin: 0 auto;
}

/* =PHOTO INFO  */
.photo-info {
color: #ccc;
padding: 10px 0;
}
.low-res .photo-info {
clear: both;
padding: 0 0 0;
}
.photo-info h3 {
color: #fff;
font: normal 1.4em/1.5em arial;
}
.photo-info p.description {
clear: both;
line-height: 1.5em;
margin-bottom: 0;
}
.photo-info .date, 
.photo-info .credits {
color: #FFF !important;
margin: 0;
}
/* =CONTENT BODY  */

.content-body .photo-comments {
width: 100%;
}
.photo-basement {
clear: both;
position: relative;
padding: 0 10px;
}
#content h3 {
color: #fff;
}
/* =BREADCRUMB  */

.breadcrumb {
margin: 0;
color: #fff;
float: left;
font: 1.2em arial;
line-height: 2.4em;
display: block;
padding: 0 13px 0;
}
.low-res .breadcrumb {
margin: 0;
}
.breadcrumb a {
color: #E4C42F;
text-decoration: none;
}
.breadcrumb a:hover {
color: #fff;
}
.breadcrumb em,
.breadcrumb em a {
font-style: normal;
}
span.hires a {

}
span.hires a:hover {

}
/* =THUMBS  */
.gallery .photo-body .thumb {
float: left;
margin: 2px 0 0 2px;
}
.gallery li.thumb {
display: block;
float: left;
position: relative;
margin: 0 2px 2px 0;
border: 0;
}
.gallery .thumb img {
vertical-align: top;
border: 0;
height: 75px;
width: 75px;
}
.gallery .thumb a {
display: block;
float: left;
cursor: pointer;
}
.gallery .thumb a:hover {
padding: 0;
}
.gallery li.thumb a:hover,
.gallery li.thumb a:active {
background-position: 0 -55px;
}
.gallery .captionedthumb {
background: #060606;
padding: 7px;
float: left;
display: block;
margin: 0;
height: 140px;
margin: 5px 5px 0 0;
border: 2px solid #1e1e1e;
}
.gallery .captionedthumb:hover {
background: #000;
border-color: #D3AC42;
}
.gallery .captionedthumb:hover .title a {
color: #fff;
}
* html .gallery .captionedthumb {
height: 160px;
overflow: hidden; 
}
.gallery .captionedthumb img {
width: 75px;
height: 75px;
}
.gallery .captionedthumb .title {
padding: 3px 0;
width: 75px;
text-align: center;
}
.gallery .captionedthumb .title a {
color: #666;
font-size: 10px;
overflow: hidden;
position: relative;
line-height: 1.1em;
text-align: center;
}

/* =THUMBSTRIP  */

.thumbstrip {
display: block;
position: relative;
top: 0; 
left: 0;
margin:0;
margin-right: -6px;
padding: 3px 0 10px 15px;
overflow: hidden;
cursor: default;
zoom: 1;
z-index:9;
text-align: left;
}

.thumbstrip-inner {
padding: 0;
position: relative;
}
.thumbstrip-inner ul {
margin: 0;
}
.thumbstrip li.thumb {
display: block;
float: left;
position: relative;
margin: 0 5px 6px 0;
border: 0;
}
.thumbstrip .thumb img {
vertical-align: top;
border: 0;
height: 65px;
width: 65px;
}
.thumbstrip .thumb a {
border: 4px solid #fff;
display: block;
float: left;
cursor: pointer;
}
.thumbstrip .thumb a:hover {
border-color: #D3AC42;
}

.thumbstrip-inner ul li.selected {
border-color: #D3AC42;
}
.thumbstrip .previous-arrow {
position: absolute;
z-index: 10;
top: 0;
left: 0;
display: none;
}
.thumbstrip .previous-arrow a {
background: url(http://www.blogsmithmedia.com/framework.weblogsinc.com/media/arrow-circle-dk-lt.gif) no-repeat 0 0;
display: block;
height: 0;
height /**/ 68px;
padding: 68px 0 0 0;
width: 68px;
overflow: hidden;
cursor: pointer;
}
.thumbstrip .next-arrow {
position: absolute;
z-index: 10;
top: 0;
left: 796px;
display: none;
}
.thumbstrip .next-arrow a {
background: url(http://www.blogsmithmedia.com/framework.weblogsinc.com/media/arrow-circle-dk-rt.gif) no-repeat -68px 0;
display: block;
height: 0;
height /**/ 68px;
padding: 68px 0 0 0;
width: 68px;
overflow: hidden;
cursor: pointer;
}
.thumbstrip .previous-arrow a:hover {
background-position: -68px 0;
}
.thumbstrip .next-arrow a:hover {
background-position: 0 0;
}
.featuredgalleries .thumb a {
height: 40px; width: 40px;
border: 4px solid #fff;
margin: 0 7px 7px 0;
}
.featuredgalleries .thumb a:hover {
border-color: #D3AC42;
}
.featuredgalleries .thumb img{
width: 40px; height: 40px;
}
/* =SUBCONTENT */
#subcontent h3 a {
color: #fff;
text-decoration:none;
}
#subcontent h3 {
color: #fff;
font-size: 1.1em;
font-weight: normal;
padding: 3px 10px 3px 0;
border-bottom: 1px solid #272624;
}
/* =FEAURED POSTS */
.featured-posts {
margin-bottom: 15px;
}
.featured-posts ul {
margin:0;
padding: 5px 10px;
}
.featured-posts {
background: #1f1d1b;
padding-bottom: 1px;
}
.featured-posts li {
_height:1%;
position: relative;
padding-left: 0;
min-height: 40px;
}
.featured-posts li a {
display: block;
text-decoration: none;
padding: 9px 15px 10px 45px;
line-height: 1.4em;
_height:1%;
background: url(http://www.blogsmithmedia.com/www.luxist.com/media/gallery-arrow-rt.gif) no-repeat 270px center;
}
.featured-posts li a:hover {
color: #fff;
background: url(http://www.blogsmithmedia.com/www.luxist.com/media/gallery-arrow-rt-hover.gif) no-repeat 270px center;
}
.featured-posts li img {
border: 3px solid #fff;
height: 30px;
width: 30px;
position: absolute;
top: 15%;
left: 0;
}
.featuredgalleries {
background: #1f1d1b;
padding: 10px 0 10px 10px;
overflow: hidden;
}
.featuredgalleries .thumb a {
margin: 0 4px 4px 0;
}
.featuredgalleries .clearer {
display: none;
}


/* =FOOTER  */

#footer {
clear:both;
margin: 0;
width: 970px;
padding: 15px;
}
#legal {
margin: 0 0 1em;
font-size: .95em;
line-height: 1.4em;
}
#footer p {
color: #888 !important;
margin: 0 0 .5em;
}
#footer p a {
color: #fff;
text-decoration: none;
}
#footer p a:hover {
text-decoration: underline;
}

/* =ADD-ONS  */
.clearer{display:block;clear:both;}
.clearfix { display: inline-block; }   
.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.hide {
    visibility: hidden;
}
.noheight {
height: 0 !important;
margin-bottom: 0 !important;
}

.low-res .medrect {
margin-bottom: 15px;
}
/* Slice */

#outerslice {
background: #5a85be;
border: 1px solid #5a85be;
padding: 4px 0 3px;
}
#omniture {position: absolute; top: 0 left: 0;}

#outerslice {
background: #719cd7 url(http://www.blogsmithmedia.com/www.tuaw.com/media/adslice-bg.gif) repeat-x bottom;
padding: 3px 0;
}
#slice {
list-style: none;
margin: 0;
padding: 7px 0;
text-align: center;
color: #ccc;
}
#slice a {
color: #d5d5d5;
font-weight:bold;
font-size: 12px;
padding: 7px 12px 6px;
margin-right: 2px;
text-decoration: none;
}
#slice a:hover {
background: #517bb8;
color: #fff;
text-decoration: none;
}
.aol-knot-nav-outer, .aol-knot-thumb-outer {
top: 40%!important;
color: white!important;
}
.aol-knot-slide-wrapper, .aol-knot-slides, .aol-knot-slide-container {
	clear: both;
}