/* CSS Document */
/*@import url("artistPortrait.css");*/

/* =remove default styling of common browser-------------------------------- */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

/* =Headings -------------------------------------------------------------- */
h1,h2,h3,h4,h6 { 
font-family:Georgia, "Times New Roman", Times, serif;
color:#a6006b;
clear:both;
}

h3{
padding-bottom:0.4em;
}

h4{
font-family: Arial, "Lucida Grande", Helvetica,  sans-serif;
color:#888888;
font-weight:500;
clear:both; 
}

h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; line-height:0.9;}
h4 { font-size: 1.2em; line-height:2;}
h5 { font-size: 1em; font-weight:bold; }
h6 { font-size: 1.1em; }

/* Text elements-------------------------------------------------------------- */
body {
font-family: Arial, "Lucida Grande", Helvetica,  sans-serif;
line-height: 1.4; /* Unitless for proper inheritance */
}
/* This is where you set your desired font size. The line-height 
and vertical margins are automatically calculated from this. 
You have to add an extra calculation here because of IE, so that 
all users may resize text manually in their browsers.
The top one is for IE: The percentage is of 16px (default IE text size)
10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth).
The second value is what all other browsers see (the wanted font size). */
body        { font-size: 87.5%; }   /* IE */
html > body { font-size: 14px; }  /* Other browsers */
p           { margin: 0 0 1.5em 0; /*text-align:justify;*/ }
p.last      { margin-bottom:0; }
p img       { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */
a           { color: #125AA7; text-decoration: underline; outline: none; }
a:hover     { color: #000; text-decoration: underline; }

html {
overflow-y:scroll;
}

/* =quotations..............................................................*/

blockquote  { 
margin: 1.5em 0 1.5em 1.5em; color: #666; 
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic; 
font-size: 1.2em;
line-height:1.35em;
}

blockquote cite {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-style:normal;
color:#000000;
}

blockquote p { 
text-align:right;
}

#quotemark {
font-size:1.5em;
color:#BBBBBB;
}
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; }
code        { font:0.9em Monaco, monospace; }

/* =horizontal ruler..............................................................*/
hr {
background:#BBBBBB;
color:#BBBBBB;
clear: both; 
float: none; 
width: 100%; 
height: 0.1em;
margin: 0 0 1em 0;
border: none; 
}
* html hr { margin: 0 0 1.2em 0; } /* IE6 fix */
/* =body..................................................................................*/
#iecenter {
text-align:center;
}
/*=container..................................*/
#container {

text-align:left;
	/*=march08 padding margin and width*/
	padding:0;
	margin:0 auto;
	width:900px;

/*margin:auto;
max-width:64.25em;
   width:expression(document.body.clientWidth > 900? "900px" : "auto");
this makes sure that the max width is 900 pixels (see below for
head script) */
background-color:#FFFFFF;
padding-top: 20px;
}
/*=skip navigation for screen readers.......................*/
#skipNav {
display:none;
}

/*=branding.................................................*/
#branding {
	/*=march08width*/
	width:900px;
	/*width: 100%;*/
	height: 82px;
	margin:0;
	padding:0;
}

#rocketsLogo h1{
	
	/*=march08width*/
	width:180px;
	margin:0;
	padding:0;	

/*width:20%;*/
height:82px;
background:url(images/Rocketslogo_loop_v1.jpg) top no-repeat; 
text-indent: -9999px;
float:left;
}

/*=page titles................................................*/
#TitleIndex, #TitleArtists, #TitleProjects, #TitleFilms, #TitleNews, #TitleContactUs, #TitleCommunityOfPractice, #TitleWorkingWithUs, #TitleSuccess, #TitleError {
background-color:#ffffff;
	padding:12px 0 0 0;
	margin:0;
	/*width: 44.6%;*/
	width: 420px;
