/* style sheet for home page week 7 */

p { font-family: 'Lobster', cursive;}

body  {
    padding: 9;
    text-align: center; 
    /* centers container. Text will be left aligned in the #container selector */
    color: 000000;
    margin-top: 10;
    margin-right: 0;
    margin-bottom: 10;
    margin-left: 0; 
     /* margin-right and margin-left both set to 0 centers the page */
    font-family: Verdana, Arial, Helvetica, sans-serif;
   /* If you find the base font too big then uncomment this line font-size: 80%; */
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 180%; 
	color: #330066; }
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 140%; 
	font-weight: bolder;
	color: #666666; }
h4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	font-weight: bolder;
	color: #330066; }
	
time { font-family: andulus; font-style:italic; font-size: 80%;} 

#container { width: 95%; margin: 0 auto; text-align: left;  } 

#header { margin-bottom:0px; }	 

#nav { margin-top: 9px; margin-right: 20px; margin-bottom: -1px; margin-left: 0%; }

#sidebar { float: right; width: 30%;  padding: 90px 0;  }

#content { margin-top: 0; margin-right: 20px; margin-bottom: 0; margin-left: 1%; padding-right: 15%; } 

#footer { padding: 0px;  text-align:center; font-size:60%; } 

.fltrt { /* used to float an element like an img to the right  */
	float: right; margin-left: 8px; }
	
.fltlft { /* used to float an element like an img to the left  */
	float: left; margin-right: 8px; }
	
.clearfloat { /* use with div or break as last element before closing container with a float */
	clear:both; height:0; font-size: 1px; line-height: 0px; }
	
.box { font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%; /* use 90% if too big */
	color: #FFFFFF;
	background-color: #333366;
	padding: 10px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 25px;
	border: 3px dotted #FFFFFF; 
}

ul.tabs {list-style-type: none; padding: 0; margin: 0px; } 

ul.tabs li {float:left; padding: 0px; margin: 0px; padding-top: 0; background:url(../images/tab.png); background-repeat: no-repeat; margin-right: 10px;}

ul.tabs li a { float:left; padding: 2px 10px; color:#fff; text-decoration: none; background:url(../images/tab.png); background-repeat: no-repeat; background-size:100%; margin-right: -5px;}

ul.tabs li a:hover { color: #ff0; } 

/* the metadata class formats the bottom links differently from the main menu */

	a.metadata:link {color:#333366;background-color:white;border:none;text-decoration:none;}
	a.metadata:visited {color:#CCCCCC;;background-color:white;border:none;text-decoration:none;}
	a.metadata:hover {color:blue;background-color:#CCCCCC;border:none;}
	
/* link explanation tooltips, coded for both web-kit (safari/chrome) and mozilla (firefox)  */
	
	a.tooltip { outline: none; text-decoration: none; border-bottom: dotted 1px blue; position: relative; } 
	a.tooltip strong { line-height: 30px; } 
	a.tooltip > span { width: 300px; padding: 10px 20px; margin-top: 0; margin-left: -120px; opacity: 0; visibility: hidden; z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; border-radius: 3px; box-shadow: 2px 2px 2px #999; -webkit-transition-property: opacity, margin-top, visibility, margin-left; -webkit-transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property: opacity, margin-top, visibility, margin-left; transition-duration: 0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; }

	/*a.tooltip > span:hover,*/ 

	a.tooltip:hover > span { opacity: 1; text-decoration: none; visibility: visible; overflow: visible; margin-top: 50px; display: inline; margin-left: -90px; } 
	a.tooltip span b { width: 15px; height: 15px; margin-left: 40px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } 
	a.tooltip > span { color: #000000; background: #FBF5E6; background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF); background: linear-gradient(top, #FBF5E6, #FFFFFF); border: 1px solid #CFB57C; } 
	a.tooltip span b { background: #FBF5E6; border-top: 1px solid #CFB57C; border-right: 1px solid #CFB57C; }

textarea{
padding:5px; border:2px solid #ccc; 
-webkit-border-radius: 5px; border-radius: 5px;}

.buttons { 
	background-color: navy;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
	padding: 3px;
    text-decoration: none;
    cursor: pointer;
    border:outset black 3px;
	}
	.buttons:hover {
	border: outset black 3px;
	opacity: 0.4;
    color: yellow;
	padding: 3px;
    box-shadow: 0px 0px 1px #777;
	}	

.breadcrumb li { font-size: small; display: inline; text-align: center;}
.breadcrumb li a { font-size: small; text-decoration: none;}
.breadcrumb li + li:before{ font-size: small; font-weight: bold; content:" > ";}

.jobs {
	margin:0px;padding:0px;
	width:100%;
	box-shadow: 10px 10px 5px #888888;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.jobs table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.jobs tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.jobs table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.jobs table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.jobs tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}.jobs tr:hover td{
	
}
.jobs tr:nth-child(odd){ background-color:#ffaa56; }
.jobs tr:nth-child(even)    { background-color:#ffffff; }.jobs td{
	vertical-align:middle;
	
	
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:7px;
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.jobs tr:last-child td{
	border-width:0px 1px 0px 0px;
}.jobs tr td:last-child{
	border-width:0px 0px 1px 0px;
}.jobs tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.jobs tr:first-child td{
		background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
	background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");	background: -o-linear-gradient(top,#ff7f00,bf5f00);

	background-color:#ff7f00;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:14px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.jobs tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
	background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");	background: -o-linear-gradient(top,#ff7f00,bf5f00);

	background-color:#ff7f00;
}
.jobs tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.jobs tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}