/* TYPOGRAPHY */

/* text sizing http://24ways.org/2006/compose-to-a-vertical-rhythm */
body /* for ie6 and below */ { font-size: 90%; color: #3a3939 } 
html>body /* for all other browsers */ { font-size: 14px;} 
p, h2, h3, h4, h5, h6, ul, ol, dl, form, blockquote /* = 6px of spacing between lines making 21px total line-height */ 
{ line-height: 1.5em; }
p, h2, h3, h4, h5, h6, ul, ol, dl, form, blockquote /* set margins to preserve 21px line-height by matching line-height */ 
{ font-size: 1em; margin-top: 1.5em; margin-bottom: 1.5em; }
body { font-family:  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Verdana, Arial;     }
h1 {  font-size: 1.714286em; line-height: 0.875em; margin-top: 0.875em; margin-bottom: 0.875em; color: #e11e03 }
h2 { /* 18px */ font-size: 1.285714em;;  font-weight: normal; line-height: 1.166667em; margin-bottom: 1.166667em; margin-top: 1.166667em; color: #3a3939  }
h3 { /* 14px */ font-size: 1em;  font-weight: bold; line-height: 1.5em; margin-top: 1.5em; margin-bottom: 1.5em;  color: #3a3939  }
.smalltext /* equivalent to 12px */ { font-size: 0.857142em; line-height: 1.75em }

/* LINK  STYLING */
a, a:link, a:visited { text-decoration: none; color: #2791bc; border-bottom: 1px solid #93c8dd; }
a:hover, a:focus, a:active {  color: #0b6d95; border-bottom: 1px solid #0b6d95;}

/* PAGE STRUCTURE  25 280 25 280 25 280 25 */
#content { margin-top: 1em; }
/* columns are 305 or multiples of 305px, 25px gutter between content column and side nav */
#content-column-one { width: 610px; float: left;  margin: 0; padding: 0; display: inline;}
#content-column-two { float: right; width: 305px;   }
.center /* centers fixed width column, used for footer, header and content */ { width: 940px;  margin: 0 auto; position: relative   }
body form { padding: 0px; margin: 0px}

/* CONTENT STYLING  */
.keypoint { font-family: Georgia; font-style: normal; font-weight: bold; /* equivalent to 16px */ font-size: 1.142857em; line-height: 1.3125em; margin-top: 1.3125em; margin-bottom: 1.3125em; border-left: 0.2em solid #f3b64a; padding-left: 0.8em;  }
#content-column-one ul li { padding-left: 1em; padding-bottom: 0.2em; background: url(/vts09/images/bullet.gif) no-repeat 0 0.6em; }
#content-column-one ol { list-style: decimal; margin-left: 1.7em;}
#content-column-one ol li {  }
#vts-text {  background: url(/vts09/images/border.gif) repeat-x 0 0.75em; margin-top: 0; padding-top: 1.5em }
.float-box-right { width: /* 280-border-padding */ 228px; float: right; margin: 0 0 10px 25px; border: 0.1em solid #ccc; padding: 1.4em; position: relative; top: 1px  }
.float-box-right p, .box-full-width p { margin: 0; padding: 0 }
.box-full-width { border: 0.1em solid #ccc; padding: 1.4em; position: relative; top: 1px; margin-bottom: 1em  } 
.fact {  background-color: #e4f6fd; border-color: #c4e0ea; position: relative; font-family: Georgia; font-style: italic }
.fact h3 { font-style: normal; font-family:  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Verdana, Arial;   position: absolute; top: -2.5em; left: -1.0em; background: url(/vts09/images/fact-title-back.gif) no-repeat right bottom; padding: 5px 16px 5px 8px; color: white; }
table { border: solid #ccc 1px; padding: 0; margin: 0}
table td { margin: 0px; padding: 0.25em; border: solid #ccc 1px; }
table th { text-align: left; margin: 0px; padding: 0.25em; border: solid #ccc 1px; background-color: #e4e6e3}
table p { margin: 0; padding: 0}
table p { margin: 0; padding: 0}

/* HEADER */
#header-nav-basket-container{ background: #eae9d8; }
#header { background: #eae9d8; position: relative; height: 123px;  }
#header ul { margin: 0; padding: 0;  }
#header ul li { margin: 0; padding: 0; display: inline }
#tutorial-title { position: relative; width: 389px; height: 120px; background: #eae9d8}
#tutorial-title a { text-decoration: none; border: 0px }
#vts-logo a {  position: absolute; right: 70px;  top: 22px; border: 0 }
#mimas-logo  { font-size: small; position: absolute; right: 49px;  top: 28px; border: 0 }
#mimas-logo a {  border: 0 }

/* MAIN NAVIGATION */
#nav-basket-container { background: #373731; height: 36px; border-top: 1px solid #52524a; border-bottom: 1px solid #52524a;  }
#main-navigation { overflow: auto; float: left; margin: 0; padding: 0; background: #373731; position: relative; left: -16px }
#main-navigation li { float: left; }

/* IMAGE REPLACEMENT FOR NAVIGATION */
#main-navigation a /* all main nav links */{ height: 36px; position: relative; display: block; margin: 0; padding: 0; border: 0; }
#main-navigation a span /* all main nav spans */ { height: 36px; position: absolute; left: 0; top: 0  }
#main-navigation a.link-on span { z-index: 1 }
#main-navigation a:hover { cursor:pointer }

#nav-welcome a{ width: 123px; }
#nav-welcome a span { width: 123px; background: url(/vts09/images/nav-welcome.gif) no-repeat; }
#nav-welcome a.link-on span { background: url(/vts09/images/nav-welcome-on.gif) no-repeat; }
#nav-welcome a:hover span { background: url(/vts09/images/nav-welcome-hover.gif) no-repeat; }

#nav-tour a {  /* adjust padding to hide text links */ width: 87px; padding-left: 20px; left: -19px }
#nav-tour a span { width: 107px; background: url(/vts09/images/nav-tour.gif) no-repeat;  }
#nav-tour a.link-on span { background: url(/vts09/images/nav-tour-on.gif) no-repeat; }
#nav-tour a:hover span {  background: url(/vts09/images/nav-tour-hover.gif) no-repeat;  }

#nav-discover a { width: 119px; padding-left: 20px; left: -38px }
#nav-discover a span { width: 139px; background: url(/vts09/images/nav-discover.gif) no-repeat;  }
#nav-discover a.link-on span { background: url(/vts09/images/nav-discover-on.gif) no-repeat; }
#nav-discover a:hover span {  background: url(/vts09/images/nav-discover-hover.gif) no-repeat;  }

#nav-judge a { width: 97px; padding-left: 20px; left: -57px }
#nav-judge a span { width: 117px; background: url(/vts09/images/nav-judge.gif) no-repeat;  }
#nav-judge a.link-on span { background: url(/vts09/images/nav-judge-on.gif) no-repeat; }
#nav-judge a:hover span {  background: url(/vts09/images/nav-judge-hover.gif) no-repeat;  }

#nav-success a { width: 111px; padding-left: 20px; left: -76px }
#nav-success a span { width: 131px; background: url(/vts09/images/nav-success.gif) no-repeat;  }
#nav-success a.link-on span { background: url(/vts09/images/nav-success-on.gif) no-repeat; }
#nav-success a:hover span {  background: url(/vts09/images/nav-success-hover.gif) no-repeat;  }

#nav-finally a { width: 98px; padding-left: 20px; left: -95px }
#nav-finally a span { width: 118px; background: url(/vts09/images/nav-finally.gif) no-repeat;  }
#nav-finally a.link-on span { background: url(/vts09/images/nav-finally-on.gif) no-repeat; }
#nav-finally a:hover span {  background: url(/vts09/images/nav-finally-hover.gif) no-repeat;  }

/* SIDE NAVIGATION */
.sub-navigation { font-weight: bold; margin-top: 0; padding-top: 1.5em;  background: url(/vts09/images/border.gif) repeat-x 0 0.75em; height: 1% }
.sub-navigation .link-on { color: #e11e03; font-weight: bold; }
#sub-sub-navigation { font-weight: normal; margin: 0;  }
#sub-sub-navigation li { background: url(/vts09/images/subsubnav-bullet.gif) no-repeat 0.1em 0.8em; padding-left: 1em}
#sub-sub-navigation .link-on { background: url(/vts09/images/subsubnav-bullet-on.gif) no-repeat 0.1em 0.8em; }

/* LINKS BASKET */
#links-basket { color: #eeeeee; background: #4e4e48; width: /* 305 - borders */ 314px; height: 36px; position: absolute; right: 1px;border-left: 2px solid #777773; border-right: 2px solid #777773 }
#links-basket p {  margin: 0; padding: 0 0 0 25px; background: url(/vts09/images/links-basket-back.gif) no-repeat 2px 2px; position: relative;  top: 8px; left: 1.1em  }
#links-basket p a { color: white; text-decoration: none; border-color: #a7a7a4 }
#linkback { text-decoration: none; border: 0 }
.add-link { border:  0; position: relative; }
.add-link img { margin-left: 3px; position: relative; top: 3px }
.lb { vertical-align: middle; }

/* FOOTER */
#footer { background: url(/vts09/images/border.gif) repeat-x 0 0;  color: #666; position: relative; clear: both }
#footer ul { margin: 0; padding: 0.75em 0 2em 0; overflow: auto }
#footer ul li { float: left; margin-right: 0.5em ;}
#jisc-logo { position: absolute; right: 0 }
#jisc-logo a { border: 0 }

/* PAGINATION */
#pagination {  padding: 0 0 1em 0; overflow: auto }
#pagination ul { width: 300px; position: relative; left: -95px; margin: 0 0 0 50%;  }
#pagination ul li { padding: 0 0 }
#content-column-one #pagination li { float: left; background: none; font-weight: normal; color: #aaa; padding-top: 3px  }
#pagination #next, #pagination #prev  { position: relative; height: 30px; width: 68px;  }
#pagination a:hover { cursor: pointer }
#pagination #next { margin-left: 10px; }
#pagination #prev { margin-right : 10px;  }
#pagination #next span, #pagination #prev span { display: block; width: 68px; height: 30px; position: absolute; top: 0; left: 0; z-index: 1 }
#pagination #next span { background: url(/vts09/images/next.gif) no-repeat; }
#pagination #prev span { background: url(/vts09/images/prev.gif) no-repeat; }

/* VARIOUS TYPOGRAPHIC TWEAKS */
#content-column-two h2 { margin-bottom: 0; margin-top: 1.166667em;  }

/* HOMEPAGE AND MINI_HOMEPAGE STRUCTURE */
.content-columns { overflow: auto; height: 1%; }
.content-col-left { float: left; width: 295px;  margin: 0 0 2em 0; padding: 0 }
.content-col-right { margin: 1em 0 2em 315px;  } 

/* HOMEPAGE STYLING */
.intro p /* 16px */ { font-size: 1.142857em; line-height: 1.3125em; margin-top: 1.3125em; margin-bottom: 1.3125em;  }
.intro a  { border: 0 }
.intro img { position: relative; top: 0.5em }
.homepage-author { border: 1px solid #ccc; padding: 0.5em 1.5em 0 1.5em; margin: 2em 0 1.5em 0; background-color: #e4f6fd; border-color: #c4e0ea; position: relative;  }
.homepage-author h2 { margin: 0; font-size: 1em;  font-weight: bold; line-height: 1.5em; margin-top: 0; margin-bottom: 0; }
.homepage-author h3 { font-style: normal; font-family:  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Verdana, Arial;   position: absolute; top: -2.5em; left: -0.75em; background: url(/vts09/images/fact-title-back.gif) no-repeat right bottom; padding: 5px 16px 5px 8px; color: white; }
.homepage-author p { }
#homepage-image { position: relative; left: 5px }

/* SIX STEPS */
#content-column-one ol#sixsteps li  { margin-bottom: 1.5em; background: url(/vts09/images/sixstep_list_back.jpg) no-repeat left top; padding-left: 1em;  }
#content-column-one ol#sixsteps li p { padding-top: 8px; font-weight: bold; margin-bottom: 1em}

/* chapter start */
#chapter-start {  border: 0.1em solid #c2c1a8; padding: 0 1.4em; background: #eae9d8 url(/vts09/images/chapter-back.jpg) repeat-x; overflow: hidden; margin: 1.0em 0 1.5em 0; min-height:300px; height:auto !important; height: 300px}
#chapter-start img { float: right; border: 1px solid #ccc; background: white; padding: 3px; margin: -3em 0 1.5em 1.5em }
#chapter-start .keypoint { font-family:  "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Verdana, Arial;  font-style: normal; /* equivalent to 16px */ font-size: 1.142857em; line-height: 1.3125em; margin-top: 1.3125em; margin-bottom: 1.3125em; border-left: 0; padding-left: 0; font-weight: bold }

/* QUIZ */
#questions {  border-bottom: 0.1em solid #e1e1d2; margin-bottom: 1.5em }
#questions h3 { border-top: 0.1em solid #e1e1d2; padding: 0.75em 0 0 0  }
#questions ol {  margin: 0 0 0 1.75em; padding: 0}
#questions ol li { margin: 0; padding: 0; list-style: lower-alpha }
#questions p a { border: 0px; text-decoration: none; }

#questions .furtherinfo span { border: 1px solid #e1e1d2; padding: 0.75em 4em 0.75em 0.75em; margin: 1em 0 0.2em 0; display: block}
#questions .furtherinfo img { float:right; margin: -1.5em 5px 5px 5px; }

/* #questions .am-i-right { background: transparent url(/vts09/images/am-i-right.gif) no-repeat top left; height: 30px; width:93px; border: 0; } */
#questions input.am-i-right, input.hint, input.explanation { font-size: 1em; font-family: "Lucida Sans", "Lucida Sans Unicode", Lucida, Verdana, Arial;  background-color:#daf0f8; border: 1px solid; border-color: #2791bc;  padding: 4px; }

/* IFRAMES */
iframe { border: double 4px #ccc}

/* EXTRA BOXES USED FOR RIGHT COLUMN, E.G. IN LINKS BASKET */
.content-column-two-div { border: 0.1em solid #c4e0ea; padding: 0 1.4em; position: relative; top: 1px; background-color: #e4f6fd; margin-bottom: 0.75em  }
.links-basket-div ul, .links-basket-div form  { margin: 0; padding: 0 }
.email-links input { margin-bottom: 0.4em}

/* LINKS BASKET */
#link-tabbed-basket {  padding: 0 1.4em 1.4em 1.4em; border: 0.1em solid #e1e1d2;  margin: 0;    height: 1%; border-top: 1px solid #e1e1d2  }
#content-column-one #link-tabs li {  float: left; margin: 0 0.5em 0 0; background: none; border: 1px solid #e1e1d2; display: block; position: relative; top: 1px; background: #eae9d8; padding: 0 }
#content-column-one #link-tabs { margin: 0; padding: 0; ; overflow: hidden; width: 100%; height: 1%; margin-right: -3px /* http://www.positioniseverything.net/explorer/dup-characters.html */; position: relative; top: 1px; }
#content-column-one #link-tabs li.link-on { border-bottom: 1px solid white; color: #e11e03; font-weight: bold; background: white;  }
#content-column-one #link-tabs li.link-on, #link-tabs li a { display: block;  padding: 0.4em 1em 0.4em 1em;  margin: 0; position: relative; top: 1px; margin-right: 0.5em  }
#link-tabs li a { border: 0; color: #4f4c4c; font-weight: bold; }

/* Export link */
#export { font-weight: lighter ;}
#export a { font-weight: bold ;}
#export img { border: none; text-decoration: none; vertical-align: bottom; }

.thingstonotice { visibility: visible; display: none; border: 1px solid #e1e1d2; padding: 0 1em 0 1em; margin-bottom: 1em}

.screenhidden { visibility: hidden; display: none;}

/* why do this tutorial */
.why-do-tutorial .content-col-left {  margin: 0 0 1em 0;  }
.why-do-tutorial .content-col-right  { margin: 0 0 1em 315px; }
.why-do-tutorial img { padding: 2px; border: 1px solid #ccc; float: left;  }
.why-do-tutorial h3, .why-do-tutorial p { margin: 0 0 0 90px }
.why-do-tutorial h3 { color: #e11e03; font-size: 1.285714em;  font-weight: normal; line-height: 1.166667em; margin-top: 0.2em   }

/* www */
#content-column-one #www-list {  overflow: auto; border: 1px solid #c4e0ea; padding: 0.75em 0.75em 0.75em 0.75em; background-color: #e4f6fd; }
#content-column-one #www-list li {  background: none; padding: 0; margin: 0 0 0.75em 0;  width: 100% }
#content-column-one #www-list p { margin: 0 0 0 50px;  }
#content-column-one #www-list a { font-weight: bold  }
#content-column-one #www-list li img { border: 1px solid #ccc; padding: 2px;float: left }

/* button style */
.buttonstyle { border: 1px solid #2791bc; padding: 0.2em; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Lucida, Verdana, Arial; font-weight: bold; background: #e0f4fc; color: #333333;  } 

/* image styling */
.image-border { padding: 2px; border: 1px solid #ccc; }
.image-float-right { float: right; margin: 0 0 0.75em 1.5em }
.image-float-left { float: left; margin: 0 1.5em 0.75em 0 }


/* Feedback form */
#feedbackform { padding: 0 1.4em 1.4em 1.4em; border: 0.1em solid #e1e1d2; }

/* instructions */
.instruction { font-family: Georgia; font-style: italic; /* equivalent to 16px */ font-size: 1.142857em; line-height: 1.3125em; margin-top: 1.3125em; margin-bottom: 1.3125em; border: 0.1em solid #f3b64a; padding-left: 0.8em; padding: 0.65625em; margin-top: -0.1em; background: #fffadb; clear: both; }

/* home page image block */
#content-column-one .home-image-block ul { padding: 0px; margin: 0px; float: left; margin-top: 5px }
#content-column-one .home-image-block ul li { float: left; list-style-type: none; background-image: none; margin: 0; margin-bottom: -2px; padding: 0px; width: 147px;}
#content-column-one .home-image-block img { border: 2px #e4e6e3 solid; padding: 0.2em }

:target {background-color: #eee}

.didyoufind { clear: both; padding: 10px; font-size: 80%; border: 1px sold #ccc; background-color: #eee}

#sponsor-logos
{
	position: absolute;
	right: 0;
}
#sponsor-logos a
{
	border: 0;
}

#referrer {
        visibility: hidden;
        display: none;
}

#vtsfuture {
	text-align: center;
	background-color : #7EB734;
	font-family: "Lucida Grande","Lucida Sans","Lucida Sans Unicode",Lucida,Verdana,Arial;
	font-size : 90%;
	margin: 0px;
	padding : 10px;
}

#vtsfuture a {
	color: white;
}

/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}
   
#boxes .window {
  position:absolute;
  width:440px;
  height:240px;
  display:none;
  z-index:9999;
  padding:20px;
}
 
 
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
  width:375px;
  height:243px;
  border: 2px solid #ccc;
  background-color: #fff;
  border-radius: 13px;
  -moz-border-radius: 13px;
  -webkit-border-radius: 13px;

}

#dialog a#close {
    /* styles for button */
    margin:10px auto 0 auto;
    text-align:center;
    display: block;
    width:50px;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
     
    /* button color */
    background-color: #e33100;
     
    /* css3 implementation :) */
    /* rounded corner */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
     
    /* drop shadow */
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     
    /* text shaow */
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
     
}
 
#dialog a#close:hover {
    background-color: #c33100; 
}

#dialog img {
	float: right;
	margin: 0 0 3px 5px;
	padding: 0;
	border: #ccc 1px solid;
}

#dialog h2 {
	margin-bottom: 30px;
}

#dialog small {
	font-size: 0.7em;
	color: #333;
	line-height: 1.2em;
}