@charset "UTF-8";
/*********** colors *************

green: #006633
aquamarine: #339999
yellow: #ffcc33
light blue: #0099cc
royal blue: #0033ff
dark blue: #000066

****************************/

/* Ensure main site header and nav have white background on toolkit pages */
body.landing > header,
body.home > header,
body.mod1 > header,
body.mod2 > header,
body.mod3 > header,
body.mod4 > header,
body.pages > header {
  background: #fff !important;
}

/* Nav overflows header, so it needs its own white background and high z-index to stay above toolkit container */
body.landing > header nav,
body.home > header nav,
body.mod1 > header nav,
body.mod2 > header nav,
body.mod3 > header nav,
body.mod4 > header nav,
body.pages > header nav {
  background: #fff !important;
  position: relative;
  z-index: 100;
}

/* Ensure logo stays above the nav background */
body.landing > header .logo,
body.home > header .logo,
body.mod1 > header .logo,
body.mod2 > header .logo,
body.mod3 > header .logo,
body.mod4 > header .logo,
body.pages > header .logo {
  position: relative;
  z-index: 101;
}

/* Footer styling for toolkit pages - match main site footer */
body.landing > footer,
body.home > footer,
body.mod1 > footer,
body.mod2 > footer,
body.mod3 > footer,
body.mod4 > footer,
body.pages > footer {
  background: #f2f2f2 !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  padding: 1rem 2% !important;
}

/* Footer logo */
body.landing > footer div:nth-child(1),
body.home > footer div:nth-child(1),
body.mod1 > footer div:nth-child(1),
body.mod2 > footer div:nth-child(1),
body.mod3 > footer div:nth-child(1),
body.mod4 > footer div:nth-child(1),
body.pages > footer div:nth-child(1) {
  display: block !important;
  background: url(/images/logo.png) no-repeat 0px 0px !important;
  width: 150px !important;
  height: 150px !important;
  background-size: 150px !important;
}

/* Footer nav links */
body.landing > footer div:nth-child(2) ul li,
body.home > footer div:nth-child(2) ul li,
body.mod1 > footer div:nth-child(2) ul li,
body.mod2 > footer div:nth-child(2) ul li,
body.mod3 > footer div:nth-child(2) ul li,
body.mod4 > footer div:nth-child(2) ul li,
body.pages > footer div:nth-child(2) ul li {
  display: inline !important;
}

body.landing > footer div:nth-child(2) ul li a,
body.home > footer div:nth-child(2) ul li a,
body.mod1 > footer div:nth-child(2) ul li a,
body.mod2 > footer div:nth-child(2) ul li a,
body.mod3 > footer div:nth-child(2) ul li a,
body.mod4 > footer div:nth-child(2) ul li a,
body.pages > footer div:nth-child(2) ul li a {
  font-weight: bold !important;
  font-size: 1.5rem !important;
  margin: 1rem !important;
}

/* Footer social icons */
body.landing > footer .social a,
body.home > footer .social a,
body.mod1 > footer .social a,
body.mod2 > footer .social a,
body.mod3 > footer .social a,
body.mod4 > footer .social a,
body.pages > footer .social a {
  display: inline-flex !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  padding: 0.25rem !important;
  margin: 0.2rem !important;
  width: 30px !important;
  height: 30px !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(167, 1, 147, 0.8) !important;
  color: #fff !important;
}

