/*

Theme Name: Tropicala
Description: Simple, modern, lightweight
Version: 1.2
Author: LetsEat.at
Author URI: http://www.LetsEat.at
Tags: grey, orange, white, fixed width, two columns, widgets, fixed width, valid XHTML, valid CSS, two columns, right sidebar, simple

This template is being distributed via Wordpress.org under GPLv3 license. Enjoy!

To replace the banner image, just swap out masthead.png with your own image, sized 723px x 147px. 
The dropshadows are in the background CSS, not the image.

v1.1 - changed license to GPLv3
v1.2 - added comments and removed some blank elements from stylesheet

*/

* {
  padding:0;
  margin:0;
  list-style:none;
}

body {
  font:12px Helvetica, Arial, sans-serif; /* Means 1em == 10px, 1.2em == 12px, etc. */
  background:#ededed url(./images/bg.gif) repeat-x;/* Set background image here */

}

p, h2, h3, h4, h5 {
  font-size:12px;
}

img {
  border:0;
}

.lht {
  color:#aaaaaa;
}


div#tiptop {
  width:920px;
  height:34px;
  padding-top:0px;
  margin:5px auto 0;
  background: transparent;
  background-color: transparent;
  /*background:url(./images/top.png) no-repeat;*/
}

div#wrapper {
  width:920px;
  padding-top:0px;
  margin:0 auto 0;
  background-color:#FFFFFF;
  border: 2px solid #e2e2e2;
  /*background:url(./images/top.png) no-repeat;*/
}

div#nav-bar {
  width:920px;
  position:relative;
  
}

/* Blog Title */
h1 {
  font:3.2em Helvetica, Arial, sans-serif;
}

h1 a {
  position:absolute;
  width:300px;
  height:30px;
  left:40px;
  top:15px;
  text-decoration:none;
  color:#910000;
}

/* Tagline */
#masthead p {
  position:relative;
  margin:0;
  top:62px;
  left:50px;
  color:#888;
}



/* Pages Navigation */
div#nav-bar ul {
  float:right;
  margin-right:18px;
  position:relative;
  bottom:-7px;
}

div#nav-bar ul li {
  float:left;
}

div#nav-bar ul li a {
  color:#FFFFFF;
  text-decoration:none;
  display:block;
  font-size:14px;
  padding:5px 13px 10px;
  margin:0px 3px 0px;
  border-top:2px solid #77a1c3;
 
}

div#nav-bar ul li a:hover{
  color:#ededed;
  border-top:2px solid #77a1c3;

}
div#nav-bar ul li.current_page_item a{
  color:#6e9cc2;
  background-color:#FFFFFF;
  border-top:2px solid #ededed;

}




/* Banner image dropshadow */
div#masthead_image {
  /*background:url(./images/image_bg.png) center no-repeat;*/
  width:724px;
  height:148px;
  clear:both;
  padding:8px 22px;
  position:relative;
  z-index:1;
}

a {
  outline:0;
}

/* Page dropshadow */
div#content {
  width:920px;
  /*background:url(./images/main_bg.png) repeat-y;*/
}

/*-----------------------------------------------------------------------------

  Main Content

-----------------------------------------------------------------------------*/

div#main {
  background-color:#ffffff;
  padding:0 20px 20px;
  width:585px;
  float:left;
}

/* Main header on single pages */
h2.header {
  color:#5ba2d8;
  font-size:21px;
  font-weight:normal;
  padding:9px 0 0 0;
  line-height:1;
  margin:0 0 3px;
  position:relative;
}

div#main h2.header a {
  color:#5ba2d8;
  text-decoration:none;
}

h2.header span {
  position:relative;
  background:#FFF;
  padding-right:10px;
  bottom:-5px;
}

/* Secondary headline above comments and comment form */
div#main h3 {
  margin:15px 0 5px;
  color:#6e9cc2;
}

div#main p {
  color:#6b6b6b;
  line-height:19px;
  margin:10px 0;
}

div#main a {
  color:#910000;
  text-decoration:none;
}

div#main a:hover {
  color:#910000;
  text-decoration:underline;
}

.article {
  border-top: 2px solid #ededed;
  margin-top:20px;
  margin-bottom:0px;
}

.article blockquote {
  margin:0 15px;
  padding:1px 15px;
  border-left:5px solid #B8D1E4;
  background:#F0F0F0;
}

.article ul, .article ol {
  font-size:12px;
  color:#6b6b6b;
  margin-left:15px;
}

.article ul li {
  margin:5px 0;
  padding-left:15px;
  background:url(./images/square.png) 0 center no-repeat;
}

.article ol {
  margin-left:30px;
}

.article ol li {
  list-style:decimal;
  margin:10px 0;
}

