/*
THEME NAME: Tsubo
THEME URI: http://www.tsubomassage.com
DESCRIPTION: Custom theme for Tsubo Massage, Williamstown MA, based on Sandbox
VERSION: 1.0
AUTHOR: <a href="http://www.durablegoodsdesign.com">Durable Goods Design</a>
TEMPLATE: sandbox
*/

@import url("reset.css");

/* Colors
deep navy: #343556
light blue: #e2f4f9
multiplied blue: #c2e4f1
darker blue: #cfe9f3 // a3bac3
gray: #7d8392
hot magenta: #bc6fa4
light gray pink: #e4d7e5
*/


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

 BASICS
 
------------------------------
*/
.showgrid { background: url(img/960_grid_16_col.png);  }

img.align-right, img.alignright { float: right; margin: 0 20px 10px 20px; }
img.align-left, img.alignleft { float: left; margin: 0 20px 10px 20px; }
hr { clear: both; margin: 20px 0; background: #eee; color: #eee; width: 100%; height: 1px; border: none; }

blockquote { margin: 20px 0; }
blockquote p { margin: 20px 0; font-family: Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; color: #fff; z-index: 100; }
blockquote img.align-right { margin: -10px 30px 30px 0; }


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

 HEADER
 
------------------------------
*/

body { background: transparent url(img/tsubo-tl.png) top left no-repeat; font: 100%/1.5 "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; color: #7d8392; }
#wrapper { background: transparent; width: 1020px; margin: 0 auto; overflow: hidden; }
#header { position: relative; padding: 0 0 0 20px; }
h1 a { display: block; width: 200px; height: 174px; background: transparent url(img/logo.png) top left no-repeat; text-indent: -9999px; }
h1 a:hover { text-decoration: none; border: none; }
#blog-description { display: none; }
#access { display: none; }

#menu { width: 240px; margin: 20px 20px 50px 0; position: fixed; }

#menu .nav { padding: 0; margin: 40px 0 0 2px; font: .85em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .15em; }
#menu .nav li { margin: 10px 0 0 0; padding: 0 0 5px 0; }
#menu .nav li a:link, #menu .nav li a:visited { color: #343556; text-decoration: none; }
#menu .nav li a:hover { padding: 8px 8px 6px 8px; background: #343556; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#menu .nav .current_page_item a:link,
#menu .nav .current_page_ancestor a:link,
#menu .nav .current_page_item a:visited,
#menu .nav .current_page_ancestor a:visited
	{ padding: 8px 8px 6px 8px; background: #343556; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;  }
#menu .nav .current_page_item a:hover { background: #a3bac3; }


#menu h2 { margin: 30px 0 0 0; text-transform: uppercase; font-size: .80em; letter-spacing: .15em; }
#menu .contact { font-size: .80em; }

#meta { position: absolute; top: 10px; right: 0;  }
#meta li { float: left; margin: 0 20px 0 0; font: .80em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; }
#meta li a:link, #meta li a:visited { color: #bc6fa4; text-decoration: none; }
#meta li a:hover { border-bottom: 1px solid #e4d7e5; }

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

 MAIN CONTENT AREA
 
------------------------------
*/

#content { width: 720px; margin: 5px 0 50px 280px; overflow: hidden; }


a:link, a:visited { color: #82a6b4; text-decoration: none; }
a:hover { border-bottom: 1px solid #cfe9f3; }

#main h2 { margin: 0; font: 2em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; color: #343556; letter-spacing: .15em; }
#main h4 { margin: 0 0 10px 0; font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .15em; color: #497482; }
#main p { margin: 0 0 20px 0; font-size: 1.15em; }
#main p strong, #main li strong { color: #343556; }
#main p em, #main li em { font-style: italic; }
#main ul { margin: 0 0 20px 20px; width: 80%; list-style: circle; }
#main ul li { margin: 0 0 5px 0; }
#main .prompt { margin: 0; list-style: none; font-family: Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; font-size: 1.25em; }

/* homepage */
#home #main { float: left; width: 460px; margin: 120px 0 50px 0; }
#home #main #welcome { position: relative; height: 260px; margin: 0 0 15px 0; background: url(img/liftoff.jpg) top left no-repeat; }
#home #main #welcome p { position: absolute; bottom: 0; left: 10px; width: 60%; font: 1.05em/1.75  Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-shadow: 1px 1px #fff; }
#home #main #welcome p em { color: #343556; padding: 3px; background: #fff; background: rgba(255,255,255,.65); font-style: normal; }
#home #main #welcome p em strong { color: #ac2080; }
#home #main h3 { margin: 0 0 20px 0; font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; color: #77798f; letter-spacing: .15em; }
#home #main h4 + p { margin: 0 0 3px 0; font-style: italic; }
#home #main ul + h4 { margin: 20px 0 10px 0; }
#home #main .prompt a, #home #main .prompt a:visited { color: #bc6fa4; }
#home #main .prompt a:hover { border-bottom: 1px solid #e4d7e5; } 

/* no sidebar interior page */
.page #main  { float: left; width: 700px; margin: 120px 0 0 0; }
.page #main h2 + p { width: 90%; font-size: 1.45em; line-height: 1.35; font-style: italic; color: #968b97; }
.page #main h2 + .entry-content { margin-top: 10px; }
.page #main h3 { clear: right; margin: 20px 0 0 0; padding: 0; font: 1.35em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; color: #b51081; text-transform: none; letter-spacing: normal; }
.page #main h3 a { color: #b51081; text-decoration: none; }

.edit-link { font-size: .80em; text-transform: uppercase; }
.edit-link a { color: #343556; }

/* about */
.pageid-15 .entry-content li { font: 1em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; color: #343556; }

/* therapies */
.pageid-9  #main h2 + .entry-content p { margin-top: -10px; font-size: 1.25em;  font-style: italic; color: #968b97; }

/* acupuncture testimonials */
.pageid-59 #main .testimonials h3 { margin: 20px 0; }
.pageid-59 #main .testimonials p { font-size: .90em; }
.pageid-59 #main .testimonials p em { color: #343556; }
.pageid-59 .more { display: none; }

/* therapists */
.pageid-8 #main h3 { margin: 0; }
.pageid-8 #main ul#therapists { margin: 0; padding: 10px 0 0 10px; width: 100%; height: 120px; z-index: 1;  }
.pageid-8 #main #therapists li { padding: 0; float: left; list-style: none; } 
.pageid-8 #main #therapists li a:hover { border-bottom: none; }
.pageid-8 #main #therapists li a img { width: 60px; height: 60px; }
.pageid-8 #main p strong { color: #343556; }
.pageid-8 #main p strong a { color: #343556; }
.pageid-8 #main p strong a:hover { color: #82a6b4; }
.pageid-8 #main a.back { font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; }

/* contact */
.pageid-12  #main h3 { clear: none; }
.pageid-10  #main h3 { clear: none; }



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

BLOG
 
------------------------------
*/

.blog #main, .archive #main, .single #main { float: left; width: 480px; margin: 120px 0 0 0; }
.blog #main h2, .archive #main h3, .single #main h3  { margin: 0; font: 2em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: none; color: #b51081; letter-spacing: normal;; }
.blog #main h2 a:link, 
.blog #main h2 a:visited, 
.archive #main h3 a:link, 
.archive #main h3 a:visited { color: #b51081; }
.blog #main h2 a:hover, .archive #main h3 a:hover { color: #bc6fa4; border-bottom: 1px solid #e4d7e5;}
.archive h2 a:link, .archive h2 a:visited,
.single h2 a:link, .single h2 a:visited { color: #343556; }
.archive h4 { padding-bottom: 40px; }
.entry-date { font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; color: #343556; }
.entry-meta  { margin: 10px 0 40px 0; font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; color: #343556; }
.blog .edit-link, .archive .edit-link { font-size: inherit; text-transform: none; }
#comments { margin: 40px 0 0 0; }
#main #respond h3 { margin: 0 0 10px 0; font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .15em; color: #497482; }


/* polaroids */
.polaroid { display: block; padding: 5px; border: 1px solid #eee; background-color: white; -webkit-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4); -moz-box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4); box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4); }
.pull-left.polaroid { -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg);transform: rotate(-9deg); }
.pull-left-slight.polaroid { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);transform: rotate(-3deg); }
.pull-right.polaroid { -webkit-transform: rotate(9deg); -moz-transform: rotate(9deg);transform: rotate(9deg); }
.pull-right-slight.polaroid { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); transform: rotate(3deg); }
a.polaroid { -webkit-transform: rotate(10deg); -webkit-transition: -webkit-transform 0.5s ease-in; }
a.polaroid:hover, a.polaroid:focus, a.polaroid:active { z-index: 5; border-color: #ddd; -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.15); -moz-transform: rotate(0deg) scale(1.15); transform: rotate(0deg) scale(1.15); }


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

 SIDEBAR 
 
------------------------------
*/
#sidebar { float: right; width: 220px; margin: 120px 0 0 0; }
#sidebar h3, #sidebar h4 { margin: 15px 0 5px 0; font: .85em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .15em; color: #343556; }
#sidebar h3 a:link, #sidebar h3 a:visited { margin: 15px 0 5px 0; font: 1em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .15em; color: #343556; }
#sidebar ul { margin: 0 0 15px 0; }
#sidebar li { font-size: .95em; border-bottom: 1px solid #eee; }
#sidebar li li { border-bottom: none; }
#sidebar li p { font-size: .95em; }
#sidebar a:link, #sidebar a:visited { color: #82a6b4; text-decoration: none; }
#sidebar a:hover { border-bottom: 1px solid #cfe9f3; }
#sidebar strong { color: #333; }
#sidebar em { font-style: italic; }


/* hide the links on the homepage */
#sidebar .widget_links { display: none; }
.blog #sidebar .widget_links, .single #sidebar .widget_links, .archive  #sidebar .widget_links { display: block; }

#sidebar .contact-link {  font-family: Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif;}

/* twitter */
#sidebar .widget_twitter { border-bottom: none; }
#sidebar .twitter-item { margin: 5px 0 0 0; padding: 0 0 5px 0; border-bottom: 1px solid #cfe9f3; }
#sidebar .twitter-link {  font-family: Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif;}

/* e-newsletter */
.execphpwidget p + form { padding: 5px 0 0 0; }


/* wp login meta */
#sidebar #trapdoor { position: absolute; top: 100px; right: 0; padding: 10px; background: #e2f4f9; border: 1px solid #c2e4f1; }
#sidebar #trapdoor h3  { margin: 0 0 10px 0; font: .90em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; text-transform: uppercase; letter-spacing: .15em; color: #343556; }
#sidebar #trapdoor li { float: none; }

/* INPUTS */
input[type=text] { margin: 0 5px 0 0; width: 150px; height: 2em; border: 1px solid #ddd; font: .80em Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; color: #838593; }


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

 FOOTER 
 
------------------------------
*/
#footer { clear: both; height: 130px; padding: 20px 0 0 0; margin: 40px 0 0 20px; background: url(img/tsubo-br.png) bottom right no-repeat; font: .80em/1.5 Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; }
#footer h5 { text-transform: uppercase; }
#footer p { clear: left; padding: 20px 0 0 0; }
#footer li { float: left; margin: 0 5px 0 0; }
#footer a:link { color: #82a6b4; text-decoration: none; }
#footer a:hover { border-bottom: 1px solid #cfe9f3; }







/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   background:#b51081;
   font-size: .50em;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
}

/* creates triangle */
.triangle-isosceles:after {
   content:"\00a0";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   z-index:-1;
   bottom:-30px;
   left:50px;
   width:0;
   height:0;
   border-width:15px 15px;
   border-style:solid;
   border-color:#b51081 transparent transparent;
}

/* tooltip on homepage */
a.tooltip{
    position:relative; /*this is the key*/
    z-index:1;}

a.tooltip:hover{z-index:2;}

a.tooltip span{display: none}

a.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:40px; right:-40px; width: 150px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background:#e2f4f9;
    background: rgba(226,244,249,.75);
    padding: 5px;
    font-family: Futura, "Avant Garde", "Century Gothic", Arial, Verdana, sans-serif; font-size: .90em; color: #666;
    text-align: right; }