Difference between pages "MediaWiki:Common.css" and "BBC QUIZ"

From SQLZOO
(Difference between pages)
Jump to: navigation, search
 
 
Line 1: Line 1:
 +
BBC QUIZ
 +
<div class='ref_section'>
 +
<table class='db_ref'>
 +
<caption>bbc</caption>
 +
<tr>
 +
<th>name</th>
 +
<th>region</th>
 +
<th>area</th>
 +
<th>population</th>
 +
<th>gdp</th>
 +
</tr>
 +
<tr>
 +
<td>Afghanistan</td>
 +
<td>South Asia</td>
 +
<td align='right'>652225</td>
 +
<td align='right'>26000000</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td>Albania</td>
 +
<td>Europe</td>
 +
<td align='right'>28728</td>
 +
<td align='right'>3200000</td>
 +
<td align='right'>6656000000</td>
 +
</tr>
 +
<tr>
 +
<td>Algeria</td>
 +
<td>Middle East</td>
 +
<td align='right'>2400000</td>
 +
<td align='right'>32900000</td>
 +
<td align='right'>75012000000</td>
 +
</tr>
 +
<tr>
 +
<td>Andorra</td>
 +
<td>Europe</td>
 +
<td align='right'>468</td>
 +
<td align='right'>64000</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td>Brazil</td>
 +
<td>South America</td>
 +
<td align='right'>8550000</td>
 +
<td align='right'>182800000</td>
 +
<td>564852000000</td>
 +
</tr>
 +
<tr>
 +
<td>Colombia</td>
 +
<td>South America</td>
 +
<td align='right'>1140000</td>
 +
<td align='right'>45600000</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td>Nauru</td>
 +
<td>Asia-Pacific</td>
 +
<td align='right'>21</td>
 +
<td align='right'>9900</td>
 +
<td></td>
 +
</tr>
 +
</tr>
 +
<tr>
 +
<td>Uzbekistan</td>
 +
<td>Central Asia</td>
 +
<td align='right'>652225</td>
 +
<td align='right'>26000000</td>
 +
<td></td>
 +
</tr>
 +
<tr>
 +
<td colspan='5'>...</td>
 +
</tr>
 +
</table>
 +
</div>
  
/* CSS placed here will be applied to all skins */
+
<quiz shuffle=none display=simple>
#mw-head-base {
+
{Select the code which gives the name of countries beginning with C
  height:10em;
+
|type="()"}
}
+
- SELECT name FROM bbc WHERE name BEGIN with C
#p-googleadsense {
+
- SELECT name FROM bbc WHERE name LIKE '%C'
  margin-left:.5em;
+
- SELECT name FROM bbc WHERE name LIKE '%C%'
}
+
- SELECT name FROM bbc WHERE name LIKE C
/* Hide ads for login page */
+
+ SELECT name FROM bbc WHERE name LIKE 'C%'
body.ns-special div#p-googleadsense{
+
  display:none;
+
}
+
.qu {
+
    border-color: silver;
+
    border-style: solid;
+
    border-width: 1px;
+
    margin: 2ex 0.2ex 0.2ex;
+
    padding: 10px;
+
    clear:left; /* Andrew 2012-07-21 */
+
}
+
.ans, .def, .tidy, .setup, .params {
+
  display:none;
+
}
+
  
.hnt {
+
{Select the code which shows just the population of United Kingdom?
font-weight:bold;
+
|type="()"}
color: #3b434e;
+
- SELECT name FROM bbc WHERE name Like 'United%'
}
+
- SELECT name FROM bbc WHERE population = 'United Kingdom'
 +
- SELECT name, population FROM bbc WHERE name = 'United Kingdom'
 +
+ SELECT population FROM bbc WHERE name = 'United Kingdom'
 +
- SELECT population FROM bbc WHERE name = United Kingdom
  
.hint {
+
{Select the answer which shows the problem with this SQL code:SELECT name FROM "bbc" WHERE population > '2000000'
color: #055C00;
+
|type="()"}
}
+
- Apostrophes should be used around 'bbc' instead of speech marks
 +
- There are apostrophes surrounding '2000000'
 +
+ There are speech marks surrounding "bbc"
 +
- There are speech marks surrounding "bbc" and there is apostrophes surrounding '2000000'
 +
- The use of a WHERE function is incorrect
  
.ecomm {
+
{Select the result that would be obtained from the following code: SELECT name, population / 10 FROM bbc WHERE population < 10000
        margin-bottom: 0.5ex;
+
<table style='float:left'><caption>Table-A</caption><tr><td>Andorra</td><td>6400</td></tr><tr><td>Nauru</td><td>990</td></tr></table>
        margin-right: 0.5ex;
+
<table style='float:left'><caption>Table-B</caption><tr><td>Andorra</td><td>64000</td></tr><tr><td>Nauru</td><td>9900</td></tr></table>
}
+
<table style='float:left'><caption>Table-C</caption><tr><td>Nauru</td><td>99</td></tr></table>
 +
<table style='float:left'><caption>Table-D</caption><tr><td>Nauru</td><td>990</td></tr></table>
 +
<table style='float:left'><caption>Table-E</caption><tr><td>Nauru</td><td>9900</td></tr></table>
 +
|type="()"}
 +
- Table-A
 +
- Table-B
 +
- Table-C
 +
+ Table-D
 +
- Table-E
  
.qu textarea{
+
{Select the code which would reveal the name and population of countries in Europe, North America and South America
  width:auto;
+
|type="()"}
}
+
- SELECT name FROM bbc WHERE region IN ('Europe', 'North America', 'South America')
 +
+ SELECT name, population FROM bbc WHERE region IN ('Europe', 'North America', 'South America')
 +
- SELECT name, population FROM bbc WHERE region IN (Europe North America South America)
 +
- SELECT name, population FROM bbc WHERE region IS ('Europe', 'North America', 'South America')
 +
- SELECT population FROM bbc WHERE region IN ('Europe', 'North America', 'South America')
  
/* Change by Andrew 2012-07-21 */
+
{Select the code which would give two rows
.qu form{
+
|type="()"}
  clear:left;
+
- SELECT name FROM bbc WHERE name = 'United Kingdom'
}
+
- SELECT name FROM bbc WHERE name = 'United Kingdom' AND name = 'Algeria'
 +
- SELECT name FROM bbc WHERE name EITHER ('United Kingdom', 'Algeria')
 +
+ SELECT name FROM bbc WHERE name IN ('United Kingdom', 'Algeria')
 +
- SELECT name FROM WHERE name IS 'Scotland'
  
div.res {
+
{Select the result that would be obtained from this code:  
    border-style: inset;
+
<source lang='SQL'>SELECT name FROM bbc WHERE region = 'South America' AND population > 40000000</source>
    border-width: 1px;
+
<table style='float:left'><caption>Table-A</caption><tr><td>Afghanistan</td></tr><tr><td>Brazil</td></tr><tr><td>Colombia</td></tr></table>
    height: 20em;
+
<table style='float:left'><caption>Table-B</caption><tr><td>Brazil</td></tr></table>
    width:32em;
+
<table style='float:left'><caption>Table-C</caption><tr><td>Brazil</td></tr><tr><td>Colombia</td></tr></table>
    overflow: auto;
+
<table style='float:left'><caption>Table-D</caption><tr><td>Brazil</td><td>South America</td></tr><tr><td>Colombia</td><td>South America</td></tr></table>
    padding: 5px;
+
<table style='float:left'><caption>Table-E</caption><tr><td>Brazil</td><td>182800000</td></tr><tr><td>Colombia</td><td>45600000</td></tr></table>
}
+
|type="()"}
 
