/*
Whemja !
Master Fluid Style Sheet
(c) 1998 - 2014 Inergy Design
CSS3


/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Ubuntu);<!-- Used on bread crumbs...may also use for smaller fonts if Comfortaa is difficult to read. -->
@import url(http://fonts.googleapis.com/css?family=Open+Sans);<!-- basic fall back, better then arial -->
@import url(http://fonts.googleapis.com/css?family=Comfortaa);<!-- Large font sizes -->
@import url(http://fonts.googleapis.com/css?family=Aldrich); <!-- not used yet -->
@import url(http://fonts.googleapis.com/css?family=Nunito); <!-- used for default too tips, looks better at smaller type size -->

/* === */

.footer {
	font-family:Ubuntu,Comfortaa,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	clear:both;
	
	padding-top: 10px;
	font-size: 14px;
	color: #fff;
	background: #de5100; /* Old browsers */
	
}
#header {
	background: #666 url("../images/page_elements/header.gif") repeat-x 0 100%;
	margin: 0 0 25px;
	padding: 0 0 8px
	/* CSS3 Gradients */
	background: #e8e8e8; /* Old browsers */
	background: -moz-linear-gradient(top,  #99befa 0%, #094ab2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99befa), color-stop(100%,#094ab2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #99befa 0%,#094ab2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #99befa 0%,#094ab2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #99befa 0%,#094ab2 100%); /* IE10+ */
	background: linear-gradient(top,  #99befa 0%,#094ab2 100%); /* W3C */
	}
#header #site-name {
	font: 275% Comfortaa,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	letter-spacing: -.05px;
	margin:0 0 0 40px;
	padding:3px 0;
	color: #f6f6f6;
	border:none
	text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
}

/* LISTS */
/*
ul {margin: .3em 0 1.5em 0;list-style-type:square}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: circle}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px}
ul.nomarker li {background:none;padding-left:0}
dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}
*/
li {
	list-style-type: none;
}
/*links*/
ul ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 15px;
	/*transition for smooth hover animation*/
	transition: all 0.95s;
}
/*hover effect on links*/
ul ul li a:hover {
	background: #555555;
	border-left: 5px solid lightgreen;
	font-size: 27px;
}
/*Lets hide the non active LIs by default*/
ul ul {
	display: none;
}
li.active ul {
	display: block;
}

body {
	padding: 0px;
	margin: 0px;
	font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	font-size: 14px;
	font-weight:400;
	color: #555555;
	line-height: 150%;
	background: #002838;
}
	
