/*   ----------------------------------------------------------------
     ABOUT THIS DOCUMENT
     ----------------------------------------------------------------  */

/* This document contains styles used in oxford research internation web site.
 */

/*   ----------------------------------------------------------------
     VERSION HISTORY
     ----------------------------------------------------------------  */

/* BS 9/07 - Created this document */


/*   ----------------------------------------------------------------
     BROWSER SUPPORT NOTES
     ----------------------------------------------------------------  */

/*   IE 5 not supported by this CSS; we did not include special hacks to make the CSS look good in IE 5.  */



/*   ----------------------------------------------------------------
     COLOR KEY - LIST OF COLORS USED
     ----------------------------------------------------------------  */

/*  
#5a5c73 - gray dark, with a hint of purple
#b0b3bc - gray medium - for Steps
#d0d4dd - gray light, with a hint of purple - for H1 backgrounds
#e3e5ee - gray pale, with a hint of purple (background of forms, etc)
#312b65 - purple dark - for headings
#645f93 - purple - for subheadings
#8583a6 - purple medium
#7f9db9 - steel blue - for form field borders
#d33802 - red
#d5b775 - brown
#feffbf - yellow pale
*/


/*   ----------------------------------------------------------------
     JUST FOR USE WHEN DEBUGGING:
     ----------------------------------------------------------------  */

.testborder {
	 border-color:#FF0000;
	 border-width: 1px;
     border-style: solid;
	 }
