@charset "UTF-8";

/*

Whitehouse Institute of Design, Australia - Web Colour Pallette
---------------------------------------------------------------

colour		100%		80%
---------------------------------------
peach		#FAB485		#FAB485
red			#C60C46		#D04E5E
orange		#FBB040		#FDBF68
purple		#5261AC		#7077B9
black		#000000
grey		#C9CBCC
vanilla		#FFF2D4

*/

body, div, p, h1, h2, h3, fieldset {
	margin: 0px;
	padding: 0px;	
}

body {
	text-align: center;
	font: normal 12px "Times New Roman", Times, Georgia, serif;
	background-color: #F0F0EA;
	color: #0F0F0F;
	margin-top: 0px;
}

#pageContainer {
	width: 990px;
	position: relative;
	margin: 0px auto 0 auto;
	text-align: left;
	background-color: #FFFFFF;
	border:1px solid #797979;
	border-top: 1px solid #FFF;
	min-height: 800px;
	height: auto !important;
	height: 800px;
	
}

#WIDlogo {
	position: absolute;
	right: 25px;
	top: 33px;
	border: none;
}

#jumpNav {
	position: absolute;
	top: 0px;
	left: 213px;
	height:115px;
}

#jumpMenu {
	height: 20px;
	margin: 0px;
	padding: 0px 0px 85px 0px;
	list-style: none;
	font-size:12px;
}

#jumpMenu li {
	float:left;
	padding: 0px;
	background-color: #000;
}

#jumpMenu li ul {
	position: absolute;
	top:22px;
	left:0px;
	margin:0;
	padding:0;
/*	display: none; */
}

#jumpMenu li ul li {
	width:375px;
	height:85px;
	overflow: hidden;
}

#jumpMenu a {
	color: #FFF;
	font-variant: small-caps;
	text-decoration: none;
	text-align: center;
	display: block;
	line-height: 20px;
}

#jumpMenu li ul li a {
	display: block;
	height: 85px;
}

#jumpMenu li a img {
	border: none;
}

#jl01 {
	width: 101px;
	margin-right:4px;
}

li:hover#jl01 {
	background:#FBB040; 
}

#jl01 ul li {
	background:url(../img/feature_01.jpg) no-repeat top left;
	border-top:0px solid #FFFFFF;
	border-right:10px solid #FDBF68;
	border-left:10px solid #FDBF68;
	border-bottom:10px solid #FDBF68;
}

#jl01.jumpMenuActive {
	background:#FBB040; 
}

#jl02 {
	width: 105px;
	margin-right:4px;
}

li:hover#jl02 {
/*	background:#FAB485; */
	background:#5261AC;
}

#jl02 ul li {
	background:url(../img/feature_02.jpg) no-repeat top left;
	border-top:0px solid #FFFFFF;	
	border-right:10px solid #7077B9;
	border-left:10px solid #7077B9;
	border-bottom:10px solid #7077B9;
}

#jl02.jumpMenuActive {
/*	background:#FAB485; */
	background:#5261AC;
}

#jl03 {
	width: 181px;
}

li:hover#jl03 {
/*	background:#5261AC; */
	background:#FAB485;
}

#jl03 ul li {
	background:url(../img/feature_03.jpg) no-repeat top left;
	border-top:0px solid #FFFFFF;	
	border-right:10px solid #FCC9A5;
	border-left:10px solid #FCC9A5;
	border-bottom:10px solid #FCC9A5;
}

#jl03.jumpMenuActive {
/*	background:#5261AC; */
	background:#FAB485;
}

#jumpFeature {
	position: absolute;
	top:20px;
	left:0px;
	width: 395px;
	height: 95px;
	overflow: hidden;
	border-top:2px solid #FFFFFF;
	background: #FBB040;
}

#jumpFeature img {
	position: absolute;
	top: 0px;
	left: 10px;
	border: none;
}

