/*
Theme Name: Tomodachi Custom Theme
Theme URI: http://wordpress.org/
Description: Custom Theme for Tomodachi Web site
Version: 1.0
Author: hiro
Author URI: http://www.redbeautification.com/
Tags: Custom
*/

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

CSS Reset

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0; 
} 
table { 
	border-collapse:collapse;
	border-spacing:0; 
} 

fieldset,img {
	border:0; 
} 
address,caption,cite,code,dfn,th,var { 
	font-style:normal;
	font-weight:normal;
} 

ol,ul { 
	list-style:none; 
}
 
caption,th { 
	text-align:left; 
} 

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight: bold; 
} 

q:before,q:after {
	content:'';
} 

abbr,acronym { 
	border:0; 
} 


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

Defult setting

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

body {
	background-color: #fff;
	text-align: center;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: x-small;
	color: #606060;
}

a, a:link, a:visited, a:active {
	color: #db0048;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
}

a:hover {
	color: #07a2d8;
	text-decoration: underline;
}

p, address {
	font-size: 1.2em;
	line-height: 1.5;
	margin-bottom: 16px;
}

img {
	border: none;
}

hr {
	display: none;
}

div.hr {
	background: transparent url('images/stripes.gif') top left repeat;
	height: 5px;
}


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

Structure

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

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

#header {
	width: 960px;
	height: 106px;
	display: block;
	position: relative;
}

#menu {
	width: 882px;
	height: 39px;
	margin: 0 0 12px 39px;
	position: relative;
	
}

#container {
	width: 880px;
	margin: 0 auto 15px;
}

/*#content {
}*/

#sidebar {
	width: 265px;
	margin: 0;
}

#sidebar,
.homecolumn,
.twocolumn {
	float: left;
	display: inline;
}

.homecolumn {
	width: 600px;
	margin: 0 15px 0 0;
}

.twocolumn {
	width: 580px;
	margin: 0 31px 0 4px;
}

.singlecolumn {
	float: none;
	display: block;
	width: 880px;
	margin: 0;

}

#feature {
	width: 880px;
	height: 120px;
	margin: 0 auto;
}

#content .left-col,
#content .right-col {
	float: left;
	display: block;
	width: 220px;
	margin-right: 30px;
}

#content .right-col {
	margin-right: 0;
}

.post {
	margin-bottom: 30px;
	
}

body.blog .post {
	background: transparent url('images/dot_h.gif') bottom left repeat-x;
	padding-bottom: 10px;
}


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

Header

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

#header h1,
#header p {
	text-indent: -9999px;
}

#header h1 a {
	background: transparent url('images/logo_tomodachi.jpg') top left no-repeat;
	width: 346px;
	height: 85px;
	position: absolute;
	top: 10px;
	left: 40px;
}

#header p.phone {
	background: transparent url('images/tagline.gif') top left no-repeat;
	width: 234px;
	height: 44px;
	overflow: hidden;
	position: absolute;
	top: 33px;
	left: 673px;
}




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

Menu

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

#menu ul.main-menu {
	background: transparent url('images/menu.jpg') top left no-repeat;
	width: 882px;
	height: 39px;
	display: block;
	list-style-type: none;
	white-space: nowrap;
	text-align: left;
	position: absolute;
	top: 0;
	left: 0;
}

#menu ul.main-menu li {
	height:39px;
	float: left;
	text-indent: -9999px;
}

#menu ul.main-menu li a  { 
	height:39px;
	display: block;
	background-image: url('images/menu.jpg');
	background-repeat: no-repeat;
	text-decoration: none;
	outline: none;
}

#menu ul.main-menu a:hover {
	text-decoration: none;
}

#menu ul.main-menu li.frontpage a       { width: 80px; background-position: 0 0; }
#menu ul.main-menu li.shop a            { width: 76px; background-position: -80px 0; }
#menu ul.main-menu li.forum a           { width: 91px; background-position: -156px 0; }
#menu ul.main-menu li.news-and-events a { width: 125px; background-position: -247px 0; }
#menu ul.main-menu li.about-us a        { width: 100px; background-position: -372px 0; }
#menu ul.main-menu li.contact-us a      { width: 112px; background-position: -472px 0; }

#menu ul.main-menu li.frontpage a:hover       { background-position: 0 -39px; }
#menu ul.main-menu li.shop a:hover            { background-position: -80px -39px; }
#menu ul.main-menu li.forum a:hover           { background-position: -156px -39px; }
#menu ul.main-menu li.news-and-events a:hover { background-position: -247px -39px; }
#menu ul.main-menu li.about-us a:hover        { background-position: -372px -39px; }
#menu ul.main-menu li.contact-us a:hover      { background-position: -472px -39px; }

