@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:right; padding:0 0 0 25px; 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:270px; text-align:left; padding:10px 25px;}

#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 0 5px 20px; font-size:1.2em; background:#f7ca7a url(../images/bullit_arrow.gif) no-repeat 7px 10px; margin-bottom:3px;}

#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:#000;}
#subnav-moodle .active {color:#000;}

#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:500px; 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;}


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

#sitemap {clear:both; background:#05556d; margin:0; padding:0; }
h5.sitemap {background:#f4b440; color:#fff; width:115px; padding:5px;}

/* ---------------- 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;}

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;}
.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;}


/* ---------------- 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 200px;
}

.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;}