@import url("gallery.css");

/*
----------------------------------------------------------------------
GLOBAL BASELINES
---------------------------------------------------------------------- 
*/

html {
	overflow: -moz-scrollbars-vertical;
	background: #69001C;
}

body {
	text-align: left;/*for editor, usually would be center*/
	background: #FFFFFF;/*compulsory for editor background colour*/
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	font-size: 80%;
	line-height: 1.6em;
	height: 100%;
}

h1, h2, h3, h4, h5, h6, p, li, a:link {
	margin: 0 0 1.2em 0;/*set bottom margin to equate with the line-height*/
}

li  {
	font-size:1em;/*keeps the font size EQUAL to whatever is set in the body tag, ie. if it is set smaller than 1em here it will compound the sizing, eg. .9 of .9 would compound smaller still*/
	line-height: 1.2em;
}

/* prevent shrinking nested text, remains 1:1 with WHATEVER the body em is set to, eg. if the body font-size is .9em, so will all of these be. See immediately preceeding rule's comment*/
ol ol, ul ol, ol ul, ul ul, ol p, ul p {
	font-size:1em;
}

ul, ol {
	list-style-position: outside;
	margin: 1em 2em 1.5em 30px;
}

ul li, ol li{
	margin: 0;
}

a:link {
	color: #666;
	text-decoration: underline;
}

a:link:visited {
	color: #666;
}

a:link:hover {
	color: #900;
}

a:link:active {
	color: #900;
}

.invisible {
	display: none;
}

.Align-Right,
.alignRight{
	float: right;
}

img.Align-Right,
img.alignRight,
span.Align-Right img{
	padding-left: 30px;
	padding-bottom: 10px;
	border: 1px solid white;
}

.Align-Left,
.alignLeft{
	float: left;
}

img.Align-Left,
img.alignLeft,
span.Align-Left img {
	padding-right: 20px;
	padding-bottom: 10px;
	border: 1px solid white;
}

.Align-Center,
.alignCenter{
	text-align: center;
}

img.Align-Center,
img.alignCenter,
span.Align-Center,
span.alignCenter
{
	text-align: center;
}

a img { 
	border: none;/* do not make important as affects the gallery.If need to, then revert in gallery.css */
	text-decoration: none;
}

p.imgFramedLeft,
span.imgFramedLeft {
	float:left;
	margin-right: 20px;
}

p.imgFramedLeft img,
span.imgFramedLeft img {
	padding: 10px;
	border: 1px solid #996;
	background: #F6F9EC;
}

p.imgFramedRight,
span.imgFramedRight {
	float:right;
	margin-left: 20px;
}

p.imgFramedRight img,
span.imgFramedRight img {
	padding: 10px;
	border: 1px solid #996;
	background: #F6F9EC;
}

h1 {
	color: #000!important;
	letter-spacing: -0.04em;
	line-height: 1.2em;
	margin-top: 10px;
	margin-bottom: 20px;
	font-weight: normal;
}

h2 {
	color: #69001C;
	line-height: 1.2em;
}

.class-aboutus h2 {
margin-top:20px;
margin-bottom: 6px;
}

h3 {
	color: #000;
	line-height: 1.2em;
}

h4 {
	color: #69001C;
	line-height: 1.2em;
	margin-bottom: 0;
}

h4 a:link,
h4 a:visited,
h4 a:hover,
h4 a:active{
	color: #69001C;
	text-decoration:none;
}

h4 a:hover{
	cursor: pointer;
}

.floatRight, #floatRight {
	float: right;
}

.floatLeft, #floatLeft{
	float: left;
}

.alignRight {
	float: right;
	margin: 0 0 20px 20px;
}

.alignLeft {
	float: left;
	margin: 0 20px 20px 0;
}

.imgFramed img {
	padding: 10px;
	border: 1px solid #996;
	background: #F6F9EC;
}

fieldset {
	padding: 10px;
	margin: 10px 0;
	/*width: auto; */
}

