/*-------------------------------------------
LEAP Online CSS 20181126
Graeme Prescott IST
-------------------------------------------*/
body {
    line-height: 18px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
    color: #333;
    background-image: url("../Images/PageBackground.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center top;
    margin: 0px;
    padding: 0px;
}
#container {
	width:939px;
	height:250px;
	padding:10px 0px 0px 0px;
	margin:10px auto 10px auto;
	position:relative;
	z-index:0;
}
#MainContent {
    width: 690px !important; 
}

/*------------------------------------------
Styles for LEAP Online
-------------------------------------------*/

.leap_buttons img {
    margin: 0 15px 0 0;
}

.levels_block ul {
    color: #FFFFFF;
    list-style: none outside none;
    margin-left: 0;
    margin-top: 0;
	margin-bottom: 0;
    padding: 8px 8px 0 8px;
}

.levels_block ul li {
    background: none repeat scroll 0 0 #CCCCCC;
    line-height: 18px;
    font-size: 14px;
}
.levels_block ul li a:link {
    color: #000000;
    display: block;
    text-decoration: none;
}

.levels_block ul li#level1 {
    background: none repeat scroll 0 0 #F57C00;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}

.levels_block ul li#level2 {
    background: none repeat scroll 0 0 #97C02F;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.levels_block ul li#level3 {
    background: none repeat scroll 0 0 #1282C8;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}

/*--------------------------------------------------------------------------- 
LEAP L1 L2 L3 sections - Background colours
----------------------------------------------------------------------------*/

.levels_section {   
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #FFFFFF, 0 12px 8px -5px rgba(0, 0, 0, 0.85);/* Opera 10.5, IE 9.0 */
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
    margin: 0 0 20px 0;
    overflow: hidden;
    width: 640px;
}

