/*
Theme Name: TicTac - Wuhan
Theme URI: http://wuhan.authenticasian.com/

Description: My lousy attempt to reproduce a masterpiece by <a href="http://www.simplebits.com">Dan Cederholm</a>.

Version: 0.2
Author: Meng Gao
Author URI: http://wuhan.authenticasian.com/

	TicTac is a template created by Dan Cederholm for Blogger and it's one of my
	favorite designs. Therefore, I've created a WordPress theme in which I tried
	my best to make it look like Dan's original design. As much as I want to use the
	original graphics, I had to make slight changes to them so as not to run into
	copyright problems.

	Since this theme is an obvious attempt to reproduce TicTac, I take absolutely
	no credit in it. If you like this theme, write an email to Dan and let him
	know.
																	-- Meng Gao
*/



/* Main Sections 
------------------------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Futura, Verdana, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    color: #000;

    background: url(images/body_back.jpg) repeat;
}

/* orange  color: #FF9900; */

h4 {
font-size:12px;
}

.clear {
    clear: both;
    height: 1px;
    margin: -1px 0 0;
    font-size: 1px;
}

a {
color:black;
 }

a:hover{
color:#F90;
}




#page {
    width: 730px;
    margin: 0 auto;
    text-align: left;

}


#contentBox {
    width: 730px;
    margin: 0 auto;
    text-align: left;
    background: white url(images/box_shadow.gif) repeat-y;

}


#contentBoxTop {
	width: 730px;
	height:22px;
	margin: 0 auto;
	text-align: left;
//	background: url(images/box_shadow_top.jpg);

}


#contentBoxBottom {
    width: 730px;
    height:16px;
    margin: 0 auto;
    text-align: left;
    background: url(images/box_shadow_bottom.gif);

}




#content_top {
	width: 675px;
	height:115px;
	margin: -5px 0 0 25px;

}


#content_top_right {
 margin: -60px 0 0 350px;
	font-size: 90%;
}

.logo_text {
     margin: 40px 0 0 20px;
}



#content_image {

 width: 532px;
    height:205px;

    padding: 5px 0 0 0;
    margin: 0px 0 10px 0px;
	    border-bottom: 2px dotted #ddd;
	    border-top: 2px dotted #ddd;
	    
}

#content_main {
	float:left;
    text-align: left;
    width: 540px;
    margin: 0px 0 10px 20px;
    padding: 0;
    line-height: 1.5em;
background:white;
}




.content_content {
    margin: 0 0 0 0;
    padding: 0 0 0 4px;
}


.content_left {
	float:left;
	width: 170px;
    padding: 0 0 0 0px;
    border-right: 2px dotted #ddd;
}



.details{
text-align:right;
    padding: 10px 0 0 0px;
	float:left;
}

.login{
    padding: 10px 0 0 0px;
	float:right;
	width: 150px;
}


input.buttonForgot{
background: white; 
font-weight: bold; 
font-size: 10px; 
color: #FF6600;
}

.log{
   padding: 5px 0 0 0px;

}

.log input{

background:#ddd;
   border-style:none;
}

.content_right {
	width: 330px;
	margin: 0 0px 0 180px;
	padding: 0 0 1.5em 14px;
	color: #000; 
	font-size: 90%
}


.content_right_bottom{
  border-top: 2px dotted #ddd;
  
  margin: 10px 0px 0 0px;
padding: 5px 0 0 0px;


  
    
}



.content_right_bottom h2 {
	background-image:url(images/be_active.gif);
	height:15px;
	width:102px;
	margin: 10px 0 5px 0px;
}

.content_right_bottom h2 span {
display:none;
}


.ventura_beach {
	float:right;
	width: 150px;
	margin: 0;
	
	color: #000; 
	font-size: 110%

}


.ventura_beach h2 {
	background-image:url(images/ventura.gif);
	height:12px;
	width:65px;
	margin: 0px 0 10px 15px;
}

.ventura_beach h2 span {
display:none;
}

.malibu_beach {

 margin: 0;
   width: 150px;
	font-size: 110%
}

.malibu_beach h2 {
background-image:url(images/malibu1.gif);
height:12px;
width:37px;
margin: 0px 0 10px 15px;
}

