@charset "utf-8";
/* CSS Document */


/* body *
************************************************************************/


body {
	background: #b1b1b1 url(../images/base.gif) repeat-x;
	color: #848484;
}

/* primary *
************************************************************************/


div#primary {
	width: 100%;
    height: 150px;
    background-color: white ;
}


/* header *
************************************************************************/


div#header {
	margin: 0px auto;
    padding-top: 13px;
    width: 965px;
    height: 55px;
}

/* logo */
h1#vertex-logo {
	float: left;
    display: inline;
    width: 209px;
}
div#tops-logo {
	float: right;
    display: inline;
    text-align: right;
    width: 192px;
}
img#linkhobby { padding-top: 3px; }


/* RWD --------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1090px) {
	div#header { width: 654px; }
}/* END min-width 768px and max-width: 1090px */

@media screen and (min-width: 482px) and (max-width: 767px) {
	div#header { width: 450px; }
	img#linkhobby {
		width: 160px;
		height: auto;
	}
}/* END min-width 482px and max-width: 767px */

@media screen and (max-width: 481px) {
	div#header { width: 100%; }
	h1#vertex-logo img {
		padding-left: 10px;
		width: 160px;
		height: auto;
	}
	div#tops-logo {
		padding-right: 10px;
		width: 160px;
	}
	img#linkhobby {
		width: 160px;
		height: auto;
	}
}/* END max-width 481px */
/* END RWD -----------------------------------------------------*/


/* menu *
************************************************************************/


div#menu {
	clear: both;
	margin: 0px auto;
    width: 701px;
    height: 30px;
    z-index: 1000;
}
div#menu ul {
	padding: 5px 0px;
    width: 700px;
	text-align: center;
    background-color: #231815;
}
div#menu ul li {
	display: inline;
	padding: 0px 10px;
}
div#menu ul a			{ color: red; }
div#menu ul li.active a,
div#menu ul li a:hover,
div#menu ul li a.stay	{ color: gray; }

/* RWD --------------------------------------------------------*/
@media screen and (min-width: 482px) and (max-width: 767px) {
	div#menu,
	div#menu ul		{ width: 450px;}
	div#menu ul li	{ padding: 0px 4px; font-size: 11px; }
}/* END min-width 482px and max-width: 767px */

@media screen and (max-width: 481px) {
	div#menu,
	div#menu ul		{ width: 100%;}
}/* END max-width 481px */
/* END RWD -----------------------------------------------------*/


/* content-top *
************************************************************************/


div#content {
	margin: 0px auto;
	padding-bottom: 40px;
    width: 965px;
    background-color: white;
    box-shadow: 0px 0px 12px #555555;
    -moz-box-shadow: 0px 0px 12px #555555;
    -webkit-box-shadow: 0px 0px 12px #555555;
    background: white url(../images/footer-top.gif) right bottom no-repeat;
}


/* RWD --------------------------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 1090px) {
	div#content { width: 654px; }
}/* END min-width 768px and max-width: 1090px */

@media screen and (min-width: 482px) and (max-width: 767px) {
	div#content { width: 450px; }
}/* END min-width 482px and max-width: 767px */
/* END RWD -----------------------------------------------------*/

@media screen and (max-width: 481px) {
	div#content {
		margin-top: 52px;
		padding: 0px 5% 40px 5% ;
		width: 90%;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
	}
}/* END max-width 481px */


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

div.content-header {
	margin: 22px auto 20px;
    padding: 20px 0px;
    width: 500px;
    height: 15px;
    text-align: center;
    background: url(../images/content-header.gif) 0px 0px no-repeat;
}

/* RWD --------------------------------------------------------*/
@media screen and (min-width: 482px) and (max-width: 767px) {
	div.content-header {
		width: 450px;
	    background: url(../images/content-header.gif) -50px 0px no-repeat;
	}
}/* END min-width 482px and max-width: 767px */
@media screen and (max-width: 481px) {
	div.content-header {
		width: 100%;
		height: auto;
	    background: url(../images/content-header_bottom.gif) 50% bottom no-repeat;
	    text-align: left;
		font-size: 13px;
	}
}/* END max-width 481px */
/* END RWD -----------------------------------------------------*/


div.attention {
	margin: 0px auto 30px;
    width: 530px;
    text-align: center;
    line-height: 1.7;
}

/* RWD --------------------------------------------------------*/
@media screen and (min-width: 482px) and (max-width: 767px) {
	div.attention {
		padding: 0px 28px;
		width: 394px;
		text-align: left;
	}
}/* END min-width 482px and max-width: 767px */
@media screen and (max-width: 481px) {
	div.attention {
		width: 100%;
		text-align: left;
	}
}/* END max-width 481px */
/* END RWD -----------------------------------------------------*/


/* column *
****************************************/

div.column1 {
	margin: 0px auto;
	width: 305px;
}

div.column1 li {
	float: left;
	display: inline;
	width: 305px;
	background: url(../images/column2_shadow.png) 0px 230px no-repeat;
}

div.column2 {
	margin: 0px auto;
	width: 650px;
}

div.column2 li {
	float: left;
	display: inline;
	margin: 0px 10px;
	width: 305px;
	background: url(../images/column2_shadow.png) 0px 230px no-repeat;
}

div.column3 {
	margin: 0px auto;
	width: 648px;
}

div.column3 li {
	float: left;
	display: inline;
	margin: 0px 9px;
	width: 198px;
	background: url(../images/column3_shadow.png) 0px 230px no-repeat;
}

div.column1 li p.itemName,
div.column2 li p.itemName,
div.column3 li p.itemName {
	margin: -24px 0px 24px;
	text-align: center;
	color: white;
}

div.column1 li p.itemComment,
div.column2 li p.itemComment,
div.column3 li p.itemComment {
	padding-bottom: 15px;
	height: 42px;
}

/* RWD --------------------------------------------------------*/
@media screen and (min-width: 482px) and (max-width: 767px) {
	div.column2 { width: 325px; }
	div.column3 { width: 432px; }
}/* END min-width 482px and max-width: 767px */
@media screen and (max-width: 481px) {
	div.column1,
	div.column2 { width: 100%; }
	div.column3 { width: 198px; }
	div.column1 li,
	div.column2 li {
		width: 100%;
		float: none;
		display: block;
		margin: 0px;
		background: none;
	}
	div.column3 li {
		float: none;
		display: block;
		margin: 0px;
		background: none;
	}
	div.column1 li img,
	div.column2 li img {
		width: 100%;
		height: auto;
	}
}/* END max-width 481px */
/* END RWD -----------------------------------------------------*/