/* =============================
   CSS Resets 
   ============================= */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

/* =============================
   Global Resets 
   ============================= */
   
   * {
	   padding: 0;
	   margin: 0;
   }
   
   *:focus {
   	   outline:none;
   }
   
   h1 {
	   font-size: 1.333em;
	   line-height: 48px;
	   float: left;
	   display: inline-block;
   }
   
   h2 {
	   font-size: 1.333em;
	   color: #4f4f4f;
	   margin-bottom: 10px;
   }
   
   a {
	   text-decoration: none;
	   outline: none;
   }
   
   	a:hover {
   		text-decoration: none;
   		color: #d85656;
   	}
   
   img {
	   border: 0;
   }
   
   ul {
	   list-style: none;
   }
   
   li, p {
	   font-size: 1.083em
   }
   
   	li {
	   	line-height: 20px;
   	}
   
   p {
	   line-height: 26px;
	   font-size: 1.083em;
   }
   
   	p a {
	   	color: #e66565;
   	}
   
   .button {
	   background: #e66565;
	   -webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	   -o-border-radius: 4px;
	   border-radius: 4px;
	   display: inline-block;
	   padding: 7px 12px;
	   color: #fff!important;
	   text-shadow: 1px 1px rgb(202,71,71);
	   font-size: 0.786em;
	   font-weight: bold;
	   text-transform: uppercase;
	   margin-bottom: 10px;
	   line-height: 14px;
	   -webkit-transition: background-color .25s linear;
	   -moz-transition: background-color .25s linear;
	   -o-transition: background-color .25s linear;
	   -ms-transition: background-color .25s linear;
	   transition: background-color .25s linear;
   }
   
	   .button:hover {
		   background: #d85656;
		   color: #fff;
	   }
	  
    .error {
	    font-size: 0.833em;
	    display: inline-block;
	    text-decoration: none;
	    border: none;
	    font-weight: bold;
	    color: #cb2020;
	    line-height: 10px;
	    float: left;
	    clear: both;
	}
	
	.msg {
	    text-decoration: none;
	    font-weight: bold;
	}
	
	
	#infomessage, #warnmessage, #errormessage {
	    padding: 20px 0;
	    font-weight: bold;
	    border-bottom: 1px solid #F5F2F4;
	    color: #4d4d4d;
	}
	
	#infomessage {
		border-bottom: 0;
	}
	
	#errormessage {
		color: #cb2020;
	}
	
	#mobileNavLink {
		display: none;
	}