#menuContainer {
	position: absolute;
	width: 270px;
	height: 590px;
	left: 78px;
	top: 145px;
	background: url(../img/black_pixel.gif) repeat-y 136px;
	overflow:hidden;
	padding:23px 0pt 0pt;
}

#menuContainer ul {
	position: absolute;
	width: 120px;
	list-style: none;
	margin: 0px;
	padding: 0px;
	text-align: right;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: -1;
}

#menuContainer li a:hover {
	color: #9B242F;
}

#menuContainer li ul {
	position: absolute;
	left: 155px;
	text-align: left;
	width: 116px;
	font-size: 12px;
	font-weight: normal;
	display: none;
	padding: 10px 0 0;
	background-image: url(../img/asterisk.gif);
	background-position: left top;
	background-repeat: no-repeat;
	text-transform: none;
}

#menuContainer li li ul {
	position: relative;
	left: 10px;
	width: 100px;
	display: none;
	padding: 0px;
	background-image: none;
}

#menuContainer li {
	padding: 0px;
	margin: 0px 0px 6px;
}

#menuContainer li li {
	line-height: 13px;
}

#menuContainer li ul li {
	margin-top: 6px;
	margin-bottom: 6px;
}

#menuContainer li.active ul li ul{
	display: none;
}

#menuContainer li.active ul {
	display: block;
}

#menuContainer li ul li.active ul{
	display: block;
}

#menuContainer a {
	text-decoration: none;
	color: #000;
}

#menuContainer li ul {
	margin-bottom: 14px;	
}

#menuContainer a.active {
	color: #9B242F;
}

#menuContainer #adLinks ul {
	position: absolute;
	top:  236px;
	left: 2px;
	width: 134px;
}

	#adLinks li {
		margin: 0px;
	}
	
	#adLinks li li {
		margin: 6px 0;
	}
	
	#adLinks a {
		display: block;
		background: #000;
		border-bottom: 1px solid #fff;
		padding: 5px 17px;
		font-weight: normal;
	}
	
	#adLinks a:link { color: #fff; }
	#adLinks a:active { border-top: 1px solid #fff; outline: 0px; border-bottom: 0px }
	#adLinks a:visited { color: #fff; }
	#adLinks a:hover,
	#adLinks a.active { color: #9B242F; }
	
	#menuContainer #adLinks li ul {
		position: absolute;
		left: 153px;
		top: -199px;
		width: 116px;
	}
	
		#menuContainer #adLinks li li ul {
			position: relative;
			left: 10px;
			top: 0;
			width: 100px;
		}	
	
	#adLinks li ul a {
		display: inline;
		background-color: #fff;
		border-bottom: 0px;
		padding: 0;
	}
	
	#adLinks li li a:link { color: #000; }
	#adLinks li li a:active { border-top: 0px; }
	#adLinks li li a:visited { color: #000; }
	#adLinks li li a:hover,
	#adLinks li li a.active { color: #9B242F; }



#social {
	position: absolute;
	top: 310px;
	right: 150px;
}

#social ul {
	width: 70px;
	height: 60px;
	position: absolute;
	right: 0;
	top: 20px;
}

#social ul li {
	float: right;
	margin: 0 0 0 5px;
}

#social h3 {
	text-transform: uppercase;
	text-align: right;
	font-size: 12px;
	margin: 0;
}

#social p {
	position: absolute;
	right: 0;
	top: 90px;
	margin: 0;
}

#social a img {
	border: none;
	margin: 0;
}

#social-links a img {
	border: 1px solid #fff;
}

	#social-links a:hover img {
		border: 1px solid rgb(64,64,64);
	}

#contentContainer {
	margin-left: 360px;
	margin-top: 164px;
	padding-bottom: 20px;
	width: 250px;
	position: relative;
}

#contentContainer.layoutWide {
	width: 525px;
}

#contentContainer a { text-decoration: none; }
#contentContainer a:link { color: #9B242F; }
#contentContainer a:active { color: #9B242F; }
#contentContainer a:visited { color: #9B242F; }
#contentContainer a:hover { color: #661922; }

