/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
body {color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
/*li {list-style:none;}*/
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup,sub {line-height:-1px;vertical-align: text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/**
 * Percents could work for IE, but for backCompat purposes, we are using keywords.
 * x-small is for IE6/7 quirks mode.
 */
/*body {font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}*/
table {font-size:inherit;font:100%;}
/**
 * Bump up IE to get to 13px equivalent
 */ 
pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:99%;}




body {
  font-family:"Helvetica Nueu", Helvetica, Fuck Yooouuu, sans-serif;
  margin:0;
  padding:0;
  background-color:white;
  background-image: url('bg_texture.png');
  color:#222;
}

a {
  color:white;
  text-decoration:none;
  text-shadow:0 1px 1px rgba(0,0,0,0.6);
}


body.touch #outer {
  -webkit-transition: -webkit-transform 0.4s ease-in-out;  
  -webkit-transform: translate3d(0,0,0);
}
body.touch.vertical-orientation #outer.right {
  -webkit-transform: translate3d(-768px,0,0);
}
body.touch.horizontal-orientation #outer.right {
  -webkit-transform: translate3d(-1024px,0,0);
}



.wrapper {
  position:relative;
  width:748px;  
}
  .horizontal-orientation .wrapper {
    width:1024px;
  }
  .vertical-orientation .wrapper {
    padding-left:10px;
    width:758px;    
  }

.propper-width {
  margin-left:-10px;  
  padding:10px 30px 10px 40px;  
}
.horizontal-orientation .propper-width {
  width:965px;
}
.vertical-orientation .propper-width {
  width:698px;
}

h1 {
  position:relative;
  background: -webkit-gradient(linear, 0% 0%, 0% 80%, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.0))),rgba(0,0,0,0.1);
  font-weight:bold;
  font-size:22px;

  
  color:#393939;
  text-shadow:0 1px rgba(255,255,255,0.7), 0 0 20px rgba(255,255,255,0.4);

  border-bottom:1px solid rgba(0,0,0,0.45);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5);
  -moz-box-shadow: rgba(255,255,255,0.5) 0 1px 0;    
}

.dark-engraved {
  color:rgba(0,0,0,0.7);
  text-shadow:0 1px 1px white;
}

.white-shadow {
  color:white !important;
  font-weight:bold;
  text-shadow:0 1px 1px rgba(0,0,0,0.6);
}
  
.button {
  padding:4px 6px;
  color:#fff;
  text-decoration:none;
  text-shadow: 0 -1px rgba(0,0,0,0.6);
  -webkit-border-radius:3px;
  -moz-border-radius:3px;  
  border-top:1px solid rgba(255,255,255,0.6);
  -webkit-box-shadow:0 2px 6px rgba(0,0,0,0.2), 0 0 2px black;
  -moz-box-shadow: black 0 0 2px, rgba(0,0,0,0.2) 0 2px 6px;    
  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.3))),
             -webkit-gradient(linear, 0% 0%, 0% 70%, from(rgba(255,255,255,0.1)), to(rgba(0,0,0,0)));  
  background: -moz-linear-gradient(19% 75% 90deg, rgba(0,0,0,0.3), rgba(0,0,0,0)),
              -moz-linear-gradient(19% 75% 90deg, rgba(0,0,0,0), rgba(255,255,255,0.1));
}
  
.top-button {
  font-size:13px;  
  display:block;
  float:right;
  margin-right:10px;
}
  
#rss-button {
  background-color: #FF525D;
}
#twitter-button {
  background-color: #63B8F8;
}
#photo-count {
  font-weight:normal;
  margin-top:6px;
}

#gallery {
  background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(rgba(255,255,255,0.3)), to(rgba(255,255,255,0.0)));
  background: -moz-linear-gradient(19% 75% 90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.3));    
  overflow:auto;
  padding:30px 15px 0 15px;
}
  .vertical-orientation #gallery {
    margin-left:-10px;
    padding-left:18px;
  }

#gallery .thumb {
  float:left;
  border:3px solid #f0f0f0;  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;  
  -webkit-box-shadow:0 4px 7px rgba(0,0,0,0.4), 0 0 1px black;
  -moz-box-shadow: rgba(0,0,0,0.4) 0 4px 7px, black 0 0 1px;
  -webkit-tap-highlight-color:transparent;  
}
  .horizontal-orientation #gallery .thumb {
    margin: 0 18px 30px 18px;
  }
  .vertical-orientation #gallery .thumb {
    margin: 0 20px 30px 20px;
  }
  
