/*IOP 2020 Style tweakes */
.s4-title {min-height: 10px;}
.s4-title-inner {min-height: 10px;}
.ms-cui-topBar2 {border -bottom: 1px solid #999969}
body #s4-titlerow {display: none !important;}
.s4-breadcrumb-anchor  {display: none !important;}
#maincontentarea {padding: 0px 20px 20px 20px !important;}
.ms-quickLaunch {margin-top: 20px !important; }
.welcome-content {FONT-FAMILY: "Trebuchet MS", Helvetica, sans-serif; font-size: 12pt; padding: 15px !important;}
.ms-standardheader, .ms-standardheader a, .ms-standardheader:hover .ms-WPHeader, .ms-WPHeader a, .ms-WPHeader:hover, .ms-WPTitle { FONT-FAMILY: Serifa, "Trebuchet MS", Helvetica, sans-serif !important; color:#101010 !important;  FONT-SIZE: 20px !important; margin: 0 0 0 0px !important; }
.ms-WPBorder, .ms-WPBorderBorderOnly { border-color: #a8a99e !important; }
.button-link { text-decoration: none; cursor: pointer; FONT-SIZE: 15px; BACKGROUND: #009969 !important; COLOR: #fff !important; PADDING-BOTTOM: 10px; PADDING-TOP: 10px;  PADDING-RIGHT: 40px; border-radius: 10px; text-transform: uppercase; padding-left: 40px; padding-right: 40px; margin-top: 25px; margin-bottom: 55px; }
.button-link:hover { text-decoration: underline;  cursor: pointer; BACKGROUND: #006633 !important; }
.button-link:active {BORDER-TOP: #203e5f 1px solid; cursor: pointer; BACKGROUND: #003333 !important;}
.ms-WPBody {FONT-FAMILY: "Trebuchet MS", Helvetica, sans-serif !important; font-size: 12pt !important; padding: 15px !important;}
.ms-vb-title, .ms-vb-title a , .ms-vb2 {font-weight: bolder !important; font-size: 120% !important;}
#maincontentarea {padding: 0px 20px 20px 20px !important;}
.ms-quickLaunch {margin-top: 20px !important; }
.menu-item-text {padding: 2px 0 2px 0; margin-top: 2px; text-transform: uppercase !important;}
.s4-ql a.selected { background: none !important; background-color: #009969 !important; border: none !important; border-width: 0px !important; padding-left: 9px !important; color: #FFF!important;}
#s4-leftpanel-content {border-bottom-width: 0px !important; background:transparent !important; }


/* end of IOP 2020 Style tweaks*/

/* Prevents border around images in links in IE */

.article-content,
.welcome-content
{
	margin: 5px 0 0 10px;
	color: #666666;
} 


a img {
	border: 0;
}

/* Make H1 and H2 bold and centered */
h1, h1.ms-rteElement-H1, .ms-rteElement-H1, h2, h2.ms-rteElement-H2, .ms-rteElement-H2 {
	text-align: center;
	font-weight: bold;
}

/* Hard-coded colors.  Replaced by ms-rteThemeForeColor-2-0 (black) or jQuery */

body {
	/* color: black; */ /* trumps #676767 */
	background-color: white; /* we are already using an image with a white background */
}

/* Web Part Titles black */
.ms-WPTitle, .ms-WPTitle a {
    /* color: black !important; */ /* added !important because the "Director's Office" link was blue */
}

/* text on the front page */
.description {
    /* color: black; */ /* trumps #4c4c4c */
}

/* Added Verdana because iPad does not recognize Tahoma, so it was falling back to Times New Roman. Added on 5-19-2014 */
.link-item, .link-item a, .link-item a:link, .link-item-large,
.link-item-large a, .link-item-large a:link,
.description, .groupheader, .level-description,
.level-item, .level-item a, .level-item a:link {
	font-family: Tahoma, Verdana;
}

/* Make the border of the left nav a little more noticable */
body #s4-leftpanel-content  {
	/* border-color: #D8D8D8; */ /* trumps #F2F2F2 */
}

/* top of box with Recycle bin */
.s4-specialNavLinkList {
	/* border-top-color: #D8D8D8; */  /* trumps #F2F2F2 */
}

/* Paragraph color in page content */
.ms-rteElement-P {
    /* color: black; */ /* trumps #00603C in the theme */
}

/* next values are for the ribbon.  I hard coded those so they don't change */

/* The ribbon will always be gray no matter the theme */
body #s4-ribbonrow {
	background-color: #F2F2F2;
}
.ms-menutoolbar td td.ms-viewselector,.ms-menutoolbar td td.ms-viewselectorhover,.ms-toolbar td td.ms-viewselector,.ms-toolbar td td.ms-viewselectorhover,td.ms-viewselector 
{border: 10px solid #FFF !important ;}

/* tabs in the ribbon, necessary because of the light gray ribbon  */
.ms-cui-tt-a {
	color: black !important;
}

/* ribbon text, necessary because of the light gray ribbon  */
.ms-cui-tts .ms-cui-cg-t, .ms-cui-tt-span {
	color: black;
}

/* Site actions menu text, necessary because of the light gray ribbon */
.ms-siteactionsmenu > span > a {
    color: black;
}

/* this trumps .ms-siteactionsmenu > span > a:hover, but a:hover doesn't cover the entire site actions menu */
.ms-siteactionsmenu:hover > span > a {
    color: white;
}

/* Logon menu in ribbon, this is necessary because of the light gray ribbon */
.ms-welcomeMenu a:link {
	color: black;
}

/* makes the welcome box invisible until you sign in */
.s4-signInLink {
	-moz-opacity: 0;
	zoom: 1; /* Needed to make filter work in IE */
	filter: alpha(opacity=0); /* IE */
	opacity: 0; /* Mozilla */
	display: block !important; /* this is required for opacity to work in IE8 */
}

/* used to postion the ohiodotgov */
#ohiodotgovContainer {
	width: 1100px; /* WAS same width as the body now right aligned */
	margin: auto; /* centers the div */
	position: relative; /* must be relative to allow child #ohiodotgov to be positioned absolute */
	right: 0px;
}

/* Ohio.gov text ; Added Verdana, san-serif because Apple products do not recognize Tahoma, so it was falling back to Times New Roman. Added on 5-21-2014 */
#ohiodotgov a:link, #ohiodotgov a:visited { text-decoration: none; color: #000; font-weight: normal; }
#ohiodotgov a:active, #ohiodotgov a:hover { text-decoration: underline; color: #9b001a; font-weight: normal;  }
#ohiodotgov {font-family: Serifa, Didactic Gothic;  font-size: 13.6px;}
div#ohiodotgov {
	position: absolute;
	right: 0px;/* lines it up above the search box */
	padding-right: 20px !important; /* gives an extra 50px to the right so the login box cannot be accidentally clicked */
}
#ohiodotgovimg {
padding: 17px 0px 0px 4px;
width: 67px; 
border: 0;
vertical-align: text-bottom;
}

/* Special div added to show the background image REMOVED
#backgroundImage {
	background:  no-repeat scroll center top;
	height: 100%;
	width: 100%;
	 */
}


#s4-Header {
 background-color: #009969;
 height: 100px;
 margin: auto;
 
  }

/* Sets the fixed width and centers */
body #s4-bodyContainer {
	max-width: 1100px;
	margin: auto;
	padding: 20px;
	
	
}
body #s4-ODOTGreenHeaderContainer {	
	background:#009969;
    
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.23);
 		}





