style-d2d.css

/* CSS for Daring to Dream */
A {
	COLOR: #3333FF; FONT-FAMILY: verdana,arial,helvetica,ms sans serif; FONT-SIZE: 10pt; TEXT-DECORATION: none
}
TD,P,body {
	COLOR: #000066; FONT-FAMILY: verdana,arial,helvetica,ms sans serif; FONT-SIZE: 10pt; TEXT-DECORATION: none; 
}
A:link {
	COLOR: #3333FF; FONT-FAMILY: verdana,arial,helvetica,ms sans serif; FONT-SIZE: 10pt; TEXT-DECORATION: none
}
A:visited {
	COLOR: #000099; FONT-FAMILY: verdana,arial,helvetica,ms sans serif; FONT-SIZE: 10pt; TEXT-DECORATION: none
}
A:hover {
	COLOR: #3366FF; FONT-FAMILY: verdana,arial,helvetica,ms sans serif; FONT-SIZE: 10pt; TEXT-DECORATION: underline
}
BODY
{
	margin: 0;
	padding: 0;
	max-width: 2400px;
	background: #A4AEEC;
	text-align:center;
	line-height:130%;
}

#wrapper-main {
	max-width: 1000px;
	#width:1000px;
	margin-left: auto;
	margin-right: auto;
	margin-top:0px;
	margin-bottom:0px;
	padding:2px;
	text-align: center;
}


#wrapper {
	max-width: 800px;
	#width:800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#wrapper-justify {
	max-width: 780px;
	#width:780px;
	margin-left: auto;
	margin-right: auto;
	padding:2px;
	text-align: justify;
}

#largewrapper {
	width: 1000px;
	#width:1000px;
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
}

#othertlmwrapper {
	width: 870px;
	#width:870px;
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
}

/*Properties for old nav bar on all sub pages*/
#navbar
{
	clear: both;
	margin: 0;
	padding: 4px;
	background-color: #DAE3FA;
	text-align: center;
	border-bottom: 2px solid #0B1344;
	border-color: #282563;
	width:auto;
}

/* Properties for the left sidebar on main page */
#leftnav {
	float: left;
	width: 160px;
	margin: 0;
	padding: 14px;
}

/* Properties for the left sidebar on series page */
#leftnavseries {
	float: left;
	width: 160px;
	margin: 0 20px 0 0;
	padding: 14px;
	text-align:center;
}

/* Properties for the right sidebar on series page */
#rightnavseries {
	float: right;
	width: 140px;
	margin: 0 0 0 20px;
	padding: 14px;
	text-align:center;
}


/* Properties for text in sidebars for series episode */
#rightnavseries p, #leftnavseries p {
	font-size:8pt;
}

/*Properties for main section of series episode section */
#episodemain {
	text-align:justify;
}

/* Properties for main section with a single column on the right */
#mainleft {
	margin-right: 160px;
	text-align:justify;
	padding:4px;
}

/*Used on characters page*/
#charlight {
	margin:0px 0px 40px 00px;
	padding: 2px 10px;
	background-color: #DAE3FA;
	text-align:justify;
	min-height:170px;
	#height:170px;
}

/*Used on characters page*/
#charmedium {
	margin:0px 0px 40px 00px;
	padding: 2px 10px;
	background-color: #B6C6FC;
	text-align:justify;
	min-height:170px;
	#height:170px;
}


#charlight img, #charmedium img {
	float:right;
	border:1px solid;
	margin-top:14px;
	margin-left:10px;
	margin-right:0px;
}

/*Used on stage page*/
#boxmedium {
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
	min-height:140px;
}

/*Used on comics page*/

#boxlighter, #boxlighterleft {
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	text-align:justify;
}

/*Used on comics page and novels page */
#boxmediumshort {
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
}

#boxmediumtall {
	margin-bottom:80px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
	min-height:202px;
	border-bottom: 2px solid #0B1344;
}


#boxdark {
	margin:0px;
	padding: 8px;
	background-color: #A4AEEC;
	text-align:justify;
	min-height:202px;
}

#boxmediumtall img, #boxlighter img  {
	float:right;
	border:1px solid;
	margin-top:0px;
	margin-left:10px;
	margin-right:0px;
}