hr {
	height: 2px;
	color: #dddddd;
	background-color: #dddddd;
	border: 0;
	border: 0px solid #dddddd;
	display:block; 
	clear:both; 
	margin-bottom: 30px;
}

img {
	display: block;
}/*removes the 'inline' space below an image for text descenders*/


/*
----------------------------------------------------------------------
layout/positioning - major elements
---------------------------------------------------------------------- 
*/

#perimeter {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	min-height:100%;
	background: #69001C url(../images/bg_main.png) top center no-repeat;/*set to be overall background colour*/
	text-align: center;/*usually would put this on the body, but affected the editor*/
	padding: 0;
}


#outerContainer {
	text-align: left;
	margin: 0 auto;
	padding: 0;
	height: 100%;
	position: relative;
	background:transparent;		
	width: 100%;
}


#innerContainer {
	background: transparent;
	margin: 36px auto auto;
	height:565px;
	width: 900px;
	position: relative;/*set context for inner elements, such as footer */
}

#upperNavigation {
	background: transparent;
	overflow: hidden;
}

#masthead {
	position: relative;
	background: transparent;
	height: 160px;
	overflow: hidden;
}

#mastheadLead {
	padding: 0;/*added bottom after doing adv, IE wanted it but Mac doubles up*/
	text-align: center;
	background: transparent;
	color: #666;
	height: auto;
	width: auto;
} 

#mastheadLead img{
	margin:0;
}

#mastheadTail {
	display: none;
}

#identity {
	position: absolute;
	top:0;
	left:0;
	z-index:100;
}

#identity img#logo {
	position: relative;
	display:none;
}

#content {
	padding: 0;
	width: auto;
	margin: 0;
}

#mainContent{
	float:left;
	margin: 0;/* FF, Safari */
	padding: 30px 20px 10px 20px;/* FF, Safari */
	display: inline; 
	background: #FFF;
	z-index: 90;
	width: 860px;
	height: 324px;
	position: relative;/*reset positioning context for positioned children */
	overflow:auto;/* to allow the form to overflow if has errors */
	/*border-left: 1px solid green;
	margin-left: 5px;*/
}

#id-1 #mainContent{
	background: #FFF url(../images/folio_paper_stack.jpg) 550px 30px no-repeat;
}

.class-portfolio #mainContent,
.class-aboutus #mainContent
{/*not galleries, only the intro page, spaced to accommodate the subnav height */
	margin-top: 24px!important;
	height: 320px;
	padding-top: 10px;
}

body.class-contactus #mainContent{
	padding-top: 16px;
	height: 338px;
}

#leftContent, #rightContent  {
	float:left;
	display: inline;
}




/*
----------------------------------------------------------------------
PAGEFOOT AND FOOTER
---------------------------------------------------------------------- 
*/


#pageFoot {
	margin: 0 auto;
	background: transparent;
	height:25px;
	width:auto;
	text-align:left;
	padding:10px 10px 2px 10px;
}

#pageFoot a {
}

#footer {
	color: #DDD;
	text-align:left;
	font-size:.8em;
	position: absolute;
	top: 537px;

	left: 20px;
	z-index:99;
}


#footer li {
	display: inline;
}

#footer p {
	display: inline;
	margin-right: 10px;
}

#footer a {
	display: inline;
	margin-right: 10px;
}



/*
----------------------------------------------------------------------
element treatments -specific
---------------------------------------------------------------------- 
*/

#contactDetails {
	float: right;
	width: 175px;
	background: transparent;
	border-left: 1px solid #DDD;
	margin-left: 20px;
	margin-right:0;
	margin-top: 15px;
	margin-bottom:0;
	padding: 0px 10px 0 20px;
	color: #333;
}

#contactDetails p {
	margin-bottom:1em!important;
}



/*
----------------------------------------------------------------------
floatClearing 
---------------------------------------------------------------------- 
*/

.floatClear,#floatClear  {
	clear: both;
	line-height : 0em;
	font-size: 0em !important;
	background-color: transparent;
}


