/*
Theme Name: HiLo Teen Website
Theme URI: http://www.hilo-teen.com
Description: an official website of HiLo Teen
Author: Septi Yulia Sari aka. shape_tea
Author URI: http://www.stateoftheword.com/
Tags: colourful, orange, green, red, fixed width, three columns

	This theme was designed and built by shape_tea,
	whose blog you will find at http://www.stateoftheword.com/,
	This theme was specially designed for Nutrisari (http://www.hilo-teen.com), 
	a brand from Nutrifood Indonesia (http://www.nutrifood.co.id).	
-------------------------------------------------------------------------*/


body {
	background-color:#fff;
	font-size:72%;
	font-family: tahoma, "trebuchet ms", verdana, arial;
	color:#555;
	line-height:20px;
}

h2, #maincontent h2 {
	color:#1b217c;
	font-size:150%;
	letter-spacing:-1px;
	padding:5px 5px 6px 13px;
	margin:0px 0px 20px -5px;
	background-image:url(images/h2-title.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	font-family: tahoma, verdana, arial;
}

h2 ul.post-categories li {
	list-style-type:none;
	margin:0 0 0 -5px;
	padding:0 5px 0 13px;
}

h2 ul.post-categories li a, h2 ul.post-categories li a:link, h2 ul.post-categories li a:visited, h2.post-categories ul li a:hover {
	color:#1b217c;
	font-size:100%;
	letter-spacing:-1px;
	font-family: tahoma, verdana, arial;
}

#sidebarhome h2 {
	margin:0px 0px 20px -20px;
	background-image:url(images/h2-title-sidebarhome.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

#sidebar h2 {
	margin:0px 0px 15px -20px;
	padding:0px 0px 20px 30px;
	background-image:url(images/title-line.png);
	background-position:35px bottom;
	background-repeat:no-repeat;
}

#maincontent h2 {
	width:500px;
}

h3 ul.post-categories {
	margin:10px 0px 0px 0px;
	padding:0px;
	font-size:90%;
	letter-spacing:0px;
	line-height:18px;
}

h3 ul.post-categories li {
	list-style-type:none;
	padding:0px;
	margin:0px;
}

.artikel {
	background-color:#c9d500;
}

h3 {
	color:#c9d500;
	font-size:130%;
}

#maincontent h3 {
	color:#222;
	font-size:130%;
	font-family: tahoma, "trebuchet ms", verdana, arial;
}

#maincontent h3 a, #maincontent h3 a:link, #maincontent h3 a:visited {
	text-decoration:none;
	color:#444;
}

#maincontent h3 a:hover {
	text-decoration:none;
	color:#0295d8;
}

.sidebar h3, .sidebar ul.sub h3, .sidebar ul.sub h3.parent {
	color:#c9d500;
	font-size:140%;
	margin-top:0px;
	width:130px;
	height:80px;
	line-height:20px;
	font-weight:normal;
}

*+html .sidebar ul.sub h3.parent {
	color:#c9d500;
	font-size:110%;
	margin-top:0px;
	margin-left:-20px;
	width:140px;
	line-height:20px;
	font-weight:normal;
}

.sidebar ul.sub h3 {
	width:100px;
	margin-left:10px;
}

.sidebar ul.sub h3.parent {
	height:10px;
	font-size:110%;
}

.sidebar ul.sub h3.parent a, .sidebar ul.sub h3.parent a:link, .sidebar ul.sub h3.parent a:visited {
	text-decoration:none;
	color:#0295d8;
	font-weight:bold;
	letter-spacing:0px;
}

.sidebar ul.sub h3.parent a:hover {
	text-decoration:none;
	color:#c9d500;
}

.sidebar h3 a, .sidebar h3 a:link, .sidebar h3 a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	letter-spacing:0px;
}

.sidebar h3 a:hover {
	text-decoration:none;
	color:#c9d500;
}

.sidebar ul.sub h3 a, .sidebar ul.sub h3 a:link, .sidebar ul.sub h3 a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	letter-spacing:0px;
}

.sidebar ul.sub h3 a:hover {
	text-decoration:none;
	color:#c9d500;
}

.sidebar ul.sub h3 li {
	background-color:transparent;
	margin:0px;
	padding:0px;
	list-style-type:none;
}

.sidebar ul.sub h3 li a, .sidebar ul.sub h3 li a:link, .sidebar ul.sub h3 li a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:bold;
}

.sidebar ul.sub h3 li a:hover {
	text-decoration:none;
	color:#C9D500;
}

