@charset "utf-8";

/* CSS Document */



/*--- GLOBAL STYLES ---*/

html, body	{ }

body		{ background-color:#215679; 

			font: normal normal normal .9em Arial, Helvetica, Verdana, sans-serif;

			color: #000000;}

.cleaner	{ clear: both; margin:0; padding:0; height:0px;}

.hide		{ display: none;}



.floatleft	{ float: left;}

.floatright	{ float: right;}

.center		{ width: 100%; text-align: center;}


h1	{ font-size: 1.4em; font-weight:bold; color: #324e7e; margin-bottom: 10px;}
h2	{ font-size: 1.2em; font-weight:bold; color: #324e7e; margin-bottom: 5px;}
h3	{ font-weight:bold; color: #324e7e; }


p	{ margin: 5px 0px 5px 0px;}






/*--- LINKS ---*/

a		{ text-decoration: none; color: #324e7e; font-weight: bold;}

a:hover	{ text-decoration: underline;}

.relatedLinks a		{ font-size: 1.3em; color:#000000; font-weight: normal;}

#blogLeft a	{ text-decoration: none; color: #333333; font-weight: normal;}
#blogLeft a:hover	{ text-decoration: underline;}

.tab a	{ height: 32px; width: 153px; display:block; margin-left: 28px; text-indent: -300px; overflow: hidden;}



/*--- Tab labels ---*/

/*
To create new tab labels, copy an a an a:hover pair and replace the class name and file names with the new ones.
In the HTML page, apply the new class to the <a> tag to have the label appear on the page.
*/

a.lifeDrawing			{ background: url(../img/tab_LifeDrawing.png) no-repeat;}
a:hover.lifeDrawing		{ background: url(../img/tab_LifeDrawingOn.png) no-repeat;}
a.characterdesign			{ background: url(../img/tab_characterdesign.png) no-repeat;}
a:hover.characterdesign		{ background: url(../img/tab_characterdesignOn.png) no-repeat;}


/*--- LISTS ---*/

ul		{ margin:0px 0px 0px 20px;}

ul li	{ list-style: circle;}

ul.noListStyle li	{ list-style: none;}


ul.navArrow		{ font-size: 1.1em; list-style: none;}

ul.navArrow li	{ padding: 6px 0px 0px 15px; background: url(../img/greenArrow.gif) no-repeat 0px 8px; font-weight: normal;}

ul.navArrow l
ul.navArrow li.on			{ font-weight: bold;}

ul.navArrow ul.navArrow		{ font-size: 1em; list-style: none;}i.arrowOpen	{ background: url(../img/greenArrow_on.gif) no-repeat 0px 9px;}




/*--- HEADER ---*/

.titleBlock	{ float: left; width: 365px; height: 212px; margin-left: 191px;}
.menuBlock	{ float: left; width: 458px; height: 191px; margin-left: 100px;}


/*--- PAGE BLOCKS ---*/

#headerWrap		{ width: 1200px; height: 212px;}

#contentBlock	{ width: 1200px; height:768px; border: 1px solid black; margin: auto; margin-top: 25px; background: url(../img/bg.jpg) no-repeat;}
#contentBlock2	{ width: 1200px; height:auto; border: 1px solid black; margin: auto; margin-top: 25px; background: url(../img/bg2.jpg)  no-repeat; background-color: #bfbfb8;}

#bodyWrap		{ width: 960px; height: 556px; margin-left: 100px; padding: 0px 20px;}
#bodyWrap2		{ width: 1000px; margin-left: 100px;}

#blogLeft		{ width: 334px; float:left;}
#blogRight		{ width: 640px; float: right; margin-bottom: 20px;}

#footer			{ clear: both;  border: 1px solid red;}


/*--- CONTENT MODULES ---*/

.indexCard 		{ width: 416px; height: 251px; background: url(../img/index_card.png) no-repeat; margin: 0px 30px 15px 30px;}

.smallNotebook 	{ width: 506px; height: 547px; background: url(../img/small_notebook.png) no-repeat; margin-top: -21px;}

.newMargin 		{ margin: 0px 10px 15px 10px;}

.videoContent	{ margin: 66px 0px 0px 40px; width: 415px;}

.video 			{ margin-bottom: 15px;}

.dividerTabs	{ height: 32px; width: 960px; padding-left: 6px;}

.dividerBody	{ height: 513px; width: 960px; background-color:#FFFFFF;}

.tab			{ height: 32px; width: 183px; float: left;}
.tabEnd			{ height: 32px; width: 40px; float: left; background: url(../img/tabGreen_end.png) no-repeat;}

.yellow		{ background: url(../img/tabYelllow.png) no-repeat;}
.pink		{ background: url(../img/tabPink_off.png) no-repeat;}
.pinkOn		{ background: url(../img/tabPink_on.png) no-repeat;}
.blue		{ background: url(../img/tabBlue_off.png) no-repeat;}
.blueOn		{ background: url(../img/tabBlue_on.png) no-repeat;}
.red		{ background: url(../img/tabRed_off.png) no-repeat;}
.redOn		{ background: url(../img/tabRed_on.png) no-repeat;}
.green		{ background: url(../img/tabGreen_off.png) no-repeat;}
.greenOn	{ background: url(../img/tabGreen_on.png) no-repeat;}

.thumbnailWrapper	{width: 430px; height: 455px; margin-top: 28px; margin-left: 30px; float: left;}
.artworkWrapper		{width: 417px; height: 455px; margin-top: 28px; margin-right: 30px; float: right; background: url(../img/artwork_bg.png) no-repeat;}

.filmstrip			{width: 430px; height: 132px;  background: url(../img/filmstrip.png) no-repeat; margin-bottom: 29px;}
.filmstrip .thumbnail	{width: 101px; height: 75px; margin: 25px 3px 0px 2px; float: left;}

.blogModule		{ background-color: #fffef0; width: 330px; border: 2px solid #999999; padding: 10px 10px; margin-bottom: 8px;}
.blogContent	{ background-color: #fffef0; width: 616px; border: 2px solid #999999; padding: 10px 10px;}
.blogEntry		{ margin: 5px 10px;}

/*--- CONTENT AREA ---*/

.breadcrumb	{ padding:15px 15px 0px 15px; font-weight:bold; font-size: 1.1em; height: 25px;}

.relatedTitle	{ margin: 18px 15px 0px 15px;}
.relatedLinks	{ margin: 4px 15px 0px 15px; width: 375px; height: 160px;}

.linkBlock		{ width: 105px; margin: 10px; float: left; text-align: center;}
.linkBlock img	{ margin: 10px;}

.artworkWrapper img { width: 400px ; height: 438px; margin: 5px}
.thumbnail img 		{ width: 101px; height: 75px;}

#blogRight b		{ font-weight:bold; color: #324e7e; }

.blogContent img	{ margin: 10px;}
.blogContent h2		{ margin: 15px 0px 10px 0px;}
.blogContent hr		{ width: 80%; border: 1px solid #5b7195; margin-bottom: 20px; }

.contactNote		{ height:438px; width:484px; margin: 23px 0px 0px 244px; background: url(../img/contact_note.png) no-repeat;}