@charset "UTF-8";
/*---------------------------------
Travel Spice index styleSheet
----------------------------------*/

#main { 
	width: 100%;
}

/* index.html topics -------------------------*/
#index-topics {
	border: 1px solid #02b300;
	border-radius: 1rem;
	padding: 10px;
	margin: 0 auto 50px;
}
#index-topics h2 { margin-top: 0px; }
#index-topics ul {
	padding: 0;
}
#index-topics li{
    background-image: none;
    border: none;
    padding: 0 10px 2px;
	list-style: none;
	margin-bottom: 0.5em;
}
#index-topics li a span {
	font-size: 120%;
}
#index-topics span.post-message {
	padding-left: 1em;
}

/* topics -------------------------*/
#topics {
}

#topics .event-info {
	padding: 20px 0 50px 0;
	border-bottom: 2px dotted #aaa;
}
#topics .post-title {
	font-size: 120%;
	color: green;
	margin-bottom: 5px;
}
#topics .msg-box {
}
#topics  h3{
	margin: 0.5em 0;
	line-height: 1.2;
	font-size: 16px;
	font-size: 1.6rem;
	border-bottom: 4px solid #18445c;
}
#topics ul {
	padding: 0;
}
#topics li{
    background-image: none;
    border: none;
    padding: 0 10px 2px;
	list-style: none;
	margin-bottom: 0.5em;
}
#topics li:last-child{
	margin-bottom: 0;
}
#topics img { width: initial; }
span.date {
	color: #18445c;
	display:block;
	float: right;
}
span.goto-detail {
	float: right;
}
span.indent {
	padding-left: 1em;
}

#main .item {
	width: 100%;
	min-height: 180px;
}
#main .item h3 {
	padding: 0.5em 0 0 0.5em;
	margin: 0;
}


/*media Queries
----------------------------------------------------*/
@media only screen and (min-width: 31.25em) {  /*500px*/
	#main .item {
		width: 49%;
		float: left;
		margin-right:1%;
		min-height: 200px;
	}
	#main .item:nth-child(2n) {
		margin-right: 0;
	}
}

@media only screen and (min-width: 41.875em) {  /*670px*/
	span.date {
		display:inline;
		margin-right: 0.5em;
	}
	#index-topics { width: 80%;}

}

@media only screen and (min-width: 56.25em) {  /*900px*/
	#main .item,
	#main .item:nth-child(2n) {
		width: 32.5%;
		float: left;
		margin-right:0.7%;
	}
	#main .item:nth-child(3n) {
		margin-right: 0;
	}

}


@media print {
	#sliderContainer,
	span.goto-detail {
		display:none;
	}
	#main .item {
	    width: 48%;
	    float: left;
	    margin-right: 2%;
	    margin-bottom: 20px;
	}
}