/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 87.5%;
		color: #4d4d4d;
		-webkit-font-smoothing: antialiased;
		-moz-font-smoothing: antialiased;
		-o-font-smoothing: antialiased;
		font-smoothing: antialiased;
	}
	
	header {
		background: #e66565;
		color: #fff;
		text-shadow: 1px 1px rgb(202,71,71);
		height: 48px;
		padding: 0 20px;
		position: relative;
	}
	
		header .row {
			padding: 0;
		}
		
	.title, .title:hover {
		color: #fff;
	}
	
	#topNav {
		float: right;
		list-style: none;
		margin-left: 0;
	}
		
		#topNav li {
			float: left;
			line-height: 48px;
			font-size: 0.786em;
		}
		
			#topNav li a {
				color: #fff;
				text-transform: uppercase;
				font-weight: bold;
				padding: 0 20px;
				display: block;
				-webkit-transition: background-color .25s linear;
				-moz-transition: background-color .25s linear;
				-o-transition: background-color .25s linear;
				-ms-transition: background-color .25s linear;
				transition: background-color .25s linear;
			}
			
				body.home #topNav li a.home, body.open #topNav li a.new_ticket, body.tickets #topNav li a.ticket_status, body.tickets #topNav li a.my_tickets {
					background: #fff;
					color: #4f4f4f;
					text-shadow: none;
				}
				
				#topNav li a:hover {
					background: #d85656;
				}
				
				#topNav li.active a:hover {
					background: #fff;
				}
				
	.topWrap {
		overflow: hidden;
	}
				
	.headline {
		font-size: 1.083em;
		line-height: 30px;
		color: #4f4f4f;
		font-weight: bold;
		display: inline-block;
		padding-right: 20px;
	}
	
	.heading {
		font-weight: bold;
		margin-right: 20px;
		line-height: 26px;
		width: 100px;
		display: inline-block;
		float: left;
	}
	
	.greyBlock {
		background: #f7f7f7;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
	}
	
		.greyBlock h2 {
			padding: 10px 0;
			line-height: 21px;
			margin-bottom: 10px;
		}
		
			.greyBlock h2 span {
				background: url(../images/plus-info-icons.gif) no-repeat;
				display: block;
				width: 21px;
				height: 21px;
				float: left;
				margin-right: 10px;
			}
		
				.greyBlock .new h2 span {
					background-position: 0 50%;
				}
				
				.greyBlock .check h2 span {
					background-position: -21px 50%;
				}
				
		.greyBlock p {
			margin-bottom: 20px;
		}
		
		.greyBlock ul {
			list-style-position: outside;
			margin-left: 20px;
		}
		
			.greyBlock li {
				list-style: outside;
			}
		
	.faqWrap {
		border-bottom: 1px solid #f0f0f0;
	}
		
	form {
		
	}
	
		form div {
			width: 36%;
			float: left;
		}
		
		form label {
			margin-right: 5px;
			font-weight: bold;
			color: #4f4f4f;
			float: left;
			display: block;
			margin-bottom: 10px;
		}
	
		form input, form textarea {
			padding: 6px;
			border: 1px solid #ededed;
			-webkit-border-radius: 4px;
		   -moz-border-radius: 4px;
		   -o-border-radius: 4px;
		   border-radius: 4px;
		   width: 80%;
		   float: left;
		   clear: both;
		   margin-bottom: 10px;
		   color: #4d4d4d;
		   font-size: 1em;
		   -webkit-font-smoothing: antialiased;
		   -moz-font-smoothing: antialiased;
		   -o-font-smoothing: antialiased;
		   font-smoothing: antialiased;
		   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		   font-weight: bold;
		}
		
		form.status_form input.button {
			margin-top: 28px;
		}
		
		input.button {
		   border: 0;
		   cursor: pointer;
		   -webkit-font-smoothing: antialiased;
		   -moz-font-smoothing: antialiased;
		   -o-font-smoothing: antialiased;
		   font-smoothing: antialiased;
		   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		   width: auto;
		   clear: none;
	   }
	   
	form#ticketForm {
		padding-top: 12px;
	}
	   
		form#ticketForm div {
			width: 90%;
			margin-bottom: 20px;
			float: none;
			overflow: hidden;
		}
		
			form#ticketForm div:last-child {
				margin-bottom: 10px;
			}
		
			form#ticketForm input, form#ticketForm select, form#ticketForm textarea {
				font-weight: normal;
				width: 50%;
				float: left;
				clear: both;
				margin: 0;
			}
			
			form#ticketForm select {
				width: 20%;
			}
			
				form#ticketForm input.button {
					font-weight: bold;
					margin-right: 10px;
					width: auto;
				}
			
		form.ticket_status_form input {
			width: 90%;
		}
		
			form.ticket_status_form input.button {
				width: auto;
			}
			
			
		form#ticketForm .error {
			float: none;
			clear: none;
		}
			
	.required {
		font-weight: normal;
	}
	
	p.sig {
		font-style: oblique;
		margin-bottom: 0;
		font-family: Georgia, "Times New Roman", serif;
	}
	