/*
----------------------------------------------------------------------
custom classes
---------------------------------------------------------------------- 
*/

.invisible {
	display:none;
}

div.floatClear, span.floatClear {
	clear: both;
	line-height : 0em;
	font-size: 0em;
	background-color: transparent;
}



/*
----------------------------------------------------------------------
contact form
---------------------------------------------------------------------- 
*/


.class-contactus legend  {
	color: #FFFFFF;
	font-family: "arial black";
	background-color: #666;
	padding: 3px 8px;
	display: none;
	}

.class-contactus label   {
	font-weight: bold;
	color: #333;
	text-align: left;
	display: block;
	float: left;
	position: relative;
	bottom: -3px;
	}

.class-contactus label.fieldLabel	{
	display: inline;
	float: none;
	}
	
.class-contactus input.formInputField   {
	/*border: solid 1px #666;*/
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 2px;
	width: auto;
	}

.class-contactus form input.basicSubmitButton {	
	margin: 0px 0 0px 5px!important;
	width: 211px;
	**padding-left: 211px;/*IE7 fix to make the value text disappear*/
	height: 50px;
	background: url(../images/send_message.jpg) 0 0 repeat-x;
	border:none;
	color:transparent;/*FF to hide the value text*/
	cursor:pointer;
}


.class-contactus fieldset#contactFormFieldset {
	margin-top: 0px;
	background: #FFF;
	border: 0 none!important;
	z-index: 100!important;
	padding:0;
}

.class-contactus fieldset#contactFormFieldset label {
	color: #333;
}

/*in normal state*/
#valid-firstName,
#valid-lastName,
#valid-subject,
#valid-email,
#valid-message {
/*background: #EEE;around each input*/
	padding: 5px;
	margin-bottom: -10px;
}

#input-valid-firstName,
#input-valid-lastName,
#input-valid-subject,
#input-valid-email,
#input-valid-message
{
	width: 250px;
	border: 1px solid #FFFF99;
	background-color: #FFFFCC;
	color: #000000;
	margin: 0;
	padding: 2px;
}
	
#input-valid-message {
	width: 500px;
	height: 50px;
}
	
	
#input-valid-firstName p,
#input-valid-lastName p,
#input-valid-subject p,
#input-valid-email p,
#input-valid-message p
{
	color: #000000;
}


.class-contactus textarea{
	overflow:auto;
}









p.Paragraph-Warning {
	border-top: 1px solid #FF0000;
	border-bottom: 1px solid #FF0000;
	padding: 2px 5px 0px 5px;
	color: #000;
	background: #FFCFCC;
	margin: 10px 0 20px 0;
}

p.Paragraph-Centred {
	text-align: center;
}

p.PullQuoteLeft {
	float: left;
	clear: left;
	border-right: 1px dotted #CACACA;
	width: 200px;
	padding: 0 20px 60px 0;
	background: #FFFFFF;
	margin: 0 20px 20px 0;
	font-size: 1.3em!important;
	line-height:2.4em;
	text-align: right;
	color: #000;
}

p.PullQuoteRight {
	float: right;
	clear: right;
	border: 1px solid #CACACA;
	width: 150px;
	padding: 10px;
	background: #FAFAFF;
	margin: 0 0 10px 20px;
}


p.Paragraph-Boxed {
	background: #F6F9EC;
	border: 1px solid #996;
	padding: 20px;
}

p.indented {
	margin-left: 60px;
}

.pagenotpublished a.pageNames {
	text-decoration: line-through;
}


.class-contactus form#contactForm p.alert {
	color: red;
	padding: 2px 0 8px 20px;
	background: url(http://www.itchybrain.com.au/barebones/images/alert.gif) 0 2px no-repeat;
	overflow: visible;
	line-height: 1.2em;
	margin-top: 5px;
}


/*
-------------------------------------------
contains the link for the phone number
*/

#feature {
	position: absolute;
	top: 0px;
	width: 195px;
	height: 50px;
	left: 670px;
}

