/* ---------------------------------------------------------------------------------------------------------------------- */
/* In between area ------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 0) and (max-width: 959px) {
	.monthly-totals {
		float: none;
		text-align: center;
	}
	
	.create-drop li:hover ul li a {
		background: #d0760e;
		border: 0;
		color: #ffffff;
		display: block;
		font-style: normal;
		padding: 10px;
	}

	.secondary-navigation-wrap ul.secondary-navigation {
		text-align: center;
	}

	.secondary-navigation-wrap ul.secondary-navigation li {
		float: none;
		display: inline-block;
		margin: 0 5px;
	}

	.secondary-navigation-wrap ul.secondary-navigation li a {
		border: 1px solid #808080;
		border-radius: 15px;
		-moz-border-radius: 15px;
		-webkit-border-radius: 15px;
		color: #000000;
		display: inline-block;
		font-size: 11px;
		height: 30px;
		line-height: 30px;
		padding: 0px 10px;
	}

	.secondary-navigation-wrap ul.secondary-navigation li a:hover,
	.secondary-navigation-wrap ul.secondary-navigation li.selected a {
		background: url(/images/template/header-background.png) 0 50% repeat-x;
		box-shadow: inset 0px 1px 1px black;
		-moz-box-shadow: inset 0px 1px 1px black;
		-webkit-box-shadow: inset 0px 1px 1px black;
		border-bottom: 1px solid rgba(255,255,255,.75);
		color: #ffffff;
		opacity: 1;
		filter: alpha(opacity=100);
		padding: 0px 10px;
	}
	
	.middle-area .wrapper { padding: 20px 10px; }

	#feedback { display: none; }
	
	a.import { display: none; }

	/* ----------------------------------------------------------------------------------------------------------------------- */
	/* Icons ----------------------------------------------------------------------------------------------------------------- */
	/* ----------------------------------------------------------------------------------------------------------------------- */
	.icon {
		background-position: 3px 9px;
		border: 1px solid #dddddd;
		padding: 8px 8px 8px 23px; 
	}
	
	.icon:hover { 
		background-position: 3px -42px; 
		border: 1px solid #1ea0da;
	}
}