/* Make titles in the quick launch bold and slightly smaller (because they are bold) */
.s4-ql ul.root > li > .menu-item, .s4-qlheader, .s4-qlheader:visited {
	font-size: 1em; /* trumps 1.2em */
	font-weight: bold;
}

/* allow the background picture to show through */
/* removed .ms-alternating, .ms-alternatingstrong, body #s4-leftpanel-content */
.s4-title, .s4-ca, .ms-WPHeader, .ms-gb, .ms-alternating {
	background: transparent none;
}

/* Every other line in a list view will be clear otherwise */
.ms-viewlsts {
	background: white;
}

/* Alternating lines in list views */
/* Applying this by jQuery instead
.ms-alternatingstrong {
	background-color: #EEECE1;
}
*/

#MainLogoContainer {
	max-width: 1200px;
	margin: auto;
	overflow:hidden;
}

/* The transparent image that say "Ohio Department of Transportation" */
#mainlogo {
	padding: 0px; 
	float: left;
	}
#mainsearch {
	padding: 50px 0 0 0px; 
	margin-right: 20px;
	float: right;
	clear: right;
	}

/* contains the Facebook, Twitter, and YouTube icons */
#social {
	float: right;
	clear: right;
	margin: 10px 0px 5px 0px;
	padding-right: 19px;
	white-space: nowrap; /* only needed for IE7 */
}

