@import url(reset.css);
@import url(superfish.css);
@import url(galleria/classic/galleria.classic.css);


/*** STRUCTURE ***/
/****************/
/*

 1) Layout 
	  - background style definitions
	  - department color styles
	  - article listing
	  - single story styles
	  - comments
 2) Navigation 
	  - wrapper for main navigation
	  - social menu
 3) Forms 
 	  - general form definitions used for comment-form
 	  - search form
 4) Misc 
 	  - general links
 	  - tooltip
 	  - footer columns
 5) Tabs
 	  - tabbed area on front page
 	  - keyword filtering in tabs
 6) Tagcloud
 	  - tag cloud level definitions

/*************************************************************/
/**************************1) LAYOUT**************************/
/*************************************************************/


body, html {
	height: 100%;
}

body {
	font-family: 'Arial', 'ＭＳ ゴシック', sans-serif; 
	
	
}

h1, h2, h3, h4, h5, #nav, .meta, ul.tabnav li a, legend, #footer, .story .tags {
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size: 10px;
	
}

h1 {
        font-family:"Times New Roman", Times, serif;
	margin-top:12px;
	margin-bottom:10px;
	font-size:17px;
	font-style:italic;
	font-weight:normal;
	color: #3F3F3F;
	line-height:120%;
	letter-spacing:0.05em;
	
}

h2 {
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
	margin-bottom:5px;
	font-size:9.5px;
	font-style:normal;
	font-weight: normal;
	color: #3F3F3F;
	line-height:140%;
	letter-spacing:1px;
	
	
}

h3 {
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
	margin-bottom:5px;
	font-size:9.5px;
	font-style:normal;
	font-weight: normal;
	color: #3F3F3F;
	line-height:140%;
	letter-spacing:1px;
	
	
}

h4 {
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
	margin-bottom:5px;
	font-size:9.5px;
	font-style:normal;
	font-weight: normal;
	color: #ffffff;
	line-height:140%;
	letter-spacing:1px;
	
	
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration:none;
}

a {
	color:#3F3F3F;
	text-decoration:none;
	
}

#wrapper {
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin-bottom: -410px; 
	position: relative;
	z-index: 2;
	color: #859094;
}

.cooolfixed #content, .cooolfixed .footercontent, .cooolfixed .headercontent{
	width: 960px;
	margin: auto;
	padding-bottom: 40px;
}

.cooolfixed #content .static{
	margin-bottom: 10px;
}

.cooolfixed .footercontent, .cooolfixed .headercontent{
	padding: 0 20px 0 0;
}


#footer {
	background: url(../img/footer02.png) top left repeat-x;
	padding: 40px 60px 0 60px;
	height: 370px;
	z-index: 12;
	position: relative
}

.footercontent {
	position: relative;
	height: 100%;
}

.pusher{
	height: 410px;
}


#content {
	padding: 0px 10px 0 25px;
	margin: 5px 0 25px 0;
	z-index: 9;
	position: relative;
	overflow: hidden;
}

.static{
	padding: 20px;
	overflow: hidden;
}

#header {
	background: url(../img/menu.png) top left repeat-x;
	padding: 0px 60px 0 60px;
	position: relative;
	z-index: 42;
	overflow: hidden;
}

#logokun {
	width: 270px;
	height: 32px;
	background: url(../img/logo02.png);
	float: left;
	margin-top: 15px;
	margin-left: -30px;
	z-index: 100;
}

#logo{
	margin: 40px 0 0 0;
	overflow: hidden;
	clear: both;
}

#search {
	float: right;
	position: relative;
	padding: 16px 0 20px 0;
}


/********** background style definitions **********/

.style_1 {
	background: url(../img/bg3.png) top left repeat;
	background-color: #ffffff;
}



.style_1 form{
	background: url(../img/content_1.png) top left repeat;
}

.style_1 .tabcontent {
	background: url(../img/content_1.png) top left repeat;
}

.style_1 .static{
	background: url(../img/content_1.png) top left repeat;
}

.style_1 .toparticle{
	background: url(../img/content_1.png) top left repeat;
}

.style_1 .secondarticle{
	background: url(../img/content_1.png) top left repeat;
}

.style_1 .article, .style_1 .toplist, .style_1 div.tabs {
	background: url(../img/content_1.png) top left repeat;
}

.style_1 .story {
	background: url(../img/content_1.png) top left repeat;
}





/******************department color styles*****************/

a.cat_business,a.cat_business:hover {
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
        font-size: 10px;
	font-style:normal;
	font-weight: normal;
	color: #999999;
	letter-spacing:1px;
}