/* 	=============================
   	My Tickets 
   	============================= */
		
	.ticket {
		overflow: hidden;
		background: #fff;
		border-bottom: 1px solid #ededed;
		padding: 20px;
		position: relative;	
		margin-bottom: 40px;
	}
	
		.ticket ul {
			list-style: none;
			margin-bottom: 20px;
		}
		
			.ticket li a {
				color: #4d4d4d;
			}
			
			.ticket li.large {
				font-size: 1.333em;
				color: #4f4f4f;
				margin-bottom: 10px;
			}
			
			.ticket li a.webTicket {
				color: #e66565;
				font-weight: bold;
			}
			
		.ticket .ticketStatus {
			text-transform: uppercase;
			font-size: 0.714em;
			position: absolute;
			top: 20px;
			right: 20px;
			font-weight: bold;
			padding: 5px 8px;
			background: #f5f5f5;
			border-top: 1px solid #ededed;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			-o-border-radius: 2px;
			border-radius: 2px;
		}
				
		.ticket .heading {
			float: none;
		}
	
	.ticketOverview p {
		margin-bottom: 0;
	}
			
	table.tgrid td {
		padding: 10px 0;
	}
	
	.ticketButtons {
		list-style: none;
		overflow: hidden;
		float: right;
	}
	
		.ticketButtons li {
			float: left;
			margin-right: 20px;
			line-height: 30px;
		}
		
			.ticketButtons li#tR {
				margin-right: 0;
			}
		
			.ticketButtons li a {
				color: #4f4f4f;
				font-weight: bold;
				display: inline-block;
			}
			
			.ticketButtons li i {
				margin-right: 4px;
			}
				
			.ticketButtons li.grey a, .ticketButtons li.grey i {
				color: #999;
			}
			
			.ticketButtons li#tO a, .ticketNo {
				background: url(../images/tickets-open.png) no-repeat 0 50%;
				padding-left: 22px;
			}
			
			.ticketButtons li#tC a {
				background: url(../images/tickets-closed.png) no-repeat 0 50%;
				padding-left: 22px;
				color: #a9a9a9;
			}
			
			.ticketButtons li#tR a {
				background: url(../images/tickets-refresh.png) no-repeat 0 50%;
				padding-left: 24px;
			}
			
	.showing {
		font-weight: normal;
		color: #4d4d4d;
	}
	
	.ticketOverview th {
		border-bottom: 0;
		color: #4d4d4d;
	}
	
	.ticketStatus {
		text-transform: uppercase;
		font-weight: bold;
		color: #cb2020;
	}
	
	.green {
		color: #72ab2f;
	}
	
	.ticketSubject {
		background: url(../images/speech-bubble.png) no-repeat 0 50%;
		padding-left: 24px;
	}
	
	.ticketThread {
		background: url(../images/ticket-thread.png) no-repeat 0 50%;
		padding-left: 24px;
	}
	
	#ticketInfo {
		list-style: none;
	}
	
		#ticketInfo li {
			font-weight: bold;
			color: #4f4f4f;
			float: left;
			line-height: 26px;
			margin-right: 26px;
		}
	
	#ticketthread {
		overflow: hidden;
		margin-top: -22px;
	}
	
		.ticketMsg {
			border-bottom: 1px solid #ededed;
			overflow: hidden;
			padding: 30px 0;
		}
		
			.ticketMsg p {
				margin-bottom: 10px;
				line-height: 22px;
			}
			
		.adminTicketMsg {
			padding: 30px;
			background: #4f4f4f;
			color: #fff;
		}
			
		.msgDate {
			text-transform: uppercase;
			font-size: 0.786em;
			display: inline-block;
			color: #adadad;
			clear: both;
			float: left;
			font-weight: bold;
		}
		
		.msgContent {
			clear: both;
		}
		
		.adminMsg {
			font-size: 0.857em;
			text-transform: lowercase;
			background: #fff;
			padding: 2px 8px;
			color: #4f4f4f;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			-o-border-radius: 2px;
			border-radius: 2px;
			margin: 0 8px 12px 0;
			line-height: 18px;
			display: inline-block;
			float: left;
		}
		
	#reply {
		overflow: hidden;
		padding-top: 30px;
	}
		
		#reply #errormessage {
			border-bottom: 0;
			padding: 0;
		}
		
		#postReply {
			clear: both;
		}
		
/* 	=============================
   	FAQs 
   	============================= */
		
	form#kb-search {
		
	}
	
		form#kb-search div {
			width: auto;
			float: none;
		}
	
		form#kb-search select {
			float: left;
			margin: 0 5px 10px 0;
		}
		
		form#kb-search input#query {
			width: 70%;
			margin-right: 5px;
		}
		
	#searchSubmit {
		float: left;
	}
	
	#kb {
		list-style: none;
		margin-left: 0;
	}
	
		#kb li {
			margin-bottom: 10px;
			list-style: none;
		}
	
		#kb h4 {
			margin-bottom: 3px;
		}
	
			#kb h4 a {
				color: #e66565;
			}
			
	#kbResults {
		list-style: none;
		padding-top: 12px;	
		margin-left: 0;
	}
	
		#kbResults li {
			margin-bottom: 3px;
			list-style: none;
		}
	
			#kbResults li a {
				color: #e66565;
				font-weight: bold;
			}
			
	#breadcrumbs a {
		color: #e66565;
	}
	
	p.faded {
		color: #999;
		font-style: oblique;
		font-size: 0.833em;
		font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
	}
	
/* 	=============================
   	Footer 
   	============================= */
		
	footer {
		overflow: hidden;
	}
	
		footer p {
			float: left;
			color: #cbcbcb;
			font-size: 0.714em;
			font-weight: bold;
			text-transform: uppercase;
			line-height: 16px;
		}
		
		footer a {
			color: #999;
		}
	
			footer a.osLogo {
				float: right;
				display: inline-block;
			}