﻿/*======================================
      WELCOME TO THE STYLESHEET
--------------------------------------      
 Copyright: Tasmanian Skills Institute
 Author:    RCT
======================================*/
 
/**************************************\
|------------COLOR SCHEME--------------|
|--------------------------------------|
- black		          #000
- white		          #fff
- dark grey           #333
- light grey          #ccc
- dark orange         #bd3401
- bright yellow       #ff0
- construction yellow #e09600
- teal                #699
- fanta               #f90
- dark grey text #4c4c4c
\**************************************/


/**************************************/
/*              GLOBALS               */
/**************************************/

body { background-color: #585858; background-image: url(../images/interface/grey-gradient-background-tile.png); background-repeat: repeat-x; height:100%; }

/**************************************/
/*              HEADER                */
/**************************************/

#header { float:left; width:100%; height: 140px; padding:0; margin:0; 
		  background-image: url("../images/interface/header/skills-institute-logo.png"); overflow:hidden;background-repeat : no-repeat; cursor:hand; cursor:pointer; }
		  
		  .skills-logo {
float:right;
position:relative;
top:-150px;
}

h1.logo {
	width: 438px; height: 140px;
	position: relative;
	overflow: hidden;
	}
	h1.logo span {
	background: url("../images/interface/header/timi-logo.png");
	position: absolute;
	padding:0px;
	margin:0px;
	width: 100%;
	height: 145px;
	left: -231px;
	top: 122px;
	}

/**************************************/
/*             NAVIGATION             */
/**************************************/

#navigation { display:inline; float:left; }

#sidebar { width: 150px; height: auto; background-color:#999999; position: absolute; margin: 1px 10px 0 0; padding: 0 0 0 20px; top: 380px; right:150px; }

#menu { float:left; width:200px; height:1%; padding:0; display:block; position:relative; margin: 0 0 0 -16px; background-color: #fff; }
#menu p{margin:5px;padding:5px;background-color:#cccccc;}
* html #menu { margin-top: -3px;  } /* Fix for IE 3 pixel top margin space */

	
#menu ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

#menu li { height:36px; color: #fff; 
margin: 1px 0 0 0; font-family: "Trebuchet MS", Tahoma, "Liberation Sans", Helvetica, Arial, sans-serif; font-style: normal; 
font-weight: bold; font-size:1.2em; line-height: 2.8em; text-transform: uppercase; letter-spacing: 0.3em; text-indent: 2em; 
background: url("../images/interface/menu1.png") 0 -78px;
}

#menu li a {
  	height: 36px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	text-decoration: none;
	color: fff;
	margin:0px;
	padding-left:25px;
	}
	
#menu li a:link, #menu li a:visited {
	color: #fff;
	display: block;
	background: url("../images/interface/menu2.png"); */
	padding: 8px 0 0 30px;
	}
	
#menu li a.highlight:link, #menu li a.highlight:visited {
	color: #fff;
	display: block;
	background: url("../images/interface/menu2.png") 0 -78px;; */
	padding: 8px 0 0 30px;
}
	
#menu li a:hover, #menu li a.highlight:hover {
	color: #000;
	background: url("../images/interface/menu1.png") 0 -39px; */
	padding: 8px 0 0 30px;
	}
	
#menu li a:active, #menu li a.highlight:active {
	color: #fff;
	background: url("../images/interface/menu2.png") 0 -78px; */
	padding: 8px 0 0 30px;
	}

/**************************************/
/*            MAIN CONTENT            */
/**************************************/

#gallery { float:left; height: 240px; width: 100%; position: relative; display: inline; background-image: url(../images/gallery/gallery01.jpg); }

#content { padding-top: 7px; font-size: 1.2em; font-family: Tahoma, "Trebuchet MS", "Liberation Sans", Helvetica, Arial, sans-serif; }

#quizarea { display:block; margin-left:auto; margin-right:auto; margin-bottom:30px; width:330px; text-align: center; border: 1px solid #4c4c4c; background-image: url(../images/interface/background-stripes-tile.png); background-repeat: repeat; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; }

	#quizarea #inside { display:block; margin-left:10px; margin-right:10px; width: auto; height:100%; background-color:#e09600; border: 3px inset #bd3401; margin-top: 17px; margin-bottom: 17px; }

	#quizarea h3 { color:#000000; margin-bottom: 20px; margin-top:10px; }

	#quizarea a:hover { color: #fff; }
	
	#quizarea ul { list-style-type: none; text-indent: -30px; }
	
a.ovalbutton{
background: transparent url('../images/buttons/oval-orange-left.gif') no-repeat 0 4px;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('../images/buttons/oval-orange-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: 0 -20px ;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

/**************************************/
/*              HEADINGS              */
/**************************************/

#heading { height: 66px; width: 751px; overflow: hidden; margin-left: -16px; position: relative; display:inline; float:left; }

h2.headingtitle { margin: 0; padding: 0; height: 66px; width: 751px; position: relative; overflow: hidden; }

	h2.headingtitle span {
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	h2.headingtitle span.welcome {
		background: url("../images/headings/welcome-to-the-timi-website.png");
	}
	
	h2.headingtitle span.pagenotfound {
		background: url("../images/headings/page-not-found.png");
	}
	
	h2.headingtitle span.training {
		background: url("../images/headings/training.png");
	}

	h2.headingtitle span.enrol {
		background: url("../images/headings/enrol.png");
	}
	
	h2.headingtitle span.coursework {
		background: url("../images/headings/coursework.png");
	}
	
	h2.headingtitle span.assessment {
		background: url("../images/headings/assessment.png");
	}

	h2.headingtitle span.links {
		background: url("../images/headings/links.png");
	}

h3 { color:#bd3401; font-family: "Franklin Gothic Book", "Franklin Gothic", "Trebuchet MS", Tahoma, "Liberation Sans", Helvetica, Arial, sans-serif; }
/**************************************/
/*       RIGHT SIDEBAR CONTENT        */
/**************************************/

.partners { color: #4c4c4c; font-family: "Trebuchet MS", Tahoma, "Liberation Sans", Helvetica, Arial, sans-serif; font-style: normal; font-size:0.95em; line-height: 1.4em; text-align: left; margin-top: -1em; padding-top:0px; }

#contact { margin-left: 15px; } /* This gives the appearance of centering the contact details */

/**************************************/
/*              FOOTER                */
/**************************************/

/* creates white footer text */
#footer p { color: #fff; font-family: "Trebuchet MS", Tahoma, "Liberation Sans", Helvetica, Arial, sans-serif; font-style: normal; font-weight: bold; font-size:0.75em; line-height: 1.5em; text-align: center; padding-top:5px; }

#footer p a:link, #footer p a:visited { color:#699; }
#footer p a:hover { text-decoration: none; color: #ccc; }
#footer p a:active, #footer p a:focus { text-decoration: none; color: #000; }

