@font-face
{
font-family: CaviarDreamsbold;
	src:url('../fonts/Caviar Dreams Bold.ttf');
}

#main-nav {
	position: fixed;
	bottom: 0px; left:0px;
	display:inline-block;
    width: 100%;
	background: rgba(000,000,000,0.9);
	z-index:999;
}

#main-nav li {
    float: left;
    list-style: none;
    text-align: center;
    width: 16.6%;padding-top:2px;padding-bottom:0px;
}
#main-nav li a{
	color:inherit;
	text-decoration:none;
	display:block;
	padding:6px 0 4px;
}
#main-nav li a span {
    color: #CCCCCC;font-family:CaviarDreamsbold;
    display: block;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;margin:0; padding:0;
}
#main-nav li:hover {  background: #2c2c2c;	cursor:pointer;}

#main-nav li.active, #main-nav li.active:hover,#footer_menu li.active:hover {    background:#111;}


#main-nav li:hover > ul#dropup {bottom:50px; }
#main-nav #dropup > li > a { background: rgba(000,000,000,0.9); text-decoration:none;line-height:27px;}

#main-nav li ul.dropdown
{
	display:none;
	z-index:2;
	background: #2B2B33;
}
#main-nav li ul.dropup
{
	bottom:50px;
    position:absolute;
	display:block;
    margin-left:-1px;
    width:16.66%;
}

#main-nav ul:last-child {
   margin-right:0px; padding-right:0;
}

@media (max-width : 219px) {
	#main-nav li ul.dropup, #main-nav li:hover > ul#dropup {bottom:66px; }
}

@media (min-width : 220px) and (max-width : 493px) {
	#main-nav img {	height: 22% !important;}
	.m-nav {	height: 22% !important;}
	#main-nav li a span {font-size: 10px;}
	#main-nav li ul.dropup, #main-nav li:hover > ul#dropup {bottom:60px; }
}

@media (min-width : 494px) and (max-width : 768px) {
	#main-nav li img {	width: 25%; !important}
	#main-nav li a span {	font-size: 10px;}
	#main-nav li ul.dropup, #main-nav li:hover > ul#dropup {bottom:47px; }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	#main-nav li a {	padding: 8px 0px 8px 3px;}
	#main-nav li a span {	font-size: 12px;}
}

@media(min-width:768px)
{
	#main-nav li:hover > ul#dropup
	{
        bottom:50px;
        position:absolute;
		display:block;
    	margin-left:-1px;
    	width:16.66%;
	}
}

/*------------Footer Menu Style-------------*/

#footer_menu {
	bottom:0; left:0;
	position: fixed;
	background: rgba(000,000,000,0.9);
	z-index:999;
	display:inline-block;
    width: 100%;
    right:0;
}

#footer_menu ul li {
    float: left;
    list-style: none;
    text-align: center;
    width: 20%; padding-top:12px;padding-bottom:7px;
}
#footer_menu ul:last-child {
   margin-right:0px; padding-right:0;
}
#footer_menu li a{
	text-decoration:none;
	margin:0;
	padding:6px 0 3px;
}
#footer_menu li a span {
    color: #CCCCCC;
    display: block;
    text-align: center;
    text-transform: uppercase;
    width: 100%;margin:0; padding:0;
}

#footer_menu img {    height:30px;}
#footer_menu li:hover {background: #2c2c2c;cursor:pointer;}
#footer_menu li.active, #footer_menu li.active:hover {    background:#111;}

#footer_menu li ul.dropdown
{
	display:none;
	z-index:2;
	background: #2B2B33;
}
#footer_menu li ul.dropup
{
	bottom:62px;
    position:absolute;
	display:block;
    margin-left:-1px;
	width:20.2%;	
}
#footer_menu li:hover > ul#dropup {bottom:62px; }
#footer_menu #dropup > li > a {background: rgba(000,000,000,0.9); text-decoration:none;line-height:27px;}
#footer_menu li > ul#dropup li a:hover {
    background: #2c2c2c;
	cursor:pointer;
}
#footer_menu ul li> ul li {
    float: none;
    list-style: none;
	width:100%; margin:0px; padding:0px;
	max-width:200px;
}
#dropup li a {
    color: #CCCCCC;
    display: block;
    /*font-size: .7em;*/
    text-align: center;
    text-transform: uppercase;
    width: 100%;
	max-width:200px;
}