+
- Table-A
table{
+
- Table-B
  border-collapse:collapse;
+
+ Table-C
  background:#d2e5d1;
+
- Table-D
  margin:1em 0 1.5em;
+
- Table-E
}
+
</quiz>
.res table{
+
[[Category:Quizzes]]
  background:none;
+
}
+
table td{
+
  border:solid gray 1px;
+
  padding:.2em .7em;
+
}
+
 
+
h2{
+
  border-bottom:none;
+
}
+
 
+
span.id {
+
font-size: 300%;
+
display: block;
+
float: left;
+
padding: 0px 5px;
+
margin-right: 5px;
+
margin-top:0.8ex;
+
}
+
 
+
div.tutblock,
+
div.refblock,
+
div.resblock
+
{
+
  width:60ex;
+
  float:left;
+
  padding:1ex 1em 1em 2em;
+
  margin:2ex 2ex 2ex 0em;
+
}
+
div.resblock
+
{
+
  width:auto;
+
}
+
div.refblock+*{
+
}
+
div.tutblock h2,
+
div.refblock h2,
+
div.resblock h2{
+
  padding-top:1ex;
+
  text-align:left;
+
}
+
div.res.waiting{
+
  background-image:url(http://sqlzoo.net/w/wait30trans.gif);
+
  background-repeat:no-repeat;
+
  background-position: center center;
+
}
+
.r{
+
  text-align:right;
+
}
+
.res .showtxt{
+
  color:blue;
+
  cursor:pointer;
+
}
+
.res .sqlans{
+
  display:none;
+
}
+
/* ==== Designer style sheet starts here === */
+
 
+
/* This skin overrides common.css */
+
 
+
/* SQL ZOO COLOR PALETTE:
+
 
+
    #dae5d9 - light green (bg color) [ alt: #d2e5d1 ]
+
    #161525 - dark blue
+
    #3b434e - light blue
+
    #ee8301 - orange [ darker alt: #ff530d ]
+
    #e3e3e3 - near white
+
    #4a787d - bright blue (links) [ alt: #668195 ]
+
    #c4c4c4 - light grey (sub menu links)
+
    #909898 - mid grey (sub menu description)
+
+
*/
+
+
/* =========================== GLOBAL SETTINGS: ============================= */
+
 
+
/* remove the Wiki markup */
+
#p-logo, #left-navigation, #p-cactions, #p-tb, #pt-mytalk, #pt-watchlist, #pt-mycontris, .editsection, #mw-usercsspreview, #contentSub {
+
    display:none;
+
}
+
body #mw-head-base {
+
    background-image:none;
+
}
+
html, body, body #content,
+
#mw-page-base {
+
    background:#d2e5d1;
+
    font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", "Helvetica", "Arial", sans-serif;
+
    color:#161525;
+
}
+
 
+
a:link {
+
    color:#3b434e;
+
    text-decoration:none;
+
}
+
a:visited {color:#668195;}
+
a:hover {color:#ff530d;}
+
a:active {color:#e3e3e3;}
+
 
+
 
+
 
+
/* ================================== ADMIN WIKI LINKS: */
+
 
+
 
+
 
+
/* reposition temporary admin links */
+
#mw-head {
+
    position:absolute;
+
}
+
#pt-userpage, #pt-anonuserpage, #pt-login, #pt-preferences, #pt-logout {
+
  background-size:1em;
+
  background-repeat:no-repeat;
+
  background-position:left center;
+
  padding:0 0 0 1.2em;
+
}
+
#pt-userpage, #pt-anonuserpage, #pt-login {
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/u4.png');
+
}
+
#pt-preferences {
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/settings.png');
+
}
+
#pt-logout {
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/logout.png');
+
  padding:0 0 0 1.25em;
+
}
+
#p-search {
+
  margin:0;
+
  padding:0;
+
  clear:right;
+
 
+
}
+
#p-search form, #p-search input {
+
    margin:0;
+
}
+
#p-search input#searchInput {
+
  -moz-border-radius:1em;
+
  -webkit-border-radius: 1em;
+
  border-radius: 1em;
+
  border:2px solid #3b434e;
+
}
+
#p-views {
+
  float:right;
+
  margin:0 0 -.5em 0;
+
  padding:0;
+
}
+
 
+
 
+
/* wiki editor links */
+
 
+
#right-navigation {
+
  margin: 1.9em .3em 0 0;
+
}
+
div.vectorTabs span {
+
  background:none;
+
}
+
div.vectorTabs span a {
+
  padding-top: .05em;
+
  color:#3b434e;
+
  text-shadow: 1px 1px 0 #E4EDE6;
+
}
+
div.vectorTabs span a:hover {
+
  color:#ee8301;
+
}
+
div.vectorTabs, div.vectorTabs ul {
+
  background:none;background-image:none;
+
}
+
div.vectorTabs ul {
+
  height:1.2em;
+
  border:thin solid rgba(33,33,33,0.7);
+
  -moz-box-shadow: 0px 0px 2px #333333;
+
  -webkit-box-shadow: 0px 0px 2px #333333;
+
  box-shadow: 0px 0px 2px #333333;
+
  -webkit-border-radius: 1.5em;
+
  -moz-border-radius: 1.5em;
+
  border-radius: 1.5em;
+
  background: #e3ede3; /* Old browsers */
+
  background: -moz-linear-gradient(-45deg, #e3ede3 1%, #dae5d9 100%); /* FF3.6+ */
+
  background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#e3ede3), color-stop(100%,#dae5d9)); /* Chrome,Safari4+ */
+
  background: -webkit-linear-gradient(-45deg, #e3ede3 1%,#dae5d9 100%); /* Chrome10+,Safari5.1+ */
+
  background: -o-linear-gradient(-45deg, #e3ede3 1%,#dae5d9 100%); /* Opera 11.10+ */
+
  background: -ms-linear-gradient(-45deg, #e3ede3 1%,#dae5d9 100%); /* IE10+ */
+
  background: linear-gradient(135deg, #e3ede3 1%,#dae5d9 100%); /* W3C */
+
}
+
div.vectorTabs ul li {
+
  background:none;background-image:none;
+
  border:none; border-right:thin solid rgba(33,33,33,0.7);
+
  -moz-box-shadow:inset 2px 2px 12px #e7f0e7;
+
  -webkit-box-shadow:inset 2px 2px 12px #e7f0e7;
+
  box-shadow:inset 2px 2px 12px #e7f0e7;
+
}
+
div.vectorTabs ul li:first-child {
+
  -webkit-border-radius: 1.5em 0 0 1.5em;
+
  -moz-border-radius: 1.5em 0 0 1.5em;
+
    border-radius: 1.5em 0 0 1.5em;
+
    padding-left:.6em;
+
}
+
div.vectorTabs ul li:last-child {
+
  -webkit-border-radius: 0 1.5em 1.5em 0;
+
  -moz-border-radius: 0 1.5em 1.5em 0;
+
    border-radius: 0 1.5em 1.5em 0;
+
    border-right:none;
+
    padding-right:.5em;
+
}
+
div.vectorTabs li.selected {
+
    background: #f7bc79; /* Old browsers */
+
    background: -moz-linear-gradient(top,  #f7bc79 0%, #ee8301 41%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7bc79), color-stop(41%,#ee8301)); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(top,  #f7bc79 0%,#ee8301 41%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(top,  #f7bc79 0%,#ee8301 41%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(top,  #f7bc79 0%,#ee8301 41%); /* IE10+ */
+
    background: linear-gradient(to bottom,  #f7bc79 0%,#ee8301 41%); /* W3C */
+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7bc79', endColorstr='#ee8301',GradientType=0 ); /* IE6-9 */
+
  -moz-box-shadow:none;
+
  -webkit-box-shadow:none;
+
    box-shadow:none;
+
}
+
div.vectorTabs li.selected a {
+
    text-shadow: 1px 1px 0 #f7bc79;
+
    cursor:default;
+
}
+
div.vectorTabs li.selected a:hover {
+
    color:#3b434e;
+
}
+
div.vectorTabs ul li:first-child.selected {
+
    background:none;
+
    filter:none; /* IE6-9 */
+
}
+
div.vectorTabs ul li:first-child.selected a {
+
    text-shadow: 1px 1px 0 #E4EDE6;
+
    color:#8190A8;
+
}
+
 
+
/* Zoo advertising */
+
 
+
#zoolinks{
+
  position:relative;
+
  clear:both;
+
  float:right;
+
  margin:.5em .4em 0 0;
+
  z-index:0;
+
 
+
}
+
#zoolinks li{
+
  display:inline;
+
  margin-left:1em;
+
}
+
#zoolinks a {
+
  padding:0 0 1em 0;
+
  font-weight:bold;
+
  -moz-transition:all .5s; /* Firefox 4 */
+
  -webkit-transition:all .5s; /* Safari and Chrome */
+
  -o-transition:all .5s; /* Opera */
+
  transition:all .5s; /* Opera */
+
}
+
#zoolinks #css_link {
+
  top:-.1em;
+
  font-size:1.2em;
+
  font-family: 'Helvetica Neue',Helvetica, sans-serif;
+
  line-height: 1em;
+
  color: #ee8301;
+
  text-shadow:0px 0px 0 rgb(224,117,-13),1px 1px 0 rgb(210,103,-27),2px 2px 0 rgb(196,89,-41),3px 3px 0 rgb(181,74,-56),4px 4px 0 rgb(167,60,-70),5px 5px 0 rgb(153,46,-84), 6px 6px 0 rgb(139,32,-98),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
+
 
+
 
+
}
+
#zoolinks #css_link:hover {
+
    color:orange;
+
    font-size:1.4em;
+
}
+
#zoolinks #java_link{
+
    background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/java.png');
+
    background-size:1.5em;
+
    background-repeat:no-repeat;
+
    background-position:right top;
+
    padding-right:1.6em;
+
    margin-left:.1em;
+
    font-weight:normal;
+
    color: #3b434e;
+
}
+
 
+
#zoolinks #linux_link {
+
    background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/penguin.png');
+
    background-size:1.8em;
+
    background-repeat:no-repeat;
+
    background-position:right top;
+
    padding-right:1.75em;
+
    margin-left:-.6em;
+
    color: #3b434e;
+
}
+
#zoolinks #java_link:hover {
+
    font-size:1.2em;