.level1Bkg{
	background-image: -moz-linear-gradient(center top , #fff3de, #e3d0ad);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff3de),color-stop(1, #e3d0ad)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff3de', EndColorStr='#e3d0ad'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff3de', EndColorStr='#e3d0ad')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #FFF3DE 0%, #E3D0AD 100%); /* IE10 */
}

.level2Bkg{
	background-image: -moz-linear-gradient(center top , #E9F8A4, #D5E48F);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E9F8A4),color-stop(1, #D5E48F)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E9F8A4', EndColorStr='#D5E48F'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#E9F8A4', EndColorStr='#D5E48F')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #E9F8A4 0%, #D5E48F 100%); /* IE10 */
}
.level3Bkg{
	background-image: -moz-linear-gradient(center top , #e4e9ec, #C9DDEA);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e4e9ec),color-stop(1, #C9DDEA)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e4e9ec', EndColorStr='#C9DDEA'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e4e9ec', EndColorStr='#C9DDEA')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #E4E9EC 0%, #C9DDEA 100%); /* IE10 */
}

/*------------------------------------------
LEAP Activity and Assessment launch container
-------------------------------------------*/

#leapContainer {   
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #FFFFFF, 0 12px 8px -5px rgba(0, 0, 0, 0.85);/* Opera 10.5, IE 9.0 */
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
    overflow: hidden;
    width: 325px;
    min-height: 200px;
	padding-top: 4px;
    padding-left: 3px;
}

/*-------------------------------------------------------
LEAP Related Content - Yellow box with image
--------------------------------------------------------*/

blockquote.style2 {
    background: url("../Images/LEAP/Related-Content.png") no-repeat scroll 0 0 #FFFCBA !important;
    border: 3px solid #E39F20 !important;
    margin: 5px 5px 0 0 !important;
    padding: 0 5px 5px 110px !important;
    outline: none !important;
}

blockquote.style2 p {
    color: #000 !important;
    text-align: left !important;
}

.leapRelatedContent li {
    background: url("../Images/Tick-icon.png") no-repeat scroll 0 2px transparent !important;
    font-size: 14px;
    padding: 0 5px 5px 30px !important;
}

.leapRelatedContent li a:hover {
    background-color: #e1e1ba;
}

/*-------------------------------------------------------
LEAP levels text box - no image
--------------------------------------------------------*/
.leapTextBox {
    margin: 5px 5px 0 0;
    padding: 0 5px 5px 5px;
    min-height: 70px;
}

.levelOne {
    background-color: #fff3e0;
    border: 3px solid #f57c00;
    }

.levelTwo {
    background-color: #cbed74;
    border: 3px solid #97c02f;
    }

.levelThree {
    background-color: #e1f5fe;
    border: 3px solid #1282c8;
   }

/*-------------------------------------------------------
LEAP Printable Handout button  20170503
--------------------------------------------------------*/
.printablesButton::before {
    content: "\f02f";
    font-family: FontAwesome;
    color: #fff;
    position: absolute;
    font-size: 20px;
    font-weight: normal;
}
.printablesButton {
    background: #1282c8 none repeat scroll 0 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 18px;
    margin: 10px;
    padding: 8px 15px;
    width: 185px;
}
.printablesButton a, .printablesButton a:visited {
    color: #fff !important;
    text-decoration: none !important;
  	display: block;
    padding-left: 30px;
}
.printablesButton:hover {
    background: #004890 none repeat scroll 0 0;
}

/*------------------------------------------
LEAP Home Page Cricle Menu 20170620
-------------------------------------------*/

.containerTL {
    float: left;
    position: relative;
}
.containerTR {
    float: right;
    position: relative;
}
.containerLL {
    float: left;
    position: relative;
}
.containerLR {
    float: right;
    position: relative;
}
.imageTL {
    backface-visibility: hidden;
    display: inline-block;
    height: 337px;
    margin: 0;
    opacity: 1;
    transition: all 0.5s ease 0s;
    vertical-align: top;
    width: 340px;
}
.imageTR {
    backface-visibility: hidden;
    display: inline-block;
    height: 337px;
    margin-bottom: 0;
    margin-right: 5px;
    opacity: 1;
    transition: all 0.5s ease 0s;
    width: 340px;
}
.imageLL {
    backface-visibility: hidden;
    display: inline-block;
    height: 337px;
    opacity: 1;
    transition: all 0.5s ease 0s;
    vertical-align: top;
    width: 340px;
}
.imageLR {
    backface-visibility: hidden;
    display: inline-block;
    height: 337px;
    margin-right: 6px;
    opacity: 1;
    transition: all 0.5s ease 0s;
    vertical-align: top;
    width: 340px;
}
.middleTL {
    left: 60%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease 0s;
}
.middleTL {
    left: 60%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease 0s;
}
.middleTR {
    left: 40%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease 0s;
}
.middleLL {
    left: 60%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease 0s;
}
.middleLR {
    left: 40%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease 0s;
}
.containerTL:hover .imageTL {
    opacity: 0.3;
}
.containerTL:hover .middleTL {
    opacity: 1;
}
.containerTR:hover .imageTR {
    opacity: 0.3;
}
.containerTR:hover .middleTR {
    opacity: 1;
}
.containerLL:hover .imageLL {
    opacity: 0.3;
}
.containerLL:hover .middleLL {
    opacity: 1;
}
.containerLR:hover .imageLR {
    opacity: 0.3;
}
.containerLR:hover .middleLR {
    opacity: 1;
}
.circleMenuButton {
    background-color: #1E88E5;
    border: 2px solid white;
    color: white !important;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    transition-duration: 0.4s;
}
.circleMenuButton:hover {
    background-color: #0D47A1;
    color: white !important;
}
.circleMenuButton:visited {
    color: white !important;
}

/*-------------------------------------------
LEAP Section Menu 20170918
-------------------------------------------*/

.leapSection_3col {   
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #FFFFFF, 0 12px 8px -5px rgba(0, 0, 0, 0.85);/* Opera 10.5, IE 9.0 */
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
    overflow: hidden;
    width: 215px;
    float: left;
    margin: 0 0 0 7px;
    min-height: 265px;
}

.leapSectionMenu ul {
    color: #FFFFFF;
    float: left;
    list-style: none outside none;
    margin-left: 0;
    margin-right: 10px;
    margin-top: 0;
    min-height: 310px;
    padding: 8px;
    width: 195px;
}

.leapSectionMenu ul li#header {
    background: none repeat scroll 0 0 #666666;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
}

.leapSectionMenu ul li a:link, .leapSectionMenu ul li a:link {
    color: #000000;
    display: block;
    text-decoration: none;
  	font-size: 14px;
    line-height: 24px;
}

.leapSectionMenuBkg {
    background-image: linear-gradient(to bottom, #f2f2f2 0%, #dcdcdc 100%);
}

.leapSectionMenuBkg{
    background-image: -moz-linear-gradient(center top , #F2F2F2, #DCDCDC); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F2F2F2),color-stop(1, #DCDCDC)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F2F2F2', EndColorStr='#DCDCDC'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F2F2F2', EndColorStr='#DCDCDC')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #F2F2F2 0%, #DCDCDC 100%); /* IE10 */
}

/* Content Coming Soon indicator */
.leapSectionMenu ul li#comingSoon {
    background: none repeat scroll 0 0 #0093d0;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
}

/*---------------------------------
LEAP Essential Skills Maths and English menu blocks 20170711
----------------------------------*/
.sectionEssentialSkills {
    width: 300px;
}
.sectionEssentialSkills {
    border: 4px solid #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #ffffff, 0 12px 8px -5px rgba(0, 0, 0, 0.85);
    overflow: hidden;
}
.EssentialSkillsBkg {
    background-image: -moz-linear-gradient(center top , #FFF3E0, #FFCC80);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFF3E0),color-stop(1, #FFCC80)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF3E0', EndColorStr='#FFCC80'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFF3E0', EndColorStr='#FFCC80')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #FFF3E0 0%, #FFCC80 100%); /* IE10 */
}

.mini_menu_block_ess ul {
    color: #ffffff;
    float: left;
    list-style: outside none none;
    margin: 0 10px 0 0;
    padding: 8px;
    width: 285px;
}

.mini_menu_block_ess ul li#essheader {
    background: #FB8C00 none repeat scroll 0 0;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
  	
}

.mini_menu_block_ess ul li a:link {
    display: block;
    text-decoration: none;
    color: #fff !important;
}

.mini_menu_block_ess ul li a:visited {
    display: block;
    text-decoration: none;
    color: #fff !important;
}

.mini_menu_block_ess li#option {
    list-style: outside none none;
    height: 25px;
}


.mini_menu_block_ess li#option {
    background: #2196F3 none repeat scroll 0 0;
    list-style: outside none none;
}