#feature a {
	top: 0;
	left:0;
	width: 195px;
	height: 50px;
	display:block;
	text-indent: -9999em;
}

#feature a:link,
#feature a:visited,
#feature a:hover,
#feature a:active,
#feature a:focus {
	border: 0 none!important;
}

/*
----------------------------------------------------------------------
navigaton
----------------------------------------------------------------------  
*/

#primaryNav {
	position: absolute;/* move and reset positioning context*/
	top: 114px;
	left:0;
	height: 46px;
	width: 720px;/*subtract padding. width is also interdependent upon second level ul width, li.topLevelNav ul*/
	padding:0 0 0 180px;
	margin:0;
	list-style:none;
	z-index:100;
}

/* all anchors */
#primaryNav a {
	text-decoration: none;
	font-weight: normal!important;
}

/* all list elements */
#primaryNav li { /*float all list items to make them horizontal*/
	margin: 0;
	padding:0;
	float: left;
	display: block;
	height: 46px;/*height of top level anchors*/
}
	
/*top level NEUTRAL */
#primaryNav li a {
	color: #999;
	font-weight: bold;
	display: block;
	width: 176px;/*width of top level anchors*/
	height: 46px;/*height of top level anchors*/
	line-height: 57px;
	font-size: 1.5em;
	text-align: center;
	text-transform: uppercase;
}

/*top level CURRENT */
#primaryNav li.current a {
	color: #69001C;/*affects top level when coupled with next more specific entry */
}

/*top level HOVER */
#primaryNav li.topLevelNav a:hover { 
	text-decoration: none;
	color: #000;
}
	

/* TOP LEVEL TAB NAV MATRIX  */

/* anchors show left side */
#primaryNav li.topLevelNav a {
	display: block;
	position: relative;
}

/* IMAGES */

/* anchors show left side */
#primaryNav li#Home a {
	background: url(../images/nav_matrix_left_1.png) no-repeat;
}

#primaryNav li#AboutUs a {
	background: url(../images/nav_matrix_left_2.png) no-repeat;
}

#primaryNav li#Portfolio a {
	background: url(../images/nav_matrix_left_3.png) no-repeat;
}

#primaryNav li#ContactUs a {
	background: url(../images/nav_matrix_left_4.png) no-repeat;
}

/* lists show right side */
#primaryNav li#Home {
	background: url(../images/nav_matrix_right_1.png) no-repeat;
}

#primaryNav li#AboutUs {
	background: url(../images/nav_matrix_right_2.png) no-repeat;
}

#primaryNav li#Portfolio {
	background: url(../images/nav_matrix_right_3.png) no-repeat;
}

#primaryNav li#ContactUs {
	background: url(../images/nav_matrix_right_4.png) no-repeat;
}

/* POSITIONING */

/* NEUTRAL */
#primaryNav li.topLevelNav a {
	background-position: 0 -50px!important;
}

#primaryNav li.topLevelNav {
	background-position: 100% -50px!important;
}


/* CURRENT positioning */
#primaryNav li.current a {
	background-position: 0 0!important;

}
 
#primaryNav li.current {
	background-position: 100% 0!important;

}
 

/* HOVER positioning */

#primaryNav li.topLevelNav a:hover, 
#primaryNav li.topLevelNav:hover a {
	background-position: 0 -100px!important;
}

#primaryNav li.topLevelNav:hover, 
#primaryNav li.topLevelNav.over {
	background-position: 100% -100px!important;
}


/*reverse current tab hover state*/

#primaryNav li.topLevelNav.current a:hover, 
#primaryNav li.topLevelNav.current:hover a {
	background-position: top left!important;
}

#primaryNav li.topLevelNav.current:hover {
	background-position: top right!important;
}


/*---------------------
SUBNAV
----------------------*/

/* conceal second level */
#primaryNav li ul {
	margin: 0;
	padding: 0;/*doesn't affect things visually, as it is overridden later*/
	display: none;/*if displayed block, due to positioning would be z-stacked neatly on top of each other*/
}	

