/*
 *	Name:		layout.css
 *	Date:		December 2012
 *  For:		Apex Innovations
 *	Author:		Jay Blanchard
 *
 *	Notes:		contains all of the custom styles for the Apex Innovations website
 *				styles have been categorized by site and page specific and should reflect id's and class's rather than HTML elements
 *				media queries are here too and used for specific screen layouts to rearrange elements on mobile devices while allowing the grid to handle column layout
 *
 *
 */

/* #Site Styles */
	/* just a testing style, allows you to see column layout - remove class from element when done */
		.grey {
			background: #999999;
		}
	/* for coloring text - highlights */
		.redText {
			color: #990000;
			font-weight: bolder;
		}	
	
	/* login warning modal and generic, re-usable shade */
		.loginWarning {
			/* the modal window in which the message is displayed */
			position: fixed;
			background: #CCE5F8;
			border: 2px #990000 solid;
			font-size: 1.1em;
			text-align: center;
			padding: 20px;
		   	top: 50%;
			left: 50%;
			-moz-box-shadow:    3px 3px 5px 6px #333;
  			-webkit-box-shadow: 3px 3px 5px 6px #333;
  			box-shadow:         3px 3px 5px 6px #333;
  			z-index: 200;
		}
	
		.close {
			/* a closing doohickey, like an X specifically styled */
			background: #990000;
			color: #FFFFFF;
		    width: 1.5em;
		    height: 1.5em;
		    text-align: center;
    		border-radius: 50%;
    		float: right;
		    margin-top: -14.5%;
		    margin-right: -14.5%
		}
	
		.shade {
			/* you can use this shade with modals site wide, for consistency */
			display: none;
		    background: #3B3013;
    		position: fixed; 
	    	left: 0; 
	    	top: 0;
    		width: 100%; 
    		height: 100%;
	    	z-index: 100;
		}	

	/* add this class to headings to get SOR font */
		.spirit_of_radio {
			color: #181818;
			font-family: "spirit_of_radio";
			font-weight: normal;
		}

	/* used for trademarks, etc. */
		sup {
			font: 9px "spirit_of_radio";
			font-weight: normal;
			vertical-align: super;
			-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
			-webkit-text-size-adjust: 100%;
		}

	/* used to set off sections with buttons */
		.createAccount {
			margin-bottom: 10px;
        	width: 90%;
			background: #CCE5F8;
			border: 1px #990000 solid;
			padding: 2%;
			text-align: center;
			-moz-border-radius: 5%;
			-webkit-border-radius: 5%;
			border-radius: 5%;
			-moz-box-shadow:    3px 3px 2px 2px #999;
  			-webkit-box-shadow: 3px 3px 2px 2px #999;
  			box-shadow:         3px 3px 2px 2px #999;
		}
	/* center an input element inside the .createAccount */
		.createAccount input[name="LoginName"]{
             display: block;
             margin : 10px auto;
        }
        .createAccount p {
        	margin: 2px;
        }
        
        .createAccount input[type="submit"],
        .createAccount form {
        	margin-bottom: 0px;
        }
        .createAccount .sidebar {
        	margin-bottom: 8px;
			color: #990000;
        }
        .createAccount#right {
        	margin-left: 20px;
        }
        
	/* navigational elements included on each page */
		.nav {
			text-align: right;
		}
		.nav form {
			float: right;
		}

		.primaryNav {
			font-size: 1.3em;
			font-weight: bold;
			text-decoration: none;
		}

		.social {
			text-align: right;
		}

		.products li {
			margin-bottom: .25em;
		}

	/* footer */
		.footer {
			line-height: 1.2em;
			font-size: 0.9em;
			text-align: right;
		}

		.phone {
			color: #990000;
			font-weight: bold;
			text-align: right;
			padding-top: .5em;
		}

	/* contact info */
		.contact {
			font-size: 0.95em;
		}
		.contact .small {
			line-height: 1.2em;
		}
		.contact h5 {
			color: #990000;
			font-weight: bold;
		}
		.contact li {
			margin-bottom: 0.1em;
		}
	/* conference widget */
		.confContainer {
	    	height: 30em; /* total visible items, in this case set to 4 - YMMV */
	    	overflow: hidden; /*keep items outside of the container from being seen */
		}
		.conference {
	    	position: relative;
	    	top: -6.5em; /* allows an item to be moved into hidden space before scrolling into view */
	    	margin: 0px;
	    	padding: 0px;
		}
		.conf_info, .host {
			font-size: 0.8em;
		}
		.conference li {
			height: 6.5em;
			margin-left: 1px;
			margin-bottom:0px;
		}
		.conference li:nth-child(odd) {
			background: #CCE5F8;
		}
	/* used to separate content */
	.red-line {
		border-top: 2px #990000 solid;
	}	
	.red-line :before {
		content: "Advertisement";
		font-size: 0.7em;
		text-decoration: none;
	}
	/* login form */
	.login {
		position: absolute;
		top: -325px;
		height: 275px;
		width: 220px;
		border: 2px solid #990000;
		background: #FFFFFF;
		padding: 1%;
		-moz-border-radius: 5%;
		-webkit-border-radius: 5%;
		border-radius: 5%;
		-moz-box-shadow:    3px 3px 5px 6px rgba(50,50,50,0.5);
  		-webkit-box-shadow: 3px 3px 5px 6px rgba(50,50,50,0.5);
  		box-shadow:         3px 3px 5px 6px rgba(50,50,50,0.5);
  		-webkit-transition: top .25s linear;
		-moz-transition: top .25s linear;
		-ms-transition: top .25s linear;
		-o-transition: top .25s linear;
		transition: top .25s linear;
  		z-index: 1000;
	}
	.loginInview{
		top: 25px !important;
	}
	.login_links {
		text-align: center;
		font-size: 1.3em;
	}

	/* additional table styling */
	td {
		vertical-align: top;
		padding: 10px 4px 10px 4px;
		border-bottom: 1px #CCCCCC solid;
	}
	td img {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}