/* ---------------------------------------------------------------------------------------------------------------------- */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) ------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 780px) {
	.right-side-content {
		float: none;
		width: auto;
	}
	
	body.page-dashboard .right-side-content .gray-box {
		width: auto !important;
	}
	
	.icon.print { display: none; }
	
	.header .login-info {
		display: none;
	}
	
	#feedback { display: none; }
	
	.login-box {
		margin-top: 20px;
	}
	
	body {
		overflow-x: hidden;
		padding: 0;
	}
	
	
	.form td input,	
	.form td textarea,
	.form td select,
	form .submit,
	form .button {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		display: block;
		width: 100%;
	}
	
	form .submit {
		margin-bottom: 10px;
	}

	
	.form td input.short { width: 50%; }
	
	.search-submit { width: 20%; }
	
	.display-table td.mobile-hide,
	.display-table th.mobile-hide,
	.display-table th.table-header.mobile-hide {
		display: none;
	}
	
	h1 { }
	legend { text-align: center; }
	
	.pager-bar form.fr {
		float: none;
		text-align: center;
	}
	
	.pager-bar form.fr .search-input {
		width: 72%;
	}
	
	.pager-bar .fl {
		clear: both;
		float: none;
		padding-bottom: 10px;
		padding-top: 10px;
		text-align: center;
	}
	
	.pager-bar .button.small { margin-top: 10px; }
	
	#mobile-nav-toggle {
		background: url(/images/icons/menu.png) 50% 50% no-repeat;
		background-size: 30px auto;
		display: block;
		height: 55px;
		position: fixed;
		right: 0;
		top: 0;
		width: 55px;
		z-index: 5;
	}
	
	#mobile-nav-toggle.selected {
		background-color: #2e2e2e;
	}
	
	#mobile-nav-toggle span {
		display: none;
	}
	
	#canvas {
		top: 0;
	}
	
	.primary-navigation-wrap .wrapper {
		padding: 0;
	}

	.primary-navigation-wrap {
		background: #ffffff;
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
		display: none;
		bottom: 0;
		height: auto;
		left: 0;
		overflow: auto;
		position: fixed;
		right: 0;
		top: 55px;
		padding-left: 10px;
		padding-right: 10px;
		z-index: 10;
	}

	.primary-navigation {
		float: none;
		margin: 0;
		padding: 0;
	}
	
	body.locked .primary-navigation {
		position: static;
		width: auto;
	}

	.primary-navigation li {
		background: none;
		filter: none;
		border: 0;
		border-bottom: 1px solid #cccccc;
		-webkit-border-top-left-radius: 0;
		-webkit-border-top-right-radius: 0;
		-moz-border-radius-topleft: 0;
		-moz-border-radius-topright: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		display: block;
		float: none;
		opacity: 1;
	}

	.primary-navigation li.mobile-only { display: block; }

	.primary-navigation li.fr {
		float: none;
	}
	
	.primary-navigation li .icon {
		border: 0;
	}
	
	.primary-navigation > li.sub {
		background-position: 95% 20px;
	}

	.primary-navigation > li.nav-item-logout {
		display: block;
	}
	
	.primary-navigation li a {
		border: 0;
		-webkit-border-top-left-radius: 0;
		-webkit-border-top-right-radius: 0;
		-moz-border-radius-topleft: 0;
		-moz-border-radius-topright: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		float: none;
		text-align: left;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.primary-navigation li.selected,
	.primary-navigation li:hover {
		margin-top: 0;
	}

	.primary-navigation li.selected a,
	.primary-navigation li:hover a {

	}


	span.checkbox-wrap {
		display: block;
		margin: 0 0 5px 0;
	}

	checkbox-wrap label.unchecked,
	.checkbox-wrap label.checked {
		transition: none;
		-o-transition: none;
		-moz-transition: none;
		-webkit-transition: none;
	}	
	
	.login-box {
		background-position: 50% 20px;
		padding: 120px 30px 30px 30px;
	}

	/* ----------------------------------------------------------------------------------------------------------------------- */
	/* CT Overlay --------------------------------------------------------------------------------------------------------- */
	/* ----------------------------------------------------------------------------------------------------------------------- */
	.ct-overlay {
		left: 0;
		margin: 0;
		right: 0;
		overflow: auto;
		top: 20px;
		min-width: 1px;
		width: auto;
		padding: 15px;
	}
	
	.form td.first {
		width: auto;
	}

	table {
		padding: 0;
		border-collapse: collapse;
	}
	
	.form > tbody > tr,
	.form > tbody > tr > td {
		display: block;
	}

	.form > tbody > tr.dn {
		display: none;
	}

	
	.form > tbody > tr > td label {
		font-size: 11px;
		text-transform: uppercase;
	}
	
	.form tr td:first-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
	
	.form tr td:nth-child(2) {
		border-top: 0;
		padding-top: 3px;
	}
	
	.dashboard-left,
	.dashboard-right {
		float: none;
		width: auto;
	}
	
	.dashboard-left {
		margin-bottom: 50px;
	}
	
	.header .logo {
		margin: 8px 0 0 5px;
	}
}



@media only screen and (max-width: 350px) {
	.small.ajax-create-link { display: none; }
	
	.pager-bar .button.small { display: none; }

	.homepage .dib {
		display: none;
	}
	
	/* ----------------------------------------------------------------------------------------------------------------------- */
	/* Forums ---------------------------------------------------------------------------------------------------------------- */
	/* ----------------------------------------------------------------------------------------------------------------------- */
	.forum-threads .forum-thread .post-info {
		text-align: center;
	}

	.forum-threads .forum-thread .post-info .admin-control {
		float: none;
	}

	.forum-threads .forum-thread .post-info .admin-control a {
		float: none;
		margin-left: 0;
		margin-bottom: 5px;
	}

	.forum-threads .forum-thread .user-info {
		float: none;
		width: auto;
	}

	.forum-threads .forum-thread .user-info .image {
		float: left;
		margin-right: 10px;
		max-width: 40px;
	}

	.forum-threads .forum-thread .user-info .image img {
		max-height: 70px;
	}

	.forum-threads .forum-thread .user-info .info {
		margin-top: 0px;
	}

	.forum-threads .forum-thread .post-content {
		border-left: 0;
		border-bottom: 1px solid #dadada;
		float: none;
		padding: 2%;
		width: auto;
	}
}