#boxmediumshort img, #boxbottom img, #novelmedium img {
	border:1px solid;
}

/* Used on comics page */

#boxbottom {
	margin-bottom:80px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
	border-bottom: 2px solid #0B1344;
}

#boxbottomtall {
	margin-bottom:80px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
	border-bottom: 2px solid #0B1344;
	min-height:172px;
}


#boxsmall {
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
	min-height:70px;
}

#boxbottomsmall {
	margin-bottom:80px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
	border-bottom: 2px solid #0B1344;
	min-height:70px;
}

#boxlighterleft img  {
	float:left;
	border:1px solid;
	margin-top:0px;
	margin-left:0px;
	margin-right:10px;
}



#boxmedium p, #boxmediumshort p, #boxmediumtall p, #boxbottom p, #boxbottomtall p, #novelmedium p {
	margin-top:0px;
	padding:0px;
}


#comicshortcut {
	margin-top:20px;
	padding: 8px;
	background-color: #B6C6FC;
	border: 2px solid #DAE3FA;
	width:280px;
}


#box {
	padding: 4px;
	border: 1px solid #DAE3FA;
	text-align:center;
}

#box-album {
	padding: 4px;
	border: 1px solid #DAE3FA;
	height:124px;
}


#box p {
	margin-top:0px;
	margin-bottom:5px;
}

#boxfic {
	margin-bottom:80px;
	padding: 4px;
	border: 1px solid #DAE3FA;
	border-bottom: 8px solid #DAE3FA;
}


/* Properties for the series episodes bonus boxes */
#seriesbonus {
	border-top:2px solid #0B1344;
	border-bottom:2px solid #0B1344;
}

/* Properties for the series episodes bonus boxes */
#seriesbonus p {
	font-size:10pt;
}


/* Properties for links inside the update box */
#updates1 a, #updates2 a, #seriesbonus a {
	font-weight:bold;
}

/* Properties text titles level 1 */
h1	{
	padding:0;
	margin-bottom:0;
	margin-top:10px;
	text-align:center;
	FONT-SIZE: 14pt;
}

/* Properties text titles level 2 */
h2	{
	padding:0;
	margin-bottom:0;
	margin-top:10px;
	text-align:center;
	FONT-SIZE: 10pt;
	TEXT-DECORATION: underline;
}

/* Properties for series quote blocks: character */
#name	{
	vertical-align:top;
	font-weight:bold;
	width:86px;
}

/* Properties for series quote blocks: character - longer */
#namelong	{
	vertical-align:top;
	font-weight:bold;
	width:124px;
}

/* Properties for series quote blocks: quotes */
#quote	{
	vertical-align:top;
	padding-bottom:20px;
}

/* Properties for footnotes */
#footnote {
	margin-top:350px;
	margin-bottom:20px;
	padding:4px;
	font-size: 8pt;
	border:2px solid #DAE3FA;
}

/* Properties for footnote text */
#footnote p {
	font-size: 8pt;
}

/* Properties for footer */
#footer {
	clear:both;
	margin:0px;
	padding:0px;
	font-size: 8pt;
	height:80px;
	background: url(../thelittlemermaid/miscpics/bgroundwave.jpg) repeat-x bottom left ;
}

/* Properties for text inside footer */
#footer p {
	padding-top:50px;
	font-size: 8pt;
	font-weight:bold;
}

#proset-box1 {
	float: left;
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	margin-left: 0;
	margin-right: auto;
	text-align:center;
	width:230px;
}

#proset-box2 {
	float: left;
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	margin-left: 0;
	margin-right: auto;
	text-align:center;
	width:230px;
}

#proset-boxdouble1 {
	float: left;
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	margin-left: 0;
	margin-right: auto;
	text-align:center;
	width:476px;
}

#proset-boxdouble2 {
	float: left;
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	margin-left: 0;
	margin-right: auto;
	text-align:center;
	width:476px;
}

#proset-boxtriple2 {
	float: left;
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	margin-left: 0;
	margin-right: auto;
	text-align:center;
	width:722px;
}

#proset-boxtriple1 {
	float: left;
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	margin-left: 0;
	margin-right: auto;
	text-align:center;
	width:722px;
}
/*Properties for highlighted text*/
P#highlight
{
	padding: 4px;
	text-align: justify;
	background-color: #DAE3FA;
}
/*Properties for invisible column for normal wrapper - left */
#leftcol {
	float: left;
	width: 380px;
	margin: 0;
	padding: 2px;
}

