@import url("rounded-buttons.css");
@import url("sIFR-screen.css");

/*************/
/*Page Config*/
/*************/

/*Do a global reset*/
* {padding: 0;margin: 0;}
/*IE6 stop the pixel gap appearing at the bottom of images*/
img {display: block}
/*Set the height to 100%. This is for the Sticky Footer*/
html{height: 100%;}
/*This code makes all links outside of our Trifecta rollovers visible*/
/*It also seems to make the Trifecta rollovers work in IE6*/
html a:hover {visibility:visible}
/*Here we're setting up our body so the site doesn't get any smaller than this*/
body{
	height: 100%;
	min-width: 960px;
	background-color: #f2f2f2;
}

p{
	margin-top: 15px;
}

/********************************/
/*Container to position the site*/
/*and give is a sticky footer****/
/********************************/

#Container{
	/*This 'margin 0 auto' code makes the whole site appear centered*/
	margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
	/*This height is for the Sticky Footer and Firefox*/
	min-height: 100%;
	height: auto !important;
	/*This height is for Sticky Footer and IE*/
	height: 100%;
	width: 960px;
	background-color: white;
	/*this creates our shadows*/
	background: #f2f2f2 url(/res/images/body-shadow.gif) repeat-y center top;
}

/***********************/
/*DIV to hold the site*/
/***********************/

#Site{
	margin: 0 auto;
	width: 940px;
	/*background: green;*/
}


/*****************/
/*Main Navigation*/
/*****************/

#Header{
	width: 840px;
	height: 103px;
	float: left;
}

#HeaderFill{
	width: 100px;
	height: 51px;
	float: left;
}

/*Home*/
#MainNavHome {
	float: left; width: 140px; height: 75px;
	background: url(/res/images/header-home-hover.jpg) no-repeat;
}
#MainNavHome a {display: block; width: 140px; height: 75px;}
#MainNavHome img{width: 140px; height: 75px; border: 0px;}
#MainNavHome a:hover img{visibility:hidden;}

/*About*/
#MainNavAbout {
	float: left; width: 140px; height: 75px;
	background: url(/res/images/header-about-hover.jpg) no-repeat;
}
#MainNavAbout a {display: block; width: 140px; height: 75px;}
#MainNavAbout img{width: 140px; height: 75px; border: 0px;}
#MainNavAbout a:hover img{visibility:hidden;}

/*Portfolio*/
#MainNavPortfolio {
	float: left; width: 180px; height: 75px;
	background: url(/res/images/header-portfolio-hover.jpg) no-repeat;
}
#MainNavPortfolio a {display: block; width: 180px; height: 75px;}
#MainNavPortfolio img{width: 180px; height: 75px; border: 0px;}
#MainNavPortfolio a:hover img{visibility:hidden;}

/*Clients*/
#MainNavClients {
	float: left; width: 240px; height: 75px;
	background: url(/res/images/header-clients-hover.jpg) no-repeat;
}
#MainNavClients a {display: block; width: 240px; height: 75px;}
#MainNavClients img{width: 240px; height: 75px; border: 0px;}
#MainNavClients a:hover img{visibility:hidden;}

/*School*/
#MainNavSchool {
	float: left; width: 130px; height: 75px;
	background: url(/res/images/header-school-hover.jpg) no-repeat;
}
#MainNavSchool a {display: block; width: 130px; height: 75px;}
#MainNavSchool img{width: 130px; height: 75px; border: 0px;}
#MainNavSchool a:hover img{visibility:hidden;}

/*Shop*/
#MainNavShop {
	float: left; width: 110px; height: 75px;
	background: url(/res/images/header-shop-hover.jpg) no-repeat;
}
#MainNavShop a {display: block; width: 110px; height: 75px;}
#MainNavShop img{width: 110px; height: 75px; border: 0px;}
#MainNavShop a:hover img{visibility:hidden;}

/*Contact*/
#MainNavContact {
	float: right; width: 100px; height: 52px;
	background: url(/res/images/header-contact-hover.jpg) no-repeat;
}
#MainNavContact a {display: block; width: 100px; height: 52px;}
#MainNavContact img{position: relative;width: 100px; height: 52px; border: 0px;}
#MainNavContact a:hover img{visibility:hidden;}


/**************/
/*General DIVS*/
/**************/

#gap{
	clear: left;
	width: 900px;
	height: 30px;
}

#Content{
	margin: 0 auto;
	clear: left;
	width: 900px;
}

#MainNav{width: 940px;}

#SecondaryNav{float: left ;width: 180px; height: 100%; margin-right: 40px;}


/***********/
/*Home DIVS*/
/***********/

#HelloNews{float: left; width: 220px; margin-right: 20px;}

#News{
	width: 200px;
	height: 220px;
	background-color: #effaff;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: auto;
}

#Latest{float: left; width: 460px; margin-right: 20px;}

#Hero{clear: both; margin-bottom: 20px;}

#Hero img{border: 0px;}

#HeroSmall{margin-right: 10px; float: left; width: 200px;}

#HeroSmall img{border: 0px;}