/* general characteristics */
#primaryNav li.topLevelNav ul, 
#primaryNav li.current ul  { 
	position: absolute;
	top: 46px;/*positions the subnav row, relative to height of the first level anchors */
	right: 0;
	float: right;
	padding-top: 0px;
	height: 25px;
	width: 430px;/* 900px subtract padding */
	**width: 429px;/* 900px subtract padding */
	padding-left: 470px;
	background: url(../images/bg_subnav.gif) 0 0 repeat-x;
	}
	
#AboutUs ul.submenu  { 
	width: 525px!important;/* 900px subtract padding */
	padding-left: 375px!important;
	zdisplay:none!important;
	}

/* display the nav upon hover */
/*ensure the second level hover dominates the current state by switching the whole ul z-index*/
#primaryNav li.topLevelNav:hover ul, 
#primaryNav li.over ul {
	display: block;
	z-index: 6000;
}

/*bring the subnav to the front when portfolio is current */
#primaryNav li.current ul {
	display: block;
}

#primaryNav li.current ul li {
	height: 25px;
}


/* NEUTRAL state*/
#primaryNav li.topLevelNav ul a, 
#primaryNav li.current ul a {
	display: block;
	border: 0 none!IMPORTANT;
	float: left; /*needed because ie doesn't inherit the float*/
	color: #999; /*doesn't affect, overridden somewhere?*/
	width: auto;
	margin-left: 20px;
	padding:0;
	width: auto;/*width of 2nd level anchors*/
	height: 25px;/*height of 2nd level anchors*/
	line-height: 25px;
	font-size: .9em;
	text-align: center;
	text-transform: capitalize;
	background-image: none!important;/*cancels out unnecessary bgd images */
	white-space: nowrap;
	white-space: nowrap;
}

/* CURRENT state*/
#primaryNav li.current ul li.current a, 
#primaryNav li.topLevelNav ul li.current a,
#primaryNav li.topLevelNav ul li.current{
	color: #000; /*doesn't affect, overridden somewhere?*/
	background-image: none!important;/*cancels out unnecessary bgd images */
}

/* CURRENT HOVER state*/
#primaryNav ul ul li.current:hover ul a { /*for ie - the specificity is necessary*/
	background-image: none!important;/*cancels out unnecessary bgd images */
}
	
/*the second level current anchors text hover*/
#primaryNav li.topLevelNav ul li a:hover,
#primaryNav ul li.current a:hover { 
	color: #000;
	background-image: none!important;/*cancels out unnecessary bgd images */
}


/*
----------------------------------------------------------------------
login
---------------------------------------------------------------------- 
*/

body#login {
	background: #F0F0C0;
	padding-top: 100px;
}

fieldset.login {
	padding: 30px 10px 10px 10px;
	margin: 0 auto;
	width: 30em;
	background: #FFFFFF;
	text-align: center;
	border: 3px solid #A7B191;
	-moz-border-radius: 1em;
}


fieldset.login form{
	text-align: center;
	margin: 15px 10px 20px;
	background: #E0E0AA;
	padding: 10px;
	-moz-border-radius: 1em;
}

body#login form input.basicSubmitButton{
	padding: 4px 6px;
	background: #A7B191;
	color: #FFFFFF;
	border: 2px solid #444;
	border-top-color: #F0F0C0;
	border-left-color: #F0F0C0;
}

body#login form input.basicSubmitButton:active{
	border-top-color: #444;
	border-left-color: #444;
	border-bottom-color: #F0F0C0;
	border-right-color: #F0F0C0;
}

fieldset.login label {
	display:block;
	text-align: center;
	width: 100%;
	margin:0;
}

body#login p.alert {
	color: #000000;
	padding: 5px 0 6px 20px;
	background: #FFE5E5 url(http://www.itchybrain.com.au/barebones/images/alert_bright.gif) 10px center no-repeat;
	overflow: visible;
	line-height: 1em;
	margin: 5px 0;
	font-size: .88em;
	border-top: 1px solid red;
	border-bottom: 1px solid red;
}