.testbkgd1 {background-color:#FFFF00;} 
.testbkgd2 {background-color:#FF99FF;} 
.testbkgd3 {background-color:#66FFFF;} 

/*   ----------------------------------------------------------------
     BASIC STUFF
     ----------------------------------------------------------------  */
	 
html {
     font-size: 62.5%; /* sets baseline at 10px in most major browsers (the browsers that use 16px as base font size). 
	 Also, using percent addresses problem in IE 6, where user sizing down text causes em-sized fonts to get too small. */
	 }

body     {
     margin: 0;
	 padding: 0;
	 background-color: #ffffff;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     color: #000000;
     font-size: 1.2em; /* sets default font size to be equivalent of 12px.  */
	 line-height: 1.3;
	 }

a:link    {text-decoration: underline; color: #1664b4; font-weight: normal;}
a:visited {text-decoration: underline; color: #5a5c73; font-weight: normal;}
a:hover   {text-decoration: underline; color: #ff6600; font-weight: normal;}
a:active  {text-decoration: underline; color: #ff6600; font-weight: normal;} 

#skiplink.a:link     {text-decoration: none;}
#skiplink.a:visited  {text-decoration: none;}
#skiplink.a:hover    {text-decoration: none;}

div {margin: 0; padding: 0} 

p {margin: 0 0 .5em 0; padding: 0}


img {border: 0;}

.nofloat {float: none;} /* use if something is normally floating, but you don't want it to. */
.nobreak {white-space: nowrap;} /* use if you don't want a set of words (or other inline elements) to break to 2 lines. */
.notbold {font-weight: normal} /* use if something is normally bold, but you don't want it to be. */
.nospace {margin: 0; padding: 0;} /* use if something normally has space around it, but you don't want it to. */

/*   ----------------------------------------------------------------
     PAGE STRUCTURE
     ----------------------------------------------------------------  */ 

#pagewrapper {
 	 /* this centers the contents of the page: */
	 margin-top: 0;
	 margin-left: auto; 
	 margin-bottom: 0;
     margin-right: auto;
	 /* OLD SITE. The 95% width matches the width of the old site, and puts white space around the page contents, like the old site: */
	 width:95%; 
	 /* this sets a minimum-width for the whole page: */
	 position:relative;  
	 min-width:63em; 
	 /* this min-width was optimal for making things fit well on each form row, so elements don't awkwardly break to multiple lines. */
	 }
#holder {display:block;} /* need a holder div insde the pagewrapper in order for minimum-width to work in IE 5.5 and 6 */
* html .pagewrapper {border-right:63em solid #fff; } /* For IE 5.5 and 6 */
* html .holder {display:inline-block; position:relative; margin-right:-63em} /* For IE 5.5 and 6 */

	 	 
.container { /* This box contains the forms in the Event Reg process. OLD SITE.: It mimics the look of the "content2" table that is used in the rest of the site as of spring 2007. */
	 border:#999 1px solid;
	 padding: 1.3em;
	 margin-bottom: 3em;
	 background-color: #fff;
	 background-repeat: repeat-x; 
	}
.container:after { /* this "clearfix" clears any floated elements inside the container. Clearfix is explained further below in this document. */
     content: ".";
     display: block;
     height: 0; /* ensures the period is not visible */
     clear: both; /*make the container clear the period */
     visibility: hidden; /* further ensures the period is not visible */
	 }
.container {display:inline-block;} /* for IE */
.container {display:block;} /* for IE */
* html .container {height:1%} /* for IE 6 */


.subcontainer { /* place a div with class="subcontainer" inside the container, if you want the contents to have fixed width. Used on the Verify page.*/
	 width: 44em;
	}
.subcontainer:after { /* this "clearfix" clears any floated elements inside the container.  */
     content: ".";
     display: block;
     height: 0;
     clear: both; 
     visibility: hidden; 
	 }
.subcontainer {display:inline-block;} 
.subcontainer {display:block;} 
* html .subcontainer {height:1%} 


/*   ----------------------------------------------------------------
     HEADINGS
     ----------------------------------------------------------------  */

h1 {
	 font-size: 1.5em; 
	 font-weight: bold;
	 margin: 0; 
	 padding: .3em .9em .3em .9em; 
	 color: #000000;
	 background-color: #d0d4dd;
	 border-width: 1px 1px 0 1px;
	 border-style: solid;
	 border-color: #999
	 }
h1 .datetime {
     font-size: .8em;
	 text-transform: uppercase;
     color: #000000;
     font-weight: normal;
	 white-space: nowrap;
	 }	 
h2 {     
     font-size: 1.5em;
     margin: 0 0 .5em 0; 
	 padding: 0;
	 color: #645f93; 
	 font-weight: bold;
     }
p + h2 {margin-top: 1em;} 
ul + h2 {margin-top: 1em;} 


h3 {
     font-size: .9em;
	 text-transform: uppercase;
     color: #645f93; 
     font-weight: bold;
	 letter-spacing: .1em;
     margin: 0 0 .3em 0;
	 padding: 0;
     }
p + h3 {margin-top: 1.5em;} 
ul + h3 {margin-top: 1.5em;} 
.formcontainer h3 { /* headings inside forms */
     padding: .3em;
	 border-width: 2px 0 2px 0; 
     border-style: solid; 
     border-color: #fff;
	 }
/* for headings inside "receipts", see further below in this document */	 
h4 { 
     font-size: 1.1em;
     color: #000000;
     font-weight: bold;
	 margin: 0px 0px .3em 0px;
	 padding: 0;
     }
p + h4 {margin-top: 1.5em;} 
ul + h4 {margin-top: 1.5em;} 
.formcontainer h4 { /* headings inside forms */
	 color: #645f93;
	 }

h5 {
     font-size: 1em;
     margin: 0 0 .3em 0;
     color: #000000;
     font-weight: bold;
	 padding: 0;
     }
ul + h5 {margin-top: 1em;} 

h6 {
     font-size: 1em;
	 font-style: italic;
     color: #000000;
     font-weight: bold;
     margin: 0 0 .3em 0;
	 padding: 0;
     }
ul + h6 {margin-top: 1em;} 

/*===============================================================================*/
/* ===>  Fonts / Sizes  <======================================================= */
/*===============================================================================*/
.size { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1.2em;
    font-weight: normal;
}

.large_size { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1.5em;
    font-weight: normal;
}

.large_boldsize { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1.5em;
    font-weight: bold;
}

.boldsize { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1.2em;
    font-weight: bold;
}
.small_size { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1em; 
}
.small_boldsize { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
}
.small_boldsize_white { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 1em; 
    font-weight: bold;
    color: #FFFFFF;
}    
.inline_link {
    text-decoration: underline; 
    color: #E0AA0F;    /* color -> 10 */
}




/*   ----------------------------------------------------------------
     FORM ELEMENTS
     ----------------------------------------------------------------  */

form {margin: 0; padding: 0}

.formcontainer {
	 background-color: #e3e5ee;
	 background-repeat: no-repeat; 
	 padding: 1.3em;
	 }

label, label.normal {
	 float: left; 
	 width: 13em;
	 text-align: right;
	 font-weight: bold;
	 vertical-align: middle; 
	 margin-right: .5em;
	 /* Labels are floated to the left of input fields. */
	 /* "normal" class is assigned to labels that need ability to switch to "error" class, for error messaging */ 
	 } 
label.error {color: #d33802} /* "error" class can replace "normal" class to indicate there's a problem. Used in error messaging. */
	 
label.checkboxradio, label.checkboxradio.normal { 
	 float: none;
	 margin-right: 0; 
	 text-align: left;
	 width: auto;  
	 /* Use the "checkboxradio" class on labels for checkboxes & radio buttons. 
	 These labels don't float, unlike normal labels. */
	 /* "normal" class is assigned to labels that need ability to switch to "error" class, for error messaging */	 
	 }
label.checkboxradio.error {color: #d33802} /* "error" class can replace "normal" class on labels to indicate there's a problem. Used in error messaging. */

form .indent {margin-left: 13.5em;
	 /* This corresponds to the width of the floating label (including its margin-right)
	 Use "indent" class for items that you want to have indented to the right of the labels. 
	 For example, use this to indent Help text underneath input fields. */
	 }
.required {color: #d33802; font-weight: bold;}
	 /* Put an asterisk in the label for each form field that is required. 
	 Use a span tag with this class on it, for the asterisk */

.row {margin: 0; padding: .5em 0 .5em 0;}
/* each row in the form is in a div with this class on it. */
.row:after { /* clearfix code; it clears any floats that are inside the row */
     content: ".";
     display: block;
     height: 0; 
     clear: both; 
     visibility: hidden; 
	 }
.row {display:inline-block;} 
.row {display:block;} 
* html .row {height:1%}

select, select.normal {font-size: 1.2em; vertical-align: middle;}
/* "normal" class is assigned to selects that need ability to switch to "error" class, for error messaging */
select.error {border: 1px #d33802 solid} /* fyi IE7 does not display borders on selects */
/* "error" class can replace "normal" class on selects to indicate there's a problem. Used in error messaging. */

input, input.normal {vertical-align: middle; font-size: 1.2em;} 
/* "normal" class is assigned to labels that need ability to switch to "error" class, for error messaging */
input[type="text"]{border: 1px #7f9db9 solid} 
input.error {border: 1px #d33802 solid}
/* "error" class can replace "normal" class on inputs to indicate there's a problem. Used in error messaging. */
	 
textarea, textarea.normal {font-size: 1.1em; font-family: Verdana, Arial, Helvetica, sans-serif;}
/* "normal" class is assigned to textareas that need ability to switch to "error" class, for error messaging */
textarea.error {border: 1px #d33802 solid}
/* "error" class can replace "normal" class on textareas to indicate there's a problem. Used in error messaging. */

.formcontainer hr {border-width: 0 0 2px 0; border-style: solid; border-color: #fff; height: 2px; margin: 0; padding:0} /* This is a white line */

.secondary-button {
	 /* apply this class to the secondary button in the form.
	 This will float it to the left of the primary button
	 and makes it line up nicely with the other form field labels */
	 float:left;
	 margin-top: 6px/* makes the secondary button look vertically centered with the larger primary button */
	 }
	 
/*   ----------------------------------------------------------------
     FIELDSETS
     ----------------------------------------------------------------  */

fieldset {
	 /* a fieldset tag is typically used to group a set of checkboxes or 
	 radio button and provide a text legend (similar to a label) 
	 that describes the whole group */
	 position:relative; 
	 border:0px; 
	 padding:0px;
	 margin:0px;
	 }
.beforefieldset { 
	 /* If you want the fieldset's legend to display to the LEFT of the fieldset's other contents:
	 - Put this code right BEFORE a fieldset tag: <div class="beforefieldset"></div>
	 - Also see also the instructions for "moveleft" below.
	 You do NOT need to do all this, if you want the legend to appear ABOVE the fieldset's contents.  */
	 float:left; 
	 margin:.5em; 
	 width:12.5em;  /* number corresponds to the width of the floated labels used elsewhere in the form */
	 }
legend, legend.normal {
	 text-align: right;
	 font-weight: bold;
	 color: #000;
	 /* "normal" class is assigned to legends that need ability to switch to "error" class, for error messaging */
	 }
legend span.moveleft {
	 /* If you want the fieldset's legend to display to the LEFT of the fieldset's other contents:
	 - Follow the instructions for "before fieldset" above
	 - And put a span tag inside the fieldset's legend tag, with the "moveleft" class on the span tag. 
	 - Put the legend's text inside the span tag.
	 This will move the lagend to the left of the fieldset's contents
	 and makes it line up nicely with other form field labels on the page */
	 display:block;
	 position:absolute;
	 left:-13.5em; /* number corresponds to the width of the floated labels */
	 width:13em; 
	 }
legend.error {color: #d33802} /* "error" class can replace "normal" class on legends to indicate there's a problem. Used in error messaging. */

fieldset .indent {
	 margin-left: 1.8em;
	 /* Use "indent" class to indent text underneath checkboxes and radio buttons, inside fieldset tags.
	 For example, use this to indent Help text. */	 
	 }
fieldset .row {
	 margin: 0px; 
	 padding: 0px 0px .5em 0px;
	 /* you can put each input & label on its own div class="row", inside fieldsets, to create extra vertical spacing between them. */
	 }
fieldset div.moveright {
	 /* If you want the fieldset's legend to display ABOVE the fieldset's other contents:
	 - You can place all the other fieldset contents inside a wrapper div with class "moveright"
	 This will indent the contents so they line up nicely with the other form input fields on the page. (The legend would not be indented.) */
	 margin-left: 13.5em; /* number corresponds to the width of the floated labels used elsewhere in the form */
	 margin-top: .5em /* Adds extra space between this div and the legend above it */
	 }
	 
/*   ----------------------------------------------------------------
     EXPLANATORY/INSTRUCTIONAL NOTES AND HELP TEXT
     ----------------------------------------------------------------  */

.note {
	 /* Use this for explanatory or instructional notes. 
	 For example, you can use this to provide extra explanation/instructions to form fields. 
	 Put this class on a div that surrounds the note text. */
	 color: #5a5c73; /* gray */
	 } 

.helptext {
	 /* Use this for Help text.
	 For example, you can use this to display extra help or tips for form fields.   
	 Put this class on a div that surrounds the Help text. 
	 "helptext" class is similar to "note" classbut it usually is shown in response to a user click, and it looks different. (It stands out more). */
	 color: #5a5c73; 
	 background-color: #feffbf;
	 border-color:#d5b775;
	 border-width: 1px;
     border-style: solid;
	 padding: .2em .5em .3em .5em;
	 } 

.note a:link , .helptext a:link    {text-decoration: underline; color: #5a5c73; font-weight: normal;}
.note a:visited, .helptext a:visited {text-decoration: underline; color: #5a5c73; font-weight: normal;}
.note a:hover, .helptext a:hover   {text-decoration: underline; color: #ff6600; font-weight: normal;}
.note a:active, .helptext a:active  {text-decoration: underline; color: #ff6600; font-weight: normal;} 
.note p, .helptext p {
	 padding: 0px;
	 margin: 0px; 
	 }
.note ul, .helptext ul {
	 padding: 0px;
	 margin: 0 0 0 1.25em; 
	 }
.note ol, .helptext ol {
	 padding: 0px;
	 margin: 0 0 0 2em;
	 }
.note li, .helptext li {
	 padding: 0px;
	 margin: 0px; 
	 line-height: 1.2;
	 }
.note li li, .helptext li li {
	 padding: 0;
	 margin: 0; 
	 line-height: 1.2;
	 }

	 
	 	 
/*   ----------------------------------------------------------------
     FOR REMOVING ADDITIONAL ATTENDEES
     ----------------------------------------------------------------  */
	 
.addlattendee, .addlattendee.normal { /* assigned to a div that surrounds an additional attendee's fields */
	 opacity:1.0; /* for Firefox */
	 filter:alpha(opacity=100); zoom: 1; /* for IE */
	 /* assign the "addlattendee" class to a div containing a set of form fields for an additional attendee */
	 /* also assign the "normal" class to this div, so that it can be swapped out with the "removed" class, when needed */
	 } 
.addlattendee.removed { /* "removed" class replaces "normal" class, after user checks the 'Remove this person' checkbox.*/
	 opacity:.4; /* for Firefox */
	 filter:alpha(opacity=40); zoom: 1; /* for IE */
	 /* This makes everything in the "addlattendee" div becomes transparent (grayed-out) */
	 }
.addlattendee.removed fieldset { /* IE needs this extra code, to make the fieldsets transparent. */
	 filter:alpha(opacity=40); zoom: 1;
	 }
.removalfeature { /* assigned to a span around the 'Remove this person' checkbox & the label */
	 white-space: nowrap;
	 padding-left: .5em;
	 font-size: .9em;
	 } 
.removalfeature label { /* the label text for 'Remove this person' checkbox is not bold  */
	 font-weight: normal;
	 }
.removed .removalfeature { /* ensures the 'Remove' checkbox does not become transparent in IE, when it's checked. (there is no solution for FF) */
	 filter:alpha(opacity=100); zoom: 1; /* for IE */
	 position: relative; /* for IE */
	 }


/*   ----------------------------------------------------------------
     MISC
     ----------------------------------------------------------------  */

.datetime {
     font-size: .9em;
	 text-transform: uppercase;
     font-weight: normal;
	 white-space: nowrap;
	 }
	 
.fee {font-weight: normal;} /* assign to a span tag around fees inside form labels - makes them not bold */

/*   ----------------------------------------------------------------
     FLOATS, CLEARING, & IE'S "HASLAYOUT"
     ----------------------------------------------------------------  */

.floatleft {float: left;}	

.floatright {float: right;}	

.clearall  {
     clear: both;
     }

.clearer {
     clear: both;
	 margin: 0;
	 padding: 0;
     }

/* ----- "CLEARFIX" Easy Clearing Method -----*/

/* Source: 456BereaStreet site.
Add this class to a parent element that contains floated elements, to:
- Clear everything that follows the parent element.
- Make the parent stretch its height to enclose its children.
Benefit of this method is you do not need to add an extra structural element to your layout that only serves to clear floats. It also addresses various browser bugs.
I think the container needs to be non-floated.
IE 6 & 7 do not support :after but this modified version of the easy clearfix code is supposed to work for them.  
*/

.clearfix:after { 
     content: ".";
     display: block;
     height: 0; /* ensures the period is not visible */
     clear: both; /*make the container clear the period */
     visibility: hidden; /* further ensures the period is not visible */
	 }
.clearfix {display:inline-block;} /* I think this triggers hasLayout for IE. */
.clearfix {display:block;} 
* html .clearfix {height:1%} /* For IE 6. If 1% doesn't work, then try 1px. */

/* ----- Has Layout -----*/

/* If you apply the following class to any element, it will trigger "hasLayout" in in IE 4 and higher. Triggering hasLayout on an element can resolve IE problems (incl. v 6 & 7) that are related to:
- IE float bugs
- boxes treating basic properties differently
- margin collapsing between container and children
- problems with lists
- differences in positioning of bkgd images
- differences when using scripting
This zoom technique has the same effect as the famous "Holly Hack" technique.
*/
 
.triggerlayout {
     zoom: 1
	 } 

/*   ----------------------------------------------------------------
     ACCESSIBILITY
     ----------------------------------------------------------------  */


/* use the following class if you want to give information to blind visitors, but hide it from visual visitors. This class positions the content off-screen. */
.forblindvisitors {position: absolute; left: 0; top: -500px; width: 1px; height: 1px; overflow: hidden;}
/* This technique is from http://webaim.org/techniques/css/invisiblecontent/#contextualcues */

/* this is for Skip Navigation links. This technique is from webaim.org. The Skip Navigation link will become visible when keyboard users tab to the link. */
.skipper a, .skipper a:hover, .skipper a:visited {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden;}
/* This technique is from http://webaim.org/techniques/skipnav/#focus */

.skipper a:active {position:static; width:auto; height:auto; font-size: 1.2em; font-weight: bold;}

/* Footer */

#footer {
  border-top: 1px solid #909ba6;
  border-bottom: 3px solid #663366;
  clear: both;
  height: 7em;
  margin-top: 10px; 
  margin-bottom: 10px;
  margin-left: 1%;
  margin-right: 1%;
  padding-bottom: 5px;
  /* Width set so that WinIE6 treats div as a container */
}

#center{
  float: left;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 47%;
}


#address{
  font-size: .8em;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  text-align: left;
  width: 200px;
}
#footerheading{
  background-color: transparent;
  color: #660066; 
  font-family: trebuchet ms, tahoma, verdana, arial, sans-serif; 
  font-size: 1.6em;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
}

#copyright {
  float: right;
  font-size: .8em;
  width: 25%;
} 
#copyrightstatement {
  float:right
  }

#privacyComments {
  float: left;
  font-size: .8em; 
  width: 25%;
  /* Margin for IE6 Win only */
}

/* End Footer */