/*
Why Study Languages, University of Southampton
Updated: 16th jan 2006 rej
*/

body {
    background-color:#004764;
	margin: 0;
	padding: 0;
	text-align:center;
}
/* ---( font parameters )------------------------------- */

body {
 font-size: small;
 }

* html body {
 font-size: x-small;
 /* for IE5/Win */
	f\ont-size: small;
 /* for other IE versions */: undefined;
 }
 
/* ---( text )------------------------------- */

body, td, th, p {
 font-family: "Trebuchet MS", Verdana, arial, helvetica, sans-serif;
 }

p {
 color: #666;
 margin: 0;
 line-height: 1.5em;
 }

h1, h2, h3, h4 {
 font-family: "Trebuchet MS", Verdana, arial, helvetica, sans-serif;
 margin: 0;
 }

h1 {
 font-size: 200%;
 color: #fff;
 padding: 0;
 line-height: 1.5em;
 }

h2 {
 font-size: 110%;
 font-weight: bold;
 }
 
h3 { 
 font-size: 100%;
 
}

h4 {
 font-size: 100%;
 color: #999;
 font-weight: normal;
 font-style: italic;
 padding-top: 0px;
 }

a:link {
 color: #36f;
 text-decoration: none;
 }

a:active {
 color: #333;
 text-decoration: underline;
 }

a:visited {
 color: #969;
 text-decoration: none;
 }

a:hover {
 color: #333;
 text-decoration: underline;
 }
 
ul {
 color: #666;
 font-family: "Trebuchet MS", Verdana, arial, helvetica, sans-serif;
 margin: 0;
 padding: 0px 15px 5px 30px;
 }
 
.url {
 font-size: 90%;
 color: #666;
}
 
/* ---( layout )------------------------------- */

#wrapper {
 position: relative;
 width: 774px;
 text-align:left;
 margin:auto;
 background-image:url(../images/main_background.gif);
 background-repeat:repeat-y; 
 }
 
/* ---( banner )------------------------------- */
 

#logo_banner_outer {
 background:#eee;
 width: 718px;
 margin-left:27px;
 margin-bottom: -1px;
 background-image:url(../images/banner_border_bg.gif);
 background-repeat:repeat-y; 
}
#logo_banner_outer:after { 
 content: "."; display: block; height: 0; clear:right; 
 color:#fff;
}

#logo_banner {
 width: 714px;
 margin:auto; 
 background: #FBF8FC url(../images/banner_background.gif) repeat-x;
}
#logo_banner:after { 
 content: "."; display: block; height: 0; clear:right; 
 color:#004764;
}

#logo_banner img {
margin: 0px 0px 0px 10px;
}

#logo_banner_text {
 margin:30px 10px 10px 0px;
 float:right;
 color:#c9c;
 font-size: 130%;
 line-height: 1em;
 text-align: right;
 width: 500px;
}
#logo_banner_text:after { 
 content: "."; display: block; height: 0; clear:right; 
 color:#FBF8FC;
}

#logo_banner_text a {
 color:#969;
 }

/* ---( navigation )------------------------------- */

#nav {
clear:both;
margin:0px 1px;
 width: 712px;
}
 
#nav ul{
 padding: 0px;
 margin: 0px; 
 list-style-type: none;
 float:right;
 background-color:#052748;
}

#nav li{
 display:inline;
 list-style: none;
 margin:0;
 padding:0;
 float:right; 
}

#nav a {
 padding: 4px 10px 2px 10px;
 margin: 0px 1px 0 0; 
 display: block;
 font-weight:bold;
 font-size: 90%; 	
 float: left; 
 color: #fff; 
 text-decoration: none;
 border-left: 1px solid #fff;
}

#nav a:hover {
 color: #fff;
 background: #015172 url(../images/nav_bg.gif) repeat-x top left; 
}
/* ---( layout )------------------------------- */


#main {
 clear:both;
 width: 774px;
}
 