/*Properties for invisible column for normal wrapper - right */
#rightcol {
	float: right;
	width: 380px;
	padding: 2px;
}

/*Properties for boxes on series page  */

div.episodetitle {
	margin:0px 30px;
	width:320px;
	padding: 8px;
	background-color: #DAE3FA;
	text-align:center;
	font-weight:bold;
}

div.episodebox {
	margin:0px 30px;
	width:320px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:center;
	border-bottom: 2px solid #DAE3FA;
	line-height:150%;
	margin-bottom:20px;
}

#navlight {
	margin:0px;
	padding: 4px;
	background-color: #DAE3FA;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:360px;
}

#navmedium {
	margin:0px;
	padding: 4px;
	background-color: #B6C6FC;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:360px;
}

/* Properties for episode boxes on Saban's The Little Mermaid */
#boxepisode1 {
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	text-align:justify;
}

#boxepisode2 {
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
}


/* Properties for bullets on stage page */
ul.s {
	list-style-type: square;
}

ul.s li {
	margin-bottom:6px;
}









/* HTML5 compliant properties */

article, div.container {
  text-align: left;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color:#A4AEEC;
  padding:0px;
}

/* Properties for content, which are justified text in narrower box */
section {
  text-align: justify;
  line-height: 1.4;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color:#A4AEEC;
  padding:10px;
}

nav {
    padding:10px;
    clear: left;
    text-align: center;
    margin-bottom: 10px;
    background-color: #DAE3FA;
    border-bottom: 2px solid #0B1344;
    border-color: #282563;
    width:auto;
}

h1 {
	COLOR: #000066; FONT-FAMILY: verdana,arial,helvetica,ms sans serif; FONT-SIZE: 18pt; TEXT-DECORATION: none; text-align:center; padding:24px;
}


/* Properties for header */
header {
	clear:both;
	margin: 0;
	padding: 10;
	background-color: #0B1344;
}




/* Properties for main section on main page */
#main {
	margin-left: 170px;
	margin-right: auto;
	text-align:center;
	padding:4px;
	border-left:2px solid #0B1344;
}

/* Properties for the right sidebar, used on musical page */
#rightnav {
	float: right;
	width: 160px;
	margin-top:4px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0px;
	text-align: center;
}

/* Properties for updates line 1*/
#updates1 {
	padding: 10px;
	background-color: #B6C6FC;
	text-align:justify;
}

/* Properties for updates line 2*/
#updates2 {
	padding: 10px;
	background-color: #DAE3FA;
	text-align:justify;
	border-right: 1px solid #DAE3FA;
	border-left: 1px solid #DAE3FA;
}

/*Properties for invisible column for container - 1/2 left, used on misc pages [article size] */
div.leftcolumn {
	float: left;
	width: 500px;
	margin-top: 20px;
	padding: 2px;
}

/*Properties for invisible column for container - 1/2 right */
div.rightcolumn {
	margin-left:500px;
	margin-top: 20px;
	width: 500px;
	padding: 2px;
}

/*Properties for invisible column for container - 1/2 left, used on sequel page [section size] */
div.leftcol {
	float: left;
	width: 400px;
	margin-top: 20px;
	padding: 2px;
}

/*Properties for invisible column for container - 1/2 right */
div.rightcol {
	margin-left:400px;
	margin-top: 20px;
	width: 400px;
	padding: 2px;
}



/* H5 used on sequel, moments and misc page */
h5	{
	padding: 60px 0px 30px;
	margin: 60px 5px 0px;
	text-align:center;
	font-style:italic;
	FONT-SIZE: 14pt;
	border-top: dotted;
	border-width: 1px;
	border-color: #282563;
}


/* H6 used on various song pages for multiple versions */
h6	{
	padding: 0px 0px 60px;
	margin: 0px;
	text-align:center;
	font-size: 10pt;
	font-style:italic;
	border-bottom: dotted;
	border-width: 1px;
	border-color: #282563;
}

/*Properties for invisible column for container - 1/3 left, used on misc pages */
div.tlm1 {
	float: left;
	width: 333px;
	margin: 0;
	padding: 0px;
}

