/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.overview-sub {
			margin: 10px 0 0!important;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.overview-sub, .overview-sub-alt {
			margin: 10px 0 0!important;
		}
		.ui-accordion-header {
			background-position: 198% -2.7%!important;
			background-size: 52%!important;
		}
		.ui-accordion-header-active {
			background-position: 198% 13.3%!important;
			background-size: 52%!important;
		}
		.logo-grid {
			width: 108px!important;
		}
		.hq-info {
			width: 43%!important;
		}
		#headquaters .right {
			width: 57%!important;
		}
		form.contact select {
			background-position: 458px 8px!important;
		}
		form.contact .submit {
			background-position: 112px 168px!important;
		}
		form#topics-filter select {
			background-position: -302px -100px!important;
			width: 26.99%!important;
		}
		.topic-cat {
			height: auto!important;
			text-align: center!important;
		}
		.topic-cat img, .topic-cat h5 {
			float: none!important;
		}
		.topic-cat h5 {
			width: 100%!important;
		}
		.facebook, .twitter {
			font-size: 12px!important
		}
		form.submit-ticket .submit {
			height: 445px!important;
		}
		.cross2 {
			width: 58%!important;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#proposal .four {
			margin: 0 0 20px!important;
		}
		.testi-box {
			margin: 0 0 30px!important;
		}
		#about {
			margin: 0 0 20px!important;
		}
		#contact-footer, #tags {
			margin: 0 0 20px!important;
		}
		#social-footer .left {
			display: block!important;
			float: none!important;
			width: 100%!important;
		}
		#header {
			height: 155px!important;
		}
		#header h3, #header h6 {
			float: none!important;
			width: 100%!important;
			text-align: center;
		}
		#navigation {
			text-align:center!important;
			float: none!important
		}
		#toggle {
			margin: 20px 0 0!important;
		}
		#menu {
			width: 100%!important;
		}
		.nav-space {
			height: 155px!important;
		}
		.hq-info {
			width: 100%!important;
		}
		#headquaters .right {
			width: 100%!important;
			height: auto!important;
			float: none!important;
		}
		#headquaters h3 {
			font-size: 28px!important;
		}
		form.contact .left, form.contact .submit, form.contact input.half {
			width: 100%!important;
		}
		form.contact input, form.contact textarea, form.contact select {
			border-right: 2px solid #c9c9c9; 
		}
		form.contact input.half {
			border-bottom: none!important;
		}
		form.contact .submit {
			padding: 40px 0!important;
			height: auto!important;
		}
		form.contact .submit-ticket {
			padding: 40px 0!important;
			height: auto!important;
			width: 100%!important;
		}
		form.contact .submit-ticket .cross {
			display: none!important;
		}
		form#topics-filter h5 {
			display: block!important;
			margin: 0 0 20px!important;
		}
		form#topics-filter select {
			margin: 0 0 20px!important;
			width: 100%!important;
			background-position: -90px -100px!important;
		}
		.latest-topics .row-top h5 {
			border-left: 0!important;
		}
		.row-bottom .right {
			float: none!important;
		}
		.facebook, .twitter, form.respond .half {
			width: 100%!important;
		}
		form.respond input.half:nth-of-type(2) {
			border-left: 2px solid #c9c9c9!important;
		}
		form.register {
			width: 100%!important;
			text-align: center;
		}
		form.register .left {
			margin: 0 20px!important;
			padding: 30px 0!important;
			width: 90%!important;
			border-right: none!important;
			border-bottom: 1px dashed #d7d7d7;
		}
		form.register img.left {
			display: none;
		}
		form.register input[type="text"] {
			width: 100%!important;
		}
		.show-res {
			display: block!important;
		}
		form.submit-ticket .left, form.submit-ticket .submit, form.submit-ticket input.half {
			width: 100%!important;
		}
		form.submit-ticket input, form.submit-ticket textarea, form.submit-ticket select {
			border-right: 2px solid #c9c9c9; 
		}
		form.submit-ticket input.half {
			border-bottom: none!important;
		}
		form.submit-ticket .submit {
			padding: 40px 0!important;
			height: auto!important;
			width: 100%!important;
		}
		form.submit-ticket .submit .cross {display: none!important;}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.or {
			line-height: 4!important;
		}
		.overview-sub {
			margin: 5px 0 0 18px!important;
		}
		.ui-accordion-header {
			background-position: 702% -2.7%!important;
			background-size: 87%!important;
		}
		.ui-accordion-header-active {
			background-position: 702% 12.3%!important;
		}
		.cat-box {
			margin: 0 0 20px 0!important;
		}
		.logo-grid {
			width: 190px!important;
			margin: 0 10px 20px!important
		}
		
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.or {
			line-height: 4!important;
		}
		.overview-sub {
			margin: 5px 0 0 18px!important;
		}
		.ui-accordion-header {
			background-size: 0%!important;
		}
		.cat-box {
			margin: 0 0 20px 0!important;
		}
		.cat-left img {
			margin: 40px 0 20px!important;
		}
		.logo-grid {
			float: none!important;
			width: 100%!important;
			text-align: center;
			display: inline-block!important;
			margin: 0 0 20px!important;
		}
		form.register .left {
			width: 86%!important;
		}
		.twitter-connect .medium-btn {
			width: 255px!important;
		}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/