#contentContainer table {
	margin-bottom: 12px;
}

#contentContainer table.clearTable td {
	padding: 1px 18px 1px 0;
}

#contentContainer table.clearTable th {
	padding: 1px 18px 1px 0;
}

#contentContainer table.lineTable td {
	padding: 1px 18px 1px 0;
	border-top: 1px solid black;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
}

#contentContainer table.lineTable th {
	padding: 1px 18px 1px 0;
	border-bottom: 1px solid black;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	text-align: left;
}

#contentContainer table.lineTable tr.invertRow td {
	background-color: #AAA;
	color: #000;
	padding-left: 3px;
}

.lineUnder {
	padding-bottom: 2px;
	margin-bottom: 6px;
	border-bottom: 1px solid black;
	display: block;
}


div#galleryPanel {
	position: absolute;
	left:326px;
	width:236px;
}

div#galleryPanel ul {
	width: 183px;
	list-style: none;
	display: block;
	margin: 0px;
	font-size: 11px;
	font-style: italic;
	padding: 0px;
	text-align: right;
	position: absolute;
	top: 12px;
	right: 330px;
}

div#galleryPanel p.galleryDetails {
	border-bottom: 1px solid black;
	padding: 0 0 6px 0;
	margin: 0 0 12px 0;
	top: 0px;
	right: 0px;
}

div#galleryPanel ul li {
	width: 171px;
	display: block;

}

div#galleryPanel ul li a {
	display: block;
	width: 171px;
	line-height: 16px;
	padding: 2px 4px 2px 4px;
	margin: 2px;
	border-right: 4px solid #000;
}

div#galleryPanel ul li a { text-decoration: none; }
div#galleryPanel ul li a:link { color: #000; }
div#galleryPanel ul li a:active { background-color: #000; color: #FFF; }
div#galleryPanel ul li a:visited { color: #000; }
div#galleryPanel ul li a:hover { background-color: #000; color: #FFF; }

div#galleryPanel ul li.active a,
div#galleryPanel ul li.active a:visited, 
div#galleryPanel ul li.active a:active { background-color: #000; color: #FFF; }

div#img_gallery {
	position:absolute;
	width: 525px;
	height: 550px;
	text-align: left;
	margin: 18px 0 0 0;
}

div#thumbnails {
	width: 208px;
	margin: 12px 0;
}

div#thumbnails img {
	border: 1px solid #8C8C8C;
	margin: 0 5px 5px 0;
	float: left;
}

div#images {
	width: 313px;
	position: absolute;
}

div#images img.main_img {
	position: absolute;
	left: 0px;
}

#contentContainer form {

}

#contentContainer div.loginoptions {

}

#contentContainer fieldset {
	border: 0px;
}

#contentContainer label {
	display: block;
	width: 160px;
	font: normal 12px Arial, Helvetica, sans-serif
}

#contentContainer input {
	border: 1px solid black;
	margin: 0 6px 12px 0;
	padding: 3px;
	font-size: 11px;
	font-weight: normal;
	background-color: #FFF;
	color: #000;
	font-family: Arial, Helvetica, sans-serif
}

#contentContainer textarea { 
	border-width: 1px; 
	width: 246px; 
	margin-bottom: 10px;
	border: 1px solid black;
	font-size: 11px;
	font-weight: normal;
	background-color: #FFF;
	color: #000;
	font-family: Arial, Helvetica, sans-serif
}


#contentContainer input.button {
	border-top: #999 solid 1px;
	border-right: #333 solid 1px;
	border-bottom: #333 solid 1px;
	border-left: #999 solid 1px;	
	margin: 0 0 0 3px;
	padding: 3px;
	font-size: 11px;
	font-weight: bold;
	background-color: #EEE;
	color: #000;
	font-family: Arial, Helvetica, sans-serif
	float: right;
}