#menu ul.main-menu li.frontpage a:active       { background-position: 0 -78px; }
#menu ul.main-menu li.shop a:active            { background-position: -80px -78px; }
#menu ul.main-menu li.forum a:active           { background-position: -156px -78px; }
#menu ul.main-menu li.news-and-events a:active { background-position: -247px -78px; }
#menu ul.main-menu li.about-us a:active        { background-position: -372px -78px; }
#menu ul.main-menu li.contact-us a:active      { background-position: -472px -78px; }

body.home #menu ul.main-menu li.frontpage a          { background-position: 0 -117px !important; }
body.page-id-4 #menu ul.main-menu li.shop a          { background-position: -80px -117px !important; }
body.page-id-6 #menu ul.main-menu li.forum a         { background-position: -156px -117px !important; }
body.blog #menu ul.main-menu li.news-and-events a,
body.single #menu ul.main-menu li.news-and-events a,
body.archive #menu ul.main-menu li.news-and-events a { background-position: -247px -117px !important; }
body.page-id-9 #menu ul.main-menu li.about-us a      { background-position: -372px -117px !important; }
body.page-id-10 #menu ul.main-menu li.contact-us a   { background-position: -472px -117px !important; }


/* without shop */
/*#menu ul.main-menu li.frontpage a       { width: 80px; background-position: 0 0; }
#menu ul.main-menu li.forum a           { width: 91px; background-position: -80px 0; }
#menu ul.main-menu li.news-and-events a { width: 132px; background-position: -171px 0; }
#menu ul.main-menu li.about-us a        { width: 100px; background-position: -303px 0; }
#menu ul.main-menu li.contact-us a      { width: 113px; background-position: -403px 0; }

#menu ul.main-menu li.frontpage a:hover       { background-position: 0 -39px; }
#menu ul.main-menu li.forum a:hover           { background-position: -80px -39px; }
#menu ul.main-menu li.news-and-events a:hover { background-position: -171px -39px; }
#menu ul.main-menu li.about-us a:hover        { background-position: -303px -39px; }
#menu ul.main-menu li.contact-us a:hover      { background-position: -403px -39px; }

#menu ul.main-menu li.frontpage a:active       { background-position: 0 -78px; }
#menu ul.main-menu li.forum a:active           { background-position: -80px -78px; }
#menu ul.main-menu li.news-and-events a:active { background-position: -171px -78px; }
#menu ul.main-menu li.about-us a:active        { background-position: -303px -78px; }
#menu ul.main-menu li.contact-us a:active      { background-position: -403px -78px; }

body.home #menu ul.main-menu li.frontpage a            { background-position: 0 -117px !important; }
body.page-id-6 #menu ul.main-menu li.forum a           { background-position: -80px -117px !important; }
body.blog #menu ul.main-menu li.news-and-events a      { background-position: -171px -117px !important; }
body.page-id-9 #menu ul.main-menu li.about-us a        { background-position: -303px -117px !important; }
body.page-id-10 #menu ul.main-menu li.contact-us a     { background-position: -403px -117px !important; }*/


#menu #sns-menu {
	position: absolute;
	top: 7px;
	right: 0px;
	/*width: 175px;*/
	width: 145px;
}

#menu #sns-menu p {
	color: #fff;
	font-size: 11px;
	line-height: 1.9;
	margin: 0;
	float: left;
	width: auto;
}

#menu ul.sns-list {
	/*width: 120px;*/
	width: 90px;
	float: left;
}

#menu ul.sns-list li  {
	float: left;
	text-indent: -9999px;
}

#menu ul.sns-list li a {
	width: 20px;
	height: 20px;
	display: block;
	margin: 0 0 0 6px;
	background-color: transparent;
	background-position: top left;
	background-repeat: no-repeat;
}

#menu ul.sns-list li.facebook a { background-image: url('images/icon_facebook.gif'); }
#menu ul.sns-list li.twitter a { background-image: url('images/icon_twitter.gif'); }
#menu ul.sns-list li.flickr a { background-image: url('images/icon_flickr.gif'); }
#menu ul.sns-list li.youtube a { background-image: url('images/icon_youtube.gif'); }

#menu ul.sns-list li a:hover { background-position: bottom left; }

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

Content

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

#content h2 {
	font-size: 1.4em;
	text-transform: uppercase;
	height: 26px;
}

#content h3 {
	font-size: 1.4em;
	color: #292826;
	background: transparent url('images/dot_h.gif') bottom left repeat-x;
	padding-bottom: 3px;
	margin-bottom: 12px;
}

#content h3.noMargin {
	margin-bottom: 0;
	background-image: none;
}

#content h4 {
	font-size: 1.2em;
	color: #555;
	text-transform: uppercase;
}

#content div.hr {
	margin-bottom: 20px;
}

#content small {
	font-size: 1.1em;
}