a.cat_lifestyle,a.cat_lifestyle:hover {
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
        font-size: 10px;
	font-style:normal;
	font-weight: normal;
	color: #999999;
	letter-spacing:1px;
	}
a.cat_science,a.cat_science:hover {
         font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
         font-size: 10px;
	 font-style:normal;
	font-weight: normal;
	 color: #999999;
	 letter-spacing:1px;
}
a.cat_sports,a.cat_sports:hover {
        font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
        font-size: 10px;
	font-style:normal;
	font-weight: normal;
	color: #999999;
	letter-spacing:1px;
	}



/************* article ******************/

/************* top article listing ******************/

.toparticle span, .article span {
	line-height: 130%;
	font-size: 11px;
}

.toparticle span {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}

.toparticle{
	width: 420px;
	height: 330px;
	margin: 0 10px 10px 0px;
	padding: 15px 15px;
	overflow: hidden;
	float: left;
	border-radius: 5px;         /* CSS3 */
        -moz-border-radius: 5px;    /* Firefox */
        -webkit-border-radius: 5px; /* Safari,Chrome */
}

.toparticle .thumb a:hover, .article .thumb a:hover {
	color: #f4f4f3;
}

.toparticle .text {
        position: relative;
	height: 100%;	
}

.toparticle .text p{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}

.toparticle .text h1{
	font-size: 20px;
	line-height: 110%;
	font-weight: normal;
	letter-spacing: 0;
	display: block;
	margin: 0 0 10px 0;
}

.toplist ul {
	display: block;
	margin-top: 10px;
}

.toplist ul li{
	background-position: 0px 7px;
	padding: 0 0 0 10px;
	line-height: 130%;
}

.toplist ul li a {
	font-size: 10px;
	color: #859094;
	display: block;
	overflow: hidden;
	position: relative;
}

/************* second article listing ******************/

.secondarticle span, .article span {
	line-height: 130%;
	font-size: 11px;
}

.secondarticle span {
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}

.secondarticle{
	width: 650px;
	height: 330px;
	margin: 0 10px 10px 0px;
	padding: 15px 15px;
	overflow: hidden;
	float: left;
	border-radius: 5px;         /* CSS3 */
        -moz-border-radius: 5px;    /* Firefox */
        -webkit-border-radius: 5px; /* Safari,Chrome */
}

.secondarticle .thumb a:hover, .article .thumb a:hover {
	color: #f4f4f3;
}

.secondarticle .text {
        position: relative;
	height: 100%;	
}

.secondarticle .text p{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}

.secondarticle .text h1{
	font-size: 20px;
	line-height: 110%;
	font-weight: normal;
	letter-spacing: 0;
	display: block;
	margin: 0 0 10px 0;
}

.secondlist ul {
	display: block;
	margin-top: 10px;
}

.secondlist ul li{
	background-position: 0px 7px;
	padding: 0 0 0 10px;
	line-height: 130%;
}

.secondlist ul li a {
	font-size: 10px;
	color: #859094;
	display: block;
	overflow: hidden;
	position: relative;
}

/************* article listing ******************/

.article, .toplist {
	width: 191px;
	height:auto 0px;
	margin: 0 9px 9px 0px;
	padding: 15px 15px;
	overflow: hidden;
	float: left;
	border-radius: 5px;         /* CSS3 */
        -moz-border-radius: 5px;    /* Firefox */
        -webkit-border-radius: 5px; /* Safari,Chrome */
}

.article .thumb, .toparticle .thumb {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	margin: 0 0 5px 0;
}

.article .thumb a{
	background: url(../img/more.png) bottom right no-repeat;
	position: absolute;
	display: block;
	font-size: 10px;
	
	bottom: 0px;
	text-align: right;
	width: 191px;
	height: 400px;
	left:-20px;
	padding: 145px 26px 5px 0;
}

.article .text {
	position: relative;
	height: 100%;
}



.article .text p{
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
}

.article .text h2{
	font-size: 10px;
	line-height: 110%;
	font-weight: normal;
	letter-spacing: 0.03em;
	display: block;
	margin: 0 0 10px 0;
}









/*************************************************************/
/**************************2) NAVIGATION**********************/
/*************************************************************/

#nav{
	
	height: 55px;
	float: left;
	position: relative;
	z-index: 99;
	padding-top: 28px;
	margin-left: 25px;
}

#sociallinks {
	float: right;
	width:170px;
	padding: 10px 0 0 0;
}

#sociallinks ul.menu {
	display: block;
	line-height: 1.0;
	padding: 10;
	margin: 0;
}

#sociallinks ul.menu li {
	display: block;
	float: right;
	margin: 0 -50px 0 0;
}

#sociallinks ul.menu li a {
	
	display: block;
	width: 129px;
	height: 35px;
	text-indent: -99999px;
	
}


