/* Popstars Academy CSS Document */

/*
    H1 = Company Name
    H2 = Company Strapline
    H3 = Sub Nav Heading
    H4 = Page Title
    H5 = Page Sub-Title
*/

/* ----------------- COLOURS ----------------- 

*/

/* ----------------- CLEAR STYLES ----------------- */
.clear { clear: both; }

/* ----------------- DEFAULT FONT STYLES ----------------- */
body, td, div, h4, p, li { font-family: Arial, Helvetica, sans-serif; }

h4 { font-size: 110%; margin: .5em 0 .5em 0; color: #7F419A; }
h5 { font-size: 100%; margin: .5em 0 .5em 0; color: #7F419A; }
h6 { font-size: 90%; margin: .5em 0 .5em 0; color: #7F419A; }
.h6-extra { font-size: 100%; text-align: center; }
p { font-size: 80%; margin: .5em 0 .5em 0; line-height: 1.5em; color: #000;  }
.p-small { font-size: 70%; margin: 0; line-height: 1em; }
li { font-size: 80%; margin: .5em 0 .8em 0; line-height: 1.3em; color: #000; }
a:link { color: #7F419A; }
a:visited { color: #7F419A;}
a:active, a:hover { color: #000; }
a { outline: none; }

.trademark-text { font-size: 70%; color: #333; }

.map-note { width: 240px; }
.map-note p { font-size: 70%; margin-top: 0;}

/* ----------------- PAGE STYLES ----------------- */
body { background: url(../../images/background.gif) top left repeat #68177f; margin: 0 10px 10px 10px; }

hr { border:0; border-top: 1px solid #d7c1de; height: 1px; }

#frame { width: 760px; border: 1px solid #fff; border-top: 0; margin: 0 auto 0 auto;  }

/* ----------------- HEADER ----------------- */
#header, #header-nointro { width: 760px; height: 209px; background-position: top left; background-repeat: no-repeat; }
#header { background-image: url(../../images/header.jpg); }
#header-nointro { background-image: url(../../images/header_nointro.jpg); }
#header-nointro-nocontactinformation { background-image: url(../../images/header_nointro_nocontactinformation.jpg); }
#header h1, #header h2, #header p, #header-nointro h1, #header-nointro h2, #header-nointro p,
#header-nointro-nocontactinformation h1, #header-nointro-nocontactinformation h2, #header-nointro-nocontactinformation p { display: none; visibility: hidden; }


/* ----------------- NAVIGATION ----------------- */
#navigation { width: 760px; height: 37px; background: url(../../images/nav_main_tile.gif) top left repeat-x; }
/*-- Main Navigation --*/
#nav-main { width: 746px; height: 32px; margin: 0 auto 0 auto; }
#nav-main div { height: 32px; float: left; background-position: top left; background-repeat: no-repeat;  }
#nav-main a { height: 32px; display: block; outline: none; }
#nav-main a:hover { background-position: bottom left; background-repeat: no-repeat; }
#nav-main span { display: none; visibility: hidden; }
/*#nav-main .selected { background-position: bottom left; }*/
/*-- Buttons --*/
#nav-main .home, #nav-main .home a:hover { width: 56px; background-image: url(../../images/nav_main_home.gif); }
#nav-main .home-selected { width: 56px; background-image: url(../../images/nav_main_home_selected.gif); }
#nav-main .danceclasses, #nav-main .danceclasses a:hover { width: 126px; background-image: url(../../images/nav_main_danceclasses.gif); }
#nav-main .danceclasses-selected { width: 126px; background-image: url(../../images/nav_main_danceclasses_selected.gif); }
#nav-main .parties, #nav-main .parties a:hover { width: 70px; background-image: url(../../images/nav_main_parties.gif);}
#nav-main .parties-selected { width: 70px; background-image: url(../../images/nav_main_parties_selected.gif); }
#nav-main .schools, #nav-main .schools a:hover { width: 78px; background-image: url(../../images/nav_main_schools.gif);}
#nav-main .schools-selected { width: 78px; background-image: url(../../images/nav_main_schools_selected.gif); }
#nav-main .events, #nav-main .events a:hover { width: 66px; background-image: url(../../images/nav_main_events.gif);}
#nav-main .events-selected { width: 66px; background-image: url(../../images/nav_main_events_selected.gif); }
#nav-main .franchise, #nav-main .franchise a:hover { width: 83px; background-image: url(../../images/nav_main_franchise.gif);}
#nav-main .franchise-selected { width: 83px; background-image: url(../../images/nav_main_franchise_selected.gif); }
#nav-main .work4us, #nav-main .work4us a:hover { width: 87px; background-image: url(../../images/nav_main_work4us.gif);}
#nav-main .work4us-selected { width: 87px; background-image: url(../../images/nav_main_work4us_selected.gif); }
#nav-main .aboutus, #nav-main .aboutus a:hover { width: 83px; background-image: url(../../images/nav_main_aboutus.gif);}
#nav-main .aboutus-selected { width: 83px; background-image: url(../../images/nav_main_aboutus_selected.gif); }
#nav-main .contactus, #nav-main .contactus a:hover { width: 97px; background-image: url(../../images/nav_main_contactus.gif);}
#nav-main .contactus-selected { width: 97px; background-image: url(../../images/nav_main_contactus_selected.gif); }

#nav-sub { width: 200px; }
#nav-sub ul { margin: 0; padding: 0; border-top: 1px solid #fff; } /*#e2cce8; }*/
#nav-sub li {
    margin: 0; padding: 0; list-style: none; font-size: 80%;
    border-bottom: 1px solid #fff; /*#e2cce8;*/
}
#nav-sub a {
    width:172px; height: 2em; padding-left: 28px;
    line-height: 2em; display: block; outline: none;
    background-image: url(../../images/nav_sub_star.gif);
    background-position: 9px center ; background-repeat: no-repeat;
    background-color: #009b9d; /*#7c3291;*/
}
#nav-sub a:link, #nav-sub a:visited { color: #fff; text-decoration: none; }
#nav-sub a:active, #nav-sub a:hover {
    color: #fff; text-decoration: none; font-weight: bold;
    background-image: url(../../images/nav_sub_star.gif);/*background-image: url(../../images/nav_sub_star_selected.gif);*/
    background-color: #4dc8be; /*#bd76d1;*/
}

#nav-sub .selected { }
#nav-sub .selected a {
    color: #009b9d; /*68177f;*/
    background-image: url(../../images/nav_sub_star_selected.gif);
    background-position: 9px center ; background-repeat: no-repeat;
    background-color: #9bf5df; font-weight: bold; /*d3a6e0 */
}
#nav-sub .selected a:link, #nav-sub .selected a:visited { color: #009b9d; } /*#68177f; }*/

#nav-sub ul li ul { margin: 0; padding: 0 0 0 28px; }
#nav-sub ul li ul li { margin: 0; padding: 0; border: 0; font-size: 100%; }


/* Sub Navigation Headings */
#nav-sub-heading div { width: 200px; height: 40px; background-position: top left; background-repeat: no-repeat;}
#nav-sub-heading h3 { display: none; visibility: hidden; }
#nav-sub-heading .danceclasses { background-image: url(../../images/nav_sub_heading_danceclasses.gif); }
#nav-sub-heading .parties { background-image: url(../../images/nav_sub_heading_parties.gif); }
#nav-sub-heading .events { background-image: url(../../images/nav_sub_heading_events.gif); }
#nav-sub-heading .franchise { background-image: url(../../images/nav_sub_heading_franchise.gif); }
#nav-sub-heading .schools { background-image: url(../../images/nav_sub_heading_schools.gif); }
#nav-sub-heading .resourcecentre { background-image: url(../../images/nav_sub_heading_resourcecentre.gif); }

/* ----------------- BODY ----------------- */
#body { width: 760px; background: url(../../images/body_tile.gif) top left repeat-y #fff; }
#body-nomenu { width: 760px; background-color: #fff; }
#body-alt { width: 760px; background: url(../../images/body_tile_alt.gif) top left repeat-y #fff; }
#side { width: 200px; float: left; }
#side p a:link, #side p a:visited { color: #ff3333; }
#side p a:active, #side p a:hover { color: #c12525; }
#side-alt { width: 250px; float: left; padding: 10px; }
#content { width: 540px; float: left; padding: 10px; overflow: hidden; }
#content-nomenu { width: 740px; padding: 10px; }
#content-alt { width: 470px; float: left; padding: 10px; }
/* -- Content Images -- */
.content-image img { border: 1px solid #7f419a; }
.content-image p { font-size: 80%; text-align: center; font-style: italic; color: #68177f; margin-top: 0.2em; }
.float-right { float: right; }
.float-left { float: left; }

/* Homepage video */
.homepage-video-text { width: 170px; float: left; }
.homepage-video { width: 360px; float: left; margin-top: 15px; }

/* -- Quote -- */
.quote { padding: 5px; }
.quote p { color: #68177f;  font-style: italic; font-weight: bold; font-size: 100%; margin-top: 0; margin-bottom: 0; }
.quote span { color: #bd76d1; font-style: italic; }

.quote-small { padding: 5px; }
.quote-small p { color: #68177f;  font-style: italic; font-weight: bold; font-size: 86%; margin-top: 0; margin-bottom: 0; }
.quote-small span { color: #bd76d1; font-style: italic; }

/* -- Titles -- */
/* see titles.css */
.title, .title-home { margin-bottom: 0px; }
.title div { width:auto; height: 40px; background-position: top left; background-repeat: no-repeat; }
.title-home div { width: auto; height: 60px; background-position: top left; background-repeat: no-repeat; }
.title h4, .title-home h4 { display:none; visibility: hidden; }

/* -- Sub-Titles -- */
/* see titles.css */
.sub-title, .sub-title-extra { margin-top: 10px; }
.sub-title div, .sub-title-extra div { width:auto; height: 24px; background-position: top left; background-repeat: no-repeat; }
.sub-title div.center, .sub-title-extra div.center { background-position: top center; } 
.sub-title h5, .sub-title-extra h5, .sub-title-extra-3-lines h5 { display:none; visibility: hidden; }

.sub-title-extra div{ height: 50px; }
.sub-title-extra-3-lines div { height: 75px; }

.align-center { text-align: center; }

.text-white { color: #fff; }


/* ----------------- FOOTER ----------------- */
#footer { width: 760px; height: 36px; background: url(../../images/footer.jpg) top left no-repeat; }
#footer p { display: none; visibility: hidden; }

#footer-text-container { width: 760px; margin: 0 auto; }
#footer-text-container a:link, #footer-text-container a:visited { color: #fff; text-decoration: underline; }
#footer-text-container a:active, #footer-text-container a:hover { color: #ccc; text-decoration: underline; }
#copyright { width: 380px; float: left; padding: 7px 0 0 0; font-size: 70%; color: #fff; }
#business-franchise { width: 380px; float: left; text-align: right; padding: 7px 0 0 0; font-size: 70%; color: #fff; }


/* -- COLUMNS -- */
.column-520 { width: 530px; float: left; }
.column-180 { width: 180px; float: left; }

/* 50/50 column, with menu */
.column-265 { width: 265px; float: left; }

/* 2/3 1/3 columns: use with 9px horizontal margin */
.column-357 { width: 357px; float: left; }
.column-174 { width: 174px; float: left; }

.column-183 { width: 183px; float: left; }

/* columns: used on Party Bags order button with 10px horizontal margin */
.column-290 { width: 290px; float: left; }
.column-240 { width: 240px; float: left; }

/* columns: used on work4us with 10px horizontal margin */
.column-300 { width: 300px; float: left; }
.column-230 { width: 230px; float: left; }

/* evenly split columns - no margin */
.column-270 { width: 270px; float: left; }

/* -- MARGIN STYLES -- */
/* -- 1 side -- */
.margin10-t { margin-top: 10px; }
.margin10-r { margin-right: 10px; }
.margin10-b { margin-bottom: 10px; }
.margin10-l { margin-left: 10px; }
.margin9-r { margin-right: 9px; }
/* -- 2 sides -- */
.margin10-t-r { margin: 10px 10px 0 0; }
.margin10-t-b { margin: 10px 0; }
.margin10-t-l { margin: 10px 0 0 10px; }
.margin10-r-l { margin: 0 10px; }
.margin10-r-b { margin: 0 10px 10px 0; }
.margin10-b-l { margin: 0 0 10px 10px; }
/* -- 3 sides -- */
.margin10-t-r-b { margin: 10px 10px 10px 0; }
.margin10-t-r-l { margin: 10px 10px 0 10px; }
.margin10-t-b-l { margin: 10px 0 10px 10px; }
.margin10-r-b-l { margin: 0 10px 10px 10px; }
/* -- 4 sides -- */
.margin10 { margin: 10px; }

/* -- 1 side -- */
.margin9-t { margin-top: 9px; }
.margin9-r { margin-right: 9px; }
.margin9-b { margin-bottom: 9px; }
.margin9-l { margin-left: 9px; }
.margin9-r { margin-right: 9px; }
/* -- 2 sides -- */
.margin9-t-r { margin: 9px 9px 0 0; }
.margin9-t-b { margin: 9px 0; }
.margin9-t-l { margin: 9px 0 0 9px; }
.margin9-r-l { margin: 0 9px; }
.margin9-r-b { margin: 0 9px 9px 0; }
.margin9-b-l { margin: 0 0 9px 9px; }
/* -- 3 sides -- */
.margin9-t-r-b { margin: 9px 9px 9px 0; }
.margin9-t-r-l { margin: 9px 9px 0 9px; }
.margin9-t-b-l { margin: 9px 0 9px 9px; }
.margin9-r-b-l { margin: 0 9px 9px 9px; }
/* -- 4 sides -- */
.margin9 { margin: 9px; }

/* ERROR STYLES */
.error-box { border: 1px solid #c00; padding: 1px; }
.error-box .error-title {
    padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold;
}
.error-box .error-text { padding: 3px 5px; }
.error-box .error-text p { color: #c00; margin: 0; }
.error { color: #c00; }

/* Book your free assembly button */
.button-bookyourfreeschoolassembly { width: 328px; height: 25px; margin: 10px auto 10px auto; background: url(../../images/button_big_bookyourfreeschoolassembly.gif) top left no-repeat;}
.button-bookyourfreeschoolassembly a { width: 328px; height: 25px; display: block; outline: none; background: url(../../images/button_big_bookyourfreeschoolassembly.gif) top left no-repeat; }
.button-bookyourfreeschoolassembly a:hover { background-position: bottom left; }
.button-bookyourfreeschoolassembly span { display: none; visibility: hidden; }

/* View Video Button */
.button-viewvideo { width: 180px; height: 46px; display: block; outline: none; background: url(../../images/button_viewvideo.gif) top left no-repeat; margin: 0 auto; }
.button-viewvideo a { width: 180px; height: 46px; display: block; outline: none; background: url(../../images/button_viewvideo.gif) top left no-repeat; }
.button-viewvideo a:hover { background-position: bottom left; }
.button-viewvideo span { display: none; visibility: hidden; }

/* ERROR STYLES */
.error-box { border: 1px solid #c00; padding: 1px; }
.error-box .error-title { padding: 3px 5px; background-color: #c00; color: #fff; font-size: 80%; font-weight: bold; }
.error-box .error-text { padding: 3px 5px; }
.error-box .error-text p { color: #c00; margin: 0; }