h3.result {
	color:#1b217c;
	font-size:130%;
	margin:0px 0px 5px 0px;
	padding:2px 0px 5px 0px;
	text-decoration:blink;
}

h4 {
	color:#555;
	font-size:110%;
	margin:15px 0px 7px 0px;
	padding:0px;
}

h4 a, h4 a:link, h4 a:visited {
	text-decoration:none;
	color:#333;
}

h4 a:hover {
	text-decoration:none;
	color:#0295d8;
}


h5 {
	font-size:120%;
	text-transform:none;
	letter-spacing:0px;
	line-height:16px;
	margin:20px 0px 15px 0px;
	font-weight:bold;
	text-align:left;
	color:#555;
	float:left;
	width:100%;
}

a, a:link, a:visited {
	text-decoration:none;
	color:#0295d8;
}

a:hover {
	text-decoration:none;
	color:#222;
}

a img, a:link img, a:visited img, a:hover img {
	border:none;
}

.sidebar a, .sidebar a:link, .sidebar a:visited {
	text-decoration:none;
	color:#fff;
}

.sidebar a:hover {
	text-decoration:none;
	color:#0295d8;
}


ul, ol {
	margin:5px 15px;
	padding:0px 5px;
}

ul li, ol li {
	margin:5px 10px;
	padding:3px 0px;
}

#page {
	width:860px;
	margin:0px auto 0px auto;
}

#bgcontainer {
	width:100%;
	background-image:url(images/figure-standart.gif);
	background-position:left top;
	background-repeat: no-repeat;
	float:left;
	padding:15px 0px;
}

#container {
	width:100%;
	background-image:url(images/shadow-home-button.png);
	background-position:left 165px;
	background-repeat: no-repeat;
	float:left;
}

#logo {
	width:100%;
	text-align:right;
	float:left;
	margin:0px 0px 12px 0px;
}

#header {
	background-color:#C6D601;
	width:100%;
	padding:8px 0px;
	text-align:center;
	float:left;
}

#header ul {
	width:100%;
	margin:0px auto;
	padding:0px;
	font-size:120%;
}

#header ul li {
	display:inline;
	padding:2px 20px;
	margin:0px;
	border-right:#fff solid 1px;
	font-weight:bold;
	letter-spacing:0px;
}

#header ul li a, #header ul li a:link, #header ul li a:visited {
	color:#151E7D;
	text-decoration:none;
}

#header ul li a:hover {
	color:#151E7D;
	text-decoration:underline;
}

#header ul li.noborder, .last {
	border:none;
}

#header ul .last li {
	border:none;
}

#content {
	background-color:#C1E7FC;
	width:100%;
	margin:0px auto;
	padding:0px 0px 10px 0px;
	float:left;
}

#sidebarhome {
	width: 200px;
	float:left;
}

.sidebar {
	width: 200px;
	float:left;
}

.bgcircle {
	background-image:url(images/blue-circle.png);
	background-position:-15px -65px;
	background-repeat:no-repeat;
	margin:0px;
	padding:0px;
}

ul.sub {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 10px;
	color:#c9d500;
	width:190px;
}

ul.sub li {
	/*background-color:#6abadf;*/
	background-color:#f176b7;
	margin:10px 0px;
	padding:3px 8px;
	list-style-type:none;
}

ul.sub a, ul.sub a:link, ul.sub a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:normal;
}

ul.sub li a:hover {
	text-decoration:none;
	/*color:#0295d8;*/
	color:#c1e7fc;
}

#maincontent {
	width:640px;
	border-left:#0295D8 dotted 5px;
	float:right;
	padding-left:0px;
}

#sidebarhome .section {
	border-bottom:#0097D0 dotted 5px;
	padding:10px 5px 20px 0px;
	margin:5px 5px 5px 10px;
	line-height:20px;
	float:left;
	width:235px;
}

.sidebar .section {
	border-bottom:none;
	padding:10px 5px 50px 0px;
	margin:5px 5px 5px 0px;
	line-height:20px;
	float:left;
	width:180px;
	font-weight:bold;
}

.sidebar .section ul {
	color:#c9d500;
	margin-top:0px;
}

.kuesioner {
	width:190px;
	padding:10px 15px;
	margin:0px 10px 10px 10px;
	background-color:#fff;
}

.kuesioner h3 {
	color:#1b217c;
	font-size:150%;
	letter-spacing:-1px;
	padding:7px;
	margin:-10px 0px 10px -15px;
	width:206px;
	text-align:center;
	font-family: tahoma, verdana, arial;
	background-color:#c9d500;
}

