/*======================================================
  STYLES.CSS
  ======================================================

    1.  FLUID CONTAINER
    2.  HEADER 
            - Logo
    3.  CONTENT AREA
	4.  FORMS
    5.  BUTTONS
    6.  HELPER CLASSES
    7.  MEDIA QUERIES
            - Desktop
            - Tablet
            - Mobile
            - Narrow Mobile

  ===================================================== */
  
  /* ==========================================================================
  Apply Box Sizing to all elements
   ========================================================================== */

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* ==========================================================================
  Eliminiate webkit tap highlight for mobile devices
   ========================================================================== */

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* ==========================================================================
  SET MIN-WIDTH ON UBER FOR BROWSERS THAT DON'T SUPPORT MEDIA QUERIES
   ========================================================================== */

.no-mediaqueries #uber, .no-mediaqueries header, .no-mediaqueries footer {
    min-width: 992px;
}

/* ==========================================================================
  REMOVE OUTLINE ON PRINTAREA
   ========================================================================== */
#printAreaContentDotNet:focus, #printAreaContent:focus {
    outline: none;
    }

/* ==========================================================================
  reset box sizing for ui time picker
   ========================================================================== */

#ui-timepicker-div * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
   Div Clearing and Clearfix
   ========================================================================== */

.clear {
    clear: both;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/*-----------------------------------------------------------
 Styles for validation helpers
-----------------------------------------------------------*/

.field-validation-error {
    color: #f00 !important;
	margin-bottom:5px;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00 !important;
    background-color: #fee !important;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}
.validation-summary-errors {
    font-weight: bold;
    color: #bf1e1e;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	background-color:#F3DEDD;
	border-color: #ECCCD1;
	padding:5px;
}

.validation-summary-valid {
    display: none;
}



/*======================================================
  0. BODY STYLES
  ===================================================== */
  
.templateSection {    /*  FOR TEMPLATE ONLY. */
    padding: 38px 0;
}

html, body, header, footer {
    min-width: 320px;
}

#uber, body, html {
    width: 100%;
}

body {
    font: 17px/21px "Open Sans", Helvetica, Arial, sans-serif;
    color: #3b3b3b;
}

p {
  margin: 15px 0;
}

/* Link Colors */

a, a:link, a:visited, a[href^=tel] {
    color: #04798c;
    text-decoration: none;
}

    a:hover, a:active, a:focus {
        text-decoration: underline;
    }

h1, h2, h3, h4, h5 {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1.2em;
    color: #3b3b3b;
    font-weight: 600;
}

h2{
	font-size: 1.4em;
}



/*======================================================
  1. FLUID CONTAINER
  ===================================================== */

.container-fluid {
    width: 94%;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    /*padding: 0;*/
}

/*======================================================
  2. HEADER
  ===================================================== */
  
header {
    width: 100%;
    padding: 51px 0 0 0;
    position: relative;
    z-index: 1000;
}

.headerInner {
    width: 94%;
    margin: 0 auto;
    max-width: 1300px;
}

    header a, header a:link, header a:visited {
        color: #000;
    }

.headerLeft {
    margin: 0 auto;
    max-width: 385px;
}


/*==================
  Logo
====================*/

#logo {
    width: 100%;
    float: left;
}

    #logo img {
        display: block;
        width: 100%;
        max-width: 385px;
        height: auto;
    }

    #logo a:focus img {
        outline: 1px solid #0078AE;
    }

.homepage header h1{
	width: 0px;
	height: 0px;
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
}


/*======================================================
  3. CONTENT AREA
  ===================================================== */
  
#loginContainer{
	background: #eee;
	border: 1px solid #ccc;
  	border-radius: 7px;
	padding-top: 20px;
	padding-left: 13px;
	padding-right: 13px;
}

#loginContainer p{
	font-size: 0.77em;
	font-weight: 600;
}

#tipsContainer{
	background: #dfebd9;
  	border-radius: 7px;
	margin-top: 23px;
	font-weight: 600;
	position: relative;
	padding-left: 65px;
	color: #000;
}

#tipsContainer p{
	margin: 12px 0;
}

#loginContainer .loginText{
	padding-left: 30px;
	padding-right: 30px;
}

#loginContainer a,
#tipsContainer a{
	color: #000;
	font-weight: bold;
}

#tipsContainer .lightBulb{
	background: url(../images/lightbulb.png) top left no-repeat;
	width: 36px;
	height: 59px;
	display: block;
	float: left;
	top: -8px;
	left: -40px;
	position: absolute;
}

.separator{
	border-top: 1px solid #d4d4d4;
}