#checkbox_1 {
	float: left;
	border: 0px;
}

#copyContainer {
	font-family: Arial, Helvetica, sans-serif;
}

#copyContainer h1 {
	font-size: 17px; 
	font-weight: normal;
	margin-bottom: 0px;
	text-align: left;
	background-color: #FFFFFF;
	color:#000000;
	font-family: 'Times New Roman', Times, serif;
}

#copyContainer h2 {
	font-size: 12px;
	margin: 18px 0 4px 0; 
}

.home #copyContainer h2 {
	font-size: 14px;
	margin: 18px 0 8px 0; 
	font-weight: bold;
}

#copyContainer h3 {
	font-size: 12px;
	margin-bottom: 0px; 
	font-weight: normal;
	font-style: italic;
}

#copyContainer p {
	text-align: left;
	margin-bottom: 8px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 16px;
}


#copyContainer img {
	float: left;
	border: 1px solid #999;
	margin-right: 5px;
}

#copyContainer ul {
	margin-left: 14px;
	margin-top: 0px;
	padding-left: 0px;
	margin-bottom: 12px;
	list-style-type: circle;
}

#copyContainer ul li {
	margin-bottom: 2px;
}

#copyContainer ul li.liSpaced {
	margin-bottom: 6px;
}

#copyContainer ol {
	margin-left: 22px;
	margin-top: 0px;
	padding-left: 0px;
	margin-bottom: 12px;
	list-style-type: decimal;
}

#copyContainer ol ol {
	list-style-type: lower-alpha;
	margin: 2px 0 12px 30px;
}

#copyContainer ol ol ol {
	list-style-type: lower-roman;
	margin: 2px 0 12px 30px;
}

#copyContainer ol li {
	margin-bottom: 2px;
}

#copyContainer ol li.liSpaced {
	margin-bottom: 6px;
}

#copyContainer ul.galleryList {
	font-size: 11px;
	font-weight: normal;
	font-style: italic;
	list-style-type: none;
	list-style: none;
	padding: 0;
	margin: 0;
}

#copyContainer ul.galleryList li {
	margin: 6px 0;
}

#copyContainer ul.galleryList li a 			{ text-decoration: none; }
#copyContainer ul.galleryList li a:link 	{ color: #000; }
#copyContainer ul.galleryList li a:visited	{ color: #000; }
#copyContainer ul.galleryList li a:hover	{ color: #9B242F; }
#copyContainer ul.galleryList li a:active	{ color: #000; }

p.credits {
	font-size: 10px;
}

h3.credits {
	font-size: 10px;
}

.errors {
	color:#C60C46;
}

a.copyBottom {
	display: block;
	margin: 24px 0 24px 0;
	border-top: 1px solid #333;
	text-align: right;
	line-height: 20px;
	font-size: 11px;
	font-style: italic;
}

#copyContainer a.copyBottom { text-decoration: none; }
#copyContainer a.copyBottom:link { color: #000; }
#copyContainer a.copyBottom:visited { color: #000; }
#copyContainer a.copyBottom:hover { color: #C60C46; }
#copyContainer a.copyBottom:active { color: #000; }

#featureContainer {
	position: relative;
	margin-top: 15px;
	height:300px;
}

#featureContainer h3, #featureContainer p, #featureContainer a {
	font-size: 11px;
	line-height: 13px;
	margin-bottom: 2px;
}

#featureContainer p {
	color: #666;
}

#newsFeature {
}
	
#newsFeature div {
	width: 120px;
	float:left;
}

#newsFeature div.clipLeft {
	border-right: 1px dotted #999;
	margin-right: 5px;
	float:left;
}

#featureControls {
	list-style: none;
	display: block;
	clear: both;
	margin: 0px;
	font-size: 13px;
	font-variant: small-caps;
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 4px;
}