#sidebarhome .section a .kuesioner , #sidebarhome .section a:link .kuesioner, #sidebarhome .section a:visited .kuesioner {
	text-decoration:none;
	color:#222;
}

#sidebarhome .section a:hover .kuesioner {
	text-decoration:none;
	color:#0295d8;
}

.section, .nospace {
	border-bottom:#0097D0 dotted 5px;
	padding:3px 5px 5px 5px;
	margin:10px 20px 5px 13px;
	line-height:20px;
	float:left;
	width:auto;
}

.section {
	padding:10px 10px 20px 5px;
	margin:5px 10px 20px 13px;
}

.nospace {
	padding:5px 0px 5px 5px;
	margin:10px 0px 5px 13px;
	width:95%;
}

.noborder {
	border-bottom:none;
}

.orange {
	border-bottom:#DD910F dotted 5px;
	margin: 10px 30px 0px 10px;
	width:560px;
}

.blue {
	margin-right:35px;
	width:552px;
}

.close {
	margin:-8px 20px 5px 13px;
}

.larger {
	width:500px;
}

.post-content {
	border-bottom:#0097D0 dotted 4px;
	padding:0px 0px 15px 0px;
	margin:0px 0px 5px 0px;
	line-height:22px;
	float:left;
	width:auto;
}

.post-content a img.aligncenter, .post-content a:link img.aligncenter, .post-content a:visited img.aligncenter {
	border:#b3def0 solid 7px;
}

.post-content a:hover img.aligncenter {
	/*border:#9dd1e7 solid 9px;*/
	border:#87cde7 solid 7px;
}

a img.alignleft, a:link img.alignleft, a:visited img.alignleft, img.alignleft {
	border:#b3def0 solid 7px;
	float:left;
	margin:5px 20px 10px 0px;
}

a:hover img.alignleft,  {
	border:#87cde7 solid 7px;
	float:left;
	margin:5px 20px 10px 0px;
}

a img.alignright, a:link img.alignright, a:visited img.alignright, img.alignright {
	border:#b3def0 solid 7px;
	float:right;
	margin:5px 0px 10px 30px;
}

a:hover img.alignright {
	border:#87cde7 solid 7px;
	float:right;
	margin:5px 0px 10px 30px;
}

a img.alignnone, a:link img.alignnone, a:visited img.alignnone, img.alignnone {
	border:#b3def0 solid 7px;
	float:none;
	margin:5px 15px 10px 15px;
}

a:hover img.alignnone {
	border:#87cde7 solid 7px;
	float:none;
	margin:5px 15px 10px 15px;
}

img.alignleft, img.alignnone, img.alignright {
	border:none;
}


a img.aligncenter, a:link img.aligncenter, a:visited img.aligncenter {
	border:#b3def0 solid 7px;
	float:none;
	margin:10px auto 10px auto;
}

a:hover img.aligncenter {
	border:#87cde7 solid 7px;
	float:none;
	margin:10px auto 10px auto;
}

img.polaroid {
	background:#fff;
	border:#ddd solid 1px;
	padding:7px;
	margin:10px 0px;
}

.leftsection {
	width:220px;
	float:left;
}

.orange .leftsection {
	width:25%;
	margin-top:-15px;
	float:left;
}

.leftsection img.center {
	padding:0px 50px;
}

.rightsection {
	width:57%;
	float:right;
}

.nospace .leftsection {
	width:40%;
	float:left;
}

.nospace .rightsection {
	margin:-15px 1px 0px 0px;
	width:53%;
	float:right;
}

ul.event, ul.fav {
	margin:15px 0px 10px 0px;
	padding:0px;

}

ul.event li.cat-item, ul.event li, ul.fav li {
	width:86%;
	padding:14px 20px 10px 20px;
	margin:0px;
	list-style-type:none;
	background-image:url(images/white-bg.png);
	background-position:top right;
	background-repeat:no-repeat;
}

ul.event li {
	background-image:none;
	padding:0px 20px;
}

ul.fav li {
	padding:15px 30px 15px 20px;
	width:95%;
	background-position:right 20px;
	color:#333;
}

ul.activity {
	margin:5px 10px 20px 10px;
	padding:0px;
}

ul.activity li {
	width:100%;
	padding:5px 0px;
	margin:0px;
	list-style-type:none;
}

.white {
	background-color:#fff;
}

hr {
	border:none;
	padding:0px;
	margin:0px 0px 12px 0px;
	border-bottom:#0097D0 dotted 4px;
}

ul.single {
	margin:5px 5px;
	padding:5px;
}

ul.single li {
	margin:5px 10px;
	padding:5px 0px;
	line-height:18px;
}