/* #Page Styles */
	
	/* phone # on main page */
		.logo .phone {
			text-align: center;
			font-size: 3.0em;
		}
	/* for displaying personnel either left or right and other goodies */
		.employee_left .title, .employee_right .title, .promo .title {
			color: #990000;
			font-size: 1.1em;
		}
		.employee_left .info, .employee_right .info {
			font-size: 0.95em;
		}
		.employee_left img {
			width: 80px;
			float: left;
			margin-right: 1em;
		}
		.employee_right img {
			width: 80px;
			float: right;
			margin-left: 1em;
		}
		.promo {
			color: #000000;
			font-size: 0.95em;
		}
	/* apex bullets */
		.bullets li:before {
			content: url('../grfx/apex_bullet.gif');
			padding-right:3px;
		}
		.bullets li {
			font-size: 0.9em;
		}
	/* sub-list */
		.bullets li ul li {
			margin: 0;
			font-size: 1.0em;
		}
	/* Advertising note*/
		.bullets.note{
			margin: -15px 0 0 -5px;
		}

	/* hide blockquotes on FAQ page */
		.faq blockquote {
			display: none;
		}

	/* make buttons 'clickable' on larger images within product pages */
		.ipStore {
			position: absolute;
			height: 50px;
			width: 175px;
			top: 220px;
			left: 575px;
			/*border: 1px dashed #00FF00; to make the box visible for positioning*/
		}	
		.hemiStore {
			position: absolute;
			height: 50px;
			width: 175px;
			top: 205px;
			left: 600px;
			/*border: 1px dashed #00FF00; to make the box visible for positioning*/
		}
		.respStore {
			position: absolute;
			height: 50px;
			width: 175px;
			top: 180px;
			left: 578px;
			/*border: 1px dashed #00FF00; to make the box visible for positioning*/
		}
		.ruleStore {
			position: absolute;
			height: 50px;
			width: 175px;
			top: 200px;
			left: 575px;
			/*border: 1px dashed #00FF00; to make the box visible for positioning*/
		}
		.canadaStore {
			position: absolute;
			height: 50px;
			width: 175px;
			top: 190px;
			left: 595px;
			/*border: 1px dashed #00FF00; to make the box visible for positioning*/
		}

	.center{
		width:50%;
		margin:0 auto;
	}	

	.bullets.indent li{
		padding-left:2em;
	}
		
/* #Media Queries */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.flexslider {
			display: none;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.flexslider {
			display: none;
		}
	}


/* #Font-Faces */

/* with a nod to Rush */
@font-face {
    font-family: 'spirit_of_radio';
    src: url('../fonts/spiritofradio-webfont.eot');
    src: url('../fonts/spiritofradio-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/spiritofradio-webfont.woff') format('woff'),
         url('../fonts/spiritofradio-webfont.ttf') format('truetype'),
         url('../fonts/spiritofradio-webfont.svg#spirit_of_radioregular') format('svg');
    font-weight: normal;
    font-style: normal;

}