/* Copyright section - magenta background */
body.landing > .copyright,
body.home > .copyright,
body.mod1 > .copyright,
body.mod2 > .copyright,
body.mod3 > .copyright,
body.mod4 > .copyright,
body.pages > .copyright {
  display: block !important;
  width: auto !important;
  background: rgba(167, 1, 147, 1) !important;
  color: #fff !important;
  text-align: center !important;
  padding: 1rem !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Hide jQuery UI tooltips that appear outside the content area */
.ui-tooltip {
  z-index: 9999 !important;
  max-width: 300px !important;
}

/* Ensure tooltips don't appear below the footer */
body.landing .ui-tooltip,
body.home .ui-tooltip,
body.mod1 .ui-tooltip,
body.mod2 .ui-tooltip,
body.mod3 .ui-tooltip,
body.mod4 .ui-tooltip,
body.pages .ui-tooltip {
  position: absolute !important;
}

/* Add white background to body to prevent background images from showing in header margin */
body.landing,
body.home,
body.mod1,
body.mod2,
body.mod3,
body.mod4,
body.pages {
  background: #fff !important;
}

/* Remove main padding on toolkit pages and add white background to prevent green showing */
body.landing main {
  padding-top: 0 !important;
  background: #fff !important;
}

/* Toolkit-specific body styles - scoped to not interfere with main site */
#wrap {font-family: Helvetica, Arial, sans-serif; color: #333; padding-top: 60px; padding-bottom: 40px;}
#wrap h1, #wrap h2, #wrap h3, #wrap h4, #wrap h5, #wrap h6 {text-transform:uppercase;}
#wrap p {line-height: 1.3em;}
.home #wrap {width:100%; margin: 0; background:#fff; overflow:hidden;}
.mod1 #wrap {width:100%; margin: 0; background:#fff url(../_img/route.jpg) no-repeat bottom center; overflow:hidden;}
.mod2 #wrap {width:100%; margin: 0; background:#fff url(../_img/blur.jpg) no-repeat top center; overflow:hidden;}
.mod3 #wrap {width:100%; margin: 0; background:#fff url(../_img/intersection.jpg) no-repeat center -500px; overflow:hidden;}
.mod4 #wrap {width:100%; margin: 0; background:#fff url(../_img/checkered.jpg) no-repeat center center; overflow:hidden;}
.pages #wrap {width:100%; margin: 0; overflow:hidden;}

/* Scope container and row styles to toolkit content only */
/* Restore the semi-transparent frame overlay but add white strip at top to prevent green showing in header area */
#wrap .container {
  background: url(../_img/transBgrd.png);
  margin-top: -20px;
  padding-top: 20px;
  position: relative;
}

/* Add white overlay at the very top of container to cover the gap where green was showing */
#wrap .container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: #fff;
  z-index: 1;
}
#wrap .toolkit-logo {width:386px; height: 50px; float: left; margin: 30px 0px 30px 10px; }
#wrap .toolkit-logo a {width:386px; height: 50px; float: left; background:url(../_img/syber-logo.png) no-repeat 0px 0px; background-size: contain;}
#wrap .toolkit-logo span {display:none;}

/* Row should be transparent to show the green frame overlay from container */
/* #wrap .row {background: #fff;} */
#wrap .row h1 span {text-align: right; margin: 0px; color: #a70193; font-size:0.515em;}
#wrap .row h1 {text-align: right; margin: 20px 10px 0px 0px; color: #a70193; }