#loading-jsonp {
  text-align:center;
  font-size:18px;
  padding:10px 0 40px 0;
}

#showcase-wrapper {
  padding:10px;
  height:100px;
  position:absolute;
  top:10px;
  left:100%;
  display:none;
}
  
.showcase-image {
  -webkit-box-shadow:0 2px 7px rgba(0,0,0,0.4);
  -moz-box-shadow: rgba(0,0,0,0.4) 0 2px 7px;
  border:1px solid rgba(255,255,255,0.5);
  margin-left:14px;
  margin-top:5px;
}
  
.vertical-orientation .showcase-image {
  max-width:718px;  
}
.horizontal-orientation .showcase-image {
  max-width:974px;
  max-height:450px;
}

ol {
  margin-top:8px;
  color:#3E3F41;
  line-height:1.5em;
  font-weight:lighter;
}
#showcase-instructions p {
  margin:0;
  padding:0;
}

.gesture-hint {
  margin-right:1px;
  
  padding:1px 5px 5px 6px;
  background:rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.4);
  -moz-box-shadow: rgba(255,255,255,0.4)0 1px 1px;  
  -webkit-border-radius:6px;
  -moz-border-radius:6px;  
  border-top:2px solid rgba(0,0,0,0.1);
  
  color:white;
  text-shadow:0 1px 1px rgba(0,0,0,0.7);
}

.spinner {
	position: absolute;
	opacity: 1 !important;
	z-index: 999;
  background:transparent;
}
.spinner-msg {
	text-align: center;
	font-weight: bold;
}

@-webkit-keyframes throb {
	0% {
    -webkit-transform:scale(1);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);		
	}
	50% {
    -webkit-transform:scale(1.3);
    -webkit-box-shadow:0 9px 5px rgba(0,0,0,0.5);		
	}
	100% {
    -webkit-transform:scale(1);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3);		
	}
}

.spinner-img {
  -webkit-border-radius:20px;
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
  -webkit-animation-name: throb;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ccc));
	width: 20px;
	height: 20px;
	margin: 0 auto;
}


#footer {
  border-top:1px solid rgba(0,0,0,0.2);
  font-size:14px;
  color:rgba(0,0,0,0.6);
  overflow:auto;
}

#footer-right {
  float:right;
  width:265px;
  border-left:1px solid rgba(0,0,0,0.2);
  margin-top:-10px;
  padding:10px 0 10px 10px;
}
#footer-right > * {
  float:left;
  display:block;
  margin-bottom:8px;
  line-height:1.3em;
}
#footer-right span {
  padding-left:2px;
}

#ninjacam-plug img {
  margin-bottom:-9px;
}




body.no-touch {
  background:#ddd;
}

body.no-touch #wrapper {
  margin:20px auto;
/*  overflow:hidden;*/
  border: 1px solid  rgba(0,0,0,0.3);
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5), 0 0 1px white;
  -moz-box-shadow: rgba(0,0,0,0.5) 0 0 5px;    
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;  
  background-image: url('bg_texture.png');
}

body.no-touch #showcase-wrapper  {
  max-width:600px;
  max-height:600px;
}
body.no-touch .showcase-image {
  max-width:800px;
  max-height:600px;
}

#tap-to-return {
  margin-left:40px;
}

body.no-touch #tap-to-return, body.no-touch #showcase-instructions {
  display:none;
}

#ui-instructions {
  font-size:14px;  
  margin-top:20px;  
  position:relative;
}
  .no-touch #ui-instructions {
    margin-left:15px;
  }

#click-to-return {
  display:none;
}
body.no-touch #click-to-return {
  display:block;
}

#view-on-flickr {
  right:0;
  top:0;
  position:absolute;
  font-size:14px;
}
  .touch #view-on-flickr {
    right:25px;
  }



body.no-touch #outer {
  -webkit-transition: margin 0.4s ease-in-out;  
}
body.no-touch #outer.right {
  margin-left:-1400px;
}

body.no-touch #footer {
  padding-bottom:0;
}

body.no-touch .propper-width {
  margin-left:0px;  
  width:954px;
}


#browser-message {
  display:none;
  text-align:left;
  font-weight:bold;
  color:white;
  font-size:120px;
  padding:40px 60px;
  position:fixed;
  z-index:500;
  line-height:0.8em;
  text-transform:uppercase;
}
  #browser-message.fffuuu {
    color:red;
  }