.mini_menu_block_ess li#option:hover {
    background: #0D47A1 none repeat scroll 0 0;
}

.mini_menu_block_ess li#assessment {
    list-style: outside none none;
    height: 25px;
}

.mini_menu_block_ess li#assessment {
    background: #ffa000 none repeat scroll 0 0;
    list-style: outside none none;
}

.mini_menu_block_ess li#assessment:hover {
    background: #f57f17 none repeat scroll 0 0;
}

.mini_menu_block_ess ul li a:link {
    display: block;
    text-decoration: none;
}

.mini_menu_block_ess img {
    border: 2px solid #fff !important;
    display: block;
    margin: auto auto 10px;
}

.essentialSkillsPara {
    color: #000;
    margin: 10px;
}

/*------------------------------------------
END LEAP Online styles
-------------------------------------------*/

/*------------------------------------------
HR Stle. Dashed HR.
-------------------------------------------*/
hr {
    border: 0;
    border-bottom: 1px dashed #658E15;
}
/*------------------------------------------
HR Stle for numeric ref footnotes
-------------------------------------------*/
.footnoteHR {
    border: 1px solid;
    width: 300px;
    text-align: left; /*For IE*/
    margin-left: 0; /*For FF*/
}
/*----------------------------------------
For centering an image on page.
------------------------------------------*/
img.center { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    }
/*------------------------------------------------------------
Additional support contacts and acknowledgements - Green note. 
-------------------------------------------------------------*/
.note {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}
.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.note a:link, .note a:visited {
    color: #fff !important;
}
/*------------------------------------------------------------
What's On This Semester. Lined paper style with pushpin image
-------------------------------------------------------------*/
#WhatsOnContainer {
    padding-top: 30px;
    width: 235px;
}
.paper {
    background-color: #faf9b1;
    border: 1px solid #E3E3E3;
    height: 273px;
    position: relative;
    width: 235px;
}
.red-line {
    background-color: #EF8B8B;
    float: left;
    height: 273px;
    margin-left: 4px;
    width: 1px;
}
.first {
    margin-left: 25px;
}
ul#lines {
    margin-top: 40px;
    padding: 0;
}
ul#lines li {
    border-top: 1px solid #E8E6D6;
    color: #4D84C8;
    font-family: Georgia;
    font-size: 14px;
    font-style: italic;
    height: 28px;
    line-height: 28px;
    padding-left: 40px;
    width: 195px;
    list-style-type: none;
}
#lines > li:first-child {
    color: #000000;
    font-size: 14px;
    font-style: normal;
}
#lines > li:nth-child(4) {
    color: #000;
    font-size: 14px;
    font-style: normal;
}
#lines > li:nth-child(6) {
    color: #000;
    font-size: 14px;
    font-style: normal;
}
.pushPin {
    background-image: url("/leaponline/Images/Push-Pin-Icon.png");
    height: 47px;
    position: absolute;
    right: 100px;
    top: -20px;
    width: 35px;
}
/*------------------------------------------------------------
Launch Activity Button and container for IL Test Yourself on page activities. 
Uses blue grad from Essential Skills for activities and grey grad from Finding Info for IL assess yourself tests.
-------------------------------------------------------------*/
#activityContainer {   
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #FFFFFF, 0 12px 8px -5px rgba(0, 0, 0, 0.85);/* Opera 10.5, IE 9.0 */
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
    overflow: hidden;
    width: 230px;
    min-height: 200px;
	padding-top: 4px;
    padding-left: 3px;
}
/*------------------------------------------------------------
Same as above but with padding removed
-------------------------------------------------------------*/
#ILActivityContainer {
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #FFFFFF, 0 12px 8px -5px rgba(0, 0, 0, 0.85);
    min-height: 200px;
    overflow: hidden;
    width: 230px;
}
.ILParagraph {
    padding-left: 3px;
}
.activityButton {
    background: none repeat scroll 0 0 #1282C8;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(0, 0, 0, 0.2);
    margin: 10px;
    padding: 8px 15px;
    text-align:center;
    font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
}
.activityButton a, .activityButton a:visited{
    color: #FFFFFF !important;
    text-decoration: none !important;
    display: block;
}
.activityButton:hover {
    background: none repeat scroll 0 0 #004890;
}
/*------------------------------------------------------------
Information Literacy Assess Yourself Tests.
-------------------------------------------------------------*/
.infoLit_block ul li#study {
    background: none repeat scroll 0 0 #97C02F;
    color: #FFFFFF;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.infoLit_block ul {
    color: #FFFFFF;
    list-style: none outside none;
    margin-left: 0;
    margin-top: 0;
    padding: 8px 8px 0;
}
.infoLitButton
{        
    display: inline-block;
	white-space: nowrap;
	background-color: #0093d0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0093d0), to(#004890));
	background-image: -webkit-linear-gradient(top, #0093d0, #004890);
	background-image: -moz-linear-gradient(top, #0093d0, #004890);
	background-image: -ms-linear-gradient(top, #0093d0 #004890);
	background-image: -o-linear-gradient(top, #0093d0, #004890);
	background-image: linear-gradient(top, #0093d0, #004890);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#0093d0', EndColorStr='#004890');
	border: 1px solid #777;
	padding: 0 1.5em;
	margin: 0.5em;
	font: 1.2em/2em Georgia,"Times New Roman",Times,serif;
	text-decoration: none;
	color: #fff !important;
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.infoLitButton:hover
{
	background-color: #ddd;        
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7dc3e0), to(#578cc1));
	background-image: -webkit-linear-gradient(top, #7dc3e0, #578cc1);
	background-image: -moz-linear-gradient(top, #7dc3e0, #578cc1);
	background-image: -ms-linear-gradient(top, #7dc3e0, #578cc1);
	background-image: -o-linear-gradient(top, #7dc3e0, #578cc1);
	background-image: linear-gradient(top, #7dc3e0, #578cc1);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7dc3e0', EndColorStr='#578cc1');        
}

.infoLitButton:active
{
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	position: relative;
	top: 1px;
}

.infoLitButton:focus
{
	outline: 0;
	background: #7dc3e0;
}    

.infoLitButton:before
{
	background: #ccc;
	background: rgba(0,0,0,.1);
	float: left;        
	width: 1em;
	text-align: center;
	font-size: 1.5em;
	margin: 0 1em 0 -1em;
	padding: 0 .2em;
	-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-moz-border-radius: .15em 0 0 .15em;
	-webkit-border-radius: .15em 0 0 .15em;
	border-radius: .15em 0 0 .15em;      
}
.icon:before
{
	content: "\270E";        
}
.infoLitParagraph {
    margin: 10px 10px;
}
#infoLitButtonContainer{
    margin-left:auto;
	margin-right:auto;
	width:250px;
}
/*------------------------------------------------------------
RH col on-page section nav Getting Started - Grey note.
-------------------------------------------------------------*/
.startedNote {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#666666;
    overflow:hidden;
}
.startedNote:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #333333 #333333; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.startedNote ul {
    margin: 0;
    padding: 0;
}
.startedNote li {
    background: url("/leaponline/Images/tinyarrow.gif")no-repeat scroll 0 8px transparent;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 9px;
}
.startedNote ul ul {
    margin: 5px 0 5px 10px;
}
.startedNote a {
    color: #FFF !important;
    text-decoration: none;
}
/*------------------------------------------------------
RH col on-page section nav Basic Skills - Blue note.
-------------------------------------------------------*/
.basicNote {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#1282C8;
    overflow:hidden;
}
.basicNote:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #0e6398 #0e6398; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.basicNote ul {
    margin: 0;
    padding: 0;
}
.basicNote li {
    background: url("/leaponline/Images/tinyarrow.gif")no-repeat scroll 0 8px transparent;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 9px;
}
.basicNote ul ul {
    margin: 5px 0 5px 10px;
}
.basicNote a {
    color: #FFF !important;
    text-decoration: none;
}
/*--------------------------------------------------------
RH col on-page section nav Dissertation - Red note.
---------------------------------------------------------*/
.dissertationNote {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#DE6159;
    overflow:hidden;
}
.dissertationNote:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #99433d #99433d; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.dissertationNote ul {
    margin: 0;
    padding: 0;
}
.dissertationNote li {
    background: url("/leaponline/Images/tinyarrow.gif")no-repeat scroll 0 8px transparent;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 9px;
}
.dissertationNote ul ul {
    margin: 5px 0 5px 10px;
}
.dissertationNote a {
    color: #FFF !important;
    text-decoration: none;
}
/*-------------------------------------------------------
RH col on-page section nav Study at Uni - Purple note.
--------------------------------------------------------*/
.studyuniNote {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#6363CC;
    overflow:hidden;
}
.studyuniNote:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #474793 #474793; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.studyuniNote ul {
    margin: 0;
    padding: 0;
}
.studyuniNote li {
    background: url("/leaponline/Images/tinyarrow.gif")no-repeat scroll 0 8px transparent;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 9px;
}
.studyuniNote ul ul {
    margin: 5px 0 5px 10px;
}
.studyuniNote a {
    color: #FFF !important;
    text-decoration: none;
}
/*---------------------------------------------------------------------- 
RH col on-page section nav Advanced Research Skills - Yellow note. 
-----------------------------------------------------------------------*/
.researchNote {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#E39F20;
    overflow:hidden;
}
.researchNote:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #916614 #916614; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.researchNote ul {
    margin: 0;
    padding: 0;
}
.researchNote li {
    background: url("/leaponline/Images/tinyarrow.gif")no-repeat scroll 0 8px transparent;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 9px;
}
.researchNote ul ul {
    margin: 5px 0 5px 10px;
}
.researchNote a {
    color: #FFF !important;
    text-decoration: none;
}
/*------------------------------------------------------
RH col on-page section nav Study Skills - Green note. 
-------------------------------------------------------*/
.studyskillsNote {
    position:relative;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}
.studyskillsNote:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 25px 25px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For Opera when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.studyskillsNote ul {
    margin: 0;
    padding: 0;
}
.studyskillsNote li {
    background: url("/leaponline/Images/tinyarrow.gif")no-repeat scroll 0 8px transparent;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 0 5px;
    padding: 0 0 0 9px;
}
.studyskillsNote ul ul {
    margin: 5px 0 5px 10px;
}
.studyskillsNote a {
    color: #FFF !important;
    text-decoration: none;
}
/*------------------------------------------------------------------- 
BISSTO sections. Styles for header text. White text on colour bkg
---------------------------------------------------------------------*/
.menu_block ul {
    color: #FFFFFF;
    list-style: none outside none;
    margin-left: 0;
    margin-top: 0;
    min-height: 180px;
    padding: 8px;
    text-indent: 10px;
}
.menu_block ul li#started {
    background: none repeat scroll 0 0 #666666;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.menu_block ul li#study {
    background: none repeat scroll 0 0 #97C02F;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.menu_block ul li#basic {
    background: none repeat scroll 0 0 #1282C8;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.menu_block ul li#research {
    background: none repeat scroll 0 0 #E39F20;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.menu_block ul li#university {
    background: none repeat scroll 0 0 #6363CC;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.menu_block ul li#dissertation {
    background: none repeat scroll 0 0 #DE6159;
    color: white;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
}
.menu_block ul li {
    background: none repeat scroll 0 0 #CCCCCC;
    line-height: 18px;
    font-size: 14px;
}
.menu_block ul li a:link {
    color: #000000;
    display: block;
    text-decoration: none;
}
/*--------------------------------------------------------------------------- 
BISSTO sections - Home page & section home pages with gradient background
----------------------------------------------------------------------------*/
.findingBkg{
    background-image: -moz-linear-gradient(center top , #F2F2F2, #DCDCDC); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F2F2F2),color-stop(1, #DCDCDC)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F2F2F2', EndColorStr='#DCDCDC'); /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F2F2F2', EndColorStr='#DCDCDC')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #F2F2F2 0%, #DCDCDC 100%); /* IE10 */
}
.studyBkg{
	background-image: -moz-linear-gradient(center top , #E9F8A4, #D5E48F);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #E9F8A4),color-stop(1, #D5E48F)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E9F8A4', EndColorStr='#D5E48F'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#E9F8A4', EndColorStr='#D5E48F')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #E9F8A4 0%, #D5E48F 100%); /* IE10 */
}
.essentialBkg{
	background-image: -moz-linear-gradient(center top , #e4e9ec, #C9DDEA);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e4e9ec),color-stop(1, #C9DDEA)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e4e9ec', EndColorStr='#C9DDEA'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e4e9ec', EndColorStr='#C9DDEA')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #E4E9EC 0%, #C9DDEA 100%); /* IE10 */
}
.researchBkg{
	background-image: -moz-linear-gradient(center top , #fff3de, #e3d0ad);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff3de),color-stop(1, #e3d0ad)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff3de', EndColorStr='#e3d0ad'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fff3de', EndColorStr='#e3d0ad')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #FFF3DE 0%, #E3D0AD 100%); /* IE10 */
}
.dissertationBkg{
	background-image: -moz-linear-gradient(center top , #ffcccc, #f0b0b0);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffcccc),color-stop(1, #f0b0b0)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffcccc', EndColorStr='#f0b0b0'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffcccc', EndColorStr='#f0b0b0')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #FFCCCC 0%, #F0B0B0 100%); /* IE10 */
}
.studyuniBkg{
	background-image: -moz-linear-gradient(center top , #ededff, #dbdbff);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ededff),color-stop(1, #dbdbff)); /* Saf4+, Chrome */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededff', EndColorStr='#dbdbff'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ededff', EndColorStr='#dbdbff')"; /* IE8 */
    background-image: -ms-linear-gradient(top, #EDEDFF 0%, #DBDBFF 100%); /* IE10 */
}
.section {   
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #FFFFFF, 0 12px 8px -5px rgba(0, 0, 0, 0.85);/* Opera 10.5, IE 9.0 */
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 180px 0 #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.85); /* FF3.5+ */
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.35), 0 85px 810px -68px #fff, 0 12px 8px -5px rgba(0, 0, 0, 0.65); /* Saf3.0+, Chrome */
    margin: 0 0 20px 0;
    overflow: hidden;
    width: 640px;
}
li.item1, li.item2, li.item3, li.item4, li.item5 {
    margin-left: 0 !important;
    width: 320px !important;
}
li.item6 {
    margin-top: -140px !important;
}
li.item6, li.item7, li.item8, li.item9, li.item10 {
    margin-left: 330px !important;
}
/*-------------------------------------------------------
Owls Top Hoot! - Yellow box with owl image 
Styles blockquote html tag
--------------------------------------------------------*/
blockquote p {
    color: #000 !important;
    text-align: left !important;
}
blockquote {
    background: url("/leaponline/Images/BISSTO-Owl-Small.gif") no-repeat scroll 0 0 #FFFCBA !important;
    border: 3px solid #E39F20 !important;
    margin: 5px 5px 0 0 !important;
    padding: 0 5px 5px 110px !important;
    outline: none !important;
}
/*-------------------------------------------------------
Owls Example - Green box - no image. 
--------------------------------------------------------*/
.example {
    background-color: #cbed74;
    border: 3px solid #97c02f;
    margin: 5px 5px 0 0;
    padding: 0 5px 5px 5px;
    min-height: 70px;
}
/*-------------------------------------------------------- 
Section Summary Block - Blue list with custom bullets. 
---------------------------------------------------------*/
.summary {
    background-color: #c9ddea;
    border: 3px solid #1282C8;
    margin: 5px 5px 0 0;
    padding: 0 5px 5px;
}
.summary li {
    background: url("/leaponline/Images/Tick-icon.png") no-repeat scroll 0 2px transparent !important;
    font-size: 16px;
    padding: 0 5px 0 30px !important;
}
/*--------------------------------------------
Tooltips. Blue popup box on hover over link.
---------------------------------------------*/
.tooltip { 
	color: #000000; 
	outline: none;
	cursor: help; 
	text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
    color: #000;
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0; width: 250px;
}
.tooltip:hover img {
	border: 0; margin: -10px 0 0 -55px;
	float: left; position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
/*------------------------------------------------
Button styles
NOT CURRENTLY USED
--------------------------------------------------*/
.singlebuttonleft {
    background: none repeat scroll 0 0 #1282C8;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(0, 0, 0, 0.2);
    display: inline-block;
    margin: 10px;
    padding: 8px 15px;
    text-decoration: none;
    color: #FFF !important;
}
.singlebuttonleft:hover {
    background: none repeat scroll 0 0 #004890;
}
/*--------------------------------------------------------
Twin button layout. Style for two element bulleted list.
NOT CURRENTLY USED.
----------------------------------------------------------*/
ul#onpagenavigation li {
    background-image: none;
    list-style: none outside none;
    padding: 0;
}
ul#onpagenavigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#onpagenavigation li a {
    background: none repeat scroll 0 0 #1282C8;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    display: inline-block;
    margin-left: 0;
    padding: 8px 15px;
    text-decoration: none;
}
ul#onpagenavigation li a:hover {
    background: none repeat scroll 0 0 #004890;
}
ul#onpagenavigation .left {
    float: left;
}
ul#onpagenavigation .right {
    float: right;
}
/*--------------------------------------------------------------------------
Small buttons on sub section pages within Writing A Dissertation section.
----------------------------------------------------------------------------*/
.small_buttons img {
    margin: 0 12px 12px 12px;
}
/*---------------------------------
Table style for BISSTO.
-----------------------------------*/
#bisstotable tbody {
     padding: 1px 1px;
     border: 0px;
    }
    
#bisstotable tr td {
      font-style: normal;
      background-color: #e6e6e6;
    }
    
/*Alternate line colour*/
#bisstotable tbody tr.odd  td {
      background-color: #fff;
      font-style: normal;
      font-weight: normal;
    }
/*------------------------------------------------------------
Image thumbs descriptions. 
Styles based on academic staff photo thumbs descriptions.
-------------------------------------------------------------*/ 
div.imgwrapper {
    margin: 0 10px 10px 0;
    position: relative;
  	width: 300px;
}
div.imgdescription {
    background-color:#404040;
    bottom: 5px;
    color: white;
    font-size: 13px;
    left: 0;
    position: absolute;
    width: 100%;
}
div.imgdescription_content {
    margin: 0;
    padding: 5px;
}
.clear {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
/*---------------------------------
Book covers - Thumbnail images.
----------------------------------*/
div.covers {
   margin:5px;
   background-color: #97c02f;
   height:auto;
   width:auto;
   float:left;
   text-align:center;
}
 div.covers img {
   display:inline;
   margin:3px;
   border:2px solid #fff;
}
 
 div.desc {
   text-align:center;
   font-weight:normal;
   width:147px;
   margin:2px;
}