/*
ESME MASTER FORMS CSS document
As originally defined by P.Emery and adapted by MJ Davey.
Revised to clarify and simplify
Ensured all colours are websafe too
mj davey, march 2011
reminders!
# relates to an *attribute* of an HTML element and is the 'id' of that element
#para1
{
text-align:center;
color:red;
}
. relates to a class which is a group of elements which have the same css style applied to them
i.e. all elements with class="centre" will be centre aligned.
.center {text-align:center;}
element.attribute explicitly sets attrbute for the given element
i.e. all p.center will be centre aligned!
p.center {text-align:center;}
order for 0 0 0 0 is TRouBLe (Top Right Bottom Left)
*/
/* paragraph html & body */
html
{
overflow-y: scroll;
margin: 5;
padding: 0;
}
/*
paragraph body
note: default font size is 16px - 100%. We would like to make it 12
1em = 16px so 10/12=0.625em 12/16=0.75em 14/16=0.875em 16/16=100%=1.0em
REF: http://www.w3schools.com/css/css_font.asp
*/
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#666666;
background-color:#ffffff;
background-image: url(/images/blueshade.jpg);
background-repeat: repeat-x;
text-align: left;
margin: 5;
padding: 0;
}
/*
class "hidden"
*/
.hidden
{
display: none;
}
/*
this is what limits the width on the display to 760px
everything is within this space
*/
#page-container
{
width:760px;
margin: auto;
}
/*
label: this is literally the label for the item we're sidplaying
Here's where we found this: http://blogs.sitepoint.com/fancy-form-design-css-3/#
display:block; -- this will force each element to be on a separate 'line'. Don't want this!
-- it is neat, easily readable, but consumes real-estate
float: left;
width: 10em;
margin-right: 1em;
-- this sets the LHS fine, but EACH element is now 'randomly' placed somewhere
-- and looks shi**
Answer: DON'T set a label style. Only configure the LHS element so that we line up from there...
*/
label
{
}
/*
label lhs: for ONLY the left hand side items, this class lines 'em up!
Here's where we found this: http://blogs.sitepoint.com/fancy-form-design-css-3/#
position: relative;
left:5em;
margin-right: 6em;
float: auto;
width: auto;
-- doesn't work
*/
label.lhs
{
float: left;
width: 11em;
margin-right: 1em;
}
/*
label em: so add the required field star we can improve on the look!
Here's where we found this: http://blogs.sitepoint.com/fancy-form-design-css-7/
*/
label em
{
}
/*
left-aligned-labels.css (excerpt)
float: left;
clear: both;
width: 100%;
margin: 0em 0em 0em 0em;
*/
fieldset
{
}
/*
if we want to differentiate fieldsets on a multi-fieldset form then we can change the colour of the background!
*/
fieldset.alt
{
background-color: #F2E9EF;
}
fieldset.alt-centre
{
background-color: #F2E9EF;
text-align: center;
}
/*
fieldset.li
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
*/
fieldset li
{
}
fieldset.submit
{
}
legend
{
font-weight: bold;
}
/*
specific element: paragraph.
note: setting default font size relative to 100% (16px/1em) to avoid sizing problems in all browsers.
font-size is effectively 10pt
*/
p
{
}
/*
specific attribute setting: used after iFrame options with googledocs.
*/
div.clear
{
clear: both;
}
/*
for DIV, this style (id) centres the content and pads out the top and bottom
used only fior the logo - this ensures that the nav & rest of page are below the dark bar
note: this applies to everything encapsulated within the
*/
#header
{
padding-top:42px;
padding-bottom:42px;
}
/*
for DIV, this style (id) centres the content and pads out the top and bottom
used only fior the logo - this ensures that the nav & rest of page are below the dark bar
note: this applies to everything encapsulated within the
*/
#footer
{
width:760px;
margin: auto;
background-color:#6ABCE4;
font-size:0.75em;
vertical-align:middle;
height:20px;
text-align:right;
color:#6633FF;
}
/*
for DIV, this style (for nav bar) sets height and right align
note: this applies to everything encapsulated within the
background-color:#6699CC;
color:white;
*/
#main-nav
{
height:32px;
font-size:0.825em;
color:#6633FF;
vertical-align:middle;
text-align:right;
}
/*
for DIV, this style (id) justifies content, makes it black and small font
*/
#content
{
text-align:justify;
font-size:0.875em;
}
#content-form li
{
margin: 0em 5em 0em 5em;
}
#content-form
{
font-size: 0.825em;
}
/*
paragraph style in content class
*/
#content-copyright
{
text-align: justify;
color:black;
font-size: 0.75em;
margin: 0;
padding: 5;
}
/*
paragraph music style in content class
*/
#content-music
{
text-align: justify;
color:blue;
font-size: 0.75em;
margin: 2;
padding: 4;
}
/*
for DIV, this style (id) sets txt 48px and deeper blue background colour
vertical-align:middle;
*/
#content-head
{
height:48px;
font-size:1.2em;
background-color:#022F46;
text-align:center;
color: white;
}
/*
for DIV, this style (id) vertically aligns and limits to 24 pixels
*/
#content-subhead
{
height:20px;
font-size:1em;
background-color:#006699;
vertical-align:middle;
color:white;
}
#content-iconlist
{
list-style: none;
margin: 0;
padding: 0;
font-size:0.75em;
vertical-align:middle;
}
/*
This allows us to differentiate the ticket states: SOLD OUT being ideal!!!
just use