/* Copyright (c) 2010-2015 Florida PhysicianWork and Spyder Web Global - All Rights Reserved */

body {background-color:#ffffff;
	margin:0px;
	padding:0px;
	font-family:'Adelle', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;}

img {border:none;}

header, section, nav, p, h1, h2 {margin:0px;
	padding:0px;}
	
hr {width:100%;
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
	border-left:none;
	border-right:none;
	margin:15px 0;}

.wrapper {width:97%;
	max-width:1000px;
	margin:0px auto;
	padding:0px 5px;}
	
	/** Gives the top the swirl/ribbon background **/
	#topbg {width:100%;
		min-height:113px;
		margin:0px;
		float:left;
		overflow:hidden;
		background:url(images/mtopribbon.gif) no-repeat center bottom #000;}
		
		/** Have the navigation centered under the logo on smaller screens **/
		@media only screen and (min-width:650px) {
		#topnav {width:100%;
			margin:5px auto 45px auto;
			text-align:center;}
			#topnav a {color:#fff;
				text-decoration:none;
				margin:0 5px;
				padding:2px 6px;
				width:100%;}
				#topnav a:hover, #topnav a:active {color:#ffd141; /**gold**/
					text-decoration:underline;
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;}
		}
		@media only screen and (max-width:649px) {
		#topnav {width:100%;
			margin:5px auto 35px auto;
			text-align:center;
			overflow:hidden;}
		#topnav a {display:block;
				float:left;
				padding:5px 0;
				background-color:#333;
				color:#fff;
				text-decoration:none;}
				#topnav a:hover, #topnav a:active {color:#ffd141;
					text-decoration:underline;
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;}
		}
		/** 3 columns **/
		@media only screen and (min-width:540px) and (max-width:649px) {
			#topnav a {width:31%;
				margin:5px 1%;}
		}
		/** 2 columns **/
		@media only screen and (max-width:539px) {
			#topnav a {width:46%;
				margin:5px 2%;}
		}
		
		#toplogo {width:100%;
			text-align:center;}
			#toplogo img {width:100%;
				max-width:278px;
				margin:10px 0;}
		
			
	/** The styling for the main components on the page. It has a gradient bg on mobile (done in the body tag on desktop). It also holds everything in (like a wrapper) **/
	#pagebg {width:100%;
		margin:0;
		padding:10px 0 30px 0;
		float:left;
		overflow:hidden;
		line-height:23px;
		background:url(images/mbg.gif) repeat-x center top #fff;}
		#pagebg ul {list-style:none;}
		/** Custom bullets and I adjusted the default spacing for the bullets **/
		#pagebg ul li {line-height:22px;
				margin:5px 0 10px -15px;
				padding: 0 0 0 20px;
				background:url(images/bullets.png) no-repeat 0 5px;}
		#pagebg h2 {display:block;
			width:96%;
			border-bottom:2px solid #ffd141; /**gold**/
			padding:5px 2%;
			margin:10px 0;
			text-align:left;
			font-size:18pt;
			color:#333;
			font-weight:normal;}
		#pagebg h4 {padding:5px 0;
			margin:10px 0;
			text-align:left;
			font-size:15pt;
			color:#666;
			font-weight:normal;}
		#pagebg h5 {padding:0;
			margin:0;
			text-align:left;
			font-size:11pt;
			color:#00a650; /**green**/
			font-weight:normal;}
		
/********** Home page styling **********/
		/** The left and right sides of the home page adjusted to have a smaller photo (smaller left side)**/
		@media only screen and (min-width:550px) {
		#homeleft {width:39%;
			margin:0 1% 0 0;}
			#homeleft img {width:98%;
				margin:20px 0 0 0;}
			#homeleft ul li {background:none;}
		#homeright {width:59%;
			margin:0 0 0 1%;}
		}
		/** Same left and right sides moved on smaller screens to have homeleft on top and homeright on bottom **/
		@media only screen and (max-width:549px) {
		#homeleft {width:100%;
			margin:0;}
			#homeleft img {width:80%;
				margin:20px 10% 0 10%;}
			#homeleft ul li {background:none;}
		#homeright {width:100%;
			margin:0;}
		}
		
		/** The width and margin are classified above ^ **/
		#homeleft {float:left;}
			#homeleft img {max-width:490px;
				border:5px solid #fff;
				box-shadow:3px 3px 10px #000;}
			
		/** The width and margin are classified above ^ **/
		#homeright {float:left;
			font-size:12pt;
			line-height:14px;}
			/** The custom browse jobs button on the home page **/
			#homeright a {color:#333;
				text-decoration:none;
				font-size:14pt;
				border:2px solid #333;
				background-color:#e6e6e6;
				padding:8px 40px;
				margin:0 0 0 20px;
				border-radius:22px;
				-o-border-radius:22px;
				-moz-border-radius:22px;
				-webkit-border-radius:22px;
				text-align:center;}
				#homeright a:hover {color:#e6e6e6;
					background-color:#333;
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;}
					
	#quotebg {width:100%;
		margin:20px 0 0 0;
		padding:10px 0;
		float:left;
		overflow:hidden;
		background:url(images/quotebg.gif) repeat-x center top #555;
		font-size:12pt;
		line-height:30px;}
		
		#quote {width:94%;
			float:left;
			padding:3%;
			margin:30px 0;
			background-color:#232323;
			color:#ffd141;}
			#quote h4 {padding:0;
				margin:0 0 0 10px;
				text-align:left;
				font-size:13pt;
				color:#ddd;
				font-weight:normal;}
			#quote h5 {padding:0;
				margin:0;
				text-align:left;
				font-size:10pt;
				color:#ffd141; /**gold**/
				font-weight:normal;}
			
		/** Show the Photos and Signatures under the home quote as two columns **/
		@media only screen and (min-width:550px) {		
		#quotel {width:49%;
			float:left;
			margin:30px 1% 0 0;
			padding:0;}
		#quoter {width:49%;
			float:left;
			margin:30px 0 0 1%;
			padding:0;}
		}
		@media only screen and (max-width:549px) {
		#quotel {width:98%;
			float:left;
			margin:30px 1% 0 1%;
			padding:0;}
		#quoter {width:98%;
			float:left;
			margin:30px 1% 0 1%;
			padding:0;}
		}
			
			#quotel img:nth-of-type(n), #quoter img:nth-of-type(n) {width:40%;
				max-width:150px;
				margin:0 2% 0 0;
				float:left;}
			#quotel img:nth-of-type(2n), #quoter img:nth-of-type(2n) {width:58%;
				margin:0;
				max-width:200px;}