+
    color: #fff;
+
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
+
}
+
#zoolinks #linux_link:hover {
+
  font-size:1.2em;
+
  color: #ee8301;
+
}
+
#zoolinks a#sql_hacks {
+
    margin: -.6em 0em 0 -.8em;
+
    opacity: 0.8;
+
    padding: 0;
+
    position:relative;
+
    float: right;
+
    -webkit-transform:scale(0.7);
+
    -moz-transform:scale(0.7);
+
    -o-transform:scale(0.7);
+
    transform:scale(0.7);
+
    -moz-box-shadow: 2px 2px 4px #333333;
+
    -webkit-box-shadow: 2px 2px 4px #333333;
+
    box-shadow: 2px 2px 4px #333333;
+
 
+
    -moz-transition:all .5s; /* Firefox 4 */
+
    -webkit-transition:all .5s; /* Safari and Chrome */
+
    -o-transition:all .5s; /* Opera */
+
    transition:all .5s; /* Opera */
+
}
+
 
+
#zoolinks a#sql_hacks:hover {
+
    opacity:1;
+
    -webkit-transform:scale(1);
+
    -moz-transform:scale(1);
+
    -o-transform:scale(1);
+
    transform:scale(1);
+
    -moz-box-shadow: 5px 5px 2px #666666;
+
    -webkit-box-shadow: 5px 5px 2px #666666;
+
    box-shadow: 8px 8px 12px #666666;
+
    height:auto;
+
}
+
 
+
 
+
/* ================================== HEADER: */
+
 
+
 
+
+
#mw-page-base {
+
    height:8.30em;
+
    background: -moz-linear-gradient(top,  rgba(171,183,157,1) 0%, rgba(223,229,222,0.9) 10%, rgba(223,229,222,0) 100%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(171,183,157,1)), color-stop(10%,rgba(223,229,222,0.9)), color-stop(100%,rgba(223,229,222,0))); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(top,  rgba(171,183,157,1) 0%,rgba(223,229,222,0.9) 10%,rgba(223,229,222,0) 100%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(top,  rgba(171,183,157,1) 0%,rgba(223,229,222,0.9) 10%,rgba(223,229,222,0) 100%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(top,  rgba(171,183,157,1) 0%,rgba(223,229,222,0.9) 10%,rgba(223,229,222,0) 100%); /* IE10+ */
+
    background: linear-gradient(to bottom,  rgba(171,183,157,1) 0%,rgba(223,229,222,0.9) 10%,rgba(223,229,222,0) 100%); /* W3C */
+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9D6C9', endColorstr='#00dfe5de',GradientType=0 ); /* IE6-9 */
+
}
+
#mp-logo {
+
    position:absolute; left:1em; top:0.2em; z-index:+1;
+
}
+
#mp-logo img {
+
    width:20.5em;
+
}
+
#logo-desc {
+
    font-family: Helvetica, Arial, sans-serif;
+
    font-weight:bold;
+
    font-size: 1.670em;
+
    color: #3b434e;
+
    margin:.2em 0 0 0; padding:0;
+
}
+
/* fix ff misbehaviour */
+
@-moz-document url-prefix() {
+
#logo-desc {font-size: 1.7em;}
+
}
+
/* fix ff win misbehaviour */
+
.win.gecko #logo-desc { margin-top:.2px; }
+
/* fix webkit misbahaviour */
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
+
    #logo-desc { margin-top: -0px; }
+
}
+
#logo-desc span {
+
    color: #ee8301;
+
}
+
#logo-desc span span {
+
    color: #161525; font-weight:normal;
+
}
+
h1, h1#logo-desc, #mw-head-base a  {
+
    border:none; text-decoration:none;
+
}
+
#language {
+
    position:absolute;
+
    left:-1em;
+
    top:-.6em;
+
    z-index:+5;
+
}
+
#language li {
+
    display:inline-block;
+
    margin:0 .5em 0 0
+
}
+
#language ul li a img {
+
    opacity:0.5;
+
}
+
#language ul li a:hover img {
+
    opacity:1;
+
}
+
 
+
 
+
/* ================================== MAIN MENU */
+
 
+
 
+
 
+
#main_menu {
+
    font-family: "Arial", sans-serif;
+
    font-size: .95em;
+
    margin:0;
+
    padding:0;
+
    line-height: 100%;
+
    color:#e3e3e3;
+
    background: #161525; /* Old browsers */
