@import url(reset.css);
@import url(typography.css);

/* stops the nasty horizontal shift with centered layouts in moz etc 
html { height: 100%; margin-bottom: 1px; }*/



/* ------------------ STRUCTURE ------------- */
 
body {background:url(../images/bg_body_content.jpg) repeat-x;}
body#home {background:url(../images/bg_body.jpg) repeat-x;}

#container {width:960px; text-align:left; margin:0 auto; position:relative;}

#logo-home {width:240px; float:left; padding:10px 0 0 0;}
#logo {width:240px; float:left; padding:10px 0 0 0 ; height:182px;}


/* ------------------ TWITTER BAR TOP ------------- */

#twitter {height:25px; display:block; text-align:right; margin-top:3px;}
#twitter p {background:url(../images/twitter.png) no-repeat; float:left; padding:0 0 0 8px; font-size:0.9em;}


/* ---------------- TOP NAVIGATION ---------------------*/

#nav {width:720px; float:right;}

ul#topnav {
	margin: 20px 0 0 0; padding:0;
	list-style: none;
	float: right;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0; line-height:1.3em;
	position: relative; font-size:1.2em;
}
ul#topnav li a {
	float: left; 
	/*text-indent: -9999px;*/
	text-decoration: none;
	padding:2px;
	font-weight: bold;
	text-decoration: none;
}
ul#topnav li:hover a, ul#topnav li a:hover {background:#fff; color:#f4b440;}
ul#topnav a.home {
	width: 70px; text-align:center;
}
ul#topnav a.homeactive {
	width: 70px; text-align:center; background:#f4b440;
}
ul#topnav a.about {
	width: 100px; text-align:center;
}
ul#topnav a.aboutactive {
	width: 100px; text-align:center; background:#f4b440;
}
ul#topnav a.services {
	width: 115px; text-align:center; 
}
ul#topnav a.servicesactive {
	width: 115px; text-align:center; background:#f4b440;
}
ul#topnav a.blog {
	width: 90px; text-align:center; 
}
ul#topnav a.blogactive {
	width: 90px; text-align:center; background:#f4b440;
}
ul#topnav a.contact {
	width: 95px; text-align:center;
}
ul#topnav a.contactactive {
	width: 95px; text-align:center; background:#f4b440;
}

ul#topnav li .sub {
	position: absolute;	
	top: 22px; right: 0;
	background:#fff;
	padding: 10px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	display: none;
}
ul#topnav li .row {clear: both; float: left; width: 100%;}
ul#topnav li .sub ul{
	list-style: none;
	margin: 0; padding: 0;
	width: 150px;
	float: left;
	text-align: left;
}
ul#topnav .sub ul li {
	width: 100%;
	color: #000;
}
ul#topnav .sub ul li h2 {
	padding: 0;  margin: 0;
	font-weight: bold; color:#f4b440; font-size:0.9em;
}
ul#topnav .sub ul li h2 a {
	padding: 0;  margin: 0;
	font-weight: bold; color:#f4b440; font-size:0.9em;
	
}
ul#topnav .sub ul li a {
	float: none; 
	text-indent: 0; /*--Reset text indent--*/
	height: auto;
	padding: 0;
	display: block;
	text-decoration: none;
	color: #000; font-weight:normal; text-transform:lowercase; font-size:0.7em;

	
}
ul#topnav .sub ul li a:hover {color: #f4b440; background-position: 5px 12px ;}




/* ---------------- HOME PAGE ---------------------*/

#branding-home {background:url(../images/bg_home.jpg) no-repeat; height:300px; clear:both;}

#bar-services {background:#05556d; width:640px; float:left; height:30px; text-align:left;}
#bar-services p {padding:5px 0 0 25px;}

#bar-moodle {background:#f4b440; width:320px; float:left; height:30px;}
#bar-moodle p {padding:5px 0 0 0; text-align:center;}

#homecol {float:left; width:275px; text-align:justify; padding:10px 20px;}

#clients {clear:both; background:url(../images/bg_clients.jpg) no-repeat; height:130px;}

