/*
Theme Name: arubabeaches.net
Theme URI: http://arubabeaches.net
Description: arubabeaches.net first custom Wordpress theme
Version: 1.0
Author: Gabriel
Author URI: http://arubabeaches.net
Tags: clean, basic, no-widgets just code!
*/

/*** General ***/
body {
	color: #555;
	background-color: #FFF;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial;
	font-size: 0.8em;
}
div { position: relative; }
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; border: 0; } /* Reset */
a img { border: 0; } /* Remove border from link image */
br.dirtyLittleTrick {
	clear: both;
	display: block;
	height: 1px;
	margin: -1px 0 0 0;
}
.container { margin: 0 auto; position: relative; width: 960px; } /* Main container width */
.clear { clear: both; } /* Clear all elements */
.floatleft { float: left; }
.floatright { float: right; }
/* Border radius */
#logo #srch, #slider ul, #slider ul li a:hover, #content .post img, .colindex .post img, #mailing, #about { -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/*** Header ***/
/* Tagline */
#tag { background-color: #EFEFEF; border-bottom: 2px solid #CCC; height: 50px; }
#tag span { color: #262626; position: absolute; left: 10px; top: 20px; font-size: 0.9em; font-weight: bold; text-decoration: underline; } /* Ad */
#tag p { color: #262626; position: absolute; right: 10px; top: 20px; font-size: 0.9em; } /* Subline */

/* Logo + Search */
#logo { background-color: #2E2E2E; height: 50px; }
#logo h1 { background: url(http://assets.hmmck.com/beaches/logo.png) no-repeat; height: 85px; left: 10px; position: absolute; text-indent: -9999px; top: -17px; width: 335px; z-index: 10; } /* Logo */
#logo h1 a { position: absolute; left: 0px; top: 17px; height: 50px; width: 335px; margin: 0; }
#logo #srch { background-color: #EFEFEF; padding: 4px; position: absolute; right: 10px; top: 7px; } /* Search */
#logo #searchform { margin: 0; border: 1px solid #CCC; }
#logo #search { color: #555555; font-size: 1.1em; font-weight: normal; padding: 5px 3px; width: 285px; }
#logo #searchsubmit { font-weight: bold; }

/* Slider */
#slider { background: url(images/background.jpg) repeat top left; display: block; height: 150px; z-index: 0; }

/* Nav + Soc */
#navsoc { background-color: #EFEFEF; height: 34px; }

/* Nav */
ul#nav { position: absolute; left: 75px; top: 0px; height: 34px; }
ul#nav li { display: inline-block; font-size: 1.1em; font-weight: normal; margin: 8px 0 0; padding: 0; list-style-type: none; text-transform: uppercase; }
ul#nav li a { background-color: #EFEFEF; color: #262626; padding: 8px; text-decoration: none; font-weight: bold; }
ul#nav li a:hover { background-color: #FDDE00; color: #262626; text-decoration: none; }

/* Social */
ul#social { position: absolute; right: 10px; top: 7px; }
ul#social li { display: inline-block; font-size: 0.9em; list-style-type: none; margin: 0 15px 0 0; }
ul#social li a { color: #2E2E2E; padding: 3px 0 8px 30px; }
ul#social li a:hover { color: #E98F00; text-decoration: none; }
ul#social li#rss a { background: url(images/rss.png) no-repeat 0 0; }
ul#social li#flickr a { background: url(images/flickr.png) no-repeat 0 0; }