/*Properties for invisible column for container - 2/3 middle */
div.tlm2 {
	width: 333px;
	padding: 0px;
	margin-left:333px;
	margin-right: 333x;
}

/*Properties for invisible column for container - 3/3 right */
div.tlm3 {
	float: right;
	padding: 0px;
	width: 333px;
}




/*Properties for longernavigation boxes/buttons with alternating colours on misc page */
div.navlight {
	margin:0px;
	padding: 4px;
	background-color: #DAE3FA;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:360px;
}

div.navmedium {
	margin:0px;
	padding: 4px;
	background-color: #B6C6FC;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:360px;
}


/*Properties for shorter navigation boxes/buttons with alternating colours on misc page */
div.nav1 {
	margin:0px;
	padding: 4px;
	background-color: #DAE3FA;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:280px;
}

div.nav2 {
	margin:0px;
	padding: 4px;
	background-color: #B6C6FC;
	margin-left: auto;
	margin-right: auto;
	text-align:center;
	width:280px;
}

/*Properties for gallery menus*/

#gallery-title {
	margin:0px;
	padding: 8px;
	margin-left: auto;
	margin-right: auto;	
	background-color: #DAE3FA;
	text-align:center;
	width:300px;
	font-weight:bold;
}

#gallery-box {
	margin:0px;
	padding: 8px;
	margin-left: auto;
	margin-right: auto;
	background-color: #B6C6FC;
	text-align:center;
	width:300px;
	border-bottom: 2px solid #DAE3FA;
	line-height:150%;
	margin-bottom:20px;
}

/*Properties for rounded boxes of text, used on sequel and prequel.*/
#story-box {
	border-radius: 25px;
	margin:0px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #DAE3FA;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Properties for boxes of text, used on stage page.*/
#box-text {
	padding: 4px;
	border: 1px solid #DAE3FA;
}

/*Properties for images that align right on the movie page */
img.movie {
	margin:0px 20px 8px 0px;
	border: 1px solid #3333FF;
	box-shadow: 2px 2px 4px grey;
}

/*Properties for images on the movie, sequel, prequel, series and stage pages */
img.sequel {
	margin:0px 10px 4px 10px;
	border: 1px solid #3333FF;
	box-shadow: 2px 2px 4px grey;
}

/*Properties for images of dvd covers on the movie, sequel, prequel and series pages */
img.dvd {
	margin:0px 2px 2px 2px;
	border: 1px solid #3333FF;
	box-shadow: 2px 2px 4px grey;
}

/*Properties for boxes on movie, sequel and prequel page */

div.extraboxtop {
	margin:0px 30px;
	padding: 8px;
	background-color: #DAE3FA;
	text-align:center;
	font-weight:bold;
}

div.extradescrip {
	padding: 10px;
	margin:0px 30px;
	border: 1px solid #DAE3FA;
	border-bottom:0px;
	text-align:justify;
}

div.extraboxlinks {
	padding: 2px 20px;
	margin:0px 30px 30px 30px;
	border: 1px solid #DAE3FA;
	text-align:center;
	font-weight:bold;
}

div.extraboxbottom {
	padding: 2px 20px;
	margin:0px 30px 30px 30px;
	border: 1px solid #DAE3FA;
	text-align:justify;
}

/* Properties for bullets on sequel page */
ul.sequel {

}

ul.sequel li {
	margin:0px 0px 6px 0px	;
	padding:0px;
}


/*For Grolier Treasure Chest gallery pages only*/
#boxdescrip-grolier {
	margin-top:0px;
	margin-bottom:0px;
	padding: 8px;
	text-align:left;
	border-right: 1px solid #DAE3FA;
	border-left: 1px solid #DAE3FA;
	height: 70px;
}

/*Properties for images with extra padding on the right - used on Grolier pages */
img.grolier {
	margin:0px 6px 0px 0px;
	border: 1px solid #3333FF;
}

/*Properties for boxes for announcements, used on stage page */
div.announce {
	margin:10px 0px 10px;
	padding: 14px;
	background-color: #DAE3FA;
	font-size: 12pt; 
}


/*Used on gallery pages */

#boxtitle {
	margin-top:30px;
	padding: 12px;
	background-color: #DAE3FA;
	text-align:center;
}