#partners {clear:both; background:url(../images/bg_partners.jpg) no-repeat; height:130px;}
#partners ul {margin:0 0 0 200px; padding:20px 0 0 0;}
#partners li {display:inline; list-style:none;}

h1.home{padding-top:40px;}



/* ---------------- SLIDE TOGGLE -moodle2 homepage ---------------------*/

#panel {
	background: url(../images/arrow_moodle2.png) no-repeat center top;	
	width:300px;
	height: 180px;
	position: absolute;
/*	top: 218px;*/
	top:  371px;
	right: 0;
	height: 5px;
	overflow-y: hidden;
	padding: 10px;
}

#panel li {color:#fff; padding:5px 10px; font-size:1.2em; line-height:1.3em; background:#f7ca7a; margin-bottom:3px;}
#panel li a {color:#fff; font-weight:normal;}
#panel li a:hover {color:#000;}


#panel div#inner-panel {
	width: 300px;
	
	background: #f4b440; 
  position: absolute;
  right: 0;
  bottom: 0;
  display: none;
}

a#slideButton {
	background: url(../images/white-arrow.gif) no-repeat top left;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}

.active {background-position: right 12px;}



/* ---------------- SUB NAV ---------------------*/

#subnav {background:#f4b440; color:#fff; padding:6px 10px; width:330px; text-align:left; clear:both;}
#subnav ul {}
#subnav li  {display:inline; padding:10px;}
#subnav a {color:#fff; font-weight:normal; padding-right:10px;}
#subnav a:hover {color:#05556d;}
#subnav .active {color:#05556d;}

#subnav-moodle {background:#f7931d; color:#fff; padding:6px 10px; width:480px; text-align:left; clear:both;}
#subnav-moodle ul {}
#subnav-moodle li  {display:inline; padding:10px;}
#subnav-moodle a {color:#fff; font-weight:normal; padding-right:10px;}
#subnav-moodle a:hover {color:#05556d;}
#subnav-moodle .active {color:#05556d;}

#subnav-mahara {background:#4b7520; color:#fff; padding:6px 10px; width:480px; text-align:left; clear:both;}
#subnav-mahara ul {}
#subnav-mahara li  {display:inline; padding:10px;}
#subnav-mahara a {color:#fff; font-weight:normal; padding-right:10px;}
#subnav-mahara a:hover {color:#000;}
#subnav-mahara .active {color:#000;}

#subnav-other {background:#f4b440; color:#fff; padding:6px 10px; width:450px; text-align:left; clear:both;}
#subnav-other ul {}
#subnav-other li  {display:inline; padding:10px;}
#subnav-other a {color:#fff; font-weight:normal; padding-right:10px;}
#subnav-other a:hover {color:#05556d;}
#subnav-other .active {color:#05556d;}

/* ---------------- BRANDING ---------------------*/

#branding-content {background:url(../images/branding_content.jpg) no-repeat; height:222px; clear:both;}
#branding-about {background:url(../images/branding_about.jpg) no-repeat; height:222px; clear:both;}
#branding-contact {background:url(../images/branding_contact.jpg) no-repeat; height:222px; clear:both;}
#branding-moodle {background:url(../images/branding_moodle.jpg) no-repeat; height:222px; clear:both;}
#branding-mahara {background:url(../images/branding_mahara.jpg) no-repeat; height:222px; clear:both;}
#branding-other {background:url(../images/branding_other.jpg) no-repeat; height:222px; clear:both;}
#branding-blog {background:url(../images/branding_blog.jpg) no-repeat; height:193px; clear:both;}


/* ---------------- SITE CONTENT ---------------------*/

#content {clear:both; margin-top:10px; padding:0;}
#content p {padding-bottom:10px; line-height:1.5em;}
#content li {background:url(../images/bullit_yellow.gif) no-repeat 1px 6px; list-style:none; padding:0 0 5px 15px; line-height:1.5em;}
#content li.nostyle {background:none; list-style:none; padding:0 0 7px 0; line-height:1.5em;}

#content_left {float:left; width:470px; margin-right:40px;}
#content_left p { text-align:justify;}
#content_right {float:left; width:450px;}
#content_right p {  text-align:justify;}