#content ul,
#content ol {
	margin: 0 20px 16px;

}
#content ul li,
#content ol li {
	list-style-type: disc;
	font-size: 1.2em;
	line-height: 1.5;
}

/* Term of use page*/
body.page-id-50 #content ol li {
	list-style-type: lower-alpha;
	margin-bottom: 12px;
}

body.page-id-50 #content ol li li {
	list-style-type: lower-roman;
	font-size: 1em;
	line-height: 1;
}

/* site map page */
#content div.ddsg-wrapper ul li {
	margin-bottom: 0;
}

#content div.ddsg-wrapper ul ul li {
	margin-bottom: 0;
	font-size: 1em;

}

/* Photo Gallery */
div.flickr-photos a.tt-flickr-Square {
	position: relative;
	width: 75px;
	height: 75px;
	display: block;
	float: left;
	margin: 0 0 9px 9px;
}

div.flickr-photos a.tt-flickr-Square img {
	/*margin: 0 9px 9px 0;*/
	position: absolute;
	top: 0;
	left: 0;
}

div.flickr-photos a.tt-flickr-Square span.tt-flickr-frame {
	background: transparent url('images/flickr_thumb_frame.png') top left no-repeat;
	width: 75px;
	height: 75px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

div.flickr-photos a.linebreak {
	clear: both;
	margin-left: 0;

}


/* Begin Calendar icon */

#content .date {
	background: transparent url('images/icon_calendar.png') top left no-repeat;
	float:left;
	display: block;
	width:34px;
	height:48px;
	padding-right: 12px;
	text-align:center;
	color:#606060;
	margin:0;
	text-transform:uppercase;
	font-family: Arial, Helvetica, sans-serif;
	
}

#content .date span.month {
	font-size:10px;
	height:16px;
	line-height: 1.6;
	display:block;
	/*background-color: #db0048;*/
	/*background-color: #292826;*/
	/*border-right: 1px solid #ccc;*/
	color: #fff;
	margin-left: -2px;
}

#content .date span.day {
	font-size:18px;
	margin-left: -3px;
	/*background-color: #fff;*/
	display:block;
	/*border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;*/
}

#content div.blog-head {
	float: left;
	width: 530px;
	display: block;
	margin: -2px 0 12px;
}

#content div.blog-head p.posted {
	color: #8f8f8f;
	margin: 0;
}

#content div.blog-head p.posted a,
#content div.blog-head p.posted a:visited, 
#content div.blog-head p.posted a:active {
	color: #8f8f8f;
	text-decoration: underline;
}

#content div.blog-head p.posted a:hover {
	color: #8f8f8f;
	text-decoration: none;
	
}


/* map on contact us */

#content #map {
	width: 590px;
	height: 200px;
	margin-bottom: 25px;
}


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

Sidebar

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

#sidebar div.box {
	background: transparent url('images/sidebar_box.jpg') bottom left no-repeat;
	/*min-height: 331px;
	height:auto !important;
	height: 331px;*/
	position: relative;
}

#sidebar div.box h2 {
	font-size: 1.4em;
	text-transform: uppercase;
	margin-bottom: -6px;
}

#sidebar div.box h2.top-head {
	background: transparent url('images/sidebar_box.jpg') top left no-repeat;
	width: 217px;/*265px*/
	height: 23px;/*37px*/
	display: block;
	padding: 14px 24px 0;
	margin-bottom: 0;
}


#sidebar div.box div.middle {
	padding: 0 24px 24px;
}

#sidebar div.box ul {
	margin: 8px 0 12px;
}

#sidebar div.box ul li {
	background: transparent url('images/icon_bullet1.gif') center left no-repeat;
	padding-left: 10px;
	margin-left: 6px;
	font-size: 1.2em;
	

}

/* recent post*/
#sidebar div.recent-post {
	background: transparent url('images/sidebar_box.jpg') bottom left no-repeat;
	min-height: 331px;
	height:auto !important;
	height: 331px;
	position: relative;
	margin-bottom: 15px;
}

body.home #sidebar div.recent-post {
	margin-bottom: 0;
}

#sidebar div.recent-post h2 {
	background: transparent url('images/sidebar_box.jpg') top left no-repeat;
	width: 217px;/*265px*/
	height: 23px;/*37px*/
	display: block;
	font-size: 1.4em;
	text-transform: uppercase;
	padding: 14px 24px 0;
}

#sidebar div.recent-post h2 strong {
	color: #8f8f8f;
	font-weight: normal;

}

#sidebar div.recent-post p.rss-icon {
	position: absolute;
	top: 19px;
	right: 24px;
}

#sidebar div.recent-post ul li {
	background: transparent url('images/dot_h.gif') top left repeat-x;
	padding-top: 8px;
	margin-top: 8px;
}