#featureControls li {
	width: 140px;
	margin: 0px;
	padding: 2px;
	padding-left: 5px;
	margin-bottom: 6px;
	border-left: 5px solid black;
	background:url(../img/menu_black_bg.gif) no-repeat -300px 0;
	cursor:pointer;
}

#studentFeature {
	overflow: hidden;
}

#studentFeature img {
	border: 1px solid #999;
	float: left;
	margin-right: 5px;
}

#memberShip {
	position: absolute;
	width: 118px;
	top: 649px;
	left: 80px;
	text-align: right;
}

#memberShip h2 {
	font-size: 11px;
	font-weight: bold;
	padding: 0px;
	margin: 0px;
	line-height: 13px;
	margin-bottom: 4px;
	cursor:pointer;
}

#memberShip h2 a { text-decoration: none; }
#memberShip h2 a:link { color: #000; }
#memberShip h2 a:active { color: #000; }
#memberShip h2 a:visited { color: #000; }
#memberShip h2 a:hover { color: #9B242F; }

#memberShip input.inputBox {
	font-size: 11px;
	font-weight: bold;
	padding: 3px;
	margin: 0px;
	margin-bottom: 6px;
	width: 160px;
	background-color: #000;
	color: #FFF;
	border:1px solid #FFFFFF;
	font-family: Arial, Helvetica, sans-serif
	text-align: right;
}

#memberShip input.submitButton {
	font-size: 11px;
	font-weight: bold;
	padding: 1px;
	margin: 0px;
	background-color: #FFF;
	color: #000;
	border: 1px solid black;
	font-family: Arial, Helvetica, sans-serif
}

#bgContainer {
	width: 990px;
	position: absolute;
	top: 10px;
	left: 0px;
	overflow: visible;
}


#bgStrip {
	height: 700px;
	width: 80px;
       	float: left;
	overflow: hidden;
}

#bgFeature {
	width: 630px;
	height: 700px;
	overflow: hidden;
	float: right;
}

#bgFeature img {
	position: absolute;
	top: 0px;
	right: 0px;
}

.layoutWide #bgFeature {
	display: none;
}

#pageFooter {
	clear:both;
	margin:auto;
	width:980px;
	height: 30px;
	padding: 6px;
	font-size: 10px;
}

#pageFooter p.copyRight {
	float: left;
	padding-right: 5px;
}

#pageFooter p.copyRight a {
	border-left: 1px solid #999;
	padding-left: 5px;
}

#pageFooter p.siteCredits {
	float: right;
	margin-bottom: 20px;
}

#pageFooter a {
    text-decoration: none;
	font-weight: bold;
}
#pageFooter a:link { color: #000; }
#pageFooter a:active { color: #000; }
#pageFooter a:visited { color: #000; }
#pageFooter a:hover { color: #666; }

/* EVENTS CALENDER CSS */
div.calender tr.event td { border-top:1px solid #D7D7D4; }
div.calender tr.month td { padding-top:15px; border-bottom:1px solid black; font-size:14px; font-weight:bold; } 
div.calender tr.headings td { font-weight:bold; font-style:italic;  }

table.eventTable{padding-right:5px;}
table.eventTable td.eventTableLabel{font-weight:bold;}

span.event_image {width:150px; background-color:white; float:right; padding:5px;}

div#long_form_event {padding-top:30px;}

span.depts_tile { width:15px; margin-right:4px; text-align:center; font-weight:bold; color:white; float:left;  }
span#depts_fashion {background-color:#FBB040;}
span#depts_styling {background-color:#FAB485;}
span#depts_interior {background-color:#5261AC;}

.eventTable tr td {vertical-align:top; padding-right:5px;}


/* event registration form CSS */
#eventRegForm fieldset { 
margin:4px 0px 15px 0px; 
padding:0px;
width:400px;
}

#eventRegForm fieldset label {
  display: inline-block;
  margin:0px;
  padding:0px;
}