float:left;
}
#TitleIndex h2, #TitleArtists h2, #TitleProjects h2, #TitleNews h2, #TitleFilms h2, #TitleCommunityOfPractice h2, #TitleWorkingWithUs h2, #TitleContactUs h2, #TitleSuccess h2, #TitleError h2 {
	padding:0;
	margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
height: 38px;
}


#TitleIndex h2{
color:#db6100; border-bottom: solid 8px #db6100;
}
#TitleArtists h2{
color:#ff6ec7; border-bottom: solid 8px #ff6ec7;
}
#TitleProjects h2{
color:#ff47c5; border-bottom: solid 8px #ff47c5;
}
#TitleNews h2, #TitleError h2{
color:#ff7800; border-bottom: solid 8px #ff7800;
}
#TitleFilms h2{
color:#005bd1; border-bottom: solid 8px #005bd1;
}
#TitleCommunityOfPractice h2{
color:#00a699; border-bottom: solid 8px #00a699;
}
#TitleWorkingWithUs h2{
color:#ff7800; border-bottom: solid 8px #ff7800;
}
#TitleContactUs h2, #TitleSuccess h2{
color:#ff85ab; border-bottom: solid 8px #ff85ab;
}
/*=title right.........................................*/

#bannerInfo a, #bannerInfo p{
font-size:12px;
color:#ffffff;
}
	#bannerInfo {
	display:inline;
	width:280px;
	/*JS SOLUTION:width:33.3%;*/
	float:left;
		padding:12px 0 0 0;
		margin:0;
	height:46px;
	text-align:center;
}

#homePage #bannerInfo{
background-color:#db6100;
}
#artistsPage #bannerInfo{
background-color:#ff6ec7;
}
#projectsPage #bannerInfo{
background-color:#ff47c5;
}
#newsPage #bannerInfo{
background-color:#ff7800;
}
#filmsPage #bannerInfo{
background-color:#005db1;
}
#communityPage #bannerInfo{
background-color:#00a699;
}
#workingPage #bannerInfo{
background-color:#ff7800;
}
#contactPage #bannerInfo{
background-color:#fb85ab;
}
/*=layout...................................................*/
/*#content{
position: relative;
width: auto;
}*/
/*JULIA SOLUTION - APPLY TO OTHER CONTENT AREAS*/
#content_main {
float:left;
width:380px;
	/*width:40%;*/
	padding:0 40px 0 20px;
	margin:0;
/*padding-left:2%;
padding-right:3%;
display:inline;*/
text-align:left;
border-left: solid #BBBBBB 1px;
/*margin:0 0 0 1%;
width:400px;*/
}
/*END JULIA SOLUTION*/
#content_supp img{
margin:0;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
float:left;
}
#content_supp_overalls img{
border: solid 1px #000000;
/*padding-top:25px;
padding-left:20px;
padding-right:20px;
float:left;*/
}
/********************************/
#content_supp, #projectContent_supp, #a2aContent_supp, #workingContent_supp, #content_supp_overalls, #news_supp, #contactContent_supp, #communityContent_supp {
	margin:0;
	width:240px;
	padding:15px 25px 0 15px;
	/*width:27%;*/
text-align: left;
background-color:#EEEEEE;
display:inline;
float:left;
/*width:220px;*/
}
body#homePage #content_supp{
background-color:#FFFFFF;}


body#filmsPage #content_main {
float:left;
width:660px;
height:450px;
padding-left:20px;
display:inline;
text-align:left;
border-left: solid #BBBBBB 1px;
}
#rocketsFilm{
width:320px;
float:left;
}
#overallsFilm{
width:320px;
padding-left:20px;
float:left;}

body#homePage .sectionPic img{
width:360px;
padding-bottom:15px;
}


#communityContent_supp{
background-color:#FFFFFF;
border-left: solid #BBBBBB 1px;

}
#news_supp{
background-color:#f7ecb7;

}

