/*

HTML Framework 
Version 0.1 Beta, July 14, 2009
Author: JD Graffam, http://jdgraffam.com/
Source: http://htmlframework.com/
Documentation: http://htmlframework.com/documentation.html

*/

/*a change on hover*/
a:hover {
	opacity: 0.8;
}
a {
	color: #777;
}

/* Typography
--------------------------------------------------------- */
body{
	font-family:verdana, sans-serif;
	font-size:11px;
	line-height:20px;
	width: 100%;
	min-width:1161px;
	}
	
/* Site Styles
--------------------------------------------------------- */
html{
	background:#fff;
	}
	
	body{
		
		padding:0 0;
		}
		
		#header,
		#navigation,
		#content,
		#footer{
			background:#CCC;
			margin-bottom:10px;
			padding-top:10px;
			border-top:3px solid #000;
			border-bottom:1px solid #000;
			
			}
		
			#navigation a{
				background:#AAA;
				}
				
				#navigation a:hover{
					background:#999;
					}
		
		#header .brand,
		#header .accessibility,
		#navigation ul,
		#content .primary,
		#content .misc,
		#footer .copyright,
		#footer .meta{
			background:#BBB;
			margin-bottom:10px;
			overflow:hidden;
			}

		#footer{
			margin-bottom:0;
			margin-top:10px;
			} 
/**
* Styles for the navigation.
*/
.header .nav {
    height: 54px;
    margin-left: 15px;
    margin-top: 59px;
    position: relative;
    width: 192px;
}

    .header .nav a {
        float: left;
        width: 49px;
        height: 0;
        padding-top: 49px;
        margin-left: 10px;
        overflow: hidden;
        outline: 0;
    }

        .header .nav a.home-button {
            background: url(../images/fss/home-button-off.png) no-repeat;
        }

            .header .nav a.home-button:hover {
                background: url(../images/fss/home-button-on.png) no-repeat;
            }

        .header .nav a.prev-button {
            background: url(../images/fss/prev-button-off.png) no-repeat;
        }

            .header .nav a.prev-button:hover {
                background: url(../images/fss/prev-button-on.png) no-repeat;
            }

        .header .nav a.next-button {
            background: url(../images/fss/next-button-off.png) no-repeat;
        }

            .header .nav a.next-button:hover {
                background: url(../images/fss/next-button-on.png) no-repeat;
            }


/*slideshow----------------------*/

.slideshow { height: 293px;}


/*header-----------------------------------*/

.header {
     background: url("../images/headerback.png") repeat scroll 0 0 transparent;
    height: 130px;
    text-align: center;
    width: 100%;
	position: fixed;
	bottom: 0;
	
}

.header a {
	color: #fff;
}
.insideheader {
    color: #FFFFFF;
    height: 97px;
    margin: 0 auto;
    text-align: left;
    width: 1022px;
	
}
.insideheader div {
    float: left;
}
.brand {
    width: 172px;
	margin-top: 53px;
}
.navigation_en {
    margin-top: 63px;
	position:relative;
	width: 643px;
	float:left;
}
.navigation_ja {
	float:left;
	position:relative;
	width: 643px;
}
.navigation_en ul li {
    float: left;
    padding-right: ;
}
.navigation_ja ul li {
    float: left;
    padding-right: 20px;
}

/*content  vertically centering------------*/
.floater {
    float: left;
    height: 50%;
    margin-bottom: -315px;
    width: 1px;
}
.content {
    clear: both;

    margin: 17px auto 0;
    position: relative;
    text-align: left;
    width: 1044px;
}
.oldwebsite {
    background-color: green;
    bottom: 95px;
    height: 44px;
    position: absolute;
    width: 100%;
    z-index: 300;
}
.insideoldwebsite {
padding-top:8px;
    width: 1044px;
    margin: 0 auto;
    font-size: 134%;

}
.insideoldwebsite a {
    color: #fff;
    letter-spacing: 0.1em;
	padding-left: 20px;
}

.pagetitle {
	
    font-size: 200%;
    line-height: 128%;
    font-weight: bold;
    border-bottom: 4px solid;
    padding-bottom: 3px;
	margin-bottom: 6px;
}
.pageinfo {
    line-height: 146%;
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);
	font-size: 108%;
}
.photogallery {
    border-left: 4px solid;
    height: 77px;
    margin-top: 9px;
    padding-left: 6px;
}

/*introduction page specific-------------------*/
#introduction .floater {
	 float: left;
    height: 50%;
    margin-bottom: -278px;
    width: 1px;
}