.article ol li ol {
  font-size:10px;
  margin-left:15px;
}

.byline {
  color:#6b6b6b;
  line-height:2;
  margin:10px 0 -10px 0;
  
}

ul.article_footer {
  text-align:left;
  margin:0 0 0 0;
  padding:5px 0 15px 0;
  line-height:1.5;
}

ul.article_footer li {
  font-size:10px;
  display:inline;
  background:none;
  border-left:1px solid #DADADA;
  margin-left:5px;
  padding-left:10px;
}

ul.article_footer li.first {
  border-left:0;
  margin-left:-10px;
  
}

/*-----------------------------------------------------------------------------

  Secondary Content

-----------------------------------------------------------------------------*/


div#secondary {
  list-style-type: none;
  padding:20px 20px 20px 0;
  width:275px;
  float:left;
}

div#secondary ul#sidebar {
  list-style-type: none;
  margin:15px 0 20px;
  color:#666666;
  padding-bottom:10px;
  
  
}

div#secondary ul#sidebar li {
  list-style-type: none;
  margin:3px 0;
  font-size:12px;
  line-height:17px;
 
  
}

/* Sidebar headers */
div#secondary h2 {
  list-style-type:none;
  color:#666666;
  font-weight:normal;
  margin:0 0px 10px;
  font-size:16px;

  
}

div#secondary a {
  color:#910000;
  text-decoration:none;
}

div#secondary a:hover {
  text-decoration:underline;
}

div#secondary ul.children {
  list-style-type: none;
  margin-left:5px;
  padding-left:10px;
  border-left:5px solid #EAEAEA;
}

div#secondary ul#sidebar li li {
  list-style-type: none;
  font-size:12px;
  display:block;
  width:122px;
  float:left;
}

/* Optional bio area header (commented out by default) */
div#author h2 {
  font-size:12px;
}

div#secondary p {
  line-height:1.5;
  margin:5px 0;
  color:#666;
}

/* Search input */
form#searchform {
  position:relative;
  height:28px;
  margin-bottom:18px;
}

form#searchform input#s {
  color:#666666;
  font-family:Helvetica, Arial, sans-serif;
  position:absolute;
  top:0;
  height:18px;
  width:189px;
  padding:7px 5px 2px 5px;
  background-color:#ffffff;
  border:2px solid #ededed;
}

input#search_submit {
  position:absolute;
  right:0;
}

.side-generic {
	background-color:#fafafa;
	width:245px;
	border-top:2px solid #ededed;
	border-bottom:2px solid #ededed;
	padding:15px;
	margin-bottom:15px;
}

.side-generic ul{
	list-style-type:none;
}

.side-generic li{
	list-style-type:none;
}

.side-generic h2{
	list-style-type:none;
}
/*-----------------------------------------------------------------------------

  Footer

-----------------------------------------------------------------------------*/

ul#footer {
  height:8px;
  width:768px;
  margin:0 auto;
  text-align:center;
  font-size:10px;
  color:#686868;
  padding:15px 0;
}

ul#footer li {
  display:inline;
  margin-left:10px;
}

ul#footer li span {
  position:absolute;
  text-indent:-9999em;
}

ul#footer li a {
  color:#910000;
  text-decoration:none;
}
ul#footer li a:hover {
  color:#910000;
  text-decoration:underline;
}

/*-----------------------------------------------------------------------------

  Wordpress Specific Stuff - Elements that weren't in my original stylesheet

-----------------------------------------------------------------------------*/

ol.commentlist {
  margin-top:15px;
  color:#555;
}

/* Background color for visitor comments */
ol.commentlist li {
  background:#F1F1F1;
  padding:10px;
  margin:10px 0;
}

/* Background color for Admin comments */
ol.commentlist li.alt {
  background:#EBF9FC;
}

textarea#comment {
  width:500px;
}

#main p.comment_meta {
  margin:0;
  float:right;
}

/* Optional popup window (NOTE: popups make for bad UI IMHO) */
body#commentspopup {
  background:#FFF;
  padding:20px;
}

body#commentspopup a {
  color:#910000;
}

body#commentspopup h1 a {
  position:relative;
  top:0;
  left:0;
}

body#commentspopup h3 {
  color:#555;
}

body#commentspopup p {
  margin:10px 0;
  color:#555;
}

body#commentspopup textarea {
  width:340px;
}

/* Image stuff for 2.6.1 */
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  padding-top: 4px;
  margin: 10px;
  -moz-border-radius: 3px;


  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none;
}

.wp-caption-dd {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0;
}

p.entry_info {
  clear:both;
}

div.navigation {
  margin:10px 0;
}

/*-----------------------------------------------------------------------------

  Page Specific Stuff - Blog 

-----------------------------------------------------------------------------*/