.malibu_beach h2 span {
display:none;
}

.thumb {

border: 3px solid #CCC;
}

/* Conditions
------------------------------------------------------------------------- */


.content_left h2 {
background-image:url(images/todays_conditions.gif);
height:12px;
width:106px;
margin: 0 0 10px 15px;
}

.content_left h2 span {
display:none;
}



.conditions {

   width: 153px;
   height: 350px;

   background-color:#CCC;
}


.conditions  p{
   padding: 0px 0 0 0px;
}


.conditions .today_condition {
    padding: 0 0 0px 28px;
color: #000; 
font-size: 85%
}

.conditions h3 {

height:20px !important;
padding:5px 0pt 0pt 27px;
font-size: 100%
}

.conditions #conditions {
background:url(images/condition.gif) no-repeat scroll 5px 5px;

}


.conditions #tides {
background:url(images/tides.gif) no-repeat scroll 5px 5px;
}

.conditions #weather {
background:url(images/weather.gif) no-repeat scroll 5px 5px;
}

.conditions #water{
background:url(images/water.gif) no-repeat scroll 5px 5px;
}



/* Header 
------------------------------------------------------------------------- */

#header { 
height:90px;

    background: url(images/body_back.jpg) repeat;
    position: relative;
}

#wave {
    position: absolute;
    right: -7px;
    top: 10px;
        height: 94px;
        width: 761px;

    background: url(images/wave.jpg) no-repeat bottom left;

}


/* Top Nav
------------------------------------------------------------------------- */

ul li a { border:none; text-decoration:none; }

#top_nav{ 

   position:absolute;
    right: 20px;
    top: 68px;
  

}

#top_nav ul {

float: left;
list-style: none;
margin: 0px 0px 0px 10px; 
padding:0px;

}

#top_nav ul li{
display:inline;

}


#top_nav ul li a span {
visibility:hidden;
}


#top_nav ul li a{
height:12px;
float:left; 
display: block;

}


#top_nav ul li a#home{
width:28px;
background:url(images/nav/home.gif)  no-repeat 0 -12px;

}

#top_nav ul li a#home:hover{

background:url(images/nav/home.gif) no-repeat 0 -0px;
}


#top_nav ul li a#surf_report {
margin: 0px 0px 0px 0px;
width:65px;
background:url(images/nav/surf_report.gif)  no-repeat 0 -12px;

}

#top_nav ul li a#surf_report:hover{
background:url(images/nav/surf_report.gif)  no-repeat  0 -0px;
}

#top_nav ul li a#forecast {
width:47px;
background:url(images/nav/forecast.gif)  no-repeat 0 -12px;
}

#top_nav ul li a#forecast:hover{
background:url(images/nav/forecast.gif)  no-repeat;
}

#top_nav ul li a#community {
width:60px;
background:url(images/nav/community.gif) no-repeat 0 -12px;
}

#top_nav ul li a#community:hover{
background:url(images/nav/community.gif)  no-repeat;
}

#top_nav ul li a#ripper{
width:39px;
background:url(images/nav/rippers.gif) no-repeat 0 -12px;
}

#top_nav ul li a#ripper:hover{
background:url(images/nav/rippers.gif) no-repeat;
}

#top_nav ul li a#synopsis{
width:49px;
background:url(images/nav/synopsis.gif) no-repeat 0 -12px;
}

#top_nav ul li a#synopsis:hover{
background:url(images/nav/synopsis.gif) no-repeat;
}


#top_nav  ul li a#break {
width:35px;
background:url(images/nav/breaks.gif)  no-repeat 0 -12px;
}

#top_nav ul li a#break:hover{
background:url(images/nav/breaks.gif)  no-repeat;
}

#top_nav ul li a#opinions {
width:47px;
background:url(images/nav/opinions.gif)  no-repeat 0 -12px;
}

#top_nav ul li a#opinions:hover{
background:url(images/nav/opinions.gif)  no-repeat;
}

#top_nav ul li  a#broadkast{
width:56px;
background:url(images/nav/broadkasf.gif) no-repeat 0 -12px;
}