/* ---( content )------------------------------- */

#content {
 width: 691px;
 margin: 0px 0px 0px 27px;
 padding:0;
}

/* ---( content - title )------------------------------- */

#title {
 width: 718px;
 margin:auto;
 background-image:url(../images/title_background.gif);
 background-repeat:repeat-y; 
}
#title:after { 
 content: "."; display: block; height: 0; clear:right; 
 color:#004764;
}

#title h1 {
float:right;
margin:10px 15px 0px 0px;
padding:0px;
}


#title_bottom {
 width: 718px;
 height: 23px;
 margin:auto;
 background: url(../images/title_bottom.gif) no-repeat;
}

/* ---( content - text )------------------------------- */

#text {
 width: 718px;
 margin:auto;
 background-image:url(../images/text_background.gif);
 background-repeat:repeat-y; 
}

#text_top {
 width: 718px;
 height: 23px;
 margin:auto;
 margin-top:4px;
 background-image:url(../images/text_top.gif);
 background-repeat:no-repeat; 
}
#text_bottom {
 width: 718px;
 height: 23px;
 margin:auto;
 background-image:url(../images/text_bottom.gif);
 background-repeat:no-repeat; 
}

#text h2 {
 color: #969;
 padding: 0px 15px 0px 15px; 
 font-size: 130%;
 
}

.top{
 padding-top: 50px; 
}

#text h3 {
 color: #969;
 padding: 5px 15px 0px 15px; 
}

#text p {
 margin: 0;
 padding: 0px 15px 5px 15px;
 line-height: 1.3em;
}




/* ---( unordered lists with icons )------------------------------- */

.icon {
	margin:0px 0px 15px 0px;
	padding:0;	
	list-style-type: none;
}

.icon li{
	margin:0;
	padding:0 0 1px 0;	
}

.icon li a{
	text-decoration: none;
	padding-left: 40px;
	margin: 0px;	
}



.word {
	background: url(../images/icon_word.gif) no-repeat 20px 50%; 
}

.pdf {
	background: url(../images/icon_pdf.gif) no-repeat 20px 50%; 
}

.flash {
	background: url(../images/icon_flash.gif) no-repeat 20px 50%; 
}

.exe {
	background: url(../../../../pupilsite/languages/images/icon_exe.gif) no-repeat 20px 50%; 
}

.video {
	background: url(../images/icon_video.gif) no-repeat 20px 50%; 
}

.powerpoint {
	background: url(../images/icon_powerpoint.gif) no-repeat 20px 50%; 
}

.powerpoint_old {
	background: url(../images/icon_powerpoint_old.gif) no-repeat 20px 50%; 
}

.help li {
 margin-bottom:20px;
}

.help img {
 margin: 0;
 padding: 3px 5px 1px 0px;
 
}

/* ---( tables - video )------------------------------- */

 table.videoclips {
	border-collapse: collapse;
	margin: 0 15px 10px 15px;
	padding: 0;
	}
	
.videoclips caption {
	color: #636;
	padding-bottom: 2px;
	padding-top: 2px;
	margin: 0px 0px 0px 15px;
	text-align:left;
	font-family: "Trebuchet MS", Verdana, arial, helvetica, sans-serif;
    font-weight: bold;
	font-size: 100%;
	border-top: 1px solid #ccc;
	}

.videoclips thead {
	background-color: #eee;
	text-align:left;	
	}

.videoclips tbody {
	background-color: #fff;
	}
	
.videoclips th, .videoclips td {
	padding: 0;
	margin: 0;
	vertical-align:top;
	width: 10%;	
	}

.videoclips img {
	border: 1px solid #666;
}

#text .videoclips p{
	color: #999;
	font-size: 80%;
	padding: 0 15px 0 5px;
}

/* ---( misc )------------------------------- */

hr {
	border: 0;
	height: 1px;
	color:#666;
	background-color: #666;
}