@charset "utf-8";

/********************************************

*    CSS Document for Hokkai.gr.jp          *

*    filename: main.css                     *

*    function: 1.set default value          *

*              2.set index2007.html value   *

*    birthday: 2007-04-20                   *

********************************************/



/* Default value

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

* { margin:0; padding:0; border:0;}



html, body { height:100%;}



ul, ol { list-style:none;}



a { text-decoration:none;}

a:hover { text-decoration:underline;}



iframe { border:none;}



table { width:100%; border-collapse:collapse; border-spacing:0;}



img { border:0;}



body {

	margin:0;

	background:#FAFAFA url(img/body_bg.gif) left top repeat-x;

}

/* Configuration

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

#page {

	width:1012px;

	margin:0 auto 0 0;

	background-color:#fff;

}

#header {

	width:1012px;

	margin:0;

	border-top:2px solid #002600;

}

h1 {

	width:233px;

	height:76px;

	text-indent:-2000px;

	margin:0 auto 0 35px;

	background:url(img/logo.gif) left 19px no-repeat;

}

h2 {

	font:bold 14px/26px "MS Gothic";

	color:#060;

	border-bottom:1px solid #B2B2B2;

}

h2 span { font-family:Arial;}

#main {

	width:1003px;

	margin:0;

	padding-right:9px;

	background:url(img/mainShadow.gif) right top repeat-y;

}

#content {

	width:734px;

	padding-right:14px;

	background:url(img/contentShadow.jpg) right top no-repeat;

}

#side {

	width:255px!important;

	width:252px;

	float:right;

}

#footer {

	padding:10px;

	background:url(img/mainShadow.gif) right top repeat-y;

	clear:both;

}

#footer p {

	font:12px/18px "Trebuchet MS","MS Gothic";

	color:#002600;

	padding-left:16px;

	border-left:8px solid #70C22C;

}

#footer span { font-weight:bold;}

#footer a {

	font:11px "Trebuchet MS",Arial;

	color:#002600;

	text-decoration:underline;

}

#footer a:hover { text-decoration:none;}

/* topNav

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

#topNav {

	font:11px/29px "Trebuchet MS",Arial;

	color:#333;

	margin:0 9px auto auto;

	background:url(img/topNav_bg.gif) left top no-repeat;

	float:right;

}

#topNav a {

	font:11px/29px "Trebuchet MS",Arial;

	color:#333;

	text-decoration:none;

	margin:0 14px;

}

#topNav a:hover {

	color:#070;

}

/* about

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

#about {

	position:absolute;

	top:380px;

	left:330px;

	z-index:2;

	width:660px;

	margin:0 0 0 auto;

	padding-top:40px;

	background:url(img/about.gif) right top no-repeat;

}

#about p {

	font:12px/22px "MS Gothic";

	color:#333;

	text-indent:20px;

	margin-right:14px;

}

#about p span { font-size:18px; font-weight:bold; color:#060; margin-right:6px;}

/* slide

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

#slide {

	z-index:1;

	width:1003px;

	height:378px;

	padding-right:9px;

	background:url(img/slide_shadow.gif) right top no-repeat;

}

.cf_box {

	width:1003px;

}

/* filiale

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

#filiale {

	padding:50px 13px 30px 13px;

	border-bottom:8px solid #BBF0BB;

	background:url(img/filiale_tt.gif) left top no-repeat;

	height:650px
}

/* sub1 */

.sub1 {

	width:346px;

	padding-right:13px;

	border-right:1px dashed #B2B2B2;

	float:left;

}

.sub1 dl {

	margin:8px 0;

	clear:both;

}

.sub1 dl img {

	margin:8px 14px 8px 0;

	border:1px solid #999;

	float:left;

}

.sub1 dt span { font-family:Arial, Helvetica, sans-serif;}

.sub1 dt a {

	font:bold 12px/22px "MS Gothic";

	color:#3252AB;

	text-decoration:none;

}

.sub1 dt a:hover { text-decoration:underline;}



.sub1 dd a {

	font:12px/18px "MS Gothic";

	color:#666;

	text-decoration:none;

}

.sub1 dd a:hover {

	color:#333;

	text-decoration:none;

}

/* sub2 */

.sub2 {

	margin-left:370px;

}

.sub2 dl img { border:1px solid #999;}

.sub2 dt { margin:10px 0 0 5px;}

.sub2 dt span { font-family:Arial;}

.sub2 dt a {

	font:bold 12px/30px "MS Gothic";

	color:#3252AB;

	text-decoration:none;

}

.sub2 dt a:hover { text-decoration:underline;}



.sub2 p { text-indent:12px;}

.sub2 p a {

	font:12px/18px "MS Gothic";

	color:#666;

	text-decoration:none;

}

.sub2 dd a:hover { color:#333; text-decoration:none;}

/* piclink

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

#picLink {

	width:350px;

	margin-top:10px;

	padding-top:20px;

	border-top:1px solid #B2B2B2;

}

#picLink img {

	margin:0 4px 6px 0;

}

/* news

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

#newsTitle {

	width:246px;

	height:35px;

	margin-left:0;

	background:url(img/news_tt.gif) left top no-repeat;

}

#news {

	width:246px;

	margin-left:0;

	text-align:center;

	background:url(img/sideBar_bg.gif) left top repeat-y;

}

#news img {

	border:1px solid #999;

	margin:10px auto;

}

/* news dl */

#news dl {

	width:90%;

	text-align:left;

	margin:0 auto;

	padding-bottom:8px;

}

#news dt p {

	font:bold 12px/18px Arial,"MS Gothic";

	color:#060;

	margin:10px 0;

	padding-left:4px;

	border-bottom:1px solid #3F3F3F;

}

#news dt span {

	font:bold 10px/16px Arial;

	margin-top:-26px;

	float:right;

}

#news dd {

	font:12px/18px "MS Gothic";

	color:#666;

	margin:0 6px;

}

#news dd a {

	font:12px/18px "MS Gothic";

	color:#060;

	border-bottom:1px dashed #060;

	text-decoration:none;

}

#news dd a:hover { color:#030; background-color:#f0f0f0;}

/* news ol */

#news ol {

	margin-bottom:-8px;

}

#news li {

	list-style-type:decimal;

	margin:0 auto 8px 20px;

}

.sideBar_btm {

	width:246px;

	height:9px;

	line-height:9px;

	margin:0 auto 5px 0;

	background:url(img/sideBar_btm.gif) left top no-repeat;

}

/* friendLink

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

#friendLink {

	width:246px;

	padding-top:30px;

	background:url(img/friendLink_tt.gif) left top no-repeat;

}

#friendLink ul {

	padding-top:15px;

	background:url(img/sideBar_bg.gif) left top repeat-y;

}

#friendLink li {

	list-style-type:disc;

	font-size:10px;

	color:#666;

	margin:0 10px 0 30px;

	border-bottom:1px dashed #ccc;

}

#friendLink li a {

	display:block;

	font:12px/24px "MS Gothic";

	color:#666;

	text-decoration:none;

}

#friendLink li a:hover {

	color:#111;

	background-color:#f0f0f0;

}

/* ad

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

#ad {

	width:246px;

	padding-top:39px;

	background:url(img/ad_tt.gif) left top no-repeat;

}

#ad ul {

	padding:10px 0 4px 0;

	background:url(img/sideBar_bg.gif) left top repeat-y;

}

#ad li {

	margin:5px 12px;

	border-bottom:1px dashed #ccc;

}