.img-wrap {
	padding:5px;
	border:2px solid #ededed;
	margin-right: 10px;
	margin-bottom: 5px;
}

/*-----------------------------------------------------------------------------

  Page Specific Stuff - About 

-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------

  Page Specific Stuff - Resum� 

-----------------------------------------------------------------------------*/

div#resume-wrapper {
	width:585px;
}

.resume-lft {
	padding-top:25px;
	padding-right:20px;
	width:77px;
	float:left;
	text-align:right;
	font:15px Helvetica, Arial, sans-serif;
	color:#6e9cc2;
 	line-height:19px;
}

.resume-rht {
	padding-top:25px;
	width:488px;
	float:left;
	font:12px Helvetica, Arial, sans-serif;
	color:#6b6b6b;
 	line-height:19px;
}
.clear-lft {
	clear:left;
    visibility:hidden;
}
.clear-bth {
	clear:both;
    visibility:hidden;
}


/*-----------------------------------------------------------------------------

  Page Specific Stuff - Resum� - Sidebar

-----------------------------------------------------------------------------*/
div#down-res-wrapper {
	width:245px;
	padding-bottom:6px;
}

.down-res-lpdf {
	width:25px;
	padding:17px 1px 0 10px;
	float:left;
}
.down-res-rpdf {
	width:60px;
	padding-top:20px;
	float:left;
}
.down-res-ldoc {
	width:25px;
	padding:21px 1px 0 10px;
	float:left;
}
.down-res-rdoc {
	width:80px;
	padding-top:20px;
	float:left;
}

div#work-wrapper {
	width:585px;
}

.work-single-wrap {
	padding:25px 0 25px 0;
	border-bottom: 2px solid #ededed;
}

.work-lft {
	padding-right:15px;
	width:345px;
	float:left;
}

.work-lft img{
	padding:5px;
	margin-right: 10px;
	margin-bottom: 5px;
	border: 2px solid #ededed;
}

.work-lft img:hover{
	border: 2px solid #cccccc;
}

.work-rht {
	padding-top:5px;
	width:205px;
	float:left;
	font:12px Helvetica, Arial, sans-serif;
	color:#6b6b6b;
 	line-height:17px;
}

.work-rht h1{
	font:17px Helvetica, Arial, sans-serif;
	color:#6e9cc2;
 	line-height:17px;
}

.clear-lft {
	clear:left;
    visibility:hidden;
}

/*-----------------------------------------------------------------------------

  Page Specific Stuff - Contact 

-----------------------------------------------------------------------------*/

.contact-lft {
	width:360px; 
	float:left;
}

.contact-rht {
	width:195px;
	float:left;
	padding:18px 0 0 10px;
}

.contact-rht h2 {
  color:#5ba2d8;
  font-size:15px;
  font-weight:normal;
  line-height:1;
  margin:0 0 -5px;
  position:relative;
}

div#social-wrapper {
	width:245px;
}

.social-lft {
	width:25px;
	padding:14px 0 0 10px;
	float:left;
}
.social-rht {
	width:87px;
	padding-top:15px;
	float:left;
}

/*-----------------------------------------------------------------------------

  CSS Magic

-----------------------------------------------------------------------------*/

.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
  .clearfix {display:block;}
/* End hide from IE Mac */

/*-----------------------------------------------------------------------------

  Flickr Badge

-----------------------------------------------------------------------------*/

/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position.
Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {
	background-color:#fafafa;
	width:245px;
	border-top:2px solid #ededed;
	border-bottom:2px solid #ededed;
	padding:15px 15px 15px 15px; 
	margin-bottom:15px;
}

#flickr_badge_wrapper {
	padding:4px 0 10px 0;
}

.flickr_badge_image {
	margin:0 1px 4px 3px;
	float:left;
}

.flickr_badge_image img{
	border: 1px solid #ededed !important;
}

.flickr_badge_image img:hover{
	border: 1px solid #910000 !important;
}

#flickr_badge_source {
	text-align:left; margin:0 10px 0 10px;
}

#flickr_badge_icon {
	float:left; margin-right:5px;
}

#flickr_www {
	display:block;
	padding:0 10px 0 10px !important;
	font: 12px Helvetica, Arial, Sans serif !important;
	color:#3993ff !important;}

#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {
	text-decoration:none !important;
	background:inherit !important;
	color:#000000;
}

#flickr_badge_source {
	padding:0 !important;
	font: 12px Helvetica, Arial, Sans serif !important;
	color:#ededed !important;
}

/*-----------------------------------------------------------------------------

  lightbox

-----------------------------------------------------------------------------*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.jamescolvard.com/wp-content/themes/tropicala/images/lb/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.jamescolvard.com/wp-content/themes/tropicala/images/lb/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Helvetica, Arial, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