.separatorArrow{
	background: url(../images/arrow.jpg) no-repeat;
	width: 31px;
	height: 16px;
	margin: -1px auto 0 auto;
}

.homeNews{
	padding: 22px 0 40px 0;
	font-weight: 600;
	color: #3b3b3b;
}

.homeNews img{
	max-width: 100%;
	/*width: 100%;*/
}

.textRight{
	text-align: right;
}

#mainContent:focus {
    outline: none;
}

/*======================================================
  4. FORM STYLES
  ===================================================== */

::-webkit-input-placeholder {
    color: #000;
	opacity: 1;
}

:-moz-placeholder { /* Firefox 18- */
    color: #000;
	opacity: 1;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #000;
	opacity: 1;
}

:-ms-input-placeholder {
    color: #000;
	opacity: 1;
}

.formField {
    width: 100%;
    margin: 6px 0;
}

input[type="text"], input[type="date"], select {
    width: 100%;
    height: 30px;
    padding: 3px 7px;
    -webkit-appearance: none;
    border: solid 1px #ccc;
}

input[type="button"] {
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
}

.form-control {
  	color: #999;
}


/*======================================================
  5. BUTTONS
  ===================================================== */

.button, a.button, button {
    cursor: pointer;
    border: none;
    display: inline-block;
    padding: 10px;
    margin: 3px 3px 3px 0;
    color: #fff !important;
    text-align: center;
    font-size: 0.77em;
    font-weight: 700;
    background: #464646;
    -webkit-transition: background 0.1s ease-in;
    -moz-transition: background 0.1s ease-in;
    -ms-transition: background 0.1s ease-in;
    -o-transition: background 0.1s ease-in;
    transition: background 0.1s ease-in;
    -webkit-backface-visibility: hidden;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	text-transform: uppercase;
	border: 1px solid #161616;
}

    .button:hover, .button:active, a.button:hover, a.button:active, button:hover, button:active {
        text-decoration: none;
    }


/*======================================================
  6. HELPER CLASSES
  ===================================================== */

/*======================================================
  7. LOADER CLASSES
  ===================================================== */
/* Center the loader */
#loader {
	position: absolute;
	left: 53%;
	top: 30%;
	z-index: 1;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	border-top: 16px solid #3498db;
	width: 120px;
	height: 120px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Add animation to "page content" */
.animate-bottom {
	position: relative;
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 1s;
	animation-name: animatebottom;
	animation-duration: 1s
}

@-webkit-keyframes animatebottom {
	from {
		bottom: -100px;
		opacity: 0
	}

	to {
		bottom: 0px;
		opacity: 1
	}
}

@keyframes animatebottom {
	from {
		bottom: -100px;
		opacity: 0
	}

	to {
		bottom: 0;
		opacity: 1
	}
}


/*=============================================== */

#printAreaContent img {
    max-width: 100%;
    height:auto;
}

.inline {
    display: inline;
}

.inlineBlock {
    display: inline-block;
}

.noMarginTop {
    margin-top: 0;
}

.noMarginBottom {
    margin-bottom: 0;
}

.noMarginLeft {
    margin-left: 0;
}

.noMarginRight {
    margin-right: 0;
}

.width100 {
    width: 100%;
}
 



/*======================================================
  4. MEDIA QUERIES
  ===================================================== */


/*==================
  Tablet
====================*/

@media only screen and (max-width : 991px) {

    /* Header ========= */

    #logo {
        padding-top: 30px;
    }

    /* Content Area ===== */

    #mainContent {
        width: 100%;
    }

}

/*==================
  Wide Mobile
====================*/

@media only screen and (max-width : 767px) {
	
	.templateSection{
		padding-top: 10px;
	}
	
	.newsImage {
  		margin-top: 40px;
	}

    /* Header ========= */

    header {
        padding: 0;
        width: 100%;
        height: 70px;
    }

    #logo {
        padding-top: 15px;
    }

        #logo img {
            height: 40px;
            width: auto;
			margin: 0 auto;
        }
		

    /* Content Area ========= */

    #uberMain {
        width: 100%;
        border: none;
    }

    .contentSection {
        padding: 40px 0;
    }

    a, a:hover {
        text-decoration: none !important;
    }



    /* Homepage ========= */
	
	.homeNews {
  		padding-top: 0;
	}


    .homepage,
	.homepage .textRight {
        text-align: center;
    }
	
	#tipsContainer {
	  	padding-left: 0;
	}
	
	#tipsContainer .lightBulb {
	  	display: block;
	  	float: none;
	  	left: 0;
	  	position: relative;
	  	top: 0;
		margin: 0 auto 10px auto;
	}



}