/*z-index----------------------------*/
.header {
	z-index: 400;
}
.content {
	z-index: 20;
}
.footer {
	
}
/*background--------------------------*/
#art {
    background: url("../images/artback.png") no-repeat scroll 17% bottom transparent;
}
#calligraphy {
    background: url("../images/calligraphyback.png") no-repeat scroll 4% bottom transparent;
}
#news {
    background: url("../images/newsback.png") no-repeat scroll 66px bottom transparent;
}
#access {
    background: url("../images/accessback.png") no-repeat scroll -27px bottom transparent;
}
/*#flower2 .background {
    background: url("../images/flowerback.png") no-repeat scroll -50px center transparent;
    bottom: 38px;
    height: 604px;
    position: absolute;
    width: 600px;
}*/
#flower2 {
    background: url("../images/flowerback.png") no-repeat scroll 4% bottom transparent;
}
/*footer------*/
.footer {
    background-color: #006991;
    bottom: 0;
    color: #FFFFFF;
    height: 231px;
	clear: both;
	margin-top: 100px;
}
#introduction .footer {
    background-color: #006991;
    bottom: 0;
    color: #FFFFFF;

margin-top: 0;
    width: 100%;
    z-index: 600;
}
.footerwrapper {
    width: 1044px;
    margin: 0 auto;
}
.footerright {
	float: right;
	text-align: right;
	width: 400px;
	    margin-top: 139px;
		padding-right: 20px;
}
.footerright a{
	color: #fff;
}
.footeraddress {
    float: left;
    width: 400px;
	    margin-top: 56px;
		padding-left: 20px;
		color:#fff;
}
/*flowerpage special------------*/
#flower2 .pagetitle {
	 background-image: url("../images/chikiriyalogo.png");
    background-position: 286px 23px;
    background-repeat: no-repeat;
}

/*concept page special-------*/
#concept .pageinfo {
	height:143px;
}
#concept .primary {
    float: none;
    margin: 0 auto;
    padding-left: 389px;
    width: 431px;
	
}
#concept .floater {
	    margin-bottom: -258px;
}
#concept .content {
  
	padding-top:72px;
}
#gagoudogou #concept .content {
    padding-top: 0;
}
/*news page special-------*/
#news .pageinfo {
    line-height: 214%;
}
#news .floater {
	margin-bottom: -266px;
}
/*access page special-------*/


/*contacts page special-------*/

#contacts .floater{
	    margin-bottom: -261px;
}
#contacts .content {
  
    width: 850px;
}
#contacts .primary {
    float: left;
    width: 300px;
}

/*mailform-----------*/
.form table .abs {
margin-left: 3px;
color: #f00;
}


#art {
    background: url("../images/flowerback_ip.png") no-repeat scroll 17% bottom transparent;
}
.primary {
    float: right;
    margin-right: 60px;
    width: 431px;
}
#access .content {
    width: 850px;	
	margin: 179px auto 0;
}
#access .primary {
    float: left;
    margin-top: 13px;
    width: 300px;
}
#accessmap {
    position: absolute;
    right: 0;
}
#introduction .primary {
  	margin-right:0;
    width: 1044px;
}
.pagetitle {
    border-bottom: 4px solid;
    font-size: 250%;
    font-weight: bold;
    line-height: 128%;
    margin-bottom: 6px;
    padding-bottom: 3px;
}
.pageinfo {
	height:100%;
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
	text-align: justify;
    line-height: 146%;
}
body#concept2 #concept {
    background-color: #FAEEE6;
}
body#calligraphy2 #concept {
    background-color: #FAEEE6;
}
#concept .pageinfo {
	height:auto;
}
#concept .primary {
    background-color: #FFFFFF;
    float: right;
    margin: 0 35px 0 auto;
    padding: 25px;
    width: 356px;
}
#body #concept .primary {
	height: 560px;
}
#concept .floater {
	    margin-bottom: -258px;
}

.content {
    margin: 111px auto 0;
    padding-bottom: 128px;
}
#introduction .content {
    margin: 0 auto 0;
    padding-bottom: 128px;
}
.header {
         background-color: #006991;
	 background-image:none;
    height: 100px;
    text-align: center;
    width: 100%;
	position: absolute;
	top: 38px;	
}
#news2 .header {
	background-color: #5A4A42;
}
#news2 .footer {
	background-color: #5A4A42;
}
#kenkyusho .header {
	background-color: #006991;
}
#kenkyusho .footer {
	background-color: #006991;
}
.insideheader {
	width: 1044px;
}
.brand {
    width: 203px;
	margin-top: 17px;
	padding-left: 20px;
}
.header .nav {
	margin-top: 24px;
}
.navigation_en {
    font-size: 130%;
    font-weight: bold;
    margin-left: 30px;
    margin-top: 17px;
    width: 788px;
}
.navigation_ja {
    font-size: 132%;
    font-weight: bold;
    margin-left: 38px;
    margin-top: 11px;
    width: 834px;
}
.pageinfo {
	height: auto;
}
.primary {
	height: auto;
}
.oldwebsite {
	position: inherit;
	}