+
    background: -moz-linear-gradient(top,  #363d49 0%, #363d49 18%, #161525 69%, #161525 100%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#363d49), color-stop(18%,#363d49), color-stop(69%,#161525), color-stop(100%,#161525)); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* IE10+ */
+
    background: linear-gradient(to bottom,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* W3C */
+
}
+
.stickableMenu {
+
    position: absolute; top:11.5em; left:.6em;
+
    -webkit-border-radius: 1.5em;
+
    -moz-border-radius:1.5em;
+
  border-radius: 1.5em;
+
    box-shadow: 0px 0px 0px #3b434e;
+
}
+
.stickableMenu:hover {                                                      /* not perfect, needs js */
+
    -webkit-border-radius: 1.1em 1.1em 0 0;
+
    -moz-border-radius: 1.1em 1.1em 0 0;
+
    border-radius: 1.1em 1.1em 0 0;
+
    -moz-box-shadow: 1px 1px 3px #3b434e;
+
    -webkit-box-shadow: 1px 1px 3px #3b434e;
+
    box-shadow: 1px 1px 3px #3b434e;
+
 
+
    -moz-transition:all .7s; /* Firefox 4 */
+
    -webkit-transition:all .7s; /* Safari and Chrome */
+
    -o-transition:all .7s; /* Opera */
+
    transition:all .7s; /* Opera */
+
}
+
.fixedMenu {
+
    position: fixed; top: 0; left:0;
+
    z-index:+5;
+
    -webkit-border-radius: 0 0 1.5em 0;
+
    -moz-border-radius:0 0 1.5em 0;
+
    border-radius: 0 0 1.5em 0;
+
    -moz-box-shadow: 1px 1px 3px #3b434e;
+
    -webkit-box-shadow: 1px 1px 3px #3b434e;
+
    box-shadow: 1px 1px 3px #3b434e;
+
}
+
.fixedMenu:hover {
+
    -webkit-border-radius: 0 1.1em 0 0;
+
    -moz-border-radius: 0 1.1em 0 0;
+
    border-radius: 0 1.1em 0 0;
+
}
+
#main_menu li {
+
    z-index:+2;
+
    margin:0;
+
    padding:0;
+
    float: left;
+
    position: relative;
+
    list-style: none;
+
}
+
/* main level link */
+
#main_menu a {
+
    color: #e3e3e3;
+
    text-decoration: none;
+
    display: block;
+
    padding:.6em 1.3em .6em 0;
+
    margin: 0;
+
    background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/ic_down.png');
+
    background-repeat:no-repeat;
+
    background-position:right center;
+
}
+
#main_menu > li:first-child a {
+
    margin-left:+1.4em;
+
}
+
#main_menu li > a { 
+
  margin-right:+.4em;
+
+
#main_menu > li:last-child a {
+
    margin-right:+1.4em;
+
}
+
/* main level link hover */
+
#main_menu .current a, #main_menu li:hover > a {
+
    color: #ee8301;
+
    background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/ic_down_hover.png');
+
}
+
/* sub levels link description */
+
#main_menu ul li:hover, #main_menu li:hover li {
+
  color: #909898;
+
}
+
/* sub levels link hover */
+
#main_menu ul li:hover a, #main_menu li:hover li a {
+
  color: #c4c4c4;
+
  font-weight:bold;
+
  margin:-.7em 0 -.8em 0;
+
/*
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/progress_bar.png');
+
  background-size:3.5em;
+
*/
+
  background-image:none;
+
}
+
#main_menu li:hover li a:hover {
+
  color: #ee8301;
+
/*
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/progress_bar_hover.png');
+
*/
+
  background-image:none;
+
}
+
 
+
/* ============================== style for menu progress bar */
+
 
+
.progressbarbg1 {
+
  width: 8ex;
+
  height: 1.6ex;
+
  background:black;
+
  border-radius: 1ex;
+
  border:2.5px solid #92A599;
+
  /* add some position settings here #92A599  #8FA397 */
+
  float:right;
+
  margin:-1em 0 0 0;
+
}
+
.progressbar1 {
+
  width: 7ex;
+
  height: 1ex;
+
  position: relative;
+
  top: 0.3ex;
+
  left: .3ex;
+
  background: #92A599;
+
  border-radius: 1ex;
+
  border-width: 1px;
+
  border-color: #000000;
+
}
+
 
+
/* remove indicators from reference sub menu */
+
#main_menu ul#mm3 li a, #main_menu ul#mm3 li:hover a {
+
  background-image:none;
+
}
+
/* level 2 list */
+
#main_menu li ul {
+
    /*display: none;*/
+
visibility: hidden;
+
opacity: 0;
+
    position: absolute; top: 1.8em;
+
    min-width:35em;
+
    font-size:.85em;
+
    margin: 0;
+
    padding: 1.65em 1.5em .5em 1.5em;
+
    background: #161525; /* Old browsers */
+
    background: -moz-linear-gradient(top,  #161525 0%, #000000 57%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#161525), color-stop(57%,#000000)); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(top,  #161525 0%,#000000 57%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(top,  #161525 0%,#000000 57%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(top,  #161525 0%,#000000 57%); /* IE10+ */
+
    background: linear-gradient(to bottom,  #161525 0%,#000000 57%); /* W3C */
+
    -webkit-border-radius:  0 2em 2em 2em;
+
    -moz-border-radius: 0 2em 2em 2em;
+
    border-radius:  0 2em 2em 2em;
+
    -moz-box-shadow: 2px 4px 12px #000000;
+
    -webkit-box-shadow: 2px 4px 12px #000000;
+
    box-shadow: 2px 4px 12px #000000;
+
    /*
+
transition:visibility .25s linear .25s, opacity .25s linear .25s;
+
-moz-transition:visibility .25s linear .25s, opacity .25s linear .25s;
+
-webkit-transition:visibility .25s linear .25s, opacity .25s linear .25s;
+
-o-transition:visibility .25s linear .25s, opacity .25s linear .25s;
+
    */
+
}
+
/* needs to be adjusted for each introduced ul */
+
#main_menu li #mm2 {left:-7.9em;}
+
#main_menu li #mm3 {left:-16.8em;}
+
@-moz-document url-prefix() {
+
    #main_menu li #mm2 { left:-8.1em; }
+
    #main_menu li #mm3 { left:-17.1em; }
+
}
+
.win.gecko #main_menu li #mm2 { left:-7.9em; }
+
.win.gecko #main_menu li #mm3 { left:-16.85em; }
+
 
+
.ie #main_menu li #mm2 { left:-8.15em; }
+
.ie #main_menu li #mm3 { left:-17.15em; }
+
 
+
.mac.webkit #main_menu li #mm2 { left:-8em; }
+
.mac.webkit #main_menu li #mm3 { left:-16.95em; }
+
 
+
#selector[id=selector] { color: red; }
+
 
+
#main_menu li:hover ul> li {
+
    border-bottom:thin solid #acbbaf;
+
    margin:0 0 .45em 0;
+
    padding: 0 0 .4em 0;
+
}
+
#main_menu li:hover ul > li:last-child {
+
    border-bottom:none;
+
}
+
/* dropdown */
+
#main_menu li:hover > ul {
+
display: block;
+
visibility: visible;
+
opacity: 1;
+
}
+
#main_menu ul li {
+
float: none;
+
margin: 0;
+
padding: 0;
+
}
+
 
+
/* clearfix */
+
#main_menu:after {
+
content: ".";
+
display: block;
+
clear: both;
+
visibility: hidden;
+
line-height: 0;
+
height: 0;
+
}
+
#main_menu {
+
display: inline-block;
+
}
+
html[xmlns] #main_menu {
+
display: block;
+
}
+
* html #main_menu {
+
height: 1%;
+
}
+
 
+
 
+
 
+
/* ================================== SIDE MENU: */
+
 
+
 
+
 
+
body #mw-panel {
+
    margin-top:3.3em;
+
}
+
#mw-panel #p-Reference h5,
+
body #mw-panel div.portal h5 {
+
    font-size: 1.3em;
+
    font-stretch:normal;
+
    font-weight:bold;
+
    margin:0; padding: 0 0 0 0.6em;
+
    color:#161525;
+
}
+
#mw-panel #p-Reference li a {
+
    color:#3b434e;