#newsDetail_content_supp{
background-color:#ffffff;
}
#newsDetail_content_supp img{
padding:0 0 4px 0;
float:right;
}
#contactContent_supp{
background-color:#DDDDDD;
}


/*=index...................................................*/	
body#homePage #content_supp {
margin:0;
padding:0;
background-color:YELLOW;
}

#flashMovie {
width:240px;
margin:0;
padding:0;
	/*float: right;*/
}
#indexPageNews{
width:320px;
background-color:#DDDDDD;
padding:30px;
padding-top:20px;
}
/*=news........................................................*/	


#flowersArtists{
}

#news_supp h3{
color: #a6006b;
font-weight: bold;
}
#secondaryText{
font-weight:normal;
color:#000000;
}
/*=NAVIGATION:...www.tyssendesign.com.au/articles/css/single-image-replacement-rollovers-with-suckerfish-dropdowns*/

/*supp navigation / gallery pages ...................................................*/
#nav_supp{
float: right;
}
#nav_supp a{
display:block;
font-family: Georgia, "Times New Roman", Times, serif;
color:#a6006b;
}
#nav_supp a:hover{
text-decoration:none;
color:#bbbbbb;
}
/*highlighting current page*/
#artists .on a{
color:#ff85ab;
}

/*=main navigation.................................................................*/

#nav_main { 
position: relative;
width: 160px;
height: auto;
list-style: none;
text-align: left;
float: left;
}


ul.IR li {
position: relative;
font-size: 1em;
}

.IR em {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

.nav li { 
/*height: 75px;
width: 50px;*/
float: left;
padding-bottom: 0;
margin-right: 10px;
}

.nav li, .nav li em { width: 70px; height: 110px; }

.nav_home em, .nav_artists em, .nav_projects em, .nav_films em, .nav_news em, .nav_contact em, .community_about em, .nav_working em  {
background: url(images/rocketsButtons4.png) no-repeat;
/*cursor: pointer;*/
}
/*The cursor: pointer; is needed for IE which won’t show the normal ‘hand’ cursor when hovering over the links with this IR method. (For IE5+ you need to use cursor: hand; which, unfortunately, doesn’t validate, so you may want to move it to an IE5-only stylesheet accessed by conditional comments.)
*/

nav_home { left: 0; }
.nav_home em {
background-position: 0 0;
}
.nav_home:hover em {
background-position: 0 -110px;
}
/**/
nav_artists { left: 0; }
.nav_artists em {
background-position: -70px 0px;
}
.nav_artists:hover em {
background-position: -70px -110px;
}
/**/
nav_projects { left: 0; }
.nav_projects em {
background-position: -420px 0;
}
.nav_projects:hover em {
background-position: -420px -110px;
}
/**/
nav_films { left: 0; }
.nav_films em {
background-position: -280px 0;
}
.nav_films:hover em {
background-position: -280px -110px;
}
/**/ 
nav_news { left: 0; }
.nav_news em {
background-position: -140px 0;
}
.nav_news:hover em {
background-position: -140px -110px;
}
/**/
nav_contact { left: 0; }
.nav_contact em {
background-position: -210px 0;
}
.nav_contact:hover em {
background-position: -210px -110px;
}
/**/
community_about { left: 0; }
.community_about em {
background-position: -350px 0;
}
.community_about:hover em {
background-position: -350px -110px;
}
/**/
nav_working { left: 0; }
.nav_working em {
background-position: -490px 0;
}
.nav_working:hover em {
background-position: -490px -110px;
}

/**/
/*IE doesn’t accept :hover on any elements other than pseudo elements. To get it to work for other elements, we need something like the whatever:hover and attach it to the body like so:*/
body { behavior: url(hover.htc); }

/*   MA Inclusive buttons /////////////////*/


.inclusive {
padding:30px 0 0 0;
margin:0;
text-indent:-9999px;

}

.inclusive a{
display:block;
width:150px;
height:56px;
background:url(images/ma-inclusive-arts-button.jpg) no-repeat;
}

.inclusive a:hover{
background-color:red;
background:url(images/ma-inclusive-arts-buttonHOV.jpg) no-repeat;
}

/*end NAVIGATION*/

/* =PROJECTS:.................................................................*/
#a2aOutline, #a2aCourse{
width: 430px;
border-bottom:solid 2px #EEEEEE;
}
/*=contactUs.....................................................*/
/*#contact{
width:400px;
}*/