#eventRegForm  legend {
 color: #0F0F0F;
 text-align:left;
 padding: 0px 0px 5px 0px;
 font-weight: bold;
 margin:0px 0px 0px 0px; 
 }

#eventRegForm fieldset li {
  list-style: none;
  padding: 0px;
  margin-bottom: 3px;
}

#eventRegForm fieldset ol {
  margin: 0;
  padding: 0;
}

#contentContainer input.chkbox{
border:none;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.topSpace { margin-top:5px;}

#eventRegForm #newsletter{margin-right:3px; margin-top:8px; }

/* Home page announcement styles */

#announceBox {
	margin: 10px 0;
	padding-bottom: 8px;
	background: #a8111c;
	text-align: center;
}

#announceBox h2 {
	display: block;
	padding: 8px;
	margin: 0;
	font-weight: normal;
	color: #fff;
}

#contentContainer #announceBox h2 {
	border: none;
	padding-bottom: 0;
	text-transform: uppercase;
	font-size: 90%;
}

#announceBox p {
	margin: 0 8px 0 8px;
}


#announceBox a { text-decoration: none; }
#announceBox a:link { color: #fff; }
#announceBox a:active { color: #fff; }
#announceBox a:visited { color: #fff; }
#announceBox a:hover { color: #ccc; }


/* Homepage specific styles */

.home #contentContainer {
	margin-left: 248px;
	width: 360px;
	z-index: 999;
}

.home #contentContainer #news,
.home #contentContainer #featureContainer {
	margin-left: 126px;
}

.home #contentContainer #recentGallery {
	float: left;
}

.home #contentContainer h1 {
	margin-bottom: 12px;	
}

	.home #contentContainer h2 {
		border-bottom: 1px solid #000;	
		margin-top: 0;
	}

.home #recentGallery ul {
        margin: 0;
        list-style-type: none;
        float: left;
        width: 107px;   /* New */
    }
        .home #recentGallery ul li {
            margin-bottom: 6px;
            float: left;
            position: static;  /* New */
        }
        
            .home #recentGallery ul li a {
              position: relative;
              display: block;
              width: 107px;
              height: 76px;
              float: left;
              z-index: 1;
            }
            
                .home #recentGallery ul li a:hover {
                  font-size: 99.9%; /* Now WHY would IE need this? Who knows. */
                  z-index: 2;
                }
        
        .home #recentGallery img {
            border: none;
            margin: 0;
            float: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 107px;
			height: 78px;
			z-index: 1;
			-webkit-transition: all .1s ease-in-out;              
        }

            .home #recentGallery ul li a:hover img,
            .home #recentGallery ul li a:active img,
            .home #recentGallery ul li a:focus img {
              width: 214px;
              height: 156px;
              left: -53px;
              top: -39px;
              z-index: 1;             
              border: 3px solid rgba(64,64,64,0.90);
              -moz-border-radius: 3px;
              -webkit-border-radius: 3px;
              border-radious: 3px;
              -webkit-transition: all .2s ease-in-out;
            }

.home #newsFeature div {
	width: 114px;
}
	/* Quickfix for webkit, which somehow adds a margin-top */
	.home #featureContainer h3,
	.home #featureContainer p {
		margin-top: 0;
	}

.home #helpApproved {
	position: absolute;
	top: 396px;
	left: 375px;
}		

	.home #contentContainer #helpApproved {
		border-bottom: 0px;
	}

	.home #helpApproved a {
		display: block;
		width: 102px;
		height: 101px;
		background: transparent url('../img/fee-help.png') no-repeat top left;
		text-indent: -9999px;
	}

.home #intro {
	float: left;
	margin-top: 12px;
	clear: left;
}

.home #intro form {
	float: left;
	margin: 0;
}	
	.home #intro form input {
		margin: 0;
		padding: 0;
		width: 180px;
		height: 23px;
		background: #000;
		color: #fff;
		text-transform: uppercase;
		font-size: 11px;
		line-height: 23px;
		cursor: pointer;
	}