#sidebar div.recent-post ul li.first-li {
	background-image: none;
	padding-top: 0;
	margin-top: 0;
}

#sidebar div.recent-post div.hr {
	margin: 0 24px;
}

#sidebar div.recent-post ul h3 {
	font-size: 1.2em;
	margin: 0 0 3px 0;

}

#sidebar div.recent-post ul p,
#sidebar div.recent-post ul small {
	color: #606060;
	font-size: 1.1em;
	line-height: 1.2;
	margin-bottom: 0;
}

#sidebar div.recent-post ul small {
	font-style: italic;
}

#sidebar div.recent-post p.btn {
	text-indent: -9999px;
	margin: 0;
	float: right;
	margin: 10px 24px 0 0;
}

#sidebar div.recent-post p.btn a {
	background: transparent url('images/btn_view_all.png') top left no-repeat;
	width: 79px;
	height: 27px;
	display: block;
}

#sidebar div.center-div {
	text-align: center;
	margin-top: 40px;
	
}


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

Feature

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


#feature ul li {
	float: left;
	display: inline;
	text-indent: -9999px;
}

#feature ul li a {
	width: 200px;
	height: 120px;
	display: block;
	margin-right: 15px;
	background-color: transparent;
	background-position: top left;
	background-repeat: no-repeat;
}

/*#feature ul li.feature1 a { background-image: url('images/feature_new_arrivals.jpg'); }*/
/*#feature ul li.feature1 a { background-image: url('images/feature_coupon.jpg'); }*/
#feature ul li.feature1 a { background-image: url('images/feature_coupon2.jpg'); }
#feature ul li.feature2 a { background-image: url('images/feature_visit_our_store.jpg'); }
/*#feature ul li.feature3 a {
	background-image: url('images/feature_forum.jpg');
	width: 450px;
	margin-right: 0;
}*/
#feature ul li.feature3 a {
	background-image: url('images/feature_facebook.jpg');
	width: 450px;
	margin-right: 0;
}




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

Footer

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

#footer {
	background: transparent url('images/dot_h.gif') top left repeat-x; 
	width: 880px;
	height: 50px;
	display: block;
	margin: 15px auto 0;
	padding-top: 15px;
}

#footer p {
	float: left;

}

#footer ul {
	float: right;

}

#footer ul li {
	float: left;
	display: inline;
}

#footer ul li a {	
	margin-right: 7px;
	padding-right: 7px;
	border-right: 1px solid #a5a5a5;
}

#footer ul li.lastLi a {
	margin: 0;
	padding: 0;
	border: none;
}


#footer ul li a,
#footer p {
	font-size: 1.1em;
	color: #a5a5a5;
}

#footer ul li a,
#fonter ul li a:visited,
#fonter ul li a:active {
	color: #a5a5a5;
	text-decoration: none;
}

#footer ul li a:hover {
	text-decoration: underline;
}

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

Form

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

/* sidebar search*/
#sidebar #search label {
	background: transparent url('images/sidebar_box.jpg') top left no-repeat;
	width: 265px;
	height: 12px;
	display: block;
	text-indent: -9999px;
}

#sidebar #search {
	background: transparent url('images/sidebar_box.jpg') bottom left no-repeat;
	width: 265px;
	margin: 0 0 15px;
	padding-bottom: 12px;
}

#sidebar #search form #s {
	margin: 0 5px 0 24px;
}

#sidebar #search #searchsubmit,
#content #searchform #searchsubmit  {
	background: transparent url('images/btn_search.gif') bottom left no-repeat;
	width: 62px;
	height: 24px;
	border: none;	
}

/* No Search Result */
#content #searchform label {
	font-size: 1.2em;
}

/* Submit button */
form input.submit {
	background: transparent url('images/btn-left.png') top left no-repeat;
	width: auto;
	height: 27px; 
	border: none;
	color: #db0048;
	padding: 0 0 4px 14px;
	display: block;
	float: left;
	cursor: pointer;
}

form p.btn span{
	background: transparent url('images/btn-right.png') top left no-repeat;
	width: 14px;
	height: 27px;
	display: block;
	float: left;
}

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

sIFR

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


.sIFR-flash {
	visibility: visible !important;
    margin: 0;
    padding: 0;
}

.sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
}
  
.sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
}
  
.sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
}

.sIFR-active #content h2 {
    font-family: Arial, Helvetica, sans-serif;
    visibility: hidden;
	line-height: 1;
}

.sIFR-active #sidebar h2 {
    font-family: Arial, Helvetica, sans-serif;
    visibility: hidden;
	line-height: 1;
}


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

Misc

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

.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 */

* html .clearfix {height: 1%;}

.clearAll {
	clear: both;
} 


.uppercase {
	text-transform: uppercase;
}

.alignleft {
	float: left;
	margin: 0  20px 20px 0;

}