@import url("https://www.karthiksrinivasan.in/css/reset.css");

/* General Demo Style */
body { background: url("https://www.karthiksrinivasan.in/images/bg.jpg"); color: #fff; font-family: 'PT Sans Narrow', Arial, sans-serif; font-size: 12px; }
a { color: #fff; text-decoration: none; }
.clr { clear: both; }
h1, h5 { font-size: 40px; font-weight: normal; text-transform: uppercase; font-family: 'Monoton', Arial, sans-serif; color: #fff; text-shadow: 1px 1px 1px #000; word-spacing: 10px; line-height: 40px; padding: 10px 5px 0px 0px; SSS }
h1 span, h5 { font-size: 18px; color: #c08763; font-family: Georgia, serif; font-style: italic; text-transform: none; word-spacing: 0px; white-space: nowrap; }
h2 { font-family: Georgia, serif; font-style: italic; padding: 5px 10px 5px 5px; font-size: 14px; }
pre { padding: 15px; white-space: pre-wrap; }

/* Header Style */
.header { height: 30px; font-size: 13px; background: #202020; text-transform: uppercase; z-index: 4; }
.header a { padding: 5px 10px; letter-spacing: 1px; color: #ddd; text-align: right; }
.header a:hover { color: #fff; }
.header a span { font-weight: bold; }
.header span.right_ab { position: absolute; right: 4px; }
.content { top: 75px; left: 0px; float: left; width: 50%; min-width: 315px; z-index: 100; display: none; }
.more ul { text-transform: uppercase; font-size: 11px; padding: 20px 15px 5px 5px; font-family: 'PT Sans Narrow', Arial, sans-serif; margin: 0 auto; }
.more ul li { display: inline; line-height: 30px; margin: 0px 2px; white-space: nowrap; }
.more ul li:first-child { clear: both; float: none; display: block; }
.more ul li.selected a, .more ul li.selected a:hover { background: #f7f7f7; color: #000; text-shadow: none; white-space: nowrap; }
.more ul li a { text-shadow: 1px 1px 1px #000; color: #fff; background: #c08763; padding: 3px 6px; -moz-box-shadow: 1px 1px 2px #000; -webkit-box-shadow: 1px 1px 2px #000; box-shadow: 1px 1px 2px #000; }
.more ul li a:hover { background: #fff; color: #000; text-shadow: none; }
.snippet { padding: 5px; }
.snippet span { font-size: 14px; cursor: pointer; padding: 2px 18px 2px 9px; }
.snippet span.down { background: #000 url("https://www.karthiksrinivasan.in/images/arrow.png") no-repeat 98% 50%; }
.snippet span.up { background: #000 url("https://www.karthiksrinivasan.in/images/arrow_up.png") no-repeat 98% 50%; }
.snippet pre { display: none; }
.panel { position: absolute; height: 86px; width: 20px; right: 0px; top: 10px; cursor: pointer; }
.hide { background: transparent url("https://www.karthiksrinivasan.in/images/hide.png") no-repeat center center; }
.show { background: transparent url("https://www.karthiksrinivasan.in/images/show.png") no-repeat center center; }
.loadmore { display: none; width: 700px; line-height: 30px; text-transform: uppercase; background: #333; float: right; font-weight: bold; font-size: 16px; text-align: center; cursor: pointer; text-shadow: 1px 1px 1px #000; }
.view { width: 100px; height: 16px; float: left; margin: 0px; border: 0px; background: url("https://www.karthiksrinivasan.in/images/view.png") no-repeat; }
.loadmore:hover { background: #000; }
.media_main { width: 100px; height: 30px; float: right; }
.media_icon { width: 20px; height: 20px; margin-top: 5px; float: left; margin-right: 5px; }
.full_screen { width: 100px; margin-left: 10px; height: 16px; float: right; margin-top: 7px; }
.hits { background: #0F0F0F; height: 30px; float: right; width: auto; }
::selection { background-color: #FFFFFF; color: black; text-shadow: none; }
::-moz-selection { background-color: #FFFFFF; color: black; text-shadow: none; }
.mlink { color: #CCCCCC; margin-left: -8px; }
.mlink:hover { color: #999999; }
.design { float: right; line-height: 28px; text-transform: none; font-size: 10px; padding-left: 10px; border-left: #282828 thin solid; height: 30px; }
.abt_main { width: 90%; float: left; height: 500px; margin: 5%; font-size: 14px; }
.abt_box1 { width: 35%; margin-right: 2%; height: auto; margin-bottom: 10px; float: left; }
.abt_box2 { width: 30%; margin-right: 2%; height: auto; margin-bottom: 10px; float: left; }
.abt_box3 { width: 30%; height: auto; margin-bottom: 10px; float: left; }
.con_box1 { width: 60%; margin-right: 2%; height: auto; margin-bottom: 10px; float: left; }
.con_box2 { width: 30%; margin-right: 2%; letter-spacing: 1px; height: auto; margin-bottom: 10px; float: left; }
#appbox1 { width: 40%; height: auto; margin: 10px 0px; }
#appbox11 { width: 20%; height: auto; margin: 10px 0px; }
#appbox2 { width: 80%; height: auto; margin-bottom: 10px; }
#appbox2new { width: 20%; height: auto; margin: 10px 0px; }
#appbox22 { width: 80%; height: auto; margin-bottom: 10px; }
.txtbx { width: 100%; height: 30px; float: left; border: 0px; margin-bottom: 10px; background: #202020; border: #333333 thin solid; color: #FFF; }
.txtbx:hover { background: #1e1e1e; }
.txtbx2 { width: 100%; height: 130px; padding-top: 10px; padding-left: 10px; float: left; border: 0px; border: #333333 thin solid; background: #202020; color: #FFF; }
.txtbx2:hover { background: #1e1e1e; }
.bton { width: 150px; height: 30px; float: left; margin-top: 20px; background: #1e1e1e; border: #333333 thin solid; color: #FFF; }
.bton:hover { background: #FFF; color: #333; }
#contentmainqry { width: 100%; height: auto; float: left; margin-right: auto; margin-bottom: 0px; margin-left: auto; }
@media screen and (max-width:320px) {
	.abt_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box3 { width: 100%; height: auto; margin-bottom: 10px; }
	.con_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.con_box2 { width: 100%; border-top: #333333 thin solid; margin-right: 0px; height: auto; margin-bottom: 10px; }
}
@media screen and (max-width:420px) {
	.abt_box1 { width: 100%; margin-right: 0px; height: 500px; }
	.abt_box2 { width: 100%; margin-right: 0px; height: 500px; }
	.abt_box3 { width: 100%; height: 500px; }
	.con_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.con_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; border-top: #333333 thin solid; }
}
@media screen and (max-width:520px) {
	.abt_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box3 { width: 100%; height: auto; margin-bottom: 10px; }
	.con_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.con_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; border-top: #333333 thin solid; }
}
@media screen and (max-width:620px) {
	.abt_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box3 { width: 100%; height: auto; margin-bottom: 10px; }
	.con_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.con_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; border-top: #333333 thin solid; }
}
@media screen and (max-width:720px) {
	.abt_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.abt_box3 { width: 100%; height: auto; margin-bottom: 10px; }
	.con_box1 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; }
	.con_box2 { width: 100%; margin-right: 0px; height: auto; margin-bottom: 10px; border-top: #333333 thin solid; }
}