/*#contact*/ #phone h1{
	margin:0;
	padding:10px 0 0 0;
width:160px;
height:120px;
background: url(images/phone.gif) left no-repeat;
text-indent:-9999px;
}
/*#contact*/ #email h1{
	margin:0;
	padding:10px 0 0 0;

width:160px;
height:120px;
background: url(images/computer.gif) left no-repeat;
text-indent:-9999px;
}
/*#contact */#letter h1{
	margin:0;
	padding:10px 0 0 0;

width:160px;
height:120px;
background: url(images/envelope.gif) left no-repeat;
text-indent:-9999px;
}

/*#contact */#phone p, /*#contact */#email p, /*#contact */#letter p{
	margin:-124px 0 0 0;
	padding:0 0 0 180px;
float:left;
}
/*=form*/


fieldset{
border:none;
}

label{
display:block;
}

#submitText{
width:240px;
padding:10px 0 20px 0;}

textarea{
height:100px;
}

input.radio, input.checkbox, input.submit {
width:auto;
}

input.radio{
float:left;
margin-right: 1em;
}

input:focus, textarea:focus{
background:#ffc;
}

input, textarea{
border: solid 4px #AAAAAA;
}

#sendmeclearme{
padding-top:2em;
padding-bottom:2em;
}

#smallPrint{
padding-bottom:2em;
font-size:0.8em;
line-height:1.2em;
}
#smallCredit{
width:220px;
padding-top:10px;
float:right;
}
/*=NEWS..editable sections.................................*/

.section{
	height:auto;
	border-bottom: solid 2px #BBBBBB;
	line-height:1.45em;
}
.readmore{ 
/*margin:0.5em;*/
font-family: Georgia, "Times New Roman", Times, serif;
/*font-weight: bold; */
font-size: 1em;

}

.section em{ 
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
}

.readmore a {
color:#a6006b;
}

.readmore a:hover {
color:#ff6ec7;
}

.sectionPic{
width:90px;
padding-right:20px;
padding-top: 7px;
float:left;}

#rocketArtistsPic {
padding-bottom:10px;
padding-top:0px;
}

.sectionPicMed{
width:160px;
padding-right:20px;
padding-top: 7px;
float:left;}

.sectionPicBig{
width:200px;
padding-right:20px;
padding-top: 7px;
float:left;}

.newsFeedTitles{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 1em;
color:#000000;
}


.newsFeedItems{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
color:#000000;
margin-bottom:10px;
}

/*=ARTISTPAGE..............................*/
body#artistsPage #content_artists {
width:78%;
padding-right:0px;
padding-left:2%;
text-align:left;
float:left;
z-index:999;
/*margin:0 0 0 1%;
padding-left:1em;
/*padding-right:0.5em;*/
display:inline;
border-left: solid #BBBBBB 1px;
}


#artistContent{
padding-top:-30px;
}
.artistNotes{
border-bottom:solid 2px #EEEEEE;
float:right;
}
.artistPhoto{
padding-top:24px;
padding-bottom:20px;
width:100px;
float:left;
}
.artistWords h6{
border-bottom:solid 2px #EEEEEE;
}
.artistWords{
width:240px;
padding-top:20px;
padding-left:20px;
padding-right:10px;
float:left;
}
.imageDetail{ 
float: right;
padding-top:29px;
}
/*=Community of Practice....................................*/
#communityIntro .sectionPic{
width:200px;
height:160px;
float:left;
}
#communityIntro .jobDescript {
font-family: Georgia, "Times New Roman", Times, serif;
padding-left: 0.5em;
color:#a6006b;
font-size: 1em;
}
#communityList ul{
padding-bottom:0.4em;
padding-top: 0.4em;
border-bottom: dotted 1px #FF66CC;
}
#steeringGroup{
padding-top:1em;
}
#steeringGroup .sectionPic{
width:205px;
height:154px;
float:left;
}
/*Links logos*/