/* Div I added that contains the search box */
#search {
	float: right;
	clear: right;
	margin-top: 15px;
	padding-right: 19px;
}

/* Search scopes drop down box */
.s4-search select.ms-sbscopes {
    border: 1px solid #cccccc !important; /* make the border a little darker gray */
    height: 23px; /* and a little taller */
    font-size: 10pt; /* comprimise height between IE and FireFox, trumps 9pt */
}

/* the search box itself */
.s4-search input.ms-sbplain {
    border: 1px solid #cccccc !important; /* make the border a little darker gray */
    height: 23px; /* and a little taller */
    background: white; /* has a wierd image otherwise */
    font-size: 1.3em; /* comprimise height between IE and FireFox, trumps 1.2em */
}

/* the go search button */
.s4-search .srch-gosearchimg {
	height: 25px; /* make it a little taller */
}

/* add a space between the search box and the go button */
.ms-sbgo {
	padding-left: 10px;
}

/* This is the original top header menu, I left it here just in case */
body #s4-topheader2 {
    /* border-radius: 6px; */ /* This doesn't work in IE */
    background: transparent none; /* Handled by spans so that the menu has rounded corners */
    border: 0;  /* Handled by spans so that the menu has rounded corners */
   	height: 36px;
	width: 100%;
}

/* I change the top nave div id to s4-topheader3 so the class ms-rteThemeBackColor-4-0 works */
/* body #s4-topheader2 in corev4.css had precedence otherwise */
body #s4-topheader3 {
    border: 0;  /* Handled by spans so that the menu has rounded corners */
   	height: 36px;
	width: 100%;
	vertical-align: middle; /* this is a value for s4-topheader2 from corev4.css */
}

/* Spans inside top header to give the rounded corners.  Total width os 990 px */
/* The background color is the theme color.  The background image is white over top to make the corners look rounded */
span#topheader2-left {
	width:6px;
	height: 36px;
	float: left;
	/* Using second one so it can be theme independent */
	/* background-image:url('Images/RoundedNavL.png'); */
	background-image:url('Images/RoundedNavL-Trans.png'); /* solid white background in the corners to make it look rounded */
}

#topheader2-middle {
	width: 978px;
	height: 36px;
	float: left;
}

span#topheader2-right {
	width:6px;
	height: 36px;
	float: left;
	/* Using second one so it can be theme independent */
	/* background-image:url('Images/RoundedNavR.png'); */
	background-image:url('Images/RoundedNavR-Trans.png');
}

/* originally set by body .menu-item-text, but that affects way too much */
/* This gets trumped later by jQuery, but I wanted to make sure it shows up */
.s4-tn .menu-item-text {
	color: white;
}

.menu-horizontal {
	margin: auto; /* centers the menu */
	*margin-left: 200px; /* IE7 doesn't center, need to do this instead */
	border-left: 1px dotted white; /* adds border to left of first item, leaving white there in case jQuery doesn't work */
}

.s4-toplinks .s4-tn a.selected {
	background: transparent none;
	border-color: transparent;
	/* Items below are needed for IE7. Other browsers get it from ".s4-tn li.static > .menu-item" below */
	border-right: 1px dotted white;
	padding: 10px 15px 9px;
}

/* Droid Sans must be downloaded with the following link in the master page:
     <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css" />
   It does not always work, so I added Verdana which is similar */
.s4-tn ul.static {
	font: 13px 'Droid Sans',Verdana,serif;
    letter-spacing: 1px;
}

/* Gives a 3-d effect when you hover over the static menus */
.s4-tn li.static > a:hover {
	text-decoration: none;
    /* these below highlight with an image */
    background-color: transparent; /* use same color as menu itself */
   	background-image: url("/_layouts/images/selbg.png"); /* same background image as regular SharePoint menus */
	background-repeat: repeat-x;

}