+
}
+
#mw-panel #p-Reference li a:hover {
+
    color:#ff530d;
+
    padding-left:1.1em;
+
    background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/side_pointer2.png');
+
    background-size:.8em;
+
    background-repeat:no-repeat;
+
    background-position:left center;
+
}
+
body #mw-panel #p-Reference .body,
+
body #mw-panel div.portal div.body {
+
  background-image:none;
+
}
+
.fixedRef {
+
    position: fixed; top:3em; left:0;
+
    width:10em;
+
}
+
#mw-panel .portal {
+
  height:4.4em;
+
}
+
#mw-panel .portal .body ul li {
+
    text-align:right;
+
}
+
#engine {
+
    background:#161525;
+
    color:#e3e3e3;
+
    width: 9em; height: 2.4em;
+
    margin:.65em 0 0 0;
+
    text-align:left center;
+
}
+
 
+
/* ================================== CONTENT: */
+
 
+
div#content a.zoo_external {
+
    color: #161525;
+
}
+
div#content a.zoo_external:hover {
+
    color: #ee8301;
+
}
+
div#content a.zoo_external, div#content a.zoo_external[href^="gopher://"] {
+
    background: url("http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/ex-link2.png") no-repeat scroll right center transparent;
+
    padding-right: 18px;
+
}
+
div#content a.zoo_external:hover, div#content a.zoo_external:hover[href^="gopher://"] {
+
    background: url("http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/ex-link.png") no-repeat scroll right center transparent;
+
    padding-right: 18px;
+
}
+
#firstHeading {
+
    font-size: 1.3em;
+
    font-weight:bold;
+
    text-align:center;
+
    color:#161525;
+
    margin:0 0 .9em 0;
+
    padding:0;
+
    border:none;
+
    border-bottom:thin solid #ee8301;
+
}
+
.mw-content-ltr {
+
    margin-left:1em;
+
}
+
/* homepage slogan */
+
.slogan {
+
    font-size: 1.3em;
+
    font-weight:normal;
+
    color:#3b434e;
+
    margin-left:-.5em;
+
}
+
.slogan span {
+
    font-weight:bold;
+
    color:#161525;
+
}
+
div.tutblock,
+
div.refblock,
+
div.resblock {
+
    border:none;
+
    margin-top:.2em;
+
    margin-bottom:0;
+
    margin-left:-1em;
+
    -webkit-border-radius: 1.5em;
+
    -moz-border-radius:1.5em;
+
    border-radius: 1.5em;
+
}
+
/* add extra margin so the resources block floats under tutorials */
+
div.refblock {
+
    margin-bottom:+4em;
+
}
+
/* fix webkit misbahaviour */
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
+
  div.tutblock,
+
  div.refblock,
+
  div.resblock { margin-top:.6em; }
+
}
+
div.tutblock:hover,
+
div.refblock:hover,
+
div.resblock:hover  {
+
  -moz-box-shadow: 1px 1px 1px #3b434e;
+
  -webkit-box-shadow: 1px 1px 1px #3b434e;
+
  box-shadow: 1px 1px 1px #3b434e;
+
  background:#dae5d9;
+
  transition:background 1s;
+
  -moz-transition:background 1s; /* Firefox 4 */
+
  -webkit-transition:background 2s; /* Safari and Chrome */
+
  -o-transition:background 1s; /* Opera */
+
}
+
div.tutblock:hover h2,
+
div.refblock:hover h2,
+
div.resblock:hover h2 {
+
  color:#ee8301;
+
  border-bottom: 1px solid #ee8301;
+
}
+
div.tutblock:hover dl,
+
div.refblock:hover dl,
+
div.resblock:hover dl {
+
  margin-top: -1px;
+
}
+
.mw-content-ltr h2 {
+
    font-size:1.2em;
+
    font-weight:bold;
+
    color:#3b434e;
+
}
+
.mw-content-ltr a {
+
    color:#161525;
+
}
+
.mw-content-ltr .tutblock a:hover,
+
.mw-content-ltr .refblock a:hover,
+
.mw-content-ltr .resblock a:hover {
+
    color:#ee8301;
+
    background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/side_pointer2.png');
+
    background-size:.8em;
+
    background-repeat:no-repeat;
+
    background-position:left center;
+
    margin-left:-1.1em; padding-left:+1.1em;
+
}
+
/* this shouldn't be necessarry - investigate further */
+
.mw-content-ltr .refblock a:hover {
+
    margin-left:-2em; padding-left:+2em;
+
}
+
 
+
.mw-content-ltr .tutblock dl dt,
+
.mw-content-ltr .refblock dl dt,
+
.mw-content-ltr .resblock dl dt  {
+
    margin:0 0 -.1em 0; padding:0;
+
    font-weight:bold;
+
    color:#3b434e;
+
}
+
.mw-content-ltr .resblock dl dt  {
+
    margin:0; padding:0;
+
}
+
.mw-content-ltr .tutblock dl dt::first-letter,
+
.mw-content-ltr .refblock dl dt::first-letter {
+
    color:#3b434e;
+
}
+
 
+
.mw-content-ltr .tutblock dl dt:hover:first-letter,
+
.mw-content-ltr .refblock dl dt:hover:first-letter,
+
.mw-content-ltr .resblock dl dt:hover:first-letter  {
+
    color:#161525;
+
}
+
.mw-content-ltr .tutblock dl dd,
+
.mw-content-ltr .refblock dl dd,
+
.mw-content-ltr .resblock dl dd  {
+
    margin:0 0 .7em 0;
+
    padding:0 1em 0 0;
+
    line-height:105%;
+
    color:#3b434e;
+
}
+
.mw-content-ltr .tutblock dl dd a,
+
.mw-content-ltr .refblock dl dd a,
+
.mw-content-ltr .resblock dl dd a  {
+
    font-weight:bold;
+
    color:#3b434e;
+
}
+
.mw-content-ltr .tutblock dl dd a:hover,
+
.mw-content-ltr .refblock dl dd a:hover,
+
.mw-content-ltr .resblock dl dd a:hover  {
+
    background-image:none;
+
    margin-left:-1.1em; padding-left:-1.1em;
+
}
+
.mw-content-ltr .resblock dl dd a  {
+
    font-weight:bold;
+
    color:#161525;
+
}
+
 
+
 
+
/* ================================== TUTORIALS HEADER: */
+
 
+
 
+
 
+
.ref_section {
+
    background:none; border:none;
+
    -moz-border-radius:.8em;
+
    -webkit-border-radius:.8em;
+
    border-radius:.8em;
+
 
+
}
+
.db_ref {
+
    *border-collapse: collapse; /* IE7 and lower */
+
    border-spacing:0;
+
    border:none;
+
    color:#dae5d9;
+
    display: inline-block;
+
    -moz-border-radius: .8em;
+
    -webkit-border-radius: .8em;
+
    border-radius: .8em;
+
}
+
.db_ref caption {
+
    color:#161525;
+
    background:#d2e5d1;
+
    display: block;
+
}
+
.db_ref tr:hover {
+
    color:#161525;
+
    background:#e3e3e3;
+
    -o-transition: all 0.1s ease-in-out;
+
    -webkit-transition: all 0.1s ease-in-out;
+
    -moz-transition: all 0.1s ease-in-out;
+
    -ms-transition: all 0.1s ease-in-out;
+
    transition: all 0.1s ease-in-out;   
+
}   
+
   