#contact_left {float:left; width:450px; margin-right:20px;}
#contact_right {float:left; width:450px;}

h2.landing {background:#f4b440; color:#fff; width:330px; top:218px; position:absolute; padding:4px 0 3px 5px;}
h3.yellow {color:#f4b440; font-size:1.3em;}
h3.yellow:hover  {color:#f4b440; font-size:1.3em;}
h1.moodle {font-size: 3em;letter-spacing: -0.5px; line-height:1.2em; color:#f7931d; padding-bottom:10px;}
h2.moodle {font-size:1.8em;letter-spacing:-0.5px;line-height:1.5; color:#f7931d; font-weight:bold;}
h3.moodle {font-size:1.3em; color:#f7931d; font-weight:bold; padding:0 0 5px 0;}
#content li.moodle {background:url(../images/bullit_orange.gif) no-repeat 1px 6px; list-style:none; padding:0 0 5px 15px; line-height:1.5em;}
a.moodle {font-size:1.2em;letter-spacing:-0.5px;line-height:1.5; color:#fff; font-weight:bold; padding:7px; background:#f7931d;}
a.moodle:hover {color:#000;}

h1.mahara {font-size: 3em;letter-spacing: -0.5px; line-height:1.2em; color:#4b7520; padding-bottom:10px;}
h2.mahara {font-size:1.8em;letter-spacing:-0.5px;line-height:1.5; color:#4b7520; font-weight:bold;}
h3.mahara {font-size:1.3em; color:#4b7520; font-weight:bold; padding:0 0 5px 0;}
#content li.mahara {background:url(../images/bullit_green.gif) no-repeat 1px 6px; list-style:none; padding:0 0 5px 15px; line-height:1.5em;}
a.mahara {font-size:1.2em;letter-spacing:-0.5px;line-height:1.5; color:#fff; font-weight:bold; padding:7px; background:#4b7520;}
a.mahara:hover {color:#000;}

#theme-header {float:left; width:270px; text-align:left; margin:0 20px 0 20px;}
#theme-info {float:left; width:268px; text-align:left; margin:0 20px 0 20px; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
#theme-info h2 {text-align:center; padding:10px 0 0 0;}
#theme-info p {padding:5px 10px;}

#col {float:left; width:270px; text-align:left; padding:10px 25px;}

/* ---------------- QUOTES ---------------------*/

#quote-mahara {background: url(../images/quote_mahara.gif) no-repeat bottom; width:400px; padding-bottom:50px; margin:10px 10px 0 20px;}
#quote-mahara blockquote {background:#4b7520; color:#fff; padding:10px;}
#quote-mahara cite {margin:0 10px;}

#quote-moodle {background: url(../images/quote_moodle.gif) no-repeat bottom; width:400px; padding-bottom:50px; margin:10px 10px 0 20px;}
#quote-moodle blockquote {background:#f7931d; color:#fff; padding:10px;}
#quote-moodle cite {margin:0 10px;}

#quote {background: url(../images/quote.gif) no-repeat bottom; width:400px; padding-bottom:50px; margin:10px 10px 0 20px;}
#quote blockquote {background:#f4b440; color:#fff; padding:10px;}
#quote cite {margin:0 10px;}

#quote2 {background: url(../images/quote2.gif) no-repeat bottom; width:400px; padding-bottom:50px; margin:10px 10px 0 20px;}
#quote2 blockquote {background:#f4b440; color:#fff; padding:10px;}
#quote2 cite {margin:0 10px;}

blockquote.case {border-left:2px solid #f4b440; color:#000; margin:0 20px 20px 20px; padding:0 20px;}


H6^foEn!

/* ---------------- SITEMAP browse site ---------------------*/

#sitemap {margin: 0;}
#sitemap ul a {color: #05556d;}
#sitemap ul a:hover {color: #f4b440;}
#sitemap ul {list-style: none; padding: 0 auto; margin:0;}
#sitemap ul li {background:none; padding: 5px 0; list-style: none; float: left;}
#sitemap ul ul {margin:15px 0;}
#sitemap ul ul li {display: block; float: none; background: #fff; padding: 0;}
#sitemap ul ul ul {list-style: none; margin: 5px 15px;}
#sitemap ul ul ul li {background:url(../images/bullit_yellow.gif) no-repeat 1px 6px; padding:0 0 5px 15px;}
#sitemap ul ul ul a {color: #05556d;}
#sitemap ul ul ul a:hover {color: #f4b440;}
#sitemap h4 {margin:0; font-size: 1.2em; padding:0;}
#sitemap h4 a {color: #f4b440;}
#sitemap h4 a:hover {color: #05556d;}
#sitemap h5 {margin-right: 50px; padding-bottom: 10px; font-size: 2em; color: #05556d; border-bottom: solid 1px #05556d;}
#sitemap a h5 {color: #05556d;}
#sitemap a:hover h5 {color: #f4b440;}

/* ---------------- FOOTER  ---------------------*/

#container-blue {background:#05556d; clear:both; width:960px; height:221px; margin:0;}
#container-blue p {color:#fff;}
#container-blue a {color:#fff;}
#container-blue a:hover {color:#f4b440;}
#container-blue input, textarea{font-family: Arial, Helvetica, sans-serif; border:0; font-size:1em; margin:0 0 5px 0; padding:5px;
	color: #000000;}
	
#homecol.getintouch {float:left; width:410px; text-align:left; padding:10px 10px;}
#homecol.sections {float:left; width:160px; text-align:left; padding:10px 10px;}

#homecol.getintouch .col1 {margin-right: 50px; padding: 0;list-style: none; float: left; width: 120px}
#homecol.getintouch .col2 {margin: 0; padding: 0;list-style: none; float: left; width: 210px}
#homecol.getintouch .col3 {margin: 0; padding: 0;list-style: none; float: left; width: 380px}
#homecol.getintouch  .col3 img{padding-right: 10px;}

ul#blog {margin: 0; padding:0;list-style: none;}
ul#blog li {color:#fff; margin-bottom:10px;}

ul#sections {margin: 0; padding:0;list-style: none;}
ul#sections li {color:#fff; font-size:1em; padding:0 0 5px 0;}

#footer {clear:both; background:#f4b440; padding:5px 5px 5px 20px;}
#footer p { font-size:0.9em; color:#fff;}
#footer a {color:#fff;}
#footer a:hover {color:#05556d;}

/* ---------------- MISC ---------------------*/
input, textarea{font-family: Arial, Helvetica, sans-serif; border:1px solid #ddd; font-size:1em; margin:0 0 5px 0; padding:5px;
	color: #000000;}
	
.frmContact {
  width:400px;
  }
.frmContact label {
text-align:left;
width:70px;
float:left;
padding:0.2em;
margin:0;
margin-top:0.3em;
  }

.frmContact .nobr {display:none;}  
.frmContact .textfield {
margin:3px;
height:20px;
width:200px;
}

	
.center {text-align:center;}
	
.btn-blue {background: url(../images/btn_blue.png) no-repeat; width:178px; color:#fff; display:block; text-align:center; padding:7px 0 11px 0;}
.btn-blue:hover { background-position:left -35px;}

.btn-yellow {background:#f4b440; text-align:center; padding:5px; color:#fff; font-weight:normal; cursor:pointer;}
.btn-yellow:hover {background:#fff; color:#000;}

.btn-green {background:#4b7520; text-align:center; padding:5px; color:#fff; font-weight:normal; cursor:pointer; display:block;}
.btn-green:hover {background:#000; color:#fff;}

.btn-orange {background:#f7931d; text-align:center; padding:5px; color:#fff; font-weight:normal; cursor:pointer; display:block;}
.btn-orange:hover {background:#000; color:#fff;}

.btn-blog {background:#f4b440; text-align:center; padding:5px; color:#fff; font-weight:normal; cursor:pointer;}
.btn-blog:hover {background:#000; color:#fff;}

.error {background:url(../images/bg_error.gif) no-repeat bottom; width:300px; margin:10px 10px 10px 10px; text-align: center;}
.error p {font-weight:bold; padding:0 0 0 10px;}
.success {width:300px; margin-top:20px; font-size:1.8em;letter-spacing:-0.5px;line-height:1.2; color:#f4b440; font-weight:bold;}


.yellow {color:#f4b440; font-weight:bold;}
.yellow:hover {color:#000;}

.clear {clear:both;}

.aboutright {padding-top:147px;}
.partnersright {padding-top:103px;}
.mahararight {padding-top:65px;}
.moodleright {padding-top:70px;}
.jobsright {padding-top:55px;}

/* ---------------- Totara Container---------------------*/

.totara_container{
	width: 200px;
	height: 89px;
	padding: 0;
	margin: 25px 0 0 30px;
	float: left;
	cursor: pointer;
    background: url(../images/totara_btn.jpg) no-repeat 0 0;
    color: #fff;
    z-index: -999px;
    font-size: 0em;

}

.totara_container:hover{
	cursor: hand;
    background-position:0 -89px;
}

.totara_container:active{
	cursor: hand;
    background-position:0 -89px;
}

/* ---------------- CAROUSEL---------------------*/

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative; top:12px;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 180px;
    height: 80px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.jcarousel-skin-tango .jcarousel-container {
    background:#fff;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 600px;
    padding:20px 40px 0px 40px; margin:0 0 0 170px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  600px;
    height: 80px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 180px;
    height: 80px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin:0 10px 0 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 23px;
    right: 5px;
    width: 26px;
    height: 74px;
    cursor: pointer;
    background: url(../images/arrow_carousel_next.jpg) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position:0 -74px;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position:0 -74px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position:0 -74px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 23px;
    left: 5px;
    width: 26px;
    height: 74px;
    cursor: pointer;
    background: url(../images/arrow_carousel_previous.jpg) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position:0 -74px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position:0 -74px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position:0 -74px;
}

#blog blockquote {display:block; font-style:italic; margin-left:30px; color:#000000;}


/**********************************
Accordion
**********************************/

.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin: 5px 0 0 0; zoom: 1; font-size:1.2em; padding:7px 0 7px 40px; color:#009966;}
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block;  padding: 0; color:#05556d;}
.ui-accordion-icons .ui-accordion-header a { padding: 0; }

.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin: 0;}
.ui-accordion .ui-accordion-content { padding: 20px;  position: relative; overflow: auto; display: none; zoom: 1; background:#f5f5f5;}
.ui-accordion .ui-accordion-content-active { display: block; background:#f5f5f5;}


/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default {background: url(../images/arrow-up.png) no-repeat; color: #fff;}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color: #05556d; text-decoration: none;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus {background: url(../images/arrow-down.png) no-repeat; color: #fff;}
.ui-state-hover a, .ui-state-hover a:hover {color: #fff; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active {background: url(../images/arrow-down.png) no-repeat;}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {text-decoration: none; }
.ui-widget :active { outline: none; }


#content-moodle2 {clear:both; margin:0; padding:0; background: url(../images/bg-moodle-2.png) no-repeat bottom;}
#content-moodle2 p {padding-bottom:10px; line-height:1.5em;}
#content-moodle2-features {clear:both; margin:0; padding:0;}


#moodle2_left {float:left; width:420px; margin-right:20px;}
#moodle2_right {float:left; width:500px;}
#moodle2 { clear:both; padding:0; margin:0;}
#moodle2_mainfeatures { clear:both; padding:0; margin:0;}
#moodle2_mainfeatures ul {margin: 0; padding:0;list-style: none;}
#moodle2_mainfeatures ul li {height: 120px ;margin-bottom: 15px;}
#moodle2_mainfeatures ul li img{float: left; margin-right: 10px;}
#moodle2_otherfeatures { clear:both; padding:0; margin:0;}
#moodle2_otherfeatures h2 { font-size: 15px; margin: 0; padding: 0;}
#moodle2_otherfeatures ul {margin: 0; padding:0;list-style: none;}
#moodle2_otherfeatures ul li {min-height: 50px; margin-bottom: 25px; display: inline-block; width: 300px; vertical-align: top; }
#moodle2_otherfeatures ul li img{float: left; margin-right: 10px;}
#moodle2_otherfeatures ul li p{float: right; width: 240px;}