#HeroCopy{width: 460px; margin-bottom: 15px; float: left;}

#HotLink{
	float: left;
	width: 180px;
	height: 140px;
	margin-bottom: 10px;
}

/****************/
/*Portfolio DIVS*/
/****************/

#Work{
	float: left;
	width: 660px;
	height: 100%;
}

#NextPrevious{
	float: right;
	width: 260px;
	height: 40px;
}

#Picture{
	float: left;
	width: 660px;
	height: 100%;
	margin-bottom: 20px;
}

#Picture img{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#ImageTitle{
	float: left;
	/*height: 40px;*/
	width: 320px;
	margin-bottom: 30px;
	text-align: center;
}

.ButtonHolder{
	float: left;
	height: 40px;
	width: 170px;
}

#Thumbs{
	clear: left;
	width: 660px;
	padding-bottom: 30px;
}

.Thumb{
	float: left;
	width: 94px;
	height: 66px;
	margin-top: 7px;
	margin-bottom: 7px;
}

.Border img{
	border: 3px solid #b2e5ff;
	}

.BorderSelected img{
	border: 3px solid #ff66ff;
	}
 
.Border:hover img{
	border: 3px solid #ff66ff;
	}
 
.Border:hover{
	color: #ff66ff; /* Dummy for IE bug */
	}

.Cover{
	float: left;
	width: 165px;
	/*height: 200px;*/
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	text-align: center;
}

.CoverRow{
	float: left;
	width: 660px;
}


/****************/
/*About DIVS*/
/****************/

#About{
	float: left;
	width: 480px;
	padding-left: 20px;
	padding-right: 40px;
	margin-bottom: 40px;
}

#Studio{
	float: left;
	width: 340px;
	padding-right: 20px;
	margin-bottom: 40px;
}

/********************/
/*School Visits DIVS*/
/********************/

#School{
	float: left;
	width: 400px;
	padding-left: 20px;
	padding-right: 40px;
}

#Visits{
	float: left;
	width: 420px;
}

#SVPicture{
	float: left;
	width: 420px;
	height: 100%;
	margin-bottom: 20px;
}

#SVPicture img{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#SVImageTitle{
	float: left;
	width: 420px;
	margin-bottom: 20px;
	text-align: center;
}

.SVThumb{
	float: left;
	width: 84px;
	height: 50px;
	margin-top: 7px;
	margin-bottom: 7px;
}

/***********************/
/*Clients & Awards DIVS*/
/***********************/

#Panel{
	float: left;
	width: 420px;
	margin-left: 20px;
}

#PanelAward1{
	width: 400px;
	height: 136px;
	padding-bottom: 10px;
}

#PanelAward2{
	width: 400px;
	height: 224px;
	padding-bottom: 10px;
}

#PanelAward3{
	width: 400px;
	height: 241px;
	padding-bottom: 10px;
}

#PanelAward4{
	width: 400px;
	height: 229px;
	padding-bottom: 30px;
}

#Panel img{
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
}


/****************/
/*Contact DIVS*/
/****************/

#Contact{
	width: 30%;
	margin-top: 60px;
	margin-bottom: 40px;
	margin-right: auto;
	margin-left: auto;
}


/*****************/
/*General CLASSES*/
/*****************/

#Title{float: left;height: 50px; width: 400px;}

.Spacer{height: 15px;}

.ClearLeft{clear: left;}

.ClearRight{clear: right;}

.ClearBoth{clear: both;}

.Line{
	background: url(../images/line.gif) repeat-x 0 50%;
	height: 1px;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;

}


/********/
/*Footer*/
/********/

#Footer{
	width: 940px;
	height: 155px;
	margin: auto;
}

/*this stops the footer going over the bottom of our content*/
/*the clear sorts out the floats from the content (safari)*/
#Footer, #Push {clear: both;height: 155px;}


/*******/
/*Fonts*/
/*******/


H1{
	/*This is what non siFR browsers see*/
	color: #0099ff;
	/*The em adds a bit more padding-top for this font*/
	font: normal 20px Verdana, sans-serif;
}

H2{
	/*This is what non siFR browsers see*/
	color: #0099ff;
	/*The em adds a bit more padding-top for this font*/
	font: normal 16px/2em Verdana, sans-serif;
}

H3{
	font: 12px/1.75em Verdana, sans-serif;
	color: #0099ff;
	padding-left: 0.5em;
}

H3 a{
	color: #0099ff;
	text-decoration: none;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

H3 a:hover{color: #ff66ff;}


H4{
	font: 11px/1.75em Verdana, sans-serif;
	color: #0099ff;
}

H4 a{text-decoration: none; color: #ff66ff;}

H4 a:hover{text-decoration: underline; color: #ff66ff;}

.Bold{font-weight: bold;}

.Active{color: #ff66ff;}


/************/
/*SiFR Fonts*/
/************/

.sIFR-active H1 {
	visibility: hidden;
	font: normal 38px/1em Verdana, sans-serif;
}

.sIFR-active H2 {
	visibility: hidden;
	font: normal 30px/1em Verdana, sans-serif;
}