#top_nav ul li  a#broadkast:hover{
background:url(images/nav/broadkasf.gif) no-repeat;
}




.ventura_beach h3 span {
display:none;
}


#header h1 a {
    text-decoration: none;
    border-bottom: none;
    color: #fff;
}
#header h1 a:hover { 
    color: #eee; 
    text-shadow: #fff 0 0 4px;
}

img.logo_wave
{
	position:absolute;
    right: -2px;
    top: 30px;

}




/* Post (main content entries)
------------------------------------------------------------------------- */
.post {
    margin: 0 0 1.5em 0;
    padding: 0 0 1.5em 14px;
    border-bottom: 2px dotted #ddd;

}

.post h3 {
    margin-top: 0;
    color: #f63;
}
.post ul li {
	background: url(images/tictac_orange.gif) no-repeat 0 6px;
	margin-left: 0em;
}





/* Sidebar 
------------------------------------------------------------------------- */

#sidebar {

    margin: 0px 0px 0px 574px;
    padding: 8px 0 0 0;
    font-size: 85%;
    height: 100%;
    color: #999;
	
}

#sidebar h2 {
    padding: 25px 0 0 35px;
    color: #666;
    background: url(images/sidebar_icon.gif) no-repeat 5px 15px;
    height: 32px !important; /* for most browsers */
    height /**/:57px; /* for IE5/Win */
}

#sidebar ul, #sidebar p {
    padding: 5px 15px 1em;
    margin-left: -5px;
}

#sidebar ul { margin-bottom: 1em }
#sidebar ul ul { margin-bottom: 0; border-bottom: 1px solid #ddd; }
#sidebar ul ul ul { border-bottom: none; margin-bottom: 0; }
#sidebar ul li ul li { background: url(images/tictac_green.gif) no-repeat 0 6px; }



/* COMMUNITY 
------------------------------------------------------------------------- */

.plainLink {
color:black;
text-decoration:none;
}


/* box styles *********/
dl.newsTeaser { margin:0px 30px 0px 30px; padding:5px 0 5px 10px; color:#000;}
dl.newsTeaser dt { margin:0; padding:0 0 5px 5px; color:#000; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; }
dl.newsTeaser dd a:link, dl.newsTeaser dd a:visited { color:#53004d; text-decoration:none; border-bottom:1px solid #53004d; }
dl.newsTeaser dd a:hover { color:#0000; text-decoration:none; border-bottom:1px dotted #000; }



dl.newsTeaserAlt { margin:0px 30px 0px 30px; background:#F96; padding:5px 0 5px 10px; color:#000;}
dl.newsTeaserAlt dt { margin:0;  padding:5px 0 5px 5px; color:#000; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; }

/**/
dl.newsArticle { margin:10px 30px; padding:0; color:#000; font:12px Tahoma, Verdana, Arial, Helvetica, sans-serif; border-bottom:none; }
dl.newsArticle dt { margin:0; padding:0 0 5px 0; color:#000; font:bold 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; }
dl.newsArticle dd { margin:0; padding:0 0 5px 0; color:#000; font:12px Tahoma, Verdana, Arial, Helvetica, sans-serif; }
dl.newsArticle dd.myDate { color:#53004d; font:10px Tahoma, Verdana, Arial, Helvetica, sans-serif; }
dl.newsArticle dd.linkRight { text-align:right; }
dl.newsArticle dd a:link, dl.newsArticle dd a:visited { color:#53004d; text-decoration:none; }
dl.newsArticle dd a:hover { color:#0000; text-decoration:underline; }
/**/

/* FORKAST 
------------------------------------------------------------------------- */

#subscription {
 padding: 5px 15px 5px 15px;
}

#subscription ul{
 padding: 5px 15px 5px 25px;
}
/* FORKAST 
------------------------------------------------------------------------- */

#forekast {
 padding: 5px 15px 5px 15px;

}

.forecast {
 padding: 5px 0px 5px 0px;
    border-top: 2px dotted #ddd;
}

.horizon{

padding: 5px 15px 5px 10px;
background-color: #CCCCCC;

}

/* Report
------------------------------------------------------------------------- */

#report h3{
color:#F90;
}

#report_links {
width:80%;
margin: 5px 0px 0px 0px;
padding: 10px 0px 5px 10px;
background-color: #CCCCCC;
}

#report a{
color:black;
text-decoration:none;
}


#report a:hover{
color:#F90;
}

#report_left{
	float:left;
	width:25%;
	border-right: 2px dotted #ddd;
	margin: 0px 10px 0px 0px;
}

#report_left_add{
margin: 10px 0px 0px 0px;
height:450px;
}

#report_right{

}


#thumbs{

}

.report_thumbs{
margin-right:300px;
margin: 5px 10px 0px 0px;
float:left;
}


#editImage{

}