+
.db_ref td, .db_ref th {
+
    border-left: 1px solid #3b434e;
+
    border-top: none;
+
    padding:.1em .7em .1em .5em;
+
    text-align: left;   
+
}
+
.db_ref tr { 
+
    background:#3b434e;
+
}
+
.db_ref tr:first-child,
+
.db_ref tr:last-child { 
+
    background:none;
+
}
+
/*
+
.db_ref td {
+
    background:#3b434e;
+
}
+
*/
+
.db_ref th {
+
    background-color:#161525;
+
    color:#e3e3e3;
+
    padding:.2em .7em .2em .5em;
+
}
+
 
+
.db_ref td:first-child, .db_ref th:first-child {
+
    border-left:none;
+
}
+
.db_ref td[colspan] { 
+
    border:none;
+
    background:#3b434e;
+
}
+
.db_ref td[colspan]:hover { 
+
    font-weight:bold;
+
    color:#161525;
+
    background:#d2e5d1;
+
}
+
.db_ref th:first-child {
+
    -moz-border-radius: .8em 0 0 0;
+
    -webkit-border-radius: .8em 0 0 0;
+
    border-radius: .8em 0 0 0;
+
}
+
 
+
.db_ref th:last-child {
+
    -moz-border-radius: 0 .8em 0 0;
+
    -webkit-border-radius: 0 .8em 0 0;
+
    border-radius: 0 .8em 0 0;
+
}
+
 
+
.db_ref th:only-child{
+
    -moz-border-radius: .8em .8em 0 0;
+
    -webkit-border-radius: .8em .8em 0 0;
+
    border-radius: .8em .8em 0 0;
+
}
+
 
+
.db_ref tr:last-child td:first-child {
+
    -moz-border-radius: 0 0 0 .8em;
+
    -webkit-border-radius: 0 0 0 .8em;
+
    border-radius: 0 0 0 .8em;
+
}
+
 
+
.db_ref tr:last-child td:last-child {
+
    -moz-border-radius: 0 0 .8em 0;
+
    -webkit-border-radius: 0 0 .8em 0;
+
    border-radius: 0 0 .8em 0;
+
}
+
.db_ref tr:last-child td:last-child[colspan] {
+
  -moz-border-radius:0 0 .8em .8em;
+
    -webkit-border-radius:0 0 .8em .8em;
+
    border-radius:0 0 .8em .8em;
+
}
+
.fixedDbRef {
+
    position: fixed; top:-1em; right:-2em;
+
    -moz-box-shadow: 1px 1px 3px #3b434e;
+
    -webkit-box-shadow: 1px 1px 3px #3b434e;
+
    box-shadow: 1px 1px 3px #3b434e;
+
    opacity:0.5;
+
    -webkit-transform:scale(0.8);
+
    -moz-transform:scale(0.8);
+
    -o-transform:scale(0.8);
+
    transform:scale(0.8);
+
   
+
    -moz-transition:all 1s; /* Firefox 4 */
+
    -webkit-transition:all 1s; /* Safari and Chrome */
+
    -o-transition:all 1s; /* Opera */
+
    transition:all 1s; /* Opera */
+
   
+
}
+
.fixedDbRef:hover {
+
    top:0; right:0;
+
    opacity:1;
+
    -webkit-transform:scale(1);
+
    -moz-transform:scale(1);
+
    -o-transform:scale(1);
+
    transform:scale(1);
+
}
+
 
+
 
+
 
+
/* ================================== TUTORIALS CONTENT: */
+
 
+
 
+
 
+
.ref_section {
+
        float:right;
+
        margin-left:1em
+
}
+
.mw-content-ltr #toc, .mw-content-ltr .toc, .mw-content-ltr .tochidden {
+
    -webkit-border-radius: 1em;
+
    -moz-border-radius:1em;
+
    border-radius: 1em;
+
    border-collapse: separate;
+
    padding:0 .5em 0 .5em;
+
}
+
.mw-content-ltr table#toc td, .mw-content-ltr .toc td, .mw-content-ltr .tochidden td {
+
    border:none; margin:0; padding:0;
+
}
+
.extra_space {
+
 
+
}
+
.mw-headline {
+
    margin-bottom:-2em;
+
}
+
 
+
 
+
 
+
/* ============================== PROGRESS PANEL */
+
 
+
 
+
 