.insideoldwebsite {

}
.photogallery {
	height: 150px;
}
#calligraphy .pagetitle {
    background: url("../images/calligraphyback.png") no-repeat scroll right bottom transparent;
    height: 190px;
    
}
#flower2 .pagetitle {
    background: url("../images/chikiriyalogo.png") no-repeat scroll 238px 24px transparent;
    color: #F15A29;
    font-size: 186%;
    height: 107px;
}
#art .pagetitle {
    background: url("../images/artback.png") no-repeat scroll right bottom transparent;
    height: 190px;
}
#news .pagetitle {
    background: url("../images/newsback.png") no-repeat scroll right bottom transparent;
    height: 190px;
}
#access .pagetitle {
	background-image: none;
    height: 50px;
}
#kenkyusho .pagetitle {
	border-bottom: 4px solid #006991;
}
	
.pagetitle {
	position:relative;
}
/*
body#news2 .pagetitle {
    position: relative;
    text-align: right;
}
*/
.titleinside {
	
}
#calligraphy, #flower2, #art, #news, #access {
	background-image: none;
}
#contactform {
    position: absolute;
    right: 0;
    width: 409px;
}
#contacts .pagetitle {
	font-size:200%;
	padding-bottom: 10px;
	
}
.header {
    margin: 0 auto;
    min-width: 1161px;
}
#fancybox-overlay {
	width:auto;
}
#introduction .pageinfo {
    font-size: 108%;
    line-height: 238%;
    margin-top: 67px;
	margin-bottom: 80px;

}
#introduction .pageinfo2 {
    font-size: 108%;
    line-height: 238%;
    margin-top: 45px;
    width: 770px;
	text-align: justify;
}
.scroller_japanese {
	width: 810px;
}
@media only screen and (device-width: 768px) {
  .scroller_japanese {
    width: 770px;
}
}

ul#topcontentmenu li {
    text-align: center;
    width: 77px;
	padding-right:1px;
}
ul#topcontentsocialmedia li {
    text-align: center;
    width: 59px;
}
#sliderWrap {
    background-color: #4480A5;
}
#sliderwidth {
    margin: 0 auto;
    width: 1045px;
}
#slider2 {
				
				background-image: none;
				height: 92px;
				margin-top: -59px;
				position: relative;
				
				/*customization for the positioning
				position: absolute;
				*/
				width: 730px;
				z-index: 200;
				padding-left: 20px;
			}
			#slider2 img {
			border: 0;
			}
			#sliderContent {
			    color: #FFFFFF;
				font-weight: bold;
				line-height: 131%;
				top:31px;
				position: absolute;
				text-align: left;
			}
			#openCloseWrap {
			position:absolute;
			
			
			font-weight:bold;
			position:absolute;
			bottom:-3px;
			}
			/*updates page-------*/
.update {
	float: none;
	margin: 0 auto;
	width: 550px;
}
.update .pagetitle {
	border-bottom: 4px solid;
    font-size: 200%;
    font-weight: bold;
    line-height: 128%;
    margin-bottom: 27px;
    padding-bottom: 3px;
}
.updateimages {
    background-color: black;
    width: 540px;
    height: 149px;
    padding: 6px;
}


/*concept page slideshow-----------*/


div#conceptslideshow {
    float: left;
    height: 651px;
    overflow: scroll;

    position: relative;
    width: 601px;
    z-index: 5;
}
body#concept2 div#conceptslideshow {
    background-color: #FFFFFF;
    float: left;
    height: 614px;
    overflow: scroll;
    position: relative;
    width: 580px;
    z-index: 5;
}
body#concept2 #conceptslideshow ul#conceptslides{
	margin: 0 auto;
}
	
	div#conceptslideshow ul#nav {
		display: none;
		list-style: none;
		position: relative; top: 255px; z-index: 15;
	}
	body#concept2 div#conceptslideshow ul#nav {
		top: 265px;
	}
		div#conceptslideshow ul#nav li#prev {
			float: left; margin: 0 0 0 0;
		}
		div#conceptslideshow ul#nav li#next {
			float: right; margin: 0 0 0 0;
		}
		div#conceptslideshow ul#nav li a {
			display: block; width: 80px; height: 80px; text-indent: -9999px;
		}
			div#conceptslideshow ul#nav li#prev a {
				background: url(../images/prev.png);
			}
			div#conceptslideshow ul#nav li#next a {
				background: url(../images/next.png);
			}

	div#conceptslideshow ul#sconceptlides {
		list-style: none;
	}
		div#conceptslideshow ul#slides li {
			margin: 0 0 20px 0;
		}