/* Rippers
------------------------------------------------------------------------- */
#rippers{
 padding: 5px 10px 5px 10px;
 }

#rippers_left{
	float:left;
	width:68%;
	height:100%;
	border-right: 2px dotted #ddd;
	margin: 0px 10px 0px 0px;
}

.orange{
color:#F90
}

/* Breaks
------------------------------------------------------------------------- */

#breaks{
 padding: 5px 10px 5px 10px;
 }
 
#breaks h3{
color:#F90;
}

#breaks a{
color:black;
text-decoration:none;
}


#breaks a:hover{
color:#F90;
}

#breaks_left{
	float:left;
	width:50%;
	border-right: 2px dotted #ddd;
	margin: 0px 10px 0px 0px;
}

#breaks_right{

}

#break_link{
width:90%;
margin: 5px 0px 0px 0px;
padding: 10px 0px 5px 10px;
background-color: #CCCCCC;
}

#break_link_left {
	float:left;
	width:50%;
}


#break_link_right{

}

/* Footer 
------------------------------------------------------------------------- */
#footer {
    margin: 0px;

text-align:center;
    color: #F60;

}

#footer p {
    padding: 10px 0px 20px 0;

}

#footer a { 
color:#F60;
text-decoration:none;
}

#footer a:hover { 
color:#F60;
text-decoration:underline;
}


/* Special handling for images & alignment 
------------------------------------------------------------------------------- */

p img {
	padding: 0;
	max-width: 100%;
}

img.centered {
	display: block;
	margin: 0 auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}



/* Slider
------------------------------------------------------------------------- */
#slider-gallery{
position: relative;

width: 768px;
height: 285px;
background-color: #FFF;
border:solid 1px white;

}


#slider-gallery-wrapper {


	overflow: hidden; 
	height: 240px; 
	width: 330px;

	position: relative;

}
 
#slider-gallery-inner {
	width: 330px;
	height: 150px;

	position: relative;
}
 
.scrolling-content {

	width: 330px;
	height: 228px;
	text-align: center;
	position: absolute;

}

#slider-gallery-wrapper a img{
border:none; 
text-decoration:none;
}

.scrolling-content h1 { 
	color: #000;
	padding: 5px 0;
	font-size: 12px;
}

#previousNavBox {
float:left;
width:50px;
height: 200px;

}

#previousNav {
margin: 70px 0 0px 0px;
}


a#previous{
display: block; /* a tag must be a block */
     width: 28px; /* width of reactive image */
     height: 37px; /* height of reactive image */
     background-image: url(images/arrow_left_up.jpg); /* source for start image */
     background-repeat: no-repeat;
}


a#previous:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(images/arrow_left_o.jpg); /* source for target image */
     }
     


#nextNavBox {
	float:left;
	width:50px;
	height: 200px;	
}

    
#nextNav {
margin: 70px 0 0px 0px;
}


a#next{
	display: block;
     width: 28px;
     height: 37px;
     background-image: url(images/arrow_right_up.jpg);
     background-repeat: no-repeat;
}


a#next:hover { 
     background-image: url(images/arrow_right_o.jpg);
     }


#contentCall1_50{
background:  url(images/callout_001.jpg) no-repeat top center;		
}


#contentCall1_50_text{

padding: 150px 0px 0px 80px;
text-align:left;
	
}


#contentCall2_50{
background-color:grey;		
}



.ditto_summaryPost h3 a{
color:#F90;
text-decoration:none;
}

#blogArticle h2 {
color:#F90;
}