/********** End Home Page ***********/
	
/** Formatting for forms and form tables**/
table {
	margin:auto;
	width:100%;
	border-collapse:collapse;
}

td, th {
	padding: 5px;
	}

.tablecenter td, .tablecenter th {
	text-align:center;
	}

	td.left {
		text-align:left;
	}
	
	td.right {
		text-align:right;
	}
	
	form {
		text-align:center;
		margin:auto;
	}
	
	textarea {font-family:Arial, 'Myriad Pro', Helvetica, 'Sans-Serif';
		font-size:11pt;}
	input {font-size:11pt;}
	
	.otherbutton {margin:8px;}
	.otherbutton a, button {color:#333;
		text-decoration:none;
		font-size:11pt;
		border:1px solid #333;
		background-color:#e6e6e6;
		padding:3px 20px;
		border-radius:16px;
		-o-border-radius:16px;
		-moz-border-radius:16px;
		-webkit-border-radius:16px;
		text-align:center;}
		.otherbutton a:hover, button:hover {color:#e6e6e6;
			background-color:#333;
			cursor:pointer;
			-webkit-transition: all 0.3s ease-in-out;
			-moz-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			-ms-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;}
/********** End Forms ***********/

/** Formatting for job list table**/
.list th{background-color:#666;
	color:#fff;
	border:1px solid #999;}
.list td{
	padding:0 20px;
	font-size:11pt;
	border:1px solid #ccc;
	border-collapse:collapse;
}
.list tr:nth-of-type(2n) {background-color:#fff;}
.list tr:nth-of-type(2n-1) {background-color:#eee;}

.locationdate {font-size:11pt;
	color:#090;
	margin:0;}
/********** End job list table ***********/

/** Formatting for the public Jobs listing page **/
.joblistingleft {float:left;
	width:100%;
	margin:0 0 40px 0;}
	
.joblistingright {float:left;
	width:100%;
	margin:0 0 40px 0;}
	
.job {width:94%;
	margin:0 3%;}
/********** END Job listings page **********/

/** Formatting for the Biography page **/
.bioimage {width:30%;
	max-width:150px;
	background-color:#fff;
	border:5px solid #fff;
	box-shadow:3px 3px 10px #000;
	margin:0 20px 20px 0;
	float:left;}
	.bioimage img {width:100%;
		max-width:150px;}
	
/********** END Biography **********/
	
	
	/** This one narrows the text area and centers it on the page. It is used on the pages with less text to make them look more full **/
	.nmtcentered {width:90%;
		margin:0 5%;}
		
	#bottomadmin {width:100%;
		margin:20px 0;
		float:left;}
		
	.adminbutton {color:#fff;
				text-decoration:none;
				font-size:11pt;
				border:2px solid #666;
				background-color:#333;
				padding:3px 20px;
				border-radius:16px;
				-o-border-radius:16px;
				-moz-border-radius:16px;
				-webkit-border-radius:16px;
				text-align:center;}
				.adminbutton:hover {color:#ffd141;
					background-color:#000;
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;}
			
	#bottombg {width:100%;
		margin:0;
		padding:20px 0;
		float:left;
		overflow:hidden;
		background-color:#000;
		color:#fff;
		text-align:center;}
			#bottombg a:hover, #bottombg a:active {color:#ffd141;
				text-decoration:underline;
				-webkit-transition: all 0.3s ease-in-out;
				-moz-transition: all 0.3s ease-in-out;
				-o-transition: all 0.3s ease-in-out;
				-ms-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;}
				
		#bottomnav {width:100%;
			float:left;
			font-size:12pt;
			margin:10px 0;}
			
			/** Splits the bottom nav into 3 columns of buttons **/
			@media only screen and (min-width:550px) {
			#bottomnav a {width:29%;
				margin:5px 2%;}
			}
			/** Splits the bottom nav into 2 columns of buttons **/
			@media only screen and (min-width:400px) and (max-width:549px) {
			#bottomnav a {width:46%;
				margin:5px 2%;}
			}
			/** Splits the bottom nav into 1 column of buttons **/
			@media only screen and (max-width:399px) {
			#bottomnav a {width:70%;
				margin:5px 15%;}
			}
			#bottomnav a {display:block;
				float:left;
				padding:8px 0;
				background-color:#333;
				color:#fff;
				text-decoration:none;}
			
		#spyder {width:100%;
			float:left;
			margin:20px 0;
			font-size:11pt;}
			#spyder a {color:#fff;
				text-decoration:underline;}