@media only screen and (min-width : 100px)and (max-width : 480px) {
	body{font-size:.9em;}
	img.stat-peoplej{ width:25%}
	.date{margin-right:32%; font-size:.8em;}
	.read{ font-size:.8em;}
	.date img{ width:13px;}
	.read > input[type="checkbox"]{height:12px;}
	 .table-row{font-size: .7em;}
	 .col{ padding:2% 0;}
	#menu div a.prev img, a.nxt img{width:30px;}
	#profile span{ font-size:.8em;}
	#copy{ font-size:.9em; padding:2px 11px;}
	.link{ min-height:20px;}
	#link{letter-spacing: -1.2pt !important;font-size:13px;}
	#msg_panel > section >h5> span.open::after{	width:29px; height:20px;font-size:.9em;}
	#msg_panel > section >h5> span.close::after {font-size:.9em;}
	header h3 {	font-size:1.2em;}
	.rlAccordion > h3, h4  {  padding: 13px; font-size:1.2em !important;}
	#msg_panel > section{font-size: 1.1em; line-height:1.1em;  margin: 1px 1px;}
	
	#footer_menu ul li {padding-top:5px;padding-bottom:8px;}
	#footer_menu li a{padding:4px 0 5px;}
	#footer_menu img {    height:22px;}
	#footer_menu li ul#dropup{bottom:48px;}
	#footer_menu li:hover > ul#dropup {bottom:48px; }
	
	.de_head{font-size: .66em !important; padding:10px;}
	span.rate{ width:23.5%;padding: 10px 0; margin-top:-10px;}
	h3{font-size:1em;}
	#erng_panel > section > h5 {font-size:1.1em; font-weight:normal; padding: 10px;}
	#erng_panel > section> div.cont> ul>li> label.lbl{ padding-right:25px;}
	#erng_panel > section> div.cont{ font-size:.7em;}
	header h2 { color: #FFFFFF; font-weight: normal; font-size:18px;}
	hr.hr{ width:20%;}
	#msg_panel > section> div.cont> ul>li> label.lbl{ padding-right:5px;}
	#msg_panel > section> div.cont{ font-size:.9em;}
	#cntnt_vt{ padding:0 5px 0 5px;}
	.msg{ padding:15px 5px;}
	.msg>h4{font-size:.9em;}
	.msg>p{font-size:.9em;}
	#txt_respnse{ width:92%;}
	.url{font-size:.7em !important;}
	
	ul#acnt_info>li> p{padding:15px 0 5px 0;}
	ul#acnt_info>li.bday>:nth-child(2)>select {font-size:.9em; padding-right:13px !important; background-size:10px;}
	ul#acnt_info>li>:nth-child(1){ padding-right:5px;width:30%;}
	ul#acnt_info>li.bday>:nth-child(2)>select {margin-right:2px !important;}
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
	body{font-size:1.1em;}
	#avatar img{ width:20%;}
	img.stat-peoplej{ width:21%; margin-bottom:10px;}
	.rlAccordion > h3 + div {  padding: 5% 2%;}
	.rlAccordion > h3, h4  {  padding: 18px;}
	#menu{margin-top:10px;}
	.date{margin-right:67%;}
	 .table-row{font-size: .8em;}
	 .col{ padding:2% 0;}
}

@media(max-width:980px){
	#avatar img{ width:21%;}
	img.stat-peoplej{ width:20%}
	.rlAccordion > h3 + div {padding: 5% 2%;}
	.date{margin-right:55%;font-size:.8em;}
	.read{ font-size:.8em;}
	 .table-row{font-size: .8em;}
	#copy{ font-size:.9em; padding:2px 15px;}
	.link{ min-height:24px;margin:2px 3px;}
	hr.hr{ width:29%;}
}

@media only screen and (min-device-width : 220px)and (max-device-width : 480px){
	body{font-size:.9em;}
	img.stat-peoplej{ width:25%}
	.date{margin-right:32%; font-size:.8em;}
	.read{ font-size:.8em;}
	.date img{ width:13px;}
	.read > input[type="checkbox"]{height:12px;}
	 .table-row{font-size: .7em;}
	 .col{ padding:2% 0;}
	#menu div a.prev img, a.nxt img{width:30px;}
	#profile span{ font-size:.8em;}
	#copy{ font-size:.9em; padding:2px 11px;}
	#msg_panel > section >h5> span.open::after{	width:29px; height:20px;	font-size:.9em;}
	#msg_panel > section >h5> span.close::after {font-size:.9em; font-size: 0.9em;}
	
	.rlAccordion > h3, h4  {  padding: 13px; font-size:1.1em;}
	#msg_panel > section{font-size: 1.1em; line-height:1.1em;  margin: 1px 1px;}
	
	#footer_menu ul li {padding-top:5px;padding-bottom:8px;}
	#footer_menu li a{padding:4px 0 5px;}
	#footer_menu img { height:22px;}
	#footer_menu li:hover > ul#dropup {bottom:48px;}
	
	ul#acnt_info>li> p{padding:15px 0 5px 0;}
	ul#acnt_info>li.bday>:nth-child(2)>select {font-size:.9em; padding-right:13px !important; background-size:10px;}
	ul#acnt_info>li>:nth-child(1){ padding-right:5px;width:30%;}
	ul#acnt_info>li.bday>:nth-child(2)>select {margin-right:2px !important;}

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)  {
	body{font-size:1.1em;}
	#avatar img{ width:17%;}
	img.stat-peoplej{ width:13%; margin-bottom:5px;}
	.rlAccordion > h3 + div {  padding: 5% 2%;}
	.rlAccordion > h3, h4  {  padding: 11px;}
	#menu{margin-top:8px;}
	.date{margin-right:67%;}
	 .table-row{font-size: .8em;}
	 .col{ padding:2% 0;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	body{font-size:1.1em;}
	#avatar img{ width:17%;}
	img.stat-peoplej{ width:20%; margin-bottom:10px;}
	.rlAccordion > h3 + div {  padding: 5% 2%;}
	.rlAccordion > h3, h4  {  padding: 24px;}
	#menu{margin-top:10px;}
	.date{margin-right:67%;}
	 .table-row{font-size: .8em;}
	 .col{ padding:2% 0;}
}


@media (min-width: 150px) and (max-width: 320px) {
	.de_head {
		font-size: 0.4em !important;
	}
	h3 {
		font-size: 0.9em !important;
	}
	#erng_panel > section > h5 {
		font-size: 0.9em !important;
	}
}