/*** Main Content ***/
.main { float: left; margin: 0 10px; width: 620px; }
.index .post { border-bottom: 1px solid #CCC; display: block; height: 190px; padding: 5px 0 0; }
.index .post p { padding: 10px 0 0; }

/* Index */
span.indexheader { border-bottom: 1px solid #CCC; color: #CCC; font-size: 2em; margin: 10px 0; display: block; }
.index h2 { font-size: 1.6em; margin: 0 0 5px 110px; }
.index h2 a { color: #555; text-decoration: none; }
.index h2 a:hover { color: #000; border-bottom: 1px solid #000; }
.index .post p { padding: 10px 0 0 110px; }
img.tfe { height: 100px; float: left; margin: -25px 10px 10px 0; width: 100px; }
span.postinfo { font-size: 0.9em; padding: 5px 0; text-transform: uppercase; }
span.postinfo a { color: #555; text-decoration: none; }
span.postinfo a:hover { color: #000; text-decoration: underline; }

/* Post */
.content .post img { width: 99%; }
.content .post em { font-style: italic; }
.content .post { border-bottom: 1px dotted #CCC; padding: 15px 0; }
.content .post h2 { color: #000; font-size: 2em; font-weight: bold; margin: 0 0 10px; }
.content .post h2 a { color: #555555; text-decoration: none; }
.content .post h2 a:hover { color: #E98F00; text-decoration: underline; }
.content .post h3 { font-size: 1.5em; font-weight: normal; margin: 0 0 5px; }
.content .post h5 { margin: 15px 0 0; }
.content .post blocknote { background-color: #EFEFEF; font-style: italic; margin: 20; padding: 10px; }
.content .post span#topic { color: #555; font-size: 1em; font-style: italic; margin: 5px 0; }
.content .post span#topic a { color: #555; text-decoration: underline; text-transform: uppercase; }
.content .post span#topic a:hover { color: #000; text-decoration: none; }
.content .post p { font-size: 1em; line-height: 150%; margin: 10px 0; }
.content .post ul, .content .post ol { margin: 20px; }
.content .post li { list-style-position: inside; margin: 5px 0; }
.content .post .imgtfe, .colindex  .post .imgtfe { border: 1px solid #CCC; height: 64px; margin: 10px 10px 10px 0; overflow: hidden; padding: 3px; width: 64px; }
.content span.date, .colindex  span.date{ float: right; color: #555555; display: block; font-size: 1em; font-style: italic; font-weight: bold; margin: 5px 0 0; }
.content span.date a, .colindex  span.date a { color: #CCC; }
.content span.date a:hover, .colindex  span.date a:hover { color: #000; }

/* Pic captions */
.content .post h4 { color: #444444; padding: 5px 10px; font-size: 1em; font-style: italic; font-weight: bold; border: 1px solid #C6D9E9; background-color: #D3E7F8; margin: 0 0 10px; }

/* Post footer */
.content .post #post-footer { font-size: 1em; margin: 15px 0 0; padding: 5px 0 0; }
.content .post #post-footer p { color: #000; margin: 5px 0; }
.content .post #post-footer #feetbtn { border: 1px solid #CCC; margin: 5px; padding: 5px; }

/* Comments */
.content h3#comments { margin: 5px 0; }

/* Contact */
.wpcf7 { background-color: #EFEFEF; padding: 10px; }
.wpcf7 h4 { font-size: 2em; }
.wpcf7 em { display: block; }
.wpcf7 input { border: 1px solid #CCC; font-size: 1.2em; padding: 5px; }
.wpcf7 textarea { width: 313px; }

/* Page */
#page { margin: 0 10px; padding: 15px 0 0; }
#page h2 { font-size: 3em; padding: 10px 0; }
#page h3 { font-size: 1.3em; padding: 0 0 10px; }
#page h4 { font-size: 1.1em; padding: 0 0 10px; }
#page h5 { font-size: 0.8em; padding: 0 0 10px; }
#page p { font-size: 1em; padding: 0 0 10px; line-height: 150%; }
#page legend { font-size: 1.3em; padding: 5px; }
#page form#cformsform { background-color: #EFEFEF; }
#page form#cformsform ol { list-style: none; }
#page form#cformsform ol li label { width: 200px; }

/* Archive Design */
span.monthtitle { font-size: 1.3em; margin: 10px 0; }
ul.postspermonth { margin: 0 0 15px; }
ul.postspermonth li { font-size: 1.1em; margin: 3px 0; padding: 0 0 0 15px; }

/* Archive */
.archive h2 { font-size: 1.7em; font-weight: bold; text-transform: uppercase; padding: 15px 0; }
.archive h3 {  margin: 0 0 10px; }
.archive h3 a { color: #555; font-size: 1.7em; text-decoration: none; }
.archive h3 a:hover { color: #000; border-bottom: 1px solid #000; }
.archive p a { color: #555; text-transform: uppercase; }
.archive p { border-bottom: 1px solid #CCC; margin: 0 0 15px; padding: 0 0 15px; }

/* Pagination */
span#pagination { display: block; margin: 25px 0; }
span#pagination a { background-color: #555; color: #EFEFEF; font-size: 1em; margin: 10px 10px 10px 0; padding: 10px; text-decoration: none; }
span#pagination a:hover { background-color: #000; color: #FFF; text-decoration: underline; }

/*** Sidebar ***/
#sidebar { float: left; margin: 0 10px; width: 300px; }
#sidebar h2 { font-size: 1.4em; font-weight: bold; margin: 15px 0 0; }
#sidebar ul { list-style-type: none; margin: 0 0 15px; }
#sidebar ul#gallery { margin: 0; }
#sidebar ul#gallery li { display: inline-block; list-style: none; margin: 0 3px 0 0; }
#sidebar ul#gallery li img { height: 70px; width: 70px; }
#sidebar ul#gallery li a { border: 1px solid #FFF; display: inline-block; height: 70px; width: 70px; }
#sidebar ul#gallery li a:hover { border: 1px solid #000; }
#tweet, #about, #gallery, #latest, #footer, #cloud { border-top: 1px solid #CCC; padding: 15px 0; }

/* Ad */
#ad { background-color: #2E2E2E; border: 1px solid #000; color: #EFEFEF; margin: 10px 0 15px; padding: 15px 10px; text-align: center; }
#ad h3 { font-size: 1.2em; padding: 0 0 5px 0; }
#ad p { font-size: 1.1em; }
#ad a { background-color: #555; color: #FFF; display: block; padding: 3px; text-decoration: none; }
#ad a:hover { background-color: #FFF; color: #000; }

/* Others */
#latest p a { color: #555; display: block; margin: 1px 0 0; padding: 5px 0; text-decoration: none; }
#latest p a:hover { background-color: #EFEFEF; color: #000; display: block; }
#latest p#featured a { border: 1px solid #CCC; padding: 5px 0 5px 2px; }
#latest p#featured a:hover { border: 1px solid #555; }
#cloud a { color: #555; }
#cloud a:hover { color: #000; }

/* 404 Lost */
#lost { margin: 15px 0 0; }
#lost p a { color: #555; display: block; padding: 5px 0; text-decoration: none; }
#lost p a:hover { background-color: #EFEFEF; color: #000; display: block; }

/* Mailinglist */
#mailing { background-color: #EFEFEF; border: 1px solid #EFEFEF; color: #000; padding: 10px; display: block; height: 140px; margin: 10px 0 15px; }
#mc_embed_signup { display: block; margin: 10px 0 0; }
#mce-FNAME { color: #262626; width: 140px; border: 1px solid #262626; margin: 5px 0; padding: 2px; }
#mce-EMAIL { color: #262626; width: 140px; border: 1px solid #262626; margin: 5px 0; padding: 2px; }
.btn { background-color: #CCC; font-size: 1.5em; letter-spacing: 1px; padding: 5px; position: absolute; right: 15px; top: -50px; }
.btn:hover { background-color: #262626; color: #EFEFEF; }