#boxdescrip {
	margin-top:0px;
	margin-bottom:0px;
	padding:8px;
	text-align:justify;
	line-height:135%;
	border-right: 1px solid #DAE3FA;
	border-left: 1px solid #DAE3FA;
}

/* Used on gallery pages as the image box underneath the title and descrip */

#box {
	padding: 4px;
	border: 1px solid #DAE3FA;
	text-align:center;
	margin-bottom:60px;
}

/*Used on disney princess stories page */
img.story1 {
	border:6px solid;
	border-colour:red;
}

/*Used on novel page*/

#novellight {
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	text-align:justify;
}

#novellight img  {
	float:right;
	border:1px solid;
	margin:0px 10px 0px 14px;
}

#novelmedium {
	margin:0px;
	padding: 8px;
	background-color: #B6C6FC;
	text-align:justify;
}

/* Properties text titles level 2 - used on stage page*/

#stagebox {
	margin:0px;
	padding: 8px;
	background-color: #DAE3FA;
	text-align:justify;
}

#stagebox h3	{
	padding:0;
	margin-bottom:0;
	margin-top:0px;
	text-align:center;
	FONT-SIZE: 10pt;
	TEXT-DECORATION: underline;
}

/*Properties of boxes on music page */

#musicboxtitle {
	margin:70px 0px 0px 0px;
	padding: 14px;
	background-color: #DAE3FA;
	text-align:justify;
}

#musicboxmiddle {
	margin:0px;
	padding: 20px;
	background-color: #DAE3FA;
	text-align:justify;
}

#musicboxdescrip {
	padding: 14px 16px;
	margin:0px;
	border: 1px solid #DAE3FA;
	text-align:justify;
}

p.top {
	text-align:right;
	font-weight:bold;
}

/* Properties for text caption on music page */
#music-right {
	float: right;
	width:210px;
	margin:0px;
	padding: 2px;
	text-align:center;
}

/* Properties for bullets on music list and movie page */
ul.songlist li {
	margin-bottom:4px;
}

/* Properties for bullets on music instrumental page */
ol.instru li {
	margin-bottom:6px;
}

/*Properties for rounded boxes of on video page.*/
#video-box {
	border-radius: 25px;
	margin:40px 0px;
	padding: 20px 0px 10px;
	background-color: #DAE3FA;
	text-align:center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#video-box h1 {
	font-weight:bold;
	font-size: 12pt;
	font-style:italic;
	padding:0px;
	margin:0px;
}

#video-box p {
	font-style:italic;
}

/*Properties for rows on stage recordings page */
tr.row1 {
	background-color: #DAE3FA;
	height: 30px;
	vertical-align: middle;
	text-align: center;
}

tr.row2 {
	background-color: #B6C6FC;
	height: 30px;
	vertical-align: middle;
	text-align: center;
}

tr.row3 {
	background-color: #B6C6FC;
	height: 100px;
	vertical-align: middle;
	text-align: center;
}



/*Properties for divider on top of songs pages*/
hr.songs {
	height:1px;
	color: #0B1344;
	background-color: #0B1344;
	margin: 60px 0px;
	border: none;
}

/*Properties for divider for moment pages*/
hr.moment {
	color: #0B1344;
	border-top: dotted;
	border-width: 1px;
	border-color: #0B1344;
	margin: 40px 0px 0px;
}



/* Used on ouat page */

#ouattop {
	margin:40px 0 0 0;
	padding: 20px;
	background-color: #DAE3FA;
	text-align:justify;
	font-size: 14pt;
}

#ouatbottom {
	margin-bottom:140px;
	padding: 2px 20px 8px 20px;
	background-color: #B6C6FC;
	text-align:justify;
	border-bottom: 2px solid #0B1344;
}




/*Properties for rounded boxes of text, used on eunovels page.*/
#eunovels-box {
	border-radius: 25px;
	margin:20px 0px 30px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #DAE3FA;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/* Properties for footer */
footer {
	height:80px;
	font-size: 8pt;
	background: url(../thelittlemermaid/miscpics/bgroundwave.jpg) repeat-x bottom left ;
	padding-top:50px;
	font-weight:bold;
	vertical-align:bottom;
	line-height:120px;
}