/* Toolkit header styling */
.toolkit-header h1 {text-align: right; margin: 20px 10px 0px 0px; color: #a70193; text-transform: uppercase; text-shadow: none !important; background: none !important;}
.toolkit-header h1 span {text-align: right; margin: 0px; color: #a70193; font-size:0.515em; text-shadow: none !important; background: none !important;}

/* home */

.home ul.modules {display: block; width: 460px;margin:45px 0px 0px 65px; padding: 0px; list-style:none;}
.home ul.modules li {display:inline; width: 230px; height: 230px; margin:0px; padding: 0px;}
.home ul.modules li a {display:block;width: 230px; height: 230px;  }

.home li.overview {background:url(../_img/_home/overviewBgrd.png) no-repeat 0px 0px;float: left; }
.home li.overview span.mod-title {color: #006633; text-transform:uppercase; position: relative;top: -23px;font-size: 24px;line-height: 30px; float:left;}
.home li.overview span.mod-number {color: #fff;position: relative;top: 165px;right: 93px;font-size: 60px;float: right;}

.home li.flexibilities {background:url(../_img/_home/flexBgrd.png) no-repeat 0px 0px;float: left; }
.home li.flexibilities span.mod-title {color: #0033ff; text-transform:uppercase; position: relative;top: 94px;font-size: 24px;line-height: 21px;float: right;right: -133px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.home li.flexibilities span.mod-number {color: #fff;position: relative;top: 123px;left: 92px;font-size: 60px;float: left;}

.home li.planning {background:url(../_img/_home/planningBgrd.png) no-repeat 0px 0px;float: right; }
.home li.planning span.mod-title {color: #0099cc; text-transform:uppercase; position: relative;top: 225px;font-size: 24px;line-height: 30px; float:right;}
.home li.planning span.mod-number {color: #fff;position: relative;top: -20px;left: 92px;font-size: 60px;float: left;}

.home li.step-by-step {background:url(../_img/_home/stepBgrd.png) no-repeat 0px 0px;float: right; }
.home li.step-by-step span.mod-title {color: #339999; text-transform:uppercase; position: relative;top: 81px; left:-95px;font-size: 24px;line-height: 30px; float:left;;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.home li.step-by-step span.mod-number {color: #fff;position: relative;top: -17px;right: 97px;font-size: 60px;float: right;}

.home .intro {background: #000066; color: #fff; display: block;margin: 45px 0px 0px 30px!important; padding:65px!important; font-size:1.1em;}
.home .intro h2 {font-size: 24px;text-transform: none;font-weight: bold;margin-bottom: 50px;}
.home .intro p {line-height: 1.3; margin-top: 20px;}

/* mod1 */

.mod1 .text-left {background: url(../_img/map250.png) no-repeat 450px 0px;}
.mod1 h2.mod-title {color: #006633; text-transform:uppercase; font-size:40px; text-align: left;position: relative; left: 120px;top: -20px;letter-spacing: -1px;float:left;}
.mod1 h3 {color: #006633;}
.mod1 h4 {color: #094728;font-weight: bold;text-transform: capitalize;}
.mod1 .section {color:#006633;}
.mod1 #tab-container {height: 800px;}
.mod1 #tab-container a {color: #006633; text-decoration: underline; font-weight:bold;}
.mod1 #tabs a:hover {color: #000; text-decoration: none;}

.mod1 #tabs ul.mod1Tab {list-style:none; float:left; width: 100%;margin:30px 0px 0px 20px; padding: 0px;}
.mod1 #tabs ul.mod1Tab li  {font-size:16px; text-transform:uppercase; float:left; display: block;width: 24%;margin: 1px .2em 0 0;}
.mod1 #tabs ul.mod1Tab li a {width:100%; font-weight:normal; text-align: center; display:block;background: #ccc; color:#006633;white-space: normal;position: relative; top: 50%;transform: translateY(-50%); padding:5px 0px;text-decoration: none;}
.mod1 #tabs ul.mod1Tab li a:hover {background: #f1f1f1;color: #006633;}
.mod1 #tabs ul.mod1Tab li.active a {background: #006633;color: #fff;}
.mod1 #tabs ul.mod1Tab li.active a:hover {color: #f1f1f1;}
   
.mod1 ul.modules {display: block; width: 300px;margin:0px 50px 0px 0px; padding: 0px; list-style:none;float:right;}
.mod1 ul.modules li {display:inline; width: 150px; height: 150px; margin:0px; padding: 0px;}
.mod1 ul.modules li a {display:block;width: 150px; height: 150px;  }

.mod1 li.overview {background:url(../_img/overviewBgrd.png) no-repeat 0px 0px;float: left; }
.mod1 li.overview span.mod-title {color: #006633; text-transform:uppercase; position: relative;top: -23px;font-size: 24px;line-height: 30px; float:left;}
.mod1 li.overview span.mod-number {color: #fff;position: relative;top: 96px;right: 50px;font-size: 50px;float: right;}

.mod1 li.flexibilities {background:url(../_img/flexBgrdOff.png) no-repeat 0px 0px;float: left; }
.mod1 li.flexibilities span.mod-title {color: #999; text-transform:uppercase; position: relative;top: 64px;font-size: 20px;line-height: 21px;float: right;right: -97px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.mod1 li.flexibilities span.mod-number {color: #999;position: relative;top: 55px;left: 57px;font-size: 50px;float: left;}

.mod1 li.planning {background:url(../_img/planningBgrdOff.png) no-repeat 0px 0px;float: right; }
.mod1 li.planning span.mod-title {color: #666; text-transform:uppercase; position: relative;top: 146px;font-size: 20px;line-height: 30px; float:right;}
.mod1 li.planning span.mod-number {color: #666;position: relative;top: -16px;left: 57px;font-size: 50px;float: left;}

.mod1 li.step-by-step {background:url(../_img/stepBgrdOff.png) no-repeat 0px 0px;float: right; }
.mod1 li.step-by-step span.mod-title {color: #333; text-transform:uppercase; position: relative;top: 63px; left:-81px;font-size: 20px;line-height: 30px; float:left;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.mod1 li.step-by-step span.mod-number {color: #333;position: relative;top: -46px;right: 53px;font-size: 50px;float: right;}


/* mod2 */

.mod2 .text-left {background: url(../_img/flex250.png)  no-repeat 520px 0px;}
.mod2 h2.mod-title {color: #0033ff; text-transform:uppercase; font-size:40px; text-align: left;position: relative; left: 60px;top: -20px;letter-spacing: -1px;float:left;}
.mod2 h3 {color: #0033ff;}
.mod2 h4 {color: #000066;font-weight: bold;text-transform: capitalize;}
.mod2 .section {color:#0033ff;}

.mod2 #tab-container {min-height: 800px;}
.mod2 #tab-container a {color: #0033ff; text-decoration: underline; font-weight:bold;}
.mod2 #tabs a:hover {color: #000; text-decoration: none;}

.mod2 #tabs ul.mod2Tab {list-style:none; float:left; width: 100%;margin:30px 0px 0px 20px; padding: 0px;}
.mod2 #tabs ul.mod2Tab li  {font-size:15px; text-transform:uppercase; float:left; display:block;width: 24%;line-height: 1;text-align: center;margin: 1px .2em 0 0;height: 75px;background: #ccc; }
.mod2 #tabs ul.mod2Tab li a {width:100%; font-weight:normal; text-align: center; display:block;color:#0033ff;white-space: normal;position: relative; top: 50%;transform: translateY(-50%); padding:5px;text-decoration: none;}
.mod2 #tabs ul.mod2Tab li:hover {background: #f1f1f1;color: #0033ff;}
.mod2 #tabs ul.mod2Tab li.active {background: #0033ff;}
.mod2 #tabs ul.mod2Tab li.active a {color: #fff;}
.mod2 #tabs ul.mod2Tab li.active:hover {background: #0033ff;}
.mod2 #tabs ul.mod2Tab li.active a:hover {color: #f1f1f1;}

.mod2 ul.modules {display: block; width: 300px;margin:0px 50px 0px 0px; padding: 0px; list-style:none;float:right;}
.mod2 ul.modules li {display:inline; width: 150px; height: 150px; margin:0px; padding: 0px;}
.mod2 ul.modules li a {display:block;width: 150px; height: 150px;  }

.mod2 li.overview {background:url(../_img/overviewBgrd.png) no-repeat 0px 0px;float: left; }
.mod2 li.overview span.mod-title {color: #006633; text-transform:uppercase; position: relative;top: -23px;font-size: 20px;line-height: 30px; float:left;}
.mod2 li.overview span.mod-number {color: #fff;position: relative;top: 96px;right: 50px;font-size: 50px;float: right;}

.mod2 li.flexibilities {background:url(../_img/flexBgrd.png) no-repeat 0px 0px;float: left; }
.mod2 li.flexibilities span.mod-title {color: #0033ff; text-transform:uppercase; position: relative;top: 64px;font-size: 20px;line-height: 21px;float: right;right: -97px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.mod2 li.flexibilities span.mod-number {color: #fff;position: relative;top: 95px;left: 57px;font-size: 50px;float: left;}

.mod2 li.planning {background:url(../_img/planningBgrdOff.png) no-repeat 0px 0px;float: right; }
.mod2 li.planning span.mod-title {color: #666; text-transform:uppercase; position: relative;top: 148px;font-size: 20px;line-height: 30px; float:right;}
.mod2 li.planning span.mod-number {color: #666;position: relative;top: -16px;left: 57px;font-size: 50px;float: left;}

.mod2 li.step-by-step {background:url(../_img/stepBgrdOff.png) no-repeat 0px 0px;float: right; }
.mod2 li.step-by-step span.mod-title {color: #333; text-transform:uppercase; position: relative;top: 63px; left:-81px;font-size: 20px;line-height: 30px; float:left;;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.mod2 li.step-by-step span.mod-number {color: #333;position: relative;top: -46px;right: 53px;font-size: 50px;float: right;}

/* mod3 */

.mod3 .text-left {background: url(../_img/planning250.png) no-repeat 520px 0px;}
.mod3 h2.mod-title {color: #0099cc; text-transform:uppercase; font-size:40px; text-align: left;position: relative; left: 60px;top: -20px;letter-spacing: -1px;float:left;}
.mod3 h3 {color: #0099cc;}
.mod3 h4 {color: #127393;font-weight: bold;text-transform: capitalize;}
.mod3 .section {color:#0099cc;}
.mod3 #tab-container {min-height: 400px;}
.mod3 #tab-container a {color: #0099cc; text-decoration: underline; font-weight:bold;}
.mod3 #tabs a:hover {color: #000; text-decoration: none;}

.mod3 #tabs ul.mod3Tab {padding-top:15px;}
.mod3 #tabs ul.mod3Tab li  {font-size:16px; text-transform:uppercase; float:left; display:block;width: 24%;line-height: 1;text-align: center;margin: 1px .2em 0 0;height: 75px;background: #ccc; }
.mod3 #tabs ul.mod3Tab li a {width:100%; font-weight:normal; text-align: center; display:block;color:#0099cc;white-space: normal;position: relative; top: 50%;transform: translateY(-50%); padding:5px;text-decoration: none;}
.mod3 #tabs ul.mod3Tab li:hover {background: #f1f1f1;color: #0099cc;}
.mod3 #tabs ul.mod3Tab li.active {background: #0099cc;}
.mod3 #tabs ul.mod3Tab li.active a {color: #fff;}
.mod3 #tabs ul.mod3Tab li.active:hover {background: #0099cc;}
.mod3 #tabs ul.mod3Tab li.active a:hover {color: #f1f1f1;}

.mod3 ul.modules {display: block; width: 300px;margin:0px 50px 0px 0px; padding: 0px; list-style:none;float:right;}
.mod3 ul.modules li {display:inline; width: 150px; height: 150px; margin:0px; padding: 0px;}
.mod3 ul.modules li a {display:block;width: 150px; height: 150px;  }

.mod3 li.overview {background:url(../_img/overviewBgrd.png) no-repeat 0px 0px;float: left; }
.mod3 li.overview span.mod-title {color: #006633; text-transform:uppercase; position: relative;top: -25px;font-size: 20px;line-height: 30px; float:left;}
.mod3 li.overview span.mod-number {color: #fff;position: relative;top: 96px;right: 50px;font-size: 50px;float: right;}

.mod3 li.flexibilities {background:url(../_img/flexBgrd.png) no-repeat 0px 0px;float: left; }
.mod3 li.flexibilities span.mod-title {color: #0033ff; text-transform:uppercase; position: relative;top: 64px;font-size: 20px;line-height: 21px;float: right;right: -97px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.mod3 li.flexibilities span.mod-number {color: #fff;position: relative;top: 55px;left: 57px;font-size: 50px;float: left;}

.mod3 li.planning {background:url(../_img/planningBgrd.png) no-repeat 0px 0px;float: right; }
.mod3 li.planning span.mod-title {color: #0099cc; text-transform:uppercase; position: relative;top: 148px;font-size: 20px;line-height: 30px; float:right;}
.mod3 li.planning span.mod-number {color: #fff;position: relative;top: -16px;left: 57px;font-size: 50px;float: left;}

.mod3 li.step-by-step {background:url(../_img/stepBgrdOff.png) no-repeat 0px 0px;float: right; }
.mod3 li.step-by-step span.mod-title {color: #333; text-transform:uppercase; position: relative;top: 63px; left:-81px;font-size: 20px;line-height: 30px; float:left;;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.mod3 li.step-by-step span.mod-number {color: #333;position: relative;top: -46px;right: 53px;font-size: 50px;float: right;}


/* mod4 */

.mod4 .text-left {background: url(../_img/step250.png) no-repeat 520px 0px;}
.mod4 h2.mod-title {color: #339999; text-transform:uppercase; font-size:40px; text-align: left;position: relative; left: 130px;top: -20px;letter-spacing: -1px;float:left;}
.mod4 h2 {color: #339999;}
.mod4 h3 {color: #339999;border-bottom: 1px dotted #339999;text-align: center;}
.mod4 h4 {color: #075F5F;font-weight: bold;text-transform: capitalize;}
.mod4 .section {color:#339999;}

.mod4 #tab-container {}
.mod4 #tab-container a {color: #339999; text-decoration: underline; font-weight:bold;}
.mod4 #tabs a:hover {color: #000; text-decoration: none;}

.mod4 #tabs ul.mod4Tab {list-style:none; float:left; width: 100%;margin:30px 0px 0px 20px;}
.mod4 #tabs ul.mod4Tab li {text-transform: capitalize;float: left;margin: 2px;display:block;width: 48%;line-height: 1.4;height: 60px;text-align: center;font-weight: bold;padding:10px;background:#ccc;}
.mod4 #tabs ul.mod4Tab li a {width:100%; font-weight:normal; text-align: center; display:block;color:#339999;white-space: normal;position: relative; top: 50%;transform: translateY(-50%); padding:5px;text-decoration: none;}
.mod4 #tabs ul.mod4Tab li:hover {background: #f1f1f1;color: #339999;}
.mod4 #tabs ul.mod4Tab li.active {background: #339999;}
.mod4 #tabs ul.mod4Tab li.active a {color: #fff;}
.mod4 #tabs ul.mod4Tab li.active:hover {background: #339999;}
.mod4 #tabs ul.mod4Tab li.active a:hover {color: #f1f1f1;}


.mod4 ul.modules {display: block; width: 300px;margin:0px 50px 0px 0px; padding: 0px; list-style:none;float:right;}
.mod4 ul.modules li {display:inline; width: 150px; height: 150px; margin:0px; padding: 0px;}
.mod4 ul.modules li a {display:block;width: 150px; height: 150px;  }

.mod4 li.overview {background:url(../_img/overviewBgrd.png) no-repeat 0px 0px;float: left; }
.mod4 li.overview span.mod-title {color: #006633; text-transform:uppercase; position: relative;top: -25px;font-size: 20px;line-height: 30px; float:left;}
.mod4 li.overview span.mod-number {color: #fff;position: relative;top: 96px;right: 50px;font-size: 50px;float: right;}

.mod4 li.flexibilities {background:url(../_img/flexBgrd.png) no-repeat 0px 0px;float: left; }
.mod4 li.flexibilities span.mod-title {color: #0033ff; text-transform:uppercase; position: relative;top: 64px;font-size: 20px;line-height: 21px;float: right;right: -97px;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
.mod4 li.flexibilities span.mod-number {color: #fff;position: relative;top: 55px;left: 57px;font-size: 50px;float: left;}

.mod4 li.planning {background:url(../_img/planningBgrd.png) no-repeat 0px 0px;float: right; }
.mod4 li.planning span.mod-title {color: #0099cc; text-transform:uppercase; position: relative;top: 148px;font-size: 20px;line-height: 30px; float:right;}
.mod4 li.planning span.mod-number {color: #fff;position: relative;top: -16px;left: 57px;font-size: 50px;float: left;}

.mod4 li.step-by-step {background:url(../_img/stepBgrd.png) no-repeat 0px 0px;float: right; }
.mod4 li.step-by-step span.mod-title {color: #339999; text-transform:uppercase; position: relative;top: 81px; left:-95px;font-size: 20px;line-height: 30px; float:left;;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-o-transform: rotate(-90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.mod4 li.step-by-step span.mod-number {color: #fff;position: relative;top: -16px;right: 53px;font-size: 50px;float: right;}

.mod4 .processWrap {width:100%; height:auto; float:left;margin:0px 0px 0px 30px;}
.mod4 .box {width: 46%; border: 4px solid #339999; float: left; margin: 5px; height: 75px;}
.mod4 .box p a {display: block; width: 100%; height: 100%; text-align:center; line-height: 70px;}

.mod4 .box2 {width: 46%; border: 4px solid #339999; float: left; margin: 5px; height: 75px;}
.mod4 .box2 p a {display: block; width: 100%; height: 100%; text-align:center; padding-top:15px;}

.mod4 .box3 {width: 46%; border: 4px solid #339999; float: left; margin: 5px; height: 75px;}
.mod4 .box3 p a {display: block; width: 100%; height: 100%; text-align:center; padding:10px 2px 0px; }

.mod4 .process3 {width: 30%; border: 4px solid #339999; float: left; margin: 20px 10px; height: 75px; background: #fff; position: relative;}

.mod4 .process4 {width: 21%; border: 4px solid #339999; float: left; margin: 20px 10px; height: 75px; background: #fff; position: relative;}

.mod4 .process5 {width: 16%; border: 4px solid #339999; float: left; margin: 20px 10px; height: 75px; background: #fff; position: relative;}

.mod4 .process3 p, .mod4 .process4 p, .mod4 .process5 p {text-align:center; font-size: 12px; position:absolute; top:5px;letter-spacing: -1px; font-weight: bold; width:99%; }

.mod4 .process3 p a, .mod4 .process4 p a, .mod4 .process5 p a, .box a, .box2 a, .box3 a {cursor:hand; cursor: pointer;}

.mod4 .highlight {border: 4px solid red;}
.mod4 .blank {border: 4px solid transparent; background: none;}

.mod4 p.top-to-left {border-bottom: 2px solid #339999; position: relative; top: -37px; width: 50%; border-right: 2px solid #339999; left: 5px; height: 30px;}
.mod4 p.right-to-bottom {border-top: 2px solid #339999; position: relative; top: 33px; width: 50%; border-left: 2px solid #339999; left: 70px; height: 30px;}

.mod4 .rightflow:after {content: "\00BB"; color: #339999; left: 103%; position: relative; top: 10px; font-size: 30px; font-weight: normal; font-family: Georgia;margin-bottom:-15px;}
.mod4 .leftflow:before {content: "\00ab"; color: #339999; left: -17%; position: relative; top: 10px; font-size: 30px; font-weight: normal; font-family: Georgia;margin-bottom:-15px;}

.mod4 .process4.leftflow:before {content: "\00ab"; color: #339999; left: 102%; position: relative; top: 10px; font-size: 30px; font-weight: normal; font-family: Georgia;margin-bottom:-15px;}

.mod4 .reverse .process3, .mod4 .reverse .process4, .mod4 .reverse .process5  {float: right;}
.mod4 .reverse{position: relative;  left: -80px;}
.mod4 .reverse4 {position: relative;  left: 0px;}

.mod4 .down:after {content: "\2193"; color: #339999; left: 50%; position: relative; top: 70px; font-size: 24px; font-weight: bold;}
.mod4 .bottom:before {content: "\2193"; color: #339999; left: -82%; position: relative; top: 210px; font-size: 24px; font-weight: bold;}

.mod4 table {width: 90%;}
.mod4 td {border-left:solid #075F5F 1px;border-right:solid #075F5F 1px;border-bottom:solid #075F5F 1px;border-top:solid #075F5F 1px;vertical-align:top;background-color:#ffffff;padding:5px 10px 5px 10px; font-size:14px; font-weight:normal; text-align:left;}

/* Old toolkit footer styles - commented out to not interfere with main site footer
footer {background:url(../_img/transBgrd.png); height: 95px; width: 1170px;margin:0px auto;}
footer .container {height: 95px; width: 1170px;}
*/

/* breadcrumbs */

.breadcrumb {padding: 20px;margin-bottom: 20px;list-style: none;background: none!important;border-radius: none!important;}
.mod1 .breadcrumb a {color: #006633;}
.mod2 .breadcrumb a {color: #0033ff;}
.mod3 .breadcrumb a {color: #0099cc;}
.mod4 .breadcrumb a {color: #339999;}

/* section info (module 1,2,3,4) */

.section {font-size:2em; text-transform:uppercase;margin-left: 20px;opacity: 0.3;filter: alpha(opacity=30);}
.section span {font-size: 5em;}

/* tabs */

.mod1 #tabs, .mod2 #tabs, .mod3 #tabs, .mod4 #tabs {width: auto; padding-top: 0px; clear:both;}
.mod1 .ui-widget-header, .mod2 .ui-widget-header, .mod3 .ui-widget-header, .mod4 .ui-widget-header {border: none!important;background: none!important;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border: none!important;}

#tabs .col-lg-5 { position:relative; left: -100px;margin-right: -80px; min-height: 600px;}
.mod1 .ui-state-default a, .mod1 .ui-state-default a:link {color: #006633;text-decoration: underline;}
.mod2 .ui-state-default a, .mod2 .ui-state-default a:link {color: #0033ff;text-decoration: underline;}
.mod3 .ui-state-default a, .mod3 .ui-state-default a:link {color: #0099cc;text-decoration: underline;}
.mod4 .ui-state-default a, .mod4 .ui-state-default a:link {color: #339999;text-decoration: underline;}
.ui-state-default {background: #ccc!important; }
.mod1 .ui-state-active, .mod1 .ui-widget-content .ui-state-active, .mod1 .ui-widget-header .ui-state-active {border: none!important; background: #006633!important;}
.mod2 .ui-state-active, .mod2 .ui-widget-content .ui-state-active, .mod2 .ui-widget-header .ui-state-active {border: none!important; background: #0033ff!important;}
.mod3 .ui-state-active, .mod3 .ui-widget-content .ui-state-active, .mod3 .ui-widget-header .ui-state-active {border: none!important; background: #0099cc!important;}
.mod4 .ui-state-active, .mod4 .ui-widget-content .ui-state-active, .mod4 .ui-widget-header .ui-state-active {border: none!important; background: #339999!important;}
.ui-state-active a, .ui-widget-content .ui-state-active a, .ui-widget-header .ui-state-active a {color: #eee!important; text-decoration: none;}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {border-top-right-radius: 0px!important;}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {border-top-left-radius: 0px!important;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {border-bottom-right-radius: 0px!important;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {border-bottom-left-radius: 0px!important;}


.ui-tabs .ui-tabs-panel {padding: 0px!important;}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {color:#fff;}
.mod1 .ui-state-default a:visited {color: #006633;}
.mod2 .ui-state-default a:visited {color: #0033ff;}
.mod3 .ui-state-default a:visited {color: #0099cc;}
.mod4 .ui-state-default a:visited {color: #339999;}

/* sidebar */

.blueBgrd {background: #000066; color: #fff; display: block; margin: 45px -10px 25px 10px; padding:20px; font-size:1.1em;}
.blueBgrd h5 {margin: 20px 0px; font-weight:700;}
.blueBgrd p {line-height: 1.5em;}

.mod1 .sidebar {background: #006633; color: #fff; display: block; margin: 80px 0px 0px -100px; padding: 20px; font-size: 1.1em; border: 8px solid #094728; box-shadow: 0px 0px 0px 4px #F2F5F2;position: relative; left: 140px;}
.mod2 .sidebar {background: #0033ff; color: #fff; display: block; margin: 140px 0px 0px -100px; padding:20px; font-size:1.1em; border: 8px solid #1C3598; box-shadow: 0px 0px 0px 4px #F2F5F2;position: relative; left: 140px;}
.mod3 .sidebar {background: #0099cc; color: #fff; display: block; margin: 140px 0px 0px -100px; padding:20px; font-size:1.1em; border: 8px solid #127393; box-shadow: 0px 0px 0px 4px #F2F5F2;position: relative; left: 140px;}
.mod4 .sidebar {background: #339999; color: #fff; display: block; margin: 40px 0px 0px -100px; padding:20px; font-size:1.1em; border: 8px solid #075F5F; box-shadow: 0px 0px 0px 4px #F2F5F2; position: relative; left: 140px;}
.sidebar h4 {margin-bottom: 30px; font-size: 20px;color:#fff; border-bottom: 2px solid rgba(255,255,255,0.3); padding-bottom: 15px;}
.sidebar h5 {margin: 20px 0px; font-weight:700;}
.sidebar p {line-height: 1.5em;}
.sidebar ul {list-style: none; padding-left: 0; margin: 0;}
.sidebar a {color: #fff!important;font-weight:normal!important; display: block; padding: 12px 15px; background: rgba(255,255,255,0.1); border-radius: 5px; text-decoration: none!important; transition: all 0.2s ease;}
.sidebar a:hover {color: #fff!important;font-weight:normal!important;text-decoration:none!important; background: rgba(255,255,255,0.25); transform: translateX(5px);}
.sidebar li {padding:0px; line-height:1.4; text-transform: uppercase; margin-bottom: 10px; font-size: 0.85em;}

.negMarg {margin-left: -30px;}
/* next links */

.nextLink {margin: 10px auto;width: 100%;font-size: 1.2em;text-align: center;float: left;clear: both;height: 30px;}
.nextLink a {width: auto;padding-right: 45px; cursor: hand;cursor: pointer; text-align: center;height: 84px;  padding-bottom: 15px;display: inline-block; padding-top: 5px;}
.mod1 .nextLink a {background: url(../_img/arrow.png) no-repeat top right;}
.mod2 .nextLink a {background: url(../_img/arrow2.png) no-repeat top right;}
.mod3 .nextLink a {background: url(../_img/arrow3.png) no-repeat top right;}
.mod4 .nextLink a {background: url(../_img/arrow4.png) no-repeat top right;}

/* collapsible text */

.collapsibleWrap {display: block; width:100%; height:auto;}

.mod1 .collapsible {border-bottom: 2px solid #006633; }
.mod2 .collapsible {border-bottom: 2px solid #0033ff; }
.mod3 .collapsible {border-bottom: 2px solid #0099cc; }
.mod4 .collapsible {border-bottom: 2px solid #339999; }

h2.collapsible, h3.collapsible {text-align:left;}

/* misc */

ul {padding: 0px 0px 0px 15px;}
li {margin-bottom: 20px;}
.clear {clear: both;}
.left {float:left;}
.right {float: right;}
.pad10 {padding: 10px!important;}
.pad10L {padding-left: 10px!important;}
.pad10R {padding-right: 10px!important;}
.pad10T {padding-top: 10px!important;}
.pad10B {padding-bottom: 10px!important;}

.pad20 {padding: 20px!important;}
.pad20L {padding-left: 20px!important;}
.pad20R {padding-right: 20px!important;}
.pad20T {padding-top: 20px!important;}
.pad20B {padding-bottom: 20px!important;}

.mar10 {margin: 10px!important;}
.mar10L {margin-left: 10px!important;}
.mar10R {margin-right: 10px!important;}
.mar10T {margin-top: 10px!important;}
.mar10B {margin-bottom: 10px!important;}

.mar20 {margin: 20px!important;}
.mar20L {margin-left: 20px!important;}
.mar20R {margin-right: 20px!important;}
.mar20T {margin-top: 20px!important;}
.mar20B {margin-bottom: 20px!important;}

.scroll {overflow: auto; margin:5px;}
.fixed100 {height:100px;}
.fixed200 {height:200px;}
.fixed300 {height:300px;}
.fixed400 {height:400px;}
.fixed500 {height:500px;}
.fixed600 {height:600px;}
.fixed700 {height:700px;}
.fixed800 {height:800px;}

table th {font-size:12px; font-weight:bold;border:1px solid #075F5F; text-align:center; padding:2px 5px; background:#f1f1f1;}
table td {font-size:10px; font-weight:bold; border:1px solid #075F5F; text-align:center; padding:2px 5px;}
table caption {display:none;}

.w143 {width:143px;}
.w72 {width:72px;}
.w432 {width:432px;}

/*********** colors *************

green: #006633
aquamarine: #339999
yellow: #ffcc33
light blue: #0099cc
royal blue: #0033ff
dark blue: #000066

****************************/