/* Static menu items */
.s4-tn li.static > .menu-item {
	border-top: 0; /* There was a line at the top when you hovered */
	border-bottom: 0; /* Same with the bottom */
    border-right: 1px dotted white; /* dotted white line between menu items. Left border on first item handled above, leaving white there in case jQuery doesn't work */
    padding: 11px 15px 10px; /* After removing the border at top and bottom, I had to increase top and bottom padding by 1px */
    text-transform: uppercase; /* Static menu must be all upper case */
    vertical-align: middle;
}

/* gets rid of the arrow for items with children */
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background {
	background: transparent none;
	padding: 0px;
}

/* distance between lines on the dynamic menus */
.s4-tn li.dynamic > .menu-item {
	line-height: 2em; /* Used same a governor's site */
}

/* text on the front page */
.description {
    line-height: 1.3em;
    font-size: small; /* try */
}

/* link title */
.link-item, .link-item a, .link-item a:link {
	font-size: small; /* Trumps 8pt.  10pt also works */
}

.ms-WPTitle {
    font-size: 12pt; /* trumps 10pt */
    font-weight: bold;
}

/* pushed the menu item to the right 5px otherwise */
.s4-toplinks .s4-tn a.selected {
    margin: 0; /* trumps margin: 0 5px */
}

/* indents sub menus on the quick launch */
 .s4-ql ul.root ul > li > a {
    padding-left: 20px !important;
}

/* footer added by us */
#footer {
	font-family: "Source Sans Pro", Tahoma, Verdana, Segoe, sans-serif;
	font-size: 13px;
	text-align: center;
	float: left;
	clear: both;
	width: 100%; 
	background: #1F2A44; /* hard-coded NAVY color */
	padding: 20px 0; 
	border: 0;
	color: #FFF;
	width: 100%;
	margin: 20px 0 0 0;
	line-height: 1.7;
}

/* You want links to be underlined in the footer */
#footer a:hover {
	text-decoration: underline; /* trumps a:link {text-decoration: none} */
}
#footer a:link { color: #FFF; }
#footer a:visited { color: #FFF; }

/* The entire breadcrumb div, also gives it borders and stuff */
#breadcrumbDiv {
	margin: 0;
	padding:4px;
	font-family: Tahoma, arial, "lucida console", sans-serif; /* Add font family:arial here if you remove it from body */
	border: 0;
	border-bottom: solid 1px;
}

/* Sets the style for the view selector in the breadcrumb, trumps padding-top: 2px */
.ms-pagebreadcrumb .ms-ltviewselectormenuheader .ms-viewselector, .ms-pagebreadcrumb .ms-ltviewselectormenuheader .ms-viewselectorhover {
    padding-top: inherit;
    border: 0;
}

/* Sets the style for the view selector in the breadcrumb, "> a" means only the breadcrumb text is changed */
.ms-pagebreadcrumb .ms-ltviewselectormenuheader .ms-viewselector > a, .ms-pagebreadcrumb .ms-ltviewselectormenuheader .ms-viewselectorhover > a {
    font-family:  Tahoma, arial, "lucida console", sans-serif;
    font-size: 8pt; /* cannot use inherit, does not work in IE7 */
}

/* Hide the original breadcrumb td, This may be for 2007 only */
#contentDiv .ms-pagebreadcrumb {
	display: none;
}

/* Lowers the separator arrow slightly to look better, only needed on arrows from PlaceHolderPageTitleInTitleArea */
#breadcrumbDiv span.ms-ltviewselectormenuseparator {
	height: 10px !important;
}

/* #breadcrumbviewselector is in system master page only */

/* List View Selector in breadcrumb area, hide everything in it */
#breadcrumbViewSelector {
	position: absolute;
	visibility: hidden;
}

/* Display none all but the view selector which is display inline below */
#breadcrumbViewSelector > * {
	display: none;
}
			
/* Make the view selector visible, position it relative to its parent */
#breadcrumbViewSelector span.ms-ltviewselectormenuheader {
	display: inline;
	visibility: visible;
	position: absolute;
	left: 0;
	white-space: nowrap; /* required for IE7 */
}


/* prevents the welcome links area from expanding all the way to the bottom of the quick launch in edit mode */
.ms-rteclear {
	clear: right !important; /* trumps clear: both element style */
}

/* removed this from ItemStyle.xsl and put it here instead */
.link-item > a, .link-item-large > a {
	font-weight: bold;
}