/* CSS Document */

/*PAGE LAYOUT*/
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

img{ max-width:100%;}
.left{ float:left;}
.right{ float:right;}
.clear{ clear:both;}


#content{ max-width:800px; width:100% !important; margin:0 auto;}
.header-right{ }
.header{ max-width:800px; width:100%; margin:0 auto;} 
#logo{float:left; background-image:url(tie_logo.gif); width:274px; height:213px;}
#topheader{ width:526px; height:97px; background-color:#F0F0F0; position:relative}
#toplinks{position:absolute; right:10px; top:10px;}
#menu{ width:526px; height:32px; background-image:url(bg_menu.gif); background-repeat:repeat-x;}
#submenu{float:right; width:526px; height:32px; background-image:url(bg_submenu.gif); background-position:top; background-repeat:repeat-x;}

.middle{ margin-bottom:30px;}
#contenttext{float:right; max-width:500px; width:63%;}
.right-content p{font-family: Verdana; color:#666666; text-align:justify; font-size:14px;}
.right-content p small{ color: rgb(153, 153, 153); font-size:10px;}
.offer {margin: 40px 0 30px;}
.offer h3{color: rgb(204, 0, 0); font-size: 15px; text-align: left; font-family: Verdana;}
.offer-right{ max-width:280px; margin-top:30px;}

.graypanel{}
.graypanel h1{ color: #cc0000; font-size:23px;}
.graypanel ul{ text-align:left; margin:10px; padding-left:20px;}
.graypanel li span{ color:red; font-weight:bold; font-size:small;}



#footer{  background-color:#F0F0F0; width:100%; margin:0 auto; font-family: Verdana; padding:10px 0 1px;}
.footer-top{ display:inline-block;}
#footer ul{ overflow:hidden; list-style-type:none; padding:0; margin:0;}
#footer li{ float:left; border-right:solid 2px #999999; padding:0 8px;}
#footer li:last-child{ border:none;}
#footer p{ font-size:15px;}

/*GRAY PANEL*/
.graypanel{
	border:solid 1px #666666; background-color:#F7F7F7;  float:left; max-width:274px; width:33%; padding:10px 0; font-family: Verdana;
}

/*TEXT STYLES*/
.bodytext {
	font: 0.7em Tahoma, sans-serif;
	color: #666666;
}

.titletext {
	font: 0.7em Tahoma, sans-serif; text-align:left;
	font-size:36px;
	font-weight:bold;
	color:#CC0000;
	margin:20px 0;
}
.whitetitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#FFFFFF;
}
.smalltitle {
	font: 0.7em Tahoma, sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#CC0000;
}
.smallwhitetext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
}
.smallwhitetext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color: #FFFFFF;
	text-decoration:none;
}
.smallwhitetext a:hover{
	text-decoration:underline;
}
.smallgraytext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#999999;
}
.smallgraytext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#999999;
	text-decoration:none;
}
.smallgraytext a:hover{
	text-decoration:underline;
}
.smallredtext {
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#CC0000;
}
.smallredtext a{
	font: 0.7em Tahoma, sans-serif;
	font-size: 11px;
	font-weight:bold;
	color:#CC0000;
	text-decoration:none;
}
.smallredtext a:hover{
	text-decoration:underline;
}


/*===================responsive======================*/
.smallwhitetext{ }
#menu ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; display:inline-block;}
#menu li{ float:left;}
#menu li a{ border-right:#ffffff 1px solid; padding:0 8px;}
#menu li:last-child a{ border-right:none;}
iframe{ display:none;}
.order-table{ margin:0 auto;}

nav select{ display:none;}
@media all and (max-width:860px){
	.middle{ width:94%;}
	.offer-left { float:none; margin:0 auto;}
	.offer-right{ float:none; margin:0 auto; max-width:100%;}
	#logo{   width: 31.5%; background-size:100% 100% !important;}
	.whitetitle{ font-size:32px;}
	#topheader, #menu{ width:100%;}
	.header-right{  width:68.5%;}
	
}

@media all and (max-width:767px){
	#contenttext{ float:none; width:100%; max-width:100%;}
	.graypanel{ float:none; margin:0 auto; width:100%;}
	.bodytext > h1 { line-height: 18px; margin: 0;}
	#menu{ height:26px;}
	#logo{ height:172px;}
	.whitetitle{ font-size:23px; margin-top:55px !important;}
	#topheader{ height:78px;}
	.smallwhitetext{ padding:6px 9px !important;}
	.titletext{ font-size:25px;}
}
@media all and (max-width:599px){
	nav { margin: 0 auto !important; /*width: 200px;*/}
		nav ul     { display: none !important; }
      	nav select { display: block;  background: #000000; border: 2px solid grey; border-radius: 4px; color: #FFFFFF; width:170px; margin:0 auto; height:22px; text-transform:uppercase; margin-right:20px; float:right;}
		
		#logo{ height:145px;}
		.whitetitle { font-size: 18px;margin-top: 45px !important;}
		.bodytext > h1{ line-height:15px; font-size:16px;}
		#menu{ height:22px;}
		.smallwhitetext{ padding:0 !important;}
		#topheader{ height:66px;}
		
}
@media all and (max-width:479px){
	#logo{ width:100%; height:215px;}
	.whitetitle {font-size: 30px; margin-top: 57px !important;}
	.header-right{ width:100%;}
	#topheader, #menu{ width:94%; padding:0 3%;}
	#menu{ background:none;}
	nav select{ float:none; margin:10px auto 0; height:25px;}
}