#cupp em{
background:url(images/cupp.png) no-repeat;
padding-top:2px;
width:150px;
height:95px;
float:left;
text-indent:-9999px;
}
#artscouncil em{
background:url(images/ace-logo_1_BLACK.png) no-repeat;
padding-top:10px;
width:250px;
height:70px;
float:left;
text-indent:-9999px;
}
#uob em{
background:url(images/universityOfBrighton.png) no-repeat;
padding-top:0px;
width:150px;
height:55px;
float:left;
text-indent:-9999px;
}
#phoenixarts em{
background:url(images/phoenix.png) no-repeat;
padding-top:4px;
width:150px;
height:40px;
float:left;
text-indent:-9999px;
}
#carousel em{
background:url(images/Carousel.png) no-repeat;
padding-top:5px;
width:150px;
height:54px;
float:left;
text-indent:-9999px;
}

#artspider em{
background:url(images/artspider.png) no-repeat;
padding-top:8px;
width:150px;
height:40px;
float:left;
text-indent:-9999px;
}
#circlesnetwork em{
background:url(images/circlesNetworks.png) no-repeat;
padding-top:10px;
width:160px;
height:70px;
float:left;
text-indent:-9999px;
}
#projectartworks em{
background:url(images/projectArtWorks.png) no-repeat;
padding-top:8px;
width:150px;
height:40px;
float:left;
text-indent:-9999px;
}

#sussexdowns em{
background:url(images/sussexdowns.png) no-repeat;
padding-top:8px;
width:150px;
height:50px;
float:left;
text-indent:-9999px;
}

#intoart em{
background:url(images/intoartLogo.jpg) no-repeat;
padding-top:8px;
width:150px;
height:19px;
float:left;
text-indent:-9999px;
}

#corali em{
background:url(images/coraliLogo.jpg) no-repeat;
padding-top:8px;
width:150px;
height:50px;
float:left;
text-indent:-9999px;
}

#InQbate em{
background:url(images/inqbateLogo.png) no-repeat;
padding-top:8px;
padding-right:15px;
width:100px;
height:100px;
float:left;
text-indent:-9999px;
}

#LearnHigher em{
background:url(images/learnhigher.png) no-repeat;
padding-top:8px;
width:100px;
height:100px;
float:left;
text-indent:-9999px;
}
/*=Working Together........................................*/
body#workingPage .sectionPic{
padding-top:0.5em;
width:220px;
}

#workingTogether li{
padding-left:1em;
}


/*=bullet List........................................*/

.bulletList{
padding:0 0 10px 20px;
}
.bulletList li{
list-style-type:disc;
padding-bottom:10px;
}

/*=Error + success pages..............................*/
body#errorPage #content, body#successPage #content{
color:#FFFFFF;
width:360px;
height:320px;
padding:40px;
float: left;
}
body#errorPage #content{
background-color:#ff7800;}

body#successPage #content{
background-color:#ff85ab;}
/*=footer...........................................................*/
#footer{
text-align:center;
padding-top:2%;
font-size:0.85em;
width:100%;
font-color:#BBBBBB;
clear: both;
}
.clearing {
height: 0;
clear: both;
}
/*=Sitemap..................................................................*/
#sitemap{}




/*=Film2008........................................*/

.film2008 {
padding-bottom:20px;}

#newsDetail_content_supp{
padding-right: 20px;
}

.filmLink {
display:block;}