div.page_container {
	width: 960px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
	
#content {margin: 0 50px}

.adminwelcome {
	margin-top: 50px;
	margin-left: 100px;
	font-family: Comfortaa,Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif !important;
	font-size: 26px;
	font-weight: normal;
	letter-spacing:5px;
	color: #292F32;
	line-height: normal;
}
	
h1{
	margin: 40px 0px 10px 0px;
	font-family: Comfortaa,Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif !important;
	font-size: 36px;
	font-weight: normal;
	letter-spacing:5px;
	color: #0000ff;
	line-height: normal;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
}
h2	{
	color: #666666;
	line-height: 1.6em;
	zoom: 1;	
	color: #292F32;
	text-decoration: none; /* Improves usability and consistency of cursor style between image-type 'input' and others */ 
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	/* padding-top:10px; inergy design */
	 /* padding top will decide where the layerslider begins */
	padding-bottom:10px;
	padding-right:15px;
	padding-left:15px;
	font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	font-size:19px;
	font-weight:550;
	/* text-indent: 1.5em; */
	margin-left: auto;
 	margin-right: auto;
	text-align:Left;
	border-bottom: none;
	border-left: none;	
	border-right: none;
	border-top: none;
}


/*--- BASIC STUFF ---*/
/* Links */

a  {
	/* color: #f47e3c; */
	color: #248cc8;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

a:hover,
a:focus,
a:active {
	/* color: #248cc8; */
}

/* Headings and Rulers */

hr {
	height: 1px;
	background-color: #ccc;
	border: 0;
	margin-bottom: 1.5em;
}
a:focus {
	/* outline: thin dotted; */
}

a:hover,
a:active {
	/* outline: 0;  Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ 
}


*/
/*--- Alignment ---*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left:0px;
	margin-right:0px;
	
}
/*--- Lots of custom CSS ---*/
.JGbox {
    margin: 75px;
    border: 1px solid #e1e1e1;
    padding: 10px;
    background: #fcfcfc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 1px;
    color: #666675;
    padding:20px;
 }
.JGboxC {
    margin: 75px;
    border: 1px solid #e1e1e1;
    padding: 10px;
    background: #fcfcfc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: 1px;
    color: #666675;
    padding:20px;
	text-align:justify;
	text-justify:inter-word;
 }
.JGboxContainer {
    /* margin: 75px; */
margin-bottom:25px;
    border: 2px solid #e1e1e1;
    padding: 10px;
    /* background: #ddf;*/
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 1px;
    color: #666675;
    padding:20px;   
   width:100%
	height:auto;
}
.JGboxLeft { /* a jg box that will have a button in it */
    box-sizing:border-box;
	width:85%;
	float:Left;
/* border: 2px solid #e1e1e1; */
}
.JGboxRight { /* a jg box that will have a button in it */
    box-sizing:border-box;
	width:15%;
	float:right;
}
.JGboxtext{
    font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 1px;
    color: #666675;
    padding:20px;
}
.LetsGoRight { /*just a div with a border that floats right inergy design*/
	height: auto;
	float: right;
	border: 1px solid #E0E0E0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
	box-shadow: 0 1px 2px rgba(0,0,0,0.175);
	max-width: 100%;
	/* margin: 0 15px 15px 25px; */
	padding: 20px;
}

button.css3button {
	background: #0060a9;
	float:right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:400;
	letter-spacing:1px;
	color: #ffffff;
	padding: 14px 20px;
	margin-left:25px;
	margin-top:15px;
	background: -moz-linear-gradient(
		top,
		#b7c5e3 0%,
		#7b9acc);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#0060a9),
		to(#7b9acc));
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #e1e1e1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0060a9', endColorstr='#7b9acc');
zoom: 1;

}

#simpleTooltip{
	width:40px;
	padding: 7px;
	border: 1px solid #A6A7AB;
	background: #30c;
	color: #fff;
	font-family: Nunito,Aldrich,Comfortaa,Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	font-size: 13px;
	letter-spacing:.5px;
	text-align: center;
	padding: 10px 10px 12px 10px;
	position: absolute;
	z-index: 1000;
	left: -16px;
	
	
	/* CSS3 Transitions */
	-webkit-transition-duration: 0.25s;
	-moz-transition-duration: 0.25s;
	-o-transition-duration: 0.25s;
	-ms-transition-duration: 0.25s;
	transition-duration: 0.25s;
	-webkit-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-moz-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-o-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-ms-transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	transition-timing-function: cubic-bezier(0.35,0,0.35,1);
	-webkit-transition-property: opacity, margin-bottom, visibility;
	-moz-transition-property: opacity, margin-bottom, visibility;
	-o-transition-property: opacity, margin-bottom, visibility;
	-ms-transition-property: opacity, margin-bottom, visibility;
	transition-property: opacity, margin-bottom, visibility;

	/* CSS3 Gradients */
	background: #404040; /* Old browsers */
	background: -moz-linear-gradient(top,  #30c 0%, #cab8ff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30c), color-stop(100%,#cab8ff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #30c 0%,#cab8ff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #30c 0%,#cab8ff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #30c 0%,#cab8ff 100%); /* IE10+ */
	background: linear-gradient(top,  #30c 0%,#cab8ff 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#404040',GradientType=0 ); IE6-9 - disabled due to lack of compatibility with pseudo-elements */

	/* CSS3 Borders */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	/* CSS3 Text-Shadow */
	text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
	}


.featurebox {
	font-family: Aldrich,Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	color:#333;
	margin: 0 0 1.5em;
	border: 2px solid #e1e1e1;
    padding: 10px;
    /* background: #ddf;*/
    border-bottom-left-radius: 55px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 55px;
	background: #f6f6f6 url("../images/whemja_web_logo.gif") no-repeat 100% 100%
}
/* used to place pos or neg icons 32x32 */
.icon_placement {
	margin-bottom: 20px;
	float:right;					
}

/* used for displaying messages usually DB*/
.msg {
	font: bold 14px "Lucida Grande", Lucida, Verdana, sans-serif;
	color: #c00;	
}
br {clear:left}

.title {
		font-family: Ubuntu,'Open Sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    	font-size: 24px;
    	line-height: 21px;
    	letter-spacing: 1px;
		font-weight:800;
   		color: #666675;
		text-transform: capitalize;
}

.department {
	font: italic 16px arial;
	color:#c00;
	/*border-bottom: 1px dotted #c00;*/
	padding-bottom: .1em;	
}

.verb {
	
	font: 14px arial;
	color:#000000;
	padding-bottom: .1em;	
}
.first_last_name {
	
	font: bold 155% arial;
	margin: 1.2em 0 .3em;
	color:#c00;
	border-bottom: 1px solid #c00;
	padding-bottom: .1em;
	text-transform: capitalize;
}

.views {
	/* this controls the little icons on top right of pages */
	float: right;
	margin: 15px 10px 10px;
	display: inline;	
}
.views img{
	/* this controls the little icons on top right of pages */
	/* border: 1px dotted #c00; */
	float: right;
	margin: 15px 10px 10px;
	
	display: inline;	
}
/*-------------------------------------------------------------*/
/* ==================== RESPONSIVE LAYOUT ==================== */
/* --- Smaller than standard 960 --- */
@media only screen and (max-width: 960px),
(min-device-width: 768px) and (max-device-width: 959px)
	{
	div.page_container
		{
		width: 768px; /* --- Overall Page Width --- */
		}
	}

/* --- Mobile Devices 480 - 768px --- */
@media only screen and (max-width: 768px),
(min-device-width: 480px) and (max-device-width: 767px)
	{
	div.page_container
		{
		width: 480px; /* --- Overall Page Width --- */
		}
	#content {margin: 0px}

	/*  #content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold} */

	/* #content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}*/

	/* #content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}*/
	}
	
/* --- Mobile Devices Up To 480px --- */
@media only screen and (max-width: 480px),
(min-device-width: 0px) and (max-device-width: 479px)
	{
	div.page_container
		{
		width: 360px; /* --- Overall Page Width --- */
		}
		#content {margin: 0px}

	/* #content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold} */

	/* #content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none} */

	/* #content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline} */
	}
/* END RESPONSIVE LAYOUT-------------------------------------*/

/* special type faces */
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold;font-size:16px}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
.small {font-size:11px}

/* bread crumb test */
* {margin: 0; padding: 0;}
.admin {
	background:#333333;
}
.tinyicon { /* used in the grids */
	height:32px;
	float:left;
	padding-left:20px;
	padding-right:10px;
	padding-top:5px;
	 border:0;
}
.tinyicon img { /* used in the grids */
	 height:24px;
	 border:0;
	
}
.tinyicon a:hover{ /* used in the grids */
	
	
}

/* inputs */
.input {
    border: 1px solid #002838;
    background: #ffc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #e1ffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ffff), color-stop(7%,#e1ffff), color-stop(12%,#e1ffff), color-stop(12%,#fdffff), color-stop(30%,#e6f8fd), color-stop(54%,#c8eefb), color-stop(75%,#bee4f8), color-stop(100%,#b1d8f5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */

}
.input:hover 
{
    border: 1px solid #ff9ab8;
    background: #ff6;
}
/* button for the add/edit forms */
/* would to make 2 classes, with different grads for Accept and cancel */
/* IMPORTANT NEED TO HAVE BACKGROUND FALL BACK COLORS */
/* test reverse the radius so it starts off round, and the hover makes it square */

.input:focus {
	background: #e1ffff; /* Old browsers */

}
.button:hover
{
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	border: 1px solid #7d0000;
	
}

.button 
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #050505;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#ffffff 0%,
		#ebebeb 50%,
		#dbdbdb 50%,
		#ffffff);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#ffffff),
		color-stop(0.50, #ebebeb),
		color-stop(0.50, #dbdbdb),
		to(#ffffff));
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #949494;
	-moz-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	-webkit-box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	box-shadow:
		0px 0px 0px rgba(000,000,000,0),
		inset 0px 0px 0px rgba(255,255,255,0);
	text-shadow:
		0px 0px 0px rgba(000,000,000,0),
		0px 0px 0px rgba(255,255,255,0);
}