@charset "utf-8";

/*========================================================================================================
* @name: cyclist　ヘッダー/フッター、レイアウト
* @file: global.css
* @date: 2012.05.25
* @author: y.koyama
* @comment: ヘッダー、フッターの配置とレイアウト設定
* @attention: 特になし
*========================================================================================================*/

/* ==== index ===============================================================

1. layout styles
2. header styles
	2-1. logo
	2-2. search box
	2-3. sicial button
3. navigation styles

4. display size
	4-1. layout

========================================================================== */

/* --------------------------------------------
1. layout styles
--------------------------------------------*/

#root {
	background:url("../../images/common/bg.png") #ffffff repeat-x;
}

#root.nonavi {
	background:url("../../images/common/bg02.png") #ffffff repeat-x;
}

#container {
	width:1000px;
	display:block;
	margin:0 auto 20px;
}

#containerZoom {
	width:1054px;
	display:block;
	margin:0 auto 20px;
	background-color:#ffffff;
}

#content {
	display:block;
	clear:both;
	margin:15px auto;
}
#content:after {
	content: ".";
	clear: both;
	height: 0;
	font-size: 0.1em;
	line-height: 0;
	display: block;
	visibility: hidden;
}
#area0 {
	width:970px;
	margin: 0 15px;
	display:block;
}
#area1 {
	width:655px;
	margin-left:15px;
	float:left;
}
#area2 {
	width:300px;
	margin-left:15px;
	float:left;
}

#area3 {
	width:1024px;
	margin-left:15px;
}

.global {
	clear: both;
}
.global ul li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
.global ul li a {
	display: block;
}

/* --------------------------------------------
2. header styles
--------------------------------------------*/

/*-- 2-1. logo --*/

.global header {
	margin: 0 auto;
	background:url("../../images/common/bg.png") repeat-x;
}

.global header .toolArea {
	height: 54px;
	background-color: #00829c;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.global header .siteLogo{
	background:url("../../images/common/logo_cyclist.png") left top no-repeat;
	width:194px;
	height:44px;
	position: absolute;
	top: 5px;
	left: 38px;
}

.global header .siteLogo a{
	display:block;
	width:194px;
	height:44px;
}

/*-- エラーページなど --*/

.etc .global header .siteLogo{
	color: rgba(0, 0, 0, 0);
	display: block;
	height:54px;
}

.etc .global header {
	position:relative;
}

.etc .global header:after {
	content: ".";
	clear: both;
	height: 0;
	font-size: 0.1em;
	line-height: 0;
	display: block;
	visibility: hidden;
}

/*-- 写真拡大 --*/

#containerZoom .global header {
	background-color: #00829c;
	margin: 0 auto;
}

#containerZoom .global .toolArea {
	width: 1024px;
	background-color: #00829c;
}

#containerZoom .global footer p {
	float: none;
	text-align: center;
}


.global header  p.closebutton {
	width: 140px;
	line-height: 30px;
	display:block;
	position:absolute;
	right:35px;
	top: 12px;
	text-align: center;
}

.global header p.closebutton span {
	display: block;
	height: 40px;
}