/************** social menu ******************/


#sociallinks .cat_facebook {
	background: url(../img/socialicons.png) 0px top no-repeat;
}
#sociallinks .cat_facebook:hover{
	background: url(../img/socialicons.png) 0px top no-repeat;
}

#footer .menu .menu {
	display: none;
}

#footer .menu li {
	border-bottom: 1px solid #383C40;
	padding: 12px 0 6px 0;
}

#footer .menu li a{
	font-size: 10px;
}

#footer a:hover{
	color: #ffffff;
}

#footer a{
	color: #575e64;
}

.pager {
	overflow: hidden;
	margin: 20px 0 20px 0;
}

.pager li {
	float: left;
	padding: 3px;
	display: block;
	background-color: #323437;
	margin: 0 3px 0 0;
	font-size: 10px;
}

.pager li a{
	color: #859094;
}

.pager li a:hover{
	color: #aebcc2;
}



/*************************************************************/
/**************************4) MISC ***************************/
/*************************************************************/


a:hover{
	color: #999999;
}

.hidden{
	display: none;
}

.tipsy { 
	padding: 5px; 
	font-size: 10px;
	letter-spacing: 0.05em;
	opacity: 0.8; 
	filter: alpha(opacity=80); 
	background-repeat: no-repeat;  
	background-image: url(../img/tipsy.gif); 
	}
  .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: #959596; max-width: 200px; text-align: center; }
  .tipsy-north { background-position: top center; }
  .tipsy-south { background-position: bottom center; }
  .tipsy-east { background-position: right center; }
  .tipsy-west { background-position: left center; }

.beam {
	background: url(../img/trekkie.png) center center no-repeat;
	width: 50px;
	height: 45px;
	display: block;
	text-indent: -99999px;
	position: absolute;
	bottom:30px;
	right:30px;
	cursor: pointer;
	filter: alpha(opacity=50);
	opacity: .5;
}

.beam:hover{
	filter: alpha(opacity=100);
	opacity: 1;
}

.footer-message{
	position: absolute;
	left: 60px;
	bottom:30px;
	color: #ffffff;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
	margin-bottom:5px;
	font-size:9.5px;
	font-style:normal;
	font-weight: normal;
	color: #c5d3d7;
	line-height:140%;
	letter-spacing:1px;
}


.ftext{
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','Arial',sans-serif;
	margin-top:20px;
	margin-bottom:5px;
	font-size:9.5px;
	font-style:normal;
	font-weight: normal;
	color: #c5d3d7;
	line-height:140%;
	letter-spacing:1px;
}


#footer h1, #footer h2{
	color: #c5d3d7;
	margin: 0 0 13px 0;
}
  
#fcol1, #fcol2{
	width: 580px;
	height: 350px;
	float: left;
	margin-left: 40px;
	overflow: hidden;
} 

#fcol3 {
	width: 150px;
	float: left;
	margin-right: 10px;
	overflow: hidden;
} 
/*************************************************************/
/**************************5) TABS ***************************/
/*************************************************************/

div.tabs {
	width: 200px;
	height: 260px;
	margin: 0 10px 10px 0;
	padding: 10px;
	overflow: hidden;
	float: left;
	z-index: 999;
	border-radius: 5px;         /* CSS3 */
        -moz-border-radius: 5px;    /* Firefox */
        -webkit-border-radius: 5px; /* Safari,Chrome */
}

.tabcontent {
	height: 287px;
	padding: 10px;
	
}

.tabcontent h1, .tabcontent h2, .tabcontent h3, .tabcontent h4 {
	display: none;
	
}


#filtering {
	display: block;
	overflow: hidden;
	margin: 12px 0 10px 0;
	
}

#filtering li {
	background-color: #ffffff;
	float: left;
	margin:2px;
	padding: 2px 55px 4px 5px;
	display: block;
	width:130px;
	border-bottom: 1px solid #999 !important;
	
}

.invis {
	display: none;
	filter: alpha(opacity=0);
	opacity: 0;
}



.tabcontent ul li {
	background-position: 0px 7px;
	padding: 0 0 0 10px;
	line-height: 130%;
}

.tabcontent ul li a{
	font-size: 13px;
	
	display: block;
	overflow: hidden;
	position: relative;
}

ul.tabnav {
	overflow: hidden;
}

ul.tabnav li {
    float: left;
}

ul.tabnav li a {
    padding: 6px 16px 4px 6px;
	display: block;
	color: #859094;
	font-size: 20px;
	letter-spacing: 0.5px;
	
}

ul.tabnav li a.selected,
ul.tabnav li a:hover {
	color: #000000;
}

ul.tabnav li a :focus {
        outline: 0;
}