body#login a {
	color: #000000;
}

body#login a:hover {
	background-color: #FF0000;
	padding: 2px 0;
	color: #FFFFFF;
}

body#login input.formInputField   {
	border: solid 1px #A7B191;
	background-color: #FFFFFF;
	color: #000000;
	margin: 0;
	padding: 2px;
	width: auto;
	}

#login img {
	margin: 2px auto;
	}


#mainContentLead {
display:none;
}

/* NEWS ----------------------*/


#newsColumn {
display:none;/* remove from all but the home page*/
}


/* NEW ELEMENTS */

h1#intro {
	width: 190px;
	height: 250px;
	position: absolute;
	left: 80px;
	top: 41px;
	background: transparent;
	text-align: right;
	color: #000;
	font-weight: normal;
	font-size: 180%;
	letter-spacing: .0005em;
	background: transparent url(../images/lupe.jpg) 30px 110px no-repeat;
}

h2#subtext {
	width: 230px;
	height: 246px;
	position: absolute;
	left: 285px;
	top: 80px;
	color: #888;
	z-index:100;
	font-weight:normal;
	line-height: 1.57em;
	font-size: 140%;
}

h2#subtext a,
h2#subtext a:visited {
	text-decoration: none;
	color: #333;
}

h2#subtext a:hover,
h2#subtext a:active {
	color: #69001C;
}


p#viewMoreWork{
	width: 211px;
	height: 49px;
	position: absolute;
	left: 590px;
	top: 290px;
}

p#viewMoreWork a{
	width: 211px;
	height: 49px;
	background: transparent url(../images/view_more_work.png) top left no-repeat;
	display:block;
	text-indent: -9999em;
}

/* mozilla only, remove the dotted border from active links */
:focus {
	outline:0 none!important;
}


/* TEMP -----------------------------*/

#mediumImage {
	height: auto;
}

body.class-aboutus h1,
body.class-portfolio h1 {
	display:none;
}

img#sample {
	display:none
}

body#id-1 img#sample {
	position:absolute;
	top: 216px;
	left: 576px;
	z-index:100;
	display:block;
}


/* CONTENT COLUMNS---------------------- */


#leftColumn {
	width: 200px;
	padding: 0;
	background: #FFFFFF;
	margin-right: 20px;
	font-size: 1.3em!important;
	line-height:2.4em;
	text-align: right;
	color: #000;
	float:left;
}

#rightColumn {
	border-left: 1px dotted #CACACA;
	float:left;
	margin-bottom: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 20px;
	width: 500px;
}

/* BRIEF FORM -----------------------------*/

form#brief_form {
line-height: 3em!important;
padding-bottom: 30px;
}

p#brief_intro, p#brief_intro_errors {
line-height: 1.2em!important;
}

p#brief_intro_errors, .brief-error {
color: #f00;
}
.brief-error {
line-height: 1em!important;
margin-bottom: 1em;
}

#client_details {
}

#client_details label {
width: 200px;
float:left;
margin: 0px;
display:block;
}

#client_details input {
width: 600px;
}

#client_details textarea {
width: 810px;
}

#brief_details {
margin-top: 30px;
}

#brief_details label {
margin-right: 20px;
}

textarea#project-description,
textarea#project-further-design-details
{
width: 810px;
height: 200px;
}

input#project-title,
input#project-audience-1,
input#project-audience-2,
input#project-existing-details-1,
input#project-existing-details-2 {
width: 600px;
}

p.credit {
font-size: 80%;
}


/* logos ------------- */

#footerTail {position: relative;}

a#rebrand100 {
	display:block;
	background: transparent;
	width: 150px;
	height: 0px;
	padding-top: 30px;
	text-indent: -9999em;
	position: absolute;
	top: 42px;
	left:-13px;
	}
	
a#ozGraphix {
	display:block;
	background: transparent;
	width: 50px;
	height: 0px;
	padding-top: 50px;
	text-indent: -9999em;
	position: absolute;
	top: 41px;
	left: 164px;
	}