+
.progress_panel {
+
  display:inline-block;
+
  border:thin solid rgba(33,33,33,0.7);
+
  -webkit-border-radius: 3em 2em 3em 2em / 2em 1em 2em 1em;
+
  -moz-border-radius: 3em 2em 3em 2em / 2em 1em 2em 1em;
+
  border-radius: 3em 2em 3em 2em / 2em 1em 2em 1em;
+
  background: #e3ede3; /* Old browsers */
+
  background: -moz-linear-gradient(-45deg, #e3ede3 1%, #dae5d9 100%); /* FF3.6+ */
+
  background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#e3ede3), color-stop(100%,#dae5d9)); /* Chrome,Safari4+ */
+
  background: -webkit-linear-gradient(-45deg, #e3ede3 1%,#dae5d9 100%); /* Chrome10+,Safari5.1+ */
+
  background: -o-linear-gradient(-45deg, #e3ede3 1%,#dae5d9 100%); /* Opera 11.10+ */
+
  background: -ms-linear-gradient(-45deg, #e3ede3 1%,#dae5d9 100%); /* IE10+ */
+
  background: linear-gradient(135deg, #e3ede3 1%,#dae5d9 100%); /* W3C */
+
  -moz-box-shadow: 0px 0px 2px #333333;
+
  -webkit-box-shadow: 0px 0px 2px #333333;
+
  box-shadow: 0px 0px 2px #333333;
+
 
+
}
+
.progress_panel > div {
+
    padding:1.2em 1.5em 1.5em 1.2em;
+
    background:#D2DDD2;
+
    -webkit-border-radius: 3em 2em 3em 2em / 2em 1em 2em 1em;
+
    -moz-border-radius: 3em 2em 3em 2em / 2em 1em 2em 1em;
+
    border-radius: 3em 2em 3em 2em / 2em 1em 2em 1em;
+
    -moz-box-shadow:inset 2px 2px 12px #e7f0e7;
+
    -webkit-box-shadow:inset 2px 2px 12px #e7f0e7;
+
    box-shadow:inset 2px 2px 12px #e7f0e7;
+
}
+
.progress_panel .summary {
+
    color: #3b434e;
+
    font-size: 0.85em;
+
    font-weight: normal;
+
    text-shadow: 1px 1px 0 #E4EDE6;
+
    margin: 0.5em 0;
+
    padding:0;
+
    line-height: 140%;
+
}
+
.progressbarbg {
+
    background:#161525;
+
    border-radius: 2ex 2ex 2ex 2ex;
+
    height: 2em;
+
    width: 50ex;
+
    border-bottom:2px solid #d2e5d1;
+
    border-right: 2px solid #d2e5d1;
+
    -moz-box-shadow: 2px 2px 3px #1a1a1a;
+
    -webkit-box-shadow: 2px 2px 3px #1a1a1a;
+
    box-shadow: 2px 2px 3px #1a1a1a;
+
}
+
.progressbar {
+
    position: relative;
+
    left: 1ex; top: 1ex;
+
    width: 48ex;
+
    height: 1em;
+
    background: #323832; /* Old browsers */
+
    background: -moz-linear-gradient(left, #323832 0%, #bfcebe 90%, #e9ffe7 100%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#323832), color-stop(90%,#bfcebe), color-stop(100%,#e9ffe7)); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(left, #323832 0%,#bfcebe 90%,#e9ffe7 100%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(left, #323832 0%,#bfcebe 90%,#e9ffe7 100%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(left, #323832 0%,#bfcebe 90%,#e9ffe7 100%); /* IE10+ */
+
    background: linear-gradient(to right, #323832 0%,#bfcebe 90%,#e9ffe7 100%); /* W3C */
+
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323832', endColorstr='#e9ffe7',GradientType=1 ); /* IE6-9 */
+
    border-radius: 1ex 1ex 1ex 1ex;
+
    -moz-box-shadow: 2px 0 2px #4D4D4D;
+
    -webkit-box-shadow: 2px 0 2px #4D4D4D;
+
    box-shadow: 2px 0 2px #4D4D4D; 
+
}
+
 
+
/* ======================= CORRECT/INCORRECT INDICATOR */
+
 
+
.qcorrect, .qincorrect {
+
  width:3em;
+
  height:3em;
+
  position:absolute;
+
  left:-1em;
+
  margin: -0.5em 0 0 1em;
+
  background-size:3em;
+
  background-repeat:no-repeat;
+
  background-position:center;
+
}
+
.qcorrect {
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/done9.png');
+
}
+
.qincorrect {
+
  background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/undone9.png');
+
}
+
 
+
 
+
/* ======================= TUTS USER INPUT */
+
 
+
/* Prevent floating after a .qu */
+
.qu+*{
+
  clear:left;
+
}
+
 
+
.qu {
+
    border:none;
+
    border-top:thin solid #ee8301;
+
    margin: 2ex 0.2ex 0.2ex;
+
    padding: 10px;
+
}
+
.qu span.id {
+
    margin-bottom:.5em;
+
}
+
.mw-content-ltr p,
+
.qu p {
+
    margin-bottom:1em;
+
}
+
.quf {
+
    margin:0 0 1em 0;
+
}
+
.quf textarea {
+
    -webkit-border-radius:3em 1.2em 3em 1.2em / 3em 1.5em 4em 0;
+
    -moz-border-radius:3em 1.2em 3em 1.2em / 3em 1.5em 4em 0;
+
    border-radius:3em 1.2em 3em 1.2em / 3em 1.5em 4em 0;
+
    border-top:1.6em solid #3b434e;
+
    border-bottom:2em solid #3b434e;
+
    border-right:1.6em solid #3b434e;
+
    border-left:1.3em solid #3b434e;
+
    background:#e3e3e3;
+
    margin:.5em 0 -1em 0em;
+
    padding:.5em 0 0 .5em;
+
    width: 29.5em;
+
    overflow:auto;
+
}
+
.mac.webkit .quf textarea { width: 34.5em }
+
.win.gecko .quf textarea { width: 30em; }
+
.mac.gecko .quf textarea { width: 28.5em; }
+
.ie .quf textarea { width: 27em; }
+
.opera .quf textarea { width: 35.5em; }
+
.win.opera .quf textarea { width: 30em; }
+
 
+
 
+
.submitSQL {
+
    margin:-1.1em 0 0 0em; /* win ff */
+
    padding:.5em 1em .5em 1em;
+
    color:#e3e3e3;
+
    height:auto;
+
    background: #161525; /* Old browsers */
+
    background: -moz-linear-gradient(top,  #363d49 0%, #363d49 18%, #161525 69%, #161525 100%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#363d49), color-stop(18%,#363d49), color-stop(69%,#161525), color-stop(100%,#161525)); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* IE10+ */
+
    background: linear-gradient(to bottom,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* W3C */
+
    border:1em solid #3b434e;
+
    -webkit-border-radius:2.5em;
+
    -moz-border-radius:2.5em;
+
    border-radius:2.5em;
+
    z-index:+1;
+
}
+
.webkit .submitSQL { margin:-1.1em 0 0 0em; }
+
.mac.gecko .submitSQL { margin:-1.1em 0 0 0em; }
+
.ie .submitSQL { margin:-1em 0 0 0em; }
+
.opera .submitSQL { margin:-1em 0 0 0em; }
+
.submitSQL:hover {
+
    color:#ffffff;
+
    background:#161525;
+
    -webkit-background-clip: padding-box;
+
    -moz-background-clip:    padding;
+
    background-clip:        padding-box;
+
}
+
.quf .reset {
+
  cursor:pointer;
+
  display:inline-block;
+
  -moz-border-radius:0 0 1em 1em;
+
  -webkit-border-radius:0 0 1em 1em;
+
  border-radius:0 0 1em 1em;
+
  background:#3B434E;
+
  color:#e3e3e3;
+
  left: 12.6em;
+
  padding: 0 1.2em 0.2em;
+
  position: relative;
+
  top: 0;
+
}
+
.quf .reset:hover {
+
  color:#ee8301;
+
}
+
.win.webkit .quf .reset { left: 12em; }
+
.win.gecko .quf .reset { left: 12em; }
+
.ie .quf .reset { left: 10em; }
+
 
+
div.res {
+
    background:#dae5d9;
+
    color:#3b434e;
+
    border:none;
+
    padding:1em;
+
    -webkit-border-radius: 1.5em;
+
    -moz-border-radius:1.5em;
+
    border-radius: 1.5em;
+
    -moz-box-shadow: 1px 1px 3px #3b434e;
+
    -webkit-box-shadow: 1px 1px 3px #3b434e;
+
    box-shadow: 1px 1px 3px #3b434e;
+
    display:inline-block;
+
    margin-left: 1.5em;
+
}
+
 
+
//Connor 23/7/12 Highlighting for the multiple choice answers.
+
tr.proposal:hover{
+
  background-color:rgb(150,150,200)
+
}
+
 
+
.lsclear{
+
  color: #D90000;
+
  font-weight: bold;
+
  cursor:pointer;
+
/* designer override */
+
  border: 3px solid #E3E3E3;
+
  background: #EE8301;
+
  padding: 6px 12px;
+
  margin-left:.5em;
+
  -webkit-border-radius: 22px;
+
  -moz-border-radius: 22px;
+
  border-radius: 22px;
+
  text-shadow: -1px -1px 0 rgba(50, 50, 50, 0.75);
+
  color: #e3e3e3;
+
  font-size: 1em;
+
  font-family: Helvetica, Arial, Sans-Serif;
+
  font-weight:normal;
+
  text-decoration: none;
+
  vertical-align: middle;
+
  -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
+
  -moz-box-shadow:    1px 1px 5px rgba(50, 50, 50, 0.75);
+
  box-shadow:        1px 1px 5px rgba(50, 50, 50, 0.75);
+
  display:inline-block;
+
}
+
.lsclear:hover {
+
  background: #161525;
+
  color: #EE8301;
+
  border-color: #EE8301;
+
}
+
 
+
/* ===================== FOOTER */
+
 
+
div#footer {
+
    background-image: none;
+
    border-top:thin solid #EE8301;
+
    direction: ltr;
+
    margin-left: 11em;
+
    margin-top: 0;
+
    padding: 0.75em;
+
}
+
div#footer ul {
+
    margin-left:.5em;
+
}
+
/* ===================== this overrides boys css to adjust the design */
+
 
+
 
+
 
+
span.id {
+
    font-size:3em;
+
    font-weight:bold;
+
    color:#161525;
+
}
+
.imper {
+
    margin-bottom:1em;
+
    font-weight:bold;
+
}
+
.mw-content-ltr a {
+
    color:#161525;
+
    font-weight:bold;
+
}
+
.qu a {
+
    font-weight:bold;
+
}
+
.mw-content-ltr a:hover {
+
    color:#ee8301;
+
}
+
.qu a:hover {
+
    color:#ee8301;
+
}
+
 
+
.quizlink  a{
+
    margin-left:.5em;
+
    font-weight:bold;
+
    color:#e3e3e3;
+
    background:#3b434e;
+
    padding:.5em 1.5em;
+
    -moz-border-radius:2em;
+
    -webkit-border-radius:2em;
+
    border-radius:2em;
+
    display:inline-block;
+
    box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);
+
    border: 3px solid #E3E3E3;
+
}
+
.quizlink a:hover {
+
    color:#ee8301;
+
    background:#161525;
+
    border-color:#ee8301;
+
}
+
code {
+
    color:#ee8301;
+
    background:none;
+
    border: 1px solid #EE8301;
+
    -moz-border-radius:2em;
+
    -webkit-border-radius:2em;
+
    border-radius:2em;
+
    padding: 0.1em 0.5em 0;   
+
}
+
h2 code {
+
    border: 2px solid #EE8301;
+
}
+
.mw-content-ltr pre {
+
    border:none;
+
    background:#dae5d9;
+
    padding: 1.1em 1em 1em 2em;
+
    -moz-border-radius:.5em;
+
    -webkit-border-radius:.5em;
+
    border-radius:.5em;
+
    -moz-box-shadow:inset 5px 5px 11px rgba(33,33,33,0.7);
+
    -webkit-box-shadow:inset 5px 5px 11px rgba(33,33,33,0.7);
+
    box-shadow:inset 5px 5px 11px rgba(33,33,33,0.7);
+
}
+
 
+
.NoBorder td{
+
  border:none;
+
}
+
 
+
.Bordered td{
+
  border:solid;
+
  border-width:1px;
+
}
+
/*Connor 7/8/12 Gets rid of the table lines for a table many tables have been entered into.*/
+
 
+
/*Simple styling for lists of references*/
+
 
+
.tutlist {
+
  width:40ex;
+
  float:right;
+
  margin-left: 1.5em;
+
  padding: 1em;
+
  -moz-box-shadow: 1px 1px 3px #3B434E;
+
  -webkit-box-shadow: 1px 1px 3px #3B434E;
+
  box-shadow: 1px 1px 3px #3B434E;
+
  background:#dae5d9;
+
  transition:background 1s;
+
  -moz-transition:background 1s; /* Firefox 4 */
+
  -webkit-transition:background 2s; /* Safari and Chrome */
+
  -o-transition:background 1s; /* Opera */
+
  border-radius: 1.5em;
+
  color: #EE8301;
+
}
+
 
+
.fc {
+
  color: #EE8301;
+
  text-decoration:underline;
+
}
+
 
+
#userloginForm,
+
#userloginForm table {
+
  color:#e3e3e3;
+
}
+
#userloginForm {
+
    -moz-box-shadow: 5px 5px 8px #3b434e;
+
    -webkit-box-shadow: 3px 6px 10px #3b434e;
+
    box-shadow: 5px 5px 8px #3b434e;
+
    background: #161525; /* Old browsers */
+
    background: -moz-linear-gradient(top,  #363d49 0%, #363d49 18%, #161525 69%, #161525 100%); /* FF3.6+ */
+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#363d49), color-stop(18%,#363d49), color-stop(69%,#161525), color-stop(100%,#161525)); /* Chrome,Safari4+ */
+
    background: -webkit-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* Chrome10+,Safari5.1+ */
+
    background: -o-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* Opera 11.10+ */
+
    background: -ms-linear-gradient(top,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* IE10+ */
+
    background: linear-gradient(to bottom,  #363d49 0%,#363d49 18%,#161525 69%,#161525 100%); /* W3C */
+
    -webkit-border-radius: 1.5em;
+
    -moz-border-radius:1.5em;
+
    border-radius: 1.5em;
+
    border:solid 5px #e3e3e3;
+
}
+
#userloginForm a {
+
    color:#ee8301;
+
}
+
#userloginForm a:hover {
+
    color:#FF9E44;
+
    text-shadow: 0 0 6px #E17F19;
+
}
+
#userloginForm a {
+
    color:#ee8301;
+
}
+
#userloginForm table,
+
#userloginForm table td {
+
    border:none;
+
    background:none;
+
}
+
#userloginForm input {
+
    background:#e3e3e3;
+
    padding:0 .5em;
+
    -webkit-border-radius: .5em;
+
    -moz-border-radius:.5em;
+
    border-radius: .5em;
+
}
+
#userloginForm h2 {
+
    color:#ee8301
+
}
+
 
+
/* increase link recognition */
+
.mw-content-ltr a {
+
    text-decoration: underline;
+
}
+
div.tutblock a, div.refblock a, div.resblock a, .tutlist a, .quizlink a {
+
    text-decoration: none;
+
}
+

Revision as of 06:28, 18 October 2012

BBC QUIZ

</tr>
bbc
name region area population gdp
Afghanistan South Asia 652225 26000000
Albania Europe 28728 3200000 6656000000
Algeria Middle East 2400000 32900000 75012000000
Andorra Europe 468 64000
Brazil South America 8550000 182800000 564852000000
Colombia South America 1140000 45600000
Nauru Asia-Pacific 21 9900
Uzbekistan Central Asia 652225 26000000
...

1. Select the code which gives the name of countries beginning with C

SELECT name FROM bbc WHERE name BEGIN with C
SELECT name FROM bbc WHERE name LIKE '%C'
SELECT name FROM bbc WHERE name LIKE '%C%'
SELECT name FROM bbc WHERE name LIKE C
SELECT name FROM bbc WHERE name LIKE 'C%'

2. Select the code which shows just the population of United Kingdom?

SELECT name FROM bbc WHERE name Like 'United%'
SELECT name FROM bbc WHERE population = 'United Kingdom'
SELECT name, population FROM bbc WHERE name = 'United Kingdom'
SELECT population FROM bbc WHERE name = 'United Kingdom'
SELECT population FROM bbc WHERE name = United Kingdom

3. Select the answer which shows the problem with this SQL code:SELECT name FROM "bbc" WHERE population > '2000000'

Apostrophes should be used around 'bbc' instead of speech marks
There are apostrophes surrounding '2000000'
There are speech marks surrounding "bbc"
There are speech marks surrounding "bbc" and there is apostrophes surrounding '2000000'
The use of a WHERE function is incorrect

4. Select the result that would be obtained from the following code: SELECT name, population / 10 FROM bbc WHERE population < 10000

Table-A
Andorra6400
Nauru990
Table-B
Andorra64000
Nauru9900
Table-C
Nauru99
Table-D
Nauru990
Table-E
Nauru9900
Table-A
Table-B
Table-C
Table-D
Table-E

5. Select the code which would reveal the name and population of countries in Europe, North America and South America

SELECT name FROM bbc WHERE region IN ('Europe', 'North America', 'South America')
SELECT name, population FROM bbc WHERE region IN ('Europe', 'North America', 'South America')
SELECT name, population FROM bbc WHERE region IN (Europe North America South America)
SELECT name, population FROM bbc WHERE region IS ('Europe', 'North America', 'South America')
SELECT population FROM bbc WHERE region IN ('Europe', 'North America', 'South America')

6. Select the code which would give two rows

SELECT name FROM bbc WHERE name = 'United Kingdom'
SELECT name FROM bbc WHERE name = 'United Kingdom' AND name = 'Algeria'
SELECT name FROM bbc WHERE name EITHER ('United Kingdom', 'Algeria')
SELECT name FROM bbc WHERE name IN ('United Kingdom', 'Algeria')
SELECT name FROM WHERE name IS 'Scotland'

7. Select the result that would be obtained from this code:

SELECT name FROM bbc WHERE region = 'South America' AND population > 40000000
Table-A
Afghanistan
Brazil
Colombia
Table-B
Brazil
Table-C
Brazil
Colombia
Table-D
BrazilSouth America
ColombiaSouth America
Table-E
Brazil182800000
Colombia45600000
Table-A
Table-B
Table-C
Table-D
Table-E

Your score is 0 / 0
Personal tools
Namespaces

Variants
Actions
Reference
Toolbox
Google AdSense