ul.gallery {
	margin:5px;
	padding:0px;
	width:100%;
}

ul.gallery li {
	margin:0px;
	padding:0px;
	float:left;
	list-style-type:none;
}

ul.gallery li a img.alignleft, ul.gallery li a:link img.alignleft, ul.gallery li a:visited img.alignleft {
	border:#b3def0 solid 5px;
	float:left;
	margin:0px;
	filter:alpha(opacity=60);
	-moz-opacity:.60;
	opacity:.60;
}

ul.gallery li a:hover img.alignleft {
	border:#87cde7 solid 5px;
	float:left;
	margin:0px;
	filter:alpha(opacity=99);
	-moz-opacity:.99;
	opacity:.99;
}

.jigsawPuzzle img {
	margin-left:100px;
	float:right;
}

.thumbnail {
	width:20%;
	float:left;
}

.thumbnail img {
	border:#b3def0 solid 7px;
}

.posting {
	width:72%;
	float:right;
	vertical-align:top;
}

.posting p {
	margin:0px;
}

#footer {
	width:100%;
	padding:10px 0px;
	text-align:center;
	background-color:#C6D601;
	color:#fff;
	margin:10px 0px;
	float:left;
}


/* Form */

ul.contact {
	margin:5px 15px;
	padding:0px;
	width:100%;
	float:left;
}

ul.contact li, ul.contact li.title, ul.contact li.action {
	list-style-type:none;
	margin:5px 0px;
	padding:0px;
	width:30%;
	float:left;
}

ul.contact li {
	width:70%;
}

ul.contact li.action {
	width:100%;
}

.field {
	width:280px;
	padding:4px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#666;
}

.short {
	width:45px;
}

textarea {
	width:500px;
	height:150px;
	padding:4px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-size:100%;
	color:#666;
}

select {
	font-size:100%;
}

ul.contact textarea {
	width:280px;
	height:100px;
	padding:4px;
	border:#ddd solid 1px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-size:100%;
	color:#666;
}

.mid {
	width:163px;
	height:50px;
}

.asterisk {
	color:#be0031;
}

.notes {
	margin:20px auto 0px 15px;
	float:left;
}

.corner {
	margin-right:-9px;
}

.twtr-widget {
margin:20px 0px 0px 0px;
}

/*------------------- IE BUGS ------------------- */

*+html ul.contact {
	margin:5px 15px;
	padding:0px;
	width:600px;
	float:left;
}

*+html ul.contact li, *+html ul.contact li.title, *+html ul.contact li.action {
	list-style-type:none;
	margin:5px 0px;
	padding:0px;
	width:150px;
	float:left;
}

*+html hr {
	border:none;
	padding:0px;
	margin:0px 0px 0px 0px;
	border-bottom:#0097D0 dotted 4px;
}

*+html ul.contact li {
	width:450px;
}

*+html ul.contact li.action {
	width:100%;
}

*+html ul.event, *+html ul.fav {
	margin:15px 0px 10px 0px;
	padding:0px;

}

*+html ul.event li.cat-item, *+html ul.event li, *+html ul.fav li {
	width:86%;
	padding:14px 20px 10px 20px;
	margin:-10px 0px 0px 0px;
	list-style-type:none;
	background-image:url(images/white-bg.png);
	background-position:top right;
	background-repeat:no-repeat;
}

*+html ul.event li {
	background-image:none;
	padding:0px 20px;
}

*+html ul.sub h3.parent {
	padding:0px;
	margin:10px 0px;
}

*+html ul.sub h3  {
	padding:0px;
	margin:10px 0px;
}


*+html ul.event li {
	background-image:none;
	padding:0px 20px;
}

*+html ul.sub li {
	/*background-color:#6abadf;*/
	background-color:#f176b7;
	margin:10px 0px;
	padding:3px 8px;
	list-style-type:none;
}

*+html ul.sub a, ul.sub a:link, ul.sub a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:normal;
}

*+html ul.sub a:hover {
	text-decoration:none;
	/*color:#0295d8;*/
	color:#000;
}

*+html .sidebar ul.sub h3 li {
	background-color:transparent;
	margin:0px;
	padding:0px;
	list-style-type:none;
}

*+html .sidebar ul.sub h3 li a, *+html .sidebar ul.sub h3 li a:link, *+html .sidebar ul.sub h3 li a:visited {
	text-decoration:none;
	color:#fff;
	font-weight:bold;
}

*+html .sidebar ul.sub h3 li a:hover {
	text-decoration:none;
	color:#C9D500;
}

*+html .corner {
	margin-right:-30px;
}