/* Styles for Department of Corrective Services 2014 */

/*

1. Base (and reset)
2. Layout
3. Modules
4. States

DCS Blue	#315384
Dark blue	#000033
Pale blue	#e2e6ee

Dark grey #333333
Mid-grey	#cccccc
Pale grey	#eeeeee

Media queries placed with relevant elements. 
Media queries use 'all' instead of 'screen' for Chrome support.
Print styles in print.css.
Classes used for most styles to reserve IDs for scripting.
*/

/* ------------------------------------------------- 
	Base styles
	See also normalize.css and bootstrap.css
---------------------------------------------------- */

body {
	font-size: 100%; /* 16px = 100% default browser setting */
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;}

img {
	max-width: 100%;}

a:link, a:visited {
	color: #000033;}
a:hover, a:focus {
	color: #315384;}


input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;}

.form-control {
	display: inline-block;
  padding: 5px 2px 7px 2px;
  margin-right: 3px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;*/
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}


.btn {
  display: inline-block;
  padding: 6px;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus {
  background-color: #fff;
  color: #315384;
  text-decoration: none;
}
.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}

table {
  max-width: 100%;
  background-color: transparent;  
  margin-bottom: 20px;
	border: 1px solid #ddd;}
th {
	text-align: left;
	vertical-align: bottom;
  border-bottom: 2px solid #ddd;}  
th, td{
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border: 1px solid #ddd;}
tr:first-child > th,
tr:first-child > td {
  border-top: 0;}
tr:nth-child(odd) > td,
tr:nth-child(odd) > th {
  background-color: #e2e6ee;}
table ul {
	margin: 0;
	padding-left: 1em;
}


h1,
h2,
h3{
  margin-top: 20px;
  margin-bottom: 10px;
}



/* ------------------------------------------------- 
	Layout
	12-col Bootstrap grid, border-box = border.
	Includes generic classes in use across the site
---------------------------------------------------- */

.l-utilities {
	font-size: 0.875em; /*14/16px = 87.5%*/
	background: #315384;
	color: #ffffff;
	border-bottom: 5px solid #cccccc;	}
.l-utilities .row,
.l-footer .row {
	margin-top: 0.5em;}
.l-utilities .col-md-12 {
	text-align: right;
	vertical-align: middle;}

.l-title {
	background: #ffffff;
	color: #315384;
	margin: 0.5em auto;}

.l-menu {}

.l-promo {}

.l-footer {
	border-top: 4px solid #cccccc;
	background-color: #e2e6ee;
	color: #333333;
}
.l-copyright {
	background-color: #315384;
	color: #ffffff;
}

.l-left {
	float: left;
}
.l-right {
	float: right;
}

.smaller {
	font-size: 0.875em; /* 14/16px */
}
ul.fancy {
	list-style-type: none;
	padding-left: 0.5em;
}
.fancy li{
	background-image: url(../_images/layout/bullet-arrow.png);
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 16px;
	margin-bottom: 1em;
}

/* inconsistently applied targets and doc markers 
main a.i-doc,
main a[target="_blank"] {
	background: url(../_images/layout/icon-document.png) 0 0 no-repeat;
	padding-left: 16px;}
*/

@media all and (max-width: 740px) {
	.m-utilities,
	.m-search,
	.m-logo,
	.m-tagline,
	.m-hero p 
	.m-copyright {
		padding-left: 0.5em;
		max-width: 100%;
	}
	.m-hero h2 {
		padding-left: 0.25em;
	}
	
}

/* ------------------------------------------------- 
	Modules
	See also slick.css
---------------------------------------------------- */

/* Skip to content section 
---------------------------*/

.m-skip {
	display: block;
	font-size: 1em;}
.m-skip:focus {
	height: auto;
	width: 100%;
	clip: auto;
	margin: auto;
	padding: 1em;
	background: #ffffff;
	position: static;}



/* Utilities Section 
---------------------------*/

ul.m-utilities,
ul.m-search {
	list-style-type: none;
	text-align: right;
}
ul.m-search {
	padding-left: 0;
}

.m-utilities li,
.m-search li {
	line-height: 2em;
	font-size: 1.4em;
	margin-right: 0;
}
.m-utilities a,
.m-search a {
	color: #ffffff;
}
.m-utilities a {
	margin: 0 0.5em;
}

.m-utilities a:hover, .m-utilities a:focus,
.m-search a:hover, .m-search a:focus {
	color: #FFFF40;
}
.m-search form {

	margin-bottom: 0.5em;
}
.m-search button {
	color: #333333;
}

@media all and (min-width: 900px) {
	ul.m-utilities,
	ul.m-search{
		display: inline-block;
	}
	.m-utilities li,
	.m-search li {
		line-height: 1.2;
		font-size: 1em;
	}
	.m-utilities li {
		display: inline;
		border-right: 1px solid #eeeeee;
	}
	.m-utilities li:last-child {
		border-right: 0;
	}
}



/* Title section 
---------------------------*/

.m-logo, .m-tagline {}
.m-logo a {
	color: #315384;
	text-decoration: none;}
.m-logo h1 {
	font-size: 1em;
	font-weight: normal;}
.m-logo h1 span {
	font-size: 0.9em;}

.m-tagline {
	font-size: 1.4em;
	font-weight: bold;}

@media all and (min-width: 900px) {
	.m-tagline {
		height: 2.8em; /* double font-size */}
	.m-tagline p {
		text-align: right;
		line-height: 2.8em; /* container height */
	} /*NB: this method will only vertically center a single line */
}


/* Menu section 
---------------------------*/


ul.m-menu {
	list-style-type: none;
	margin: 0 0 0.5em 0;
	padding: 0;
	padding-left: 1em;
	background: rgb(49,83,132);
	background: -moz-linear-gradient(top, rgba(49,83,132,1) 0%, rgba(56,83,132,1) 50%, rgba(38,66,102,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(49,83,132,1)), color-stop(50%,rgba(56,83,132,1)), color-stop(100%,rgba(38,66,102,1)));
	background: -webkit-linear-gradient(top, rgba(49,83,132,1) 0%,rgba(56,83,132,1) 50%,rgba(38,66,102,1) 100%);
	background: -o-linear-gradient(top, rgba(49,83,132,1) 0%,rgba(56,83,132,1) 50%,rgba(38,66,102,1) 100%);
	background: -ms-linear-gradient(top, rgba(49,83,132,1) 0%,rgba(56,83,132,1) 50%,rgba(38,66,102,1) 100%);
	background: linear-gradient(to bottom, rgba(49,83,132,1) 0%,rgba(56,83,132,1) 50%,rgba(38,66,102,1) 100%);
	color: #ffffff;
	border-radius: 3px;}
.m-menu li {
	vertical-align: top;}
.m-menu a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	font-weight: bold;
	height: 2em;
	margin-right: 1em;
	/*font-weight: normal;*/}	

.m-menu a:hover, .m-menu a:focus {
	background: #ffffff;
	color: #315384;}
.m-menu a span.i-menu {
	display: none;}

@media all and (min-width: 900px) {
	ul.m-menu  {
		display: block;
		font-size: 0.875em;}
	.m-menu > li {
		position: relative; /* allows for submenu positioning */
		float: left;
		display: inline;
		height: 3.5em;
		max-width: 11em;}
	.m-menu a {
		display: block;
		position: relative; /* allows for caret positioning */
		height: 3.5em;
		margin: 0;
		padding: 0.5em 2em 0.5em 1em;
		border-left: 1px solid #ffffff;}
	.m-menu > li:first-child a{
		border: 0;}
	.m-menu li:last-child {
		border-right: 1px solid #fff;
	}
	.m-menu a:hover, .m-menu a:focus {
		border-top: 1px solid #315384;
		border-bottom: 1px solid #315384;}
	
	.m-menu a span.i-menu {
		display: inline;
		position: absolute;
		top: 0.8em;
		right: 0.5em;
		background: url(../_images/layout/icon-menu.png) 0 0 no-repeat;
		width: 10px;
		text-indent: 9000em;
		overflow: hidden;}
	a:hover span.i-menu, a:focus span.i-menu {
		background-position: -10px 0;}
	
	.m-menu a.i-home {
		text-indent: 9000em;
		display: inline-block;
		padding: 0;
		margin-top: 0.5em;
		margin-right: 1em;
		width: 18px;
		overflow: hidden;
		background: url(../_images/layout/icon-home.png) 0 0 no-repeat;
	}
	.m-menu a.i-home:hover,
	.m-menu a.i-home:focus {
		background-position: -19px 0;
	}

}

ul.m-menu-sub {
	background: #ffffff;
	border: 1px solid #315384;
	border-width: 0 1px;
	padding: 0;
	list-style-type: none;
	position: absolute;
	width: 15em;
	z-index: 50;}
.m-menu-sub li {}
.m-menu-sub a {
	color: #315384;
	/*color: #333333;*/
	border-bottom: 1px solid #315384;}
.m-menu-sub a:hover, .m-menu-sub a:focus {
	background-color: #e2e6ee;
	border-top: 0;}

/* Content section menu 
---------------------------*/

.m-menu-section {
	margin-bottom: 1em;}
.m-menu-section h3 {
	background: #e2e6ee;
	color: #315384;
	font-weight: normal;
	margin: 10px 0 0 0;
	padding: 7px 3px 3px 7px;
	border-radius: 5px 5px 0 0;}
.m-menu-section ul {
	background: #e2e6ee;
	list-style-type: none;
	margin: 0;
	padding: 3px 3px 0 7px;
	border-radius: 0 0 5px 5px;}
.m-menu-section > ul {
	padding-bottom: 2em;}	
.m-menu-section li {
	margin-bottom: 0.5em;
	padding-top: 2px;
	border-top: 1px solid #ccc;}
ul.m-menu-section-sub,
ul.m-menu-section-subsub  {
	padding-left: 1em;
	margin-top: 0.5em;}
.m-menu-section-sub li {
	background-image: url(../_images/layout/bullet-submenu.png);
	background-repeat: no-repeat;
	background-position: left 0.25em;
	padding-left: 12px;
	border-top: 0;}
.m-menu-section-subsub li {
	background-image: url(../_images/layout/bullet-subsubmenu.png);
	background-repeat: no-repeat;
	background-position: left 0.3em;
	padding-left: 10px;
	border-top: 0;}

.m-menu-section a {
	color: #333333;
	text-decoration: none;}
.m-menu-section a:hover, 
.m-menu-section a:focus {
	color: #000033;
	text-decoration: underline;}
.m-menu-section a.current {
	font-weight: bold;}
	
@media all and (min-width: 900px) {
	.m-menu-section h3,
	.m-menu-section ul  {
		display: block;}
}

/* Menu toggles 
---------------------------*/
.m-nav-toggle {
	display: block;
	margin: 0.5em;
	text-align: right;}

@media all and (min-width: 900px) {
	.m-nav-toggle {
		display: none;}
}

.btn-toggler,
.btn-toggler-alt,
#sub-toggler {
	border: 1px solid white;
  border-right-color: #ccc;
  border-bottom-color: #ccc;
  background: #fff;
  color: #315384;
  border-radius: 3px;
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;}
.btn-toggler:hover, .btn-toggler:focus {
	background: #ffffff;
	color: #333333;
  border-color: #ccc #ffffff #ffffff #ccc;}

.btn-toggler-alt,
#sub-toggler {
	border: 1px solid #666666;
	border-right-color: #333;
	border-bottom-color: #333;
	color: #333;}

.btn-toggler-alt:hover, .btn-toggler-alt:focus,
#sub-toggler:hover, #sub-toggler:focus {
	background: #ffffff;
	border-color: #333 #666 #666 #333;}

.m-menu-section .m-nav-toggle {
	margin-right: -0.5em;
}

/* Carousel 
---------------------------*/
.m-hero {
	background: #eeeeee;
	text-align: center;}
.m-hero-item {
	text-align: left;}
@media all and (min-width: 900px) {
	.m-hero-item {
		position: relative;
		background: #e2e6ee;
	}
	.m-hero-item > img {
		float: right;}
	.m-hero-item div {
		position: absolute;
		top: 1em;
		left: 1em;
		max-width: 30%;
		background: #ffffff;
		background-color: rgba(255, 255, 255, .8);
		padding: .5em;
		/*font-size: 0.875em; */
		font-size: 1em;
	}
	.m-hero-item div.no-pic {
		max-width: 80%;
	}
	.m-hero-item h2 {
		margin-top: 0;
		font-size: 2.2em;
	}
}
/* Promo tiles 
---------------------------*/

.m-tile h2 {
	background: #e2e6ee;
	color: #315384;
	border-radius: 5px 5px 0 0;
	padding: 0.5em;
	margin-top: 0.5em;
	font-size: 1.1em;
}
.m-tile p, .m-tile img, .m-tile h3 {
	margin: 0.5em;
}
.m-tile img {
	border-radius: 3px;
}
.m-tile .dateline {
	font-size: 0.9em;
	color: #666666;
	margin-top: 5;
}

.m-news {
	margin-bottom: 1em;
}
.m-news h3 {
	font-size: 1em;
	margin-bottom: 0;
}

.m-tile-a img {
margin: 0;}
.m-tile-a a {
	font-weight: bold;
}

@media all and (min-width: 800px) {
	.m-tile-a {
		position: relative; 
	}
	.m-tile-a div.overlay {
		background: #ffffff;
		background-color: rgba(255, 255, 255, 0.8);
		position: absolute;
		top: 6em;
		left: 1.5em;
		width: 40%;
		padding: 0;
		font-size: 0.8125em;
	}
	
	.m-tile-b select {
		width: 60%;
	}
}


	
	
/* Content pages 
---------------------------*/

.breadcrumb {
	color: #333333;
	font-size: 0.875em;
	margin-top: 10px;}

.col-md-9 h2, 
.col-md-9 h3, 
.col-md-9 h4,
.col-md-9 h5,
.col-md-9 h6 {
	color: #315384;}

.m-callout,
.relateds {
	background-color: #e2e6ee;
	border: 1px solid #cccccc;
	border-radius: 5px;
	padding: 0.5em;
	margin-bottom: 1em;}
.m-callout h3,
.relateds h3 {
	margin-top: 0.5em;
	color: #315384;}
.m-callout ul,
.relateds ul {
  padding-left: 1em;
}

@media all and (min-width: 900px) {
	.m-callout,
	.relateds {
		float: right;
		margin-left: 1em;
		width: 33%;}
}

.m-highlight,
.downloads-bottom {
	border: 1px solid #e2e6ee;
	border-radius: 5px;
	padding: 0.5em;}
.m-highlight h3, 
.m-highlight h4,
.downloads-bottom h3,
.downloads-bottom h4 {
	margin-top: 0.25em;
	font-weight: normal;
}	
.m-highlight li,
.downloads-bottom li {
	line-height: 1.4;}

.m-updated,
#page-updated {
	font-size: 0.75em;
	color: #555;
	margin-top: 2em;
}
	
	
/* Footer
---------------------------*/


.m-meta ul, ul.m-socmed {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.m-meta li, .m-socmed li {
	display: inline;
	line-height: 3em;
	padding: 0 1em;
	text-align: left;
} 
.m-meta li {
	border-right: 1px solid #666666;
}
.m-meta li:last-child {
	border: 0;
}
.m-meta li {
	padding: 0 0.5em;
}

@media all and (min-width: 900px) {
	div.m-frow {
		display: block;
	}
	.m-socmed {
		text-align: right;
	}
}

.m-socmed a {
	display: inline-block;
	text-decoration: none;
	text-indent: 9000em;
	overflow: hidden;
	background: url(../_images/layout/icon-socmed.png);
	width: 32px;
	height: 32px;
}
.m-socmed a#i-fb {background-position: 0 0; visibility:hidden}
.m-socmed a#i-fb:hover, .m-socmed a#i-fb:focus {background-position: 32px -1px;}
.m-socmed a#i-tw {background-position: 0 -32px;visibility:hidden}
.m-socmed a#i-tw:hover, .m-socmed a#i-tw:focus  {background-position: 32px -33px;}
.m-socmed a#i-yt {background-position: 0 -64px;}
.m-socmed a#i-yt:hover, .m-socmed a#i-yt:focus  {background-position: 32px -65px;}
.m-socmed a#i-rss {background-position: 0 -96px;}
.m-socmed a#i-rss:hover, .m-socmed a#i-rss:focus  {background-position: 32px -97px;}

/* Footer menu */

.m-flist ul {
	margin-left: 0;
	padding-left: 1em;}
.m-flist h4 {
	margin-bottom: 0;}
.m-flist a {
	text-decoration: none;
	line-height: 2em;}
.m-flist h4 a {
	color: #315384;}
.m-flist li a {
	color: #333333;}
.m-flist a:hover, .m-flist a:focus {
	text-decoration: underline;
}


@media all and (min-width: 800px) {
	.m-frow {
		display: block;}
	.m-flist a {
		line-height: 1.5em;}
	.m-frow:last-child {
		margin-bottom: 2em;}
}


/* Copyright */
.m-copyright {
	margin-top: 1em;}




/*	States
---------------------------------------------------- */

.s-hidden-all {
	display: none;
}

/* for screenreaders only */
.s-hidden-visual {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
}

.current {}
.open {}