.global p.closebutton span a {
	text-align: center;
	display: block;
	border: 1px solid #4d4d4d;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	-webkit-text-shadow: 0 1px 1px #666;
	-moz-text-shadow: 0 1px 1px #666;
	-ms-text-shadow: 0 1px 1px #666;
	-o-text-shadow: 0 1px 1px #666;
	text-shadow: 0 1px 1px #666;
	background: #303030;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4d4d4d), color-stop(1, #303030));
	background: -webkit-linear-gradient(top, #4d4d4d 0%, #303030 100%);
	background: -moz-linear-gradient(top, #4d4d4d 0%, #303030 100%);
	background: -o-linear-gradient(top, #4d4d4d 0%, #303030 100%);
	background: -ms-linear-gradient(top, #4d4d4d 0%, #303030 100%);
	background: linear-gradient(top, #4d4d4d 0%, #303030 100%);

}

.global p.closebutton span a:hover {
	color: #fff;
	-webkit-text-shadow: 0 0 3px #efefef;
	-moz-text-shadow: 0 0 3px #efefef;
	-ms-text-shadow: 0 0 3px #efefef;
	-o-text-shadow: 0 0 3px #efefef;
	text-shadow: 0 0 3px #efefef;
	text-decoration:none;
}

/*-- 2-2. search box --*/

.global header .toolArea .searchbox {
	display: block;
	font-size: 100%;
	position: absolute;
	top: 12px;
	left: 320px;
}

.global header .toolArea #sesarchform {
	display: block;
	height: 30px;
}

.global header .toolArea .searchbox #search_box{
	vertical-align:middle;
	position:relative;
	margin: 0;
	width: 360px;
	padding: 2px 2px 2px 10px;
	height: 30px;
	background-color: #fff;
	border:1px solid #d9d9d9;
	border-top-left-radius: 6px;
	-moz-border-top-left-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-o-border-top-left-radius: 6px;
	-ms-border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	-moz-border-bottom-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-o-border-bottom-left-radius: 6px;
	-ms-border-bottom-left-radius: 6px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	*padding: 0;
}

.global header .toolArea .searchbox #searchsubmit {
	color: #fff;
	margin: 0;
	width: 40px;
	height: 30px;
	border:1px solid #d9d9d9;
	border-left: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	background: url(../../images/common/icon_search.png) #78dcf0 center center no-repeat;
	border-top-right-radius: 6px;
	-moz-border-top-right-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-o-border-top-right-radius: 6px;
	-ms-border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	-moz-border-bottom-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-o-border-bottom-right-radius: 6px;
	-ms-border-bottom-right-radius: 6px;
	cursor: pointer;
}

/*-- 2-3. follow button --*/

.global header .toolArea .followbutton {
	display: block;
	position: absolute;
	top: 8px;
	right: 20px;
}

.global header .toolArea .followbutton li {
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-left: 5px;
	*display: inline;
	*zoom: 1;
}

.global header .toolArea .followbutton li.fb a {
	background: url(../../images/common/icon_follow_fb.png) center center no-repeat;
	width: 34px;
	height: 34px;
	display:block;
}

.global header .toolArea .followbutton li.tw a {
	background: url(../../images/common/icon_follow_tw.png) center center no-repeat;
	width: 34px;
	height: 34px;
	display:block;
}

.global header .toolArea .followbutton li.fe a {
	background: url(../../images/common/icon_follow_fe.png) center center no-repeat;
	width: 34px;
	height: 34px;
	display:block;
}

.global header .toolArea .followbutton li.rs a {
	background: url(../../images/common/icon_follow_rs.png) center center no-repeat;
	width: 34px;
	height: 34px;
	display:block;
}

/* --------------------------------------------
3. navigation styles
--------------------------------------------*/

.global nav {
	font-size: 114%;
	clear: both;
	display: block;
	margin: 0 auto;
	width: 100%;
}

.global nav ul {
	display: block;
	width: 100%;
	height: 40px;
	margin:0;

}

.global nav li {
	display:inline;
	line-height:40px;
	margin-left: 3px;
	vertical-align: top;
}

.global nav li.first {
	margin-left: 38px;
}

.global nav li a {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	color: #666;
	padding:0 0.8em;
}

.global nav li a:hover {
	color: #78dcf0;
	border-bottom: 3px solid #78dcf0;
	text-decoration:none;
}

/* active 表示 */
.home .global header nav li a.home,
.whats-new .global header nav li a.whats-new,
.news .global header nav li a.news,
.story .global header nav li a.story,
.docycling .global header nav li a.docycling,
.events .global header nav li a.events,
.garage .global header nav li a.garage,
.product .global header nav li a.product,
.spindex .global header nav li a.spindex,
.race .global header nav li a.race,
.newspaper .global header nav li a.newspaper {
	color: #00677c;
	border-bottom: 3px solid #78dcf0;
	margin-bottom: 1px;
}

.global header nav li a.home {
	color: rgba(0, 0, 0, 0)!important;
	font-size: 0em!important;
	width: 60px;
	height: 40px;
	background:url("../../images/common/icon_home.png") center center no-repeat;
	padding: 0!important;
	vertical-align: top;
}

.home .global header nav li a.home {
	background:url("../../images/common/icon_home_on.png") center center no-repeat;
}

.global header nav li a.home:hover {
	background:url("../../images/common/icon_home_over.png") center center no-repeat;
}

.global header nav li a.cycletalk:hover,
.cycletalk .global header nav li a.cycletalk {
	color: #ff7500;
	border-bottom: 3px solid #ff7500;
	margin-bottom: 1px;
}

.global header nav li a.cycletalk {
	height: 40px;
	background:url("../../images/common/icon_cycletalk_or.png") left center no-repeat;
	padding-left: 30px;
	margin-left: 20px;
	vertical-align: top;
}
.global header nav li a.woman:hover,
.woman .global header nav li a.woman {
	color: #FF9999;
	border-bottom: 3px solid #FF9999;
	margin-bottom: 1px;
	background:url("../../images/common/icon_woman.png") left center no-repeat;
	background-size: 65px;
}

.global header nav li a.woman {
    height: 40px;
    background: url(../../images/common/icon_woman02.png) left center no-repeat;
    background-size: 65px;
    width: 65px;
    margin-left: 5px;
    vertical-align: top;
    box-sizing: border-box;
}

.global header nav li a.shopNav{
        height: 40px;
        width: 110px;
        vertical-align: top;
        position: relative;
        padding: 0;
        margin-left: 10px;
}

.global header nav li a.shopNav span{
background: #ccc;
color: #fff;
border-radius: 4px;
position: absolute;
top:8px;
display: block;
height: 25px;
line-height: 26px;
          width: 110px;
          text-align: center;
      }
.global header nav li a.shopNav:hover span{
          background: #00829C;
}
.global header nav li a.shopNav:hover,
.shopNav .global header nav li a.shopNav{
        color: #FFF;
        border-bottom: 3px solid #00829C;
        margin-bottom: 1px;
      }


.shopNav .global header nav li a.shopNav span{
          background: #00829C;
}

/*=== 3. footer */

.global footer {
	margin:0 20px 0;
	padding-bottom:20px;
	font-size:85.71%;
}

footer:after {
	content: ".";
	clear: both;
	height: 0;
	font-size: 0.1em;
	line-height: 0;
	display: block;
	visibility: hidden;
}

.global footer .shortcut {
	padding-top:15px;
	margin-bottom:15px;
	height:36px;
	border-bottom: 1px solid #cccccc;
}
.global footer .shortcut {
	float:none;
	text-align:right;
}

.global footer .shortcut a {
	display: block;
	float: right;
	line-height: 36px;
	text-align: center;
	text-decoration: none;
	margin-right:20px;
	padding:0 20px;
	color: #fff;
	background-color: #00829c;
}

.global footer .shortcut a:hover {
	color: #fff;
	-webkit-text-shadow: 0 0 3px #efefef;
	-moz-text-shadow: 0 0 3px #efefef;
	-ms-text-shadow: 0 0 3px #efefef;
	-o-text-shadow: 0 0 3px #efefef;
	text-shadow: 0 0 3px #efefef;
	text-decoration:none;
}

.global footer ul.siteInfo {
	float:none;
	margin-right:15px;
}

.global footer ul.siteInfo li {
	margin-right:20px;
}

.global footer ul.siteInfo li a {
	color:#666666;
}

.global footer ul.siteInfo li.help {
	background: url(../../images/common/list_help.png) 0% 50% no-repeat;
	padding-left: 15px;
}

.global footer ul.siteInfo li.sitemap {
	background: url(../../images/common/list_sitemap.png) 0% 50% no-repeat;
	padding-left: 15px;
}

.global footer ul.siteInfo li.rss {
	background: url(../../images/common/list_rss.png) 0% 50% no-repeat;
	padding-left: 15px;
}

.global footer ul.manage{
	margin:20px 0 20px;
}

.global footer ul.manage li {
	margin-right:15px;
}

.global footer ul.manage li a {
	color:#666666;
}

.global footer p {
	color:#666666;
	float: left;
	line-height:1.5;
}

.global footer p a {
	color:#666666;
}

.global footer ul.relatedservice {
	float:right;
}

.global footer ul.relatedservice li {
	text-align:center;
}

.global footer ul.relatedservice li a img {
	padding:5px;
	display:block;
	border:none;
}