/*==============================================================
** top(index.html) Layout.
*  http://hati-hmk.com/index.html
*
==============================================================*/


/*Swf  (h2#swfArea)
====================================================*/
div#wrapper div#container h2#swfArea {
	margin: 16px 0 0;
}


/* contents -mainContentsTop-
====================================================*/
div#contents div.mainContentsTop {
	margin: 14px 0;
}

/* contents -mainContentsTop- section
====================================================*/
div#contents div.mainContentsTop div.section {
	margin: 0 0 10px;
}


/* contents -mainContentsTop- mainContentsTopLeftCol
====================================================*/
div#contents div.mainContentsTop div.mainContentsTopLeftCol {
	width: 480px; 
	margin: 0;
	float: left;
}

	
	/* section information 
	====================================================*/
		div#contents div.mainContentsTop div.information ul {
			margin: 16px 0 40px 20px;
		}

		div#contents div.mainContentsTop div.information ul li{
			margin: 0 0 10px;
		}

	/* section contact 
	====================================================*/
		div#contents div.mainContentsTop div.contact div.contactBox {
			margin: 0;
		}

		div#contents div.mainContentsTop div.contact div.contactBox p.contactBoxLeft{
			float: left;
			padding: 20px 0 0 20px;
		}

		div#contents div.mainContentsTop div.contact div.contactBox p.contactBoxRight{
			float: right;
			padding: 0 10px 0 0;
		}

		p#topDetailLinks {
			text-align: right;
			margin: 10px 0 0;
		}

	/* section link 
	====================================================*/
		div#contents div.mainContentsTop div.link div.linkBox {
			margin: 0;
		}

		div#contents div.mainContentsTop div.link div.linkBox ul {
			margin: 12px;
		}

		div#contents div.mainContentsTop div.link div.linkBox ul li{
			float: left;
			padding: 0 0 0 24px;
		}

		div#contents div.mainContentsTop div.link div.linkBox ul li img{
			border: 1px solid #999;
		}

/* contents -mainContentsTop- mainContentsTopRightCol
====================================================*/
div#contents div.mainContentsTop div.mainContentsTopRightCol {
	float: right;
	margin: 0;
	width: 420px;
}

	/* section newArrivalsBox 
	====================================================*/
		div#contents div.mainContentsTop div.newArrivals div.newArrivalsBox {
			margin: 0;
		}

		div#contents div.mainContentsTop div.newArrivals div.newArrivalsBox p.newArrivalsBoxLeft{
			float: left;
			padding: 10px 0 0 20px;
		}

		div#contents div.mainContentsTop div.newArrivals div.newArrivalsBox p.newArrivalsBoxRight{
			float: right;
			padding: 0;
		}


			/* section new Arrivals 
			====================================================*/
			div#contents div.mainContentsTop div.mainContentsTopRightCol div.newArrivals{
				padding: 0 0 0 20px;
				_padding: 0 0 0 20px;
			
			}


			/* section new Arrivals -> anythingSlider
			====================================================*/
			div.anythingSlider {
			width: 420px;
			_width: 400px;
			height: 270px;
			position: relative;
			}

			div.anythingSlider div.wrapperL {
			width: 400px;
			overflow: auto;
			height: 240px;
			position: absolute; top: 0; left: 30px;
			}

			div.anythingSlider div.wrapperL ul{
			 width: 99999px;
			 position: absolute; top: 0; left: 0;
			 margin: 0;
		}

			div.anythingSlider div.wrapperL ul li{
			display: block;
			float: left;
			width: 400px;
			height: 240px;
			margin: 0; 
		}

			div.anythingSlider div.wrapperL ul li a img{
				border: 1px solid #666;
			}


			div.anythingSlider .arrow {
			display: block;
			height: 200px;
			width: 64px;
			background: url(/images/top/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute;
			
			/* For fucking IE6.0....*/
			_background: url(/images/top/arrows.gif) no-repeat 0 0; text-indent: -9999px; position: absolute;
			
			top: 25px;
			cursor: pointer;
			}
			
			div.anythingSlider .forward {
			background-position: 0 0;
			right: -18px;
			_right: -38px;
			}
			
			div.anythingSlider .back {
			background-position: -87px 0; left: -20px;
			}
			
			div.anythingSlider .forward:hover {
				background-position: 0 -200px;
			}
			div.anythingSlider .back:hover {
				background-position: -87px -200px;
			}




		div#thumbNav { 
			position: relative;
			top: 240px;
			text-align: center;
			}


		div#thumbNav a {
			color: #333;
			font: 11px/18px Georgia, Serif;
			display: inline-block;
			padding: 2px 6px;
			height: 18px;
			margin: 0 5px 0 0;
			background-color: #fff;
			border: 1px solid #333;
			text-align: center; 
			 }
		div#thumbNav a:hover {
			background-color: #999;
			color: #fff;
			}
			
		div#thumbNav a.cur {
			background: #333;
			color: #fff;
			}
/* Stop Function(style)
		#start-stop                             { background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
		#start-stop.playing                     { background-color: red; }
		#start-stop:hover                       { background-image: none; }

/*




/* text module
====================================================*/
span.dateTopInfo {
	font-size: 114%;
	padding: 0 8px 0 0;
}