Difference between pages "MediaWiki:Common.css" and "MediaWiki:Common.js"

From SQLZOO
(Difference between pages)
Jump to: navigation, search
 
 
Line 1: Line 1:
 +
/* Any JavaScript here will be loaded for all users on every page load. */
 +
$(function(){
 +
  var engine = $('<div class="portal"/>')
 +
    .append($('<h5>Engine</h5>'))
 +
    .append($('<div class=body/>')
 +
      .append($('<ul/>')
 +
        .append($('<li/>')
 +
          .append($('<select id=engine/>')
 +
            .append('<option value=mysql>MySQL</option>')
 +
            .append('<option value=oracle>Oracle</option>')
 +
            .append('<option value=sqlserver>SQL Server</option>')
 +
            .append('<option value=postgres>PostgreSQL</option>')
 +
            .append('<option id=ingres>Ingres</option>')
 +
            .append('<option id=db2>DB2</option>')
 +
            .change(function(){setDefaultText();})
 +
          )
 +
        )
 +
      )
 +
    )
  
/* CSS placed here will be applied to all skins */
+
  $('#right-navigation').after($('<ul/>',{'id':'zoolinks'})
#mw-head-base {
+
    .append($('<li/>').append($('<a/>',{href:'http://csszoo.net',text:'CSS',id:'css_link', title:'Learn CSS! visit CSSzoo'})))
  height:10em;
+
    .append($('<li/>').append($('<a/>',{href:'http://progzoo.net',text:'Java',id:'java_link', title:'Hungry for Java tutorials? ProgZoo is for you'})))
}
+
    .append($('<li/>').append($('<a/>',{href:'http://linuxzoo.net',text:'Linux',id:'linux_link', title:'Linux Zoo tutoials!'})))
 +
    .append($('<li/>',{'id':'book'}).append($('<a/>',{href:'http://www.oreilly.com/catalog/sqlhks/',id:'sql_hacks',title:'Try/buy SQL Hacks book'})))
 +
  );
  
/* Hide ads for login page */
+
  $('#p-Reference').before(engine);
body.ns-special div#p-googleadsense{
+
    
   display:none;
+
  //Adverts
}
+
  $('<img/>',{src:'/design/sqlhacks.png',alt:'SQL Hacks book ad'})
.qu {
+
     .appendTo($('#sql_hacks'));
    border-color: silver;
+
  $('#p-googleadsense').prependTo('#footer');
    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 {
+
  if (wgCanonicalNamespace=='MediaWiki' || wgCanonicalNamespace=='Special')
font-weight:bold;
+
    $('#p-googleadsense').hide();
color: #3b434e;
+
}
+
  
.hint {
+
// Reset localStorage
color: #055C00;
+
var rst = $('.lsclear');
}
+
rst.click(function(e){
 +
  if (localStorage)
 +
localStorage.clear();
 +
  location.reload();
 +
});
 +
 
 +
var numberOfQuestions = 0;
 +
var numberOfAnswered = 0;
 +
var numberOfCorrect = 0;
 +
var startAt = Math.max(1,$('#startAt').text()*1);
 +
var qu = $('.qu,.ht,.err');
 +
var curEng;
 +
if (localStorage && localStorage.getItem("currentEngine"))
 +
{
 +
curEng = localStorage.getItem("currentEngine");
 +
$('#engine').val(curEng);
 +
}
 +
else
 +
curEng = $('#engine').val();
 +
 +
for(var i=0;i<qu.length;i++){
 +
var id = i+1;
 +
var q = qu[i];
 +
var lsName = wgPageName + '_' + 'frm__' + id;
 +
 +
var def = $('.def',q);
 +
if (def.length>1){
 +
var pick = def.filter(function(){
 +
var clss = $(this).attr('class').split(' ');
 +
for(var k=0;k<clss.length;k++)
 +
if (clss[k].match("^e-")) return false;
 +
return true
 +
});
 +
for(var j=0;j<def.length;j++)
 +
  if ($(def[j]).hasClass('e-'+curEng))
 +
pick = $(def[j]);
 +
def = pick;
 +
}
 +
 +
//Hints
 +
var hint = $('.hint', q);
 +
hint.hide();
 +
hint.each(function(){
 +
var htitle = $(this).attr("title");
 +
var hnt = $('<div/>', {'class':'hnt', 'text':htitle});
 +
var hidden = $(this);
 +
hnt.click(function(e){
 +
  e.preventDefault();
 +
  hidden.toggle("slow");});
 +
$(this).before(hnt);
 +
});
 +
 +
 +
var txt = def.text();
 +
// replace the default text with user's last query if available in LS
 +
if (localStorage.getItem(lsName+"_arr_"+curEng))
 +
{
 +
var lsArray = JSON.parse(localStorage.getItem(lsName+"_arr_"+curEng));
 +
txt = lsArray[lsArray.length-1];
 +
}
 +
 +
var ans = $('.ans',q).text();
 +
var tdy = $('.tidy',q).text();
 +
var frm = $('<form/>',{name:'frm__'+id,id:'frm__'+id})
 +
.append($('<div/>',{'class':'quf'})
 +
  .append($('<textarea></textarea>',
 +
{value:$.trim(txt),
 +
  rows:2+Math.max(Math.max(4 ,txt.split(/[\n\r]+/).length),ans.split(/[\n\r]+/).length),
 +
  cols:2+Math.max(Math.max(45,maxlen(txt.split(/[\n\r]+/))),maxlen(ans.split(/[\n\r]+/))),
 +
  'class':'sql',
 +
  id:'txtar_'+id}))
 +
  .append($('<br/>'))
 +
  .append($('<button/>',{text:'Submit SQL','class':'submitSQL',click:goBaby}))
 +
  .append($('<div/>',{text:'Restore default','class':'reset',click:restoreDefault}))
 +
);
 +
 +
def.after(frm);
 +
 +
 +
// Display completion information
 +
if (localStorage)
 +
{
 +
if (!localStorage.getItem(lsName))
 +
localStorage.setItem(lsName, "unanswered");
 +
if (localStorage.getItem(lsName) == "answered")
 +
{
 +
//$(".completion", q).html("You have answered this question <u>incorrectly</u> before.");
 +
numberOfAnswered++;
 +
var qcorr = $('<div/>', {'class':'qincorrect', 'title':'You have answered this question incorrectly before.'});
 +
def.before(qcorr);
 +
}
 +
else if (localStorage.getItem(lsName) == "correct")
 +
{
 +
//$(".completion", q).html("You have answered this question <u>correctly</u> before.");
 +
numberOfCorrect++;
 +
numberOfAnswered++;
 +
 +
var qcorr = $('<div/>', {'class':'qcorrect', 'title':'You have answered this question correctly before.'});
 +
def.before(qcorr);
 +
}
 +
else
 +
{
 +
//$(".completion", q).html("You have not answered this question yet.");
 +
}
 +
}
 +
 +
var lhs = $('<div/>',{css:{width:'60ex',marginRight:'2ex','float':'left'}});
 +
lhs.append($('<span/>',{text:(startAt+i)+'.','class':'id'}));
 +
lhs.append($(q).children());
 +
$(q).append(lhs);
 +
                // This line caused problems when styling - I removed the css margin-left from it - M
 +
//$(q).append($('<div/>',{text:'result','class':'res',css:{'margin-left':'1ex'}}));
 +
                $(q).append($('<div/>',{text:'result','class':'res'}));
 +
 +
//Show additional info if available for active angine
 +
var ecomm = $('.ecomm,.link',q);
 +
var ecomm1 = ecomm.filter(false);
 +
if (ecomm.length>0){
 +
var curEng = $('#engine').val();
 +
for(var j=0;j<ecomm.length;j++)
 +
  if ($(ecomm[j]).hasClass('e-'+curEng))
 +
ecomm1 = $(ecomm[j]);
 +
}
 +
for (var j = 0; j < ecomm.length; j++)
 +
{
 +
if ($(ecomm[j]).get(0) == ecomm1.get(0))
 +
{
 +
$(ecomm[j]).show();
 +
}
 +
else
 +
{
 +
$(ecomm[j]).hide();
 +
}
 +
}
 +
 +
var ecomm = $('.link',q);
 +
var ecomm1 = def.filter(function(){
 +
var clss = $(this).attr('class').split(' ');
 +
for(var k=0;k<clss.length;k++)
 +
if (clss[k].match("^e-")) return false;
 +
return true
 +
});
 +
if (ecomm.length>0){
 +
var curEng = $('#engine').val();
 +
for(var j=0;j<ecomm.length;j++)
 +
  if ($(ecomm[j]).hasClass('e-'+curEng))
 +
ecomm1 = $(ecomm[j]);
 +
}
 +
for (var j = 0; j < ecomm.length; j++)
 +
{
 +
if ($(ecomm[j]).get(0) == ecomm1.get(0))
 +
{
 +
$(ecomm[j]).show();
 +
}
 +
else
 +
{
 +
$(ecomm[j]).hide();
 +
}
 +
}
 +
numberOfQuestions = id;
 +
}
 +
if (numberOfQuestions == 0)
 +
numberOfQuestions = 1;
 +
 +
// Display completion info
 +
$(".summary").html("You have answered "+numberOfAnswered+" out of "+numberOfQuestions+" questions on this page.<br/>"+numberOfCorrect+" of your answers were correct.");
 +
// Save completion info
 +
if (localStorage)
 +
{
 +
localStorage.setItem(wgPageName+'_numberOfQuestions', numberOfQuestions);
 +
localStorage.setItem(wgPageName+'_numberOfCorrect', numberOfCorrect);
 +
}
 +
 +
//Progress bar
 +
var maxWidth = $('.progressbar').css('width');
 +
var barModification = parseFloat(maxWidth) * numberOfCorrect / numberOfQuestions;
 +
$('.progressbar').css('width', barModification);
 +
 +
  //Put in the answers if url includes answer=1
 +
  if (window.location.search && /answer/.test(window.location.search)){
 +
    $('<def/>',{text:"Cheat mode",css:{position:'fixed',right:'2ex',
 +
                  bottom:'2ex',width:'14ex',backgroundColor:'yellow',padding:'2ex',
 +
                  textAlign:'center'}})
 +
      .appendTo($('body'));
 +
    $('.quf textarea').each(function(){
 +
      $(this).val($(this).closest('form').next('.ans').text());
 +
    })
 +
  }
  
.ecomm {
+
})
        margin-bottom: 0.5ex;
+
        margin-right: 0.5ex;
+
}
+
  
.qu textarea{
+
function setDefaultText() {
  width:auto;
+
var qu = $('.ht,.err');
 +
var curEng = $('#engine').val();
 +
if (localStorage)
 +
localStorage.setItem("currentEngine", curEng);
 +
for(var i=0;i<qu.length;i++){
 +
var id = i+1;
 +
var q = qu[i];
 +
 +
var def = $('.def',q);
 +
if (def.length>1){
 +
var pick = def.filter(function(){
 +
var clss = $(this).attr('class').split(' ');
 +
for(var k=0;k<clss.length;k++)
 +
if (clss[k].match("^e-")) return false;
 +
return true
 +
});
 +
for(var j=0;j<def.length;j++)
 +
  if ($(def[j]).hasClass('e-'+curEng))
 +
pick = $(def[j]);
 +
def = pick;
 +
}
 +
 +
var lsName = wgPageName + '_' + 'frm__' + id;
 +
var txt = def.text();
 +
// replace the default text with user's last query if available in LS
 +
if (localStorage.getItem(lsName+"_arr_"+curEng))
 +
{
 +
var lsArray = JSON.parse(localStorage.getItem(lsName+"_arr_"+curEng));
 +
txt = lsArray[lsArray.length-1];
 +
}
 +
$('textarea#txtar_'+id).val(txt);
 +
 +
//Show additional info if available for chosen engine
 +
var ecomm = $('.ecomm',q);
 +
var ecomm1 = ecomm.filter(false);
 +
if (ecomm.length>0){
 +
var curEng = $('#engine').val();
 +
for(var j=0;j<ecomm.length;j++)
 +
  if ($(ecomm[j]).hasClass('e-'+curEng))
 +
ecomm1 = $(ecomm[j]);
 +
}
 +
for (var j = 0; j < ecomm.length; j++)
 +
{
 +
if ($(ecomm[j]).get(0) == ecomm1.get(0))
 +
{
 +
$(ecomm[j]).show();
 +
}
 +
else
 +
{
 +
$(ecomm[j]).hide();
 +
}
 +
}
 +
 +
//Show headers for chosen engine
 +
var ecomm = $('.link',q);
 +
var ecomm1 = def.filter(function(){
 +
var clss = $(this).attr('class').split(' ');
 +
for(var k=0;k<clss.length;k++)
 +
if (clss[k].match("^e-")) return false;
 +
return true
 +
});
 +
if (ecomm.length>0){
 +
var curEng = $('#engine').val();
 +
for(var j=0;j<ecomm.length;j++)
 +
  if ($(ecomm[j]).hasClass('e-'+curEng))
 +
ecomm1 = $(ecomm[j]);
 +
}
 +
for (var j = 0; j < ecomm.length; j++)
 +
{
 +
if ($(ecomm[j]).get(0) == ecomm1.get(0))
 +
{
 +
$(ecomm[j]).show();
 +
}
 +
else
 +
{
 +
$(ecomm[j]).hide();
 +
}
 +
}
 +
 +
}
 
}
 
}
  
/* Change by Andrew 2012-07-21 */
+
function restoreDefault() {
.qu form{
+
var qu = $(this).parents('.qu, .ht, .err');
  clear:left;
+
var def = $('.def',qu);
}
+
var txt = def.text();
 +
qu.find('textarea.sql').val(txt);
 +
}
  
div.res {
+
function updateProgressbar() {
    border-style: inset;
+
var numberOfQuestions = parseInt(localStorage.getItem(wgPageName+'_numberOfQuestions'));
    border-width: 1px;
+
// A little workaround - max progressbar width is 96% of its background's width
    height: 20em;
+
var maxWidth = parseFloat($('.progressbarbg').css('width')) * 0.96;
    width:32em;
+
var barModification = parseFloat($('.progressbar').css('width')) + maxWidth * 1 / numberOfQuestions;
    overflow: auto;
+
$('.progressbar').css('width', barModification);
    padding: 5px;
+
 
}
 
}
  
table{
+
function goBaby(){
   border-collapse:collapse;
+
   var qu = $(this).parents('.qu, .ht, .err');
   background:#d2e5d1;
+
   var lsUse = ((qu[0].getAttribute('class') != 'ht') && ($(qu[0]).find('.ans').length > 0));
   margin:1em 0 1.5em;
+
  var lsName = wgPageName + '_' + $(this).parents('form').attr('id');
 +
  if (lsUse && localStorage && (localStorage.getItem(lsName) != "correct"))
 +
localStorage.setItem(lsName, "answered");
 +
  var sql = qu.find('textarea.sql').val();
 +
  var parlst = $('.params').text().split(';');
 +
  var params = {};
 +
  for(var i=0;i<parlst.length;i++){
 +
    var pair = parlst[i].split(':');
 +
    params[pair[0]]=pair[1];
 +
  }
 +
  //Store the sql querry in LS
 +
  if (localStorage)
 +
  {
 +
var curEng = $('#engine').val();
 +
var lsArray = JSON.parse(localStorage.getItem(lsName+"_arr_"+curEng));
 +
if (!lsArray)
 +
lsArray = new Array();
 +
lsArray.push(sql);
 +
localStorage.setItem(lsName+"_arr_"+curEng, JSON.stringify(lsArray));
 +
   }
 +
  qu.find('.res').addClass('waiting');
 +
  $.ajax({url:'/sqlgo.pl',cache:false,'type':'post',dataType:'json',
 +
          data:{sql:sql.replace(/\xA0/g,' '),  //Mediawiki inserts &nbsp; before a %. We need to change it back to a space.CM 13/6/12
 +
                format:'json',
 +
                question:$('.id',qu).text(),
 +
                wgUserName:wgUserName,
 +
                cookie:$.cookie('oliver'),
 +
                page:wgPageName,
 +
                server:$('#engine').val(),
 +
                setup:$('.setup',qu).text().replace(/\xA0/g,' '),
 +
                tidy:$('.tidy',qu).text().replace(/\xA0/g,' '),
 +
                answer:$('.ans',qu).text().replace(/\xA0/g,' '),
 +
                schema:params['schema']
 +
              },
 +
          success:function(d){
 +
            var res = qu.find('.res');
 +
            res.empty().removeClass('waiting')
 +
            if (d.error){
 +
              res.append($('<h1/>',{text:'SQLZoo System Error:'}))
 +
              res.append($('<div/>',{text:d.error}))
 +
              return;
 +
            }
 +
var headerPresent = false;
 +
            for (var i = 0; i < d.sql.length; i++)
 +
{
 +
if (!d || !d.sql || !d.sql[i]){
 +
  res.append($('<h1/>',{text:'SQLZoo System Error:'}))
 +
  res.append($('<div/>',{text:"Problem with d or d.sql or d.sql[0]"}))
 +
  return;
 +
}
 +
if (d.sql[i].error){
 +
  res.append($('<h1/>',{text:'Error:'}))
 +
  res.append($('<div/>',{text:d.sql[i].error}))
 +
  return;
 +
}
 +
var legend = "Result:";
 +
if (d.score && d.answer && d.answer.length==1 && d.answer[0].fields){
 +
  if (d.score == 100){
 +
legend = 'Correct answer';
 +
if (lsUse && localStorage)
 +
localStorage.setItem(lsName, "correct");
 +
var def = $('.def',qu);
 +
if (localStorage.getItem(lsName) == "correct")
 +
{
 +
if ($(".qcorrect", qu).length == 0)
 +
{
 +
var qcorr = $('<div/>', {'class':'qcorrect', 'title':'You have answered this question correctly before.'});
 +
def.before(qcorr);
 +
updateProgressbar();
 +
}
 +
}
 +
      }
 +
  else if (d.answer[0].fields.length>d.sql[0].fields.length)
 +
legend = 'Too few columns';
 +
  else if (d.answer[0].fields.length<d.sql[0].fields.length)
 +
legend = 'Too many columns';
 +
  else if (d.answer[0].rows.length>d.sql[0].rows.length)
 +
legend = 'Too few rows';
 +
  else if (d.answer[0].rows.length<d.sql[0].rows.length)
 +
legend = 'Too many rows';
 +
 
 +
}
 +
if (!headerPresent)
 +
{
 +
res.append($('<h1/>',{text:legend}));
 +
headerPresent = true;
 +
}
 +
var t = mkTable(d.sql[i]);
 +
t.addClass('sqlmine')
 +
.appendTo(res);
 +
if (d.answer && d.answer.length>0 && d.score<100){
 +
  res.append($('<div/>',{text:'Show correct result','class':'showtxt'})
 +
.click(function(){
 +
  $(this).next().show('slow');
 +
})
 +
  );
 +
  var a = mkTable(d.answer[0]);
 +
  a.addClass('sqlans');
 +
  a.appendTo(res);
 +
}
 +
}
 +
          },
 +
          error:function(jqXHR,textStatus,errorThrown){
 +
            qu.find('.res').empty().removeClass('waiting')
 +
              .append($('<h1/>',{'class':'syserr',text:'SQLZOO system error:'}))
 +
              .append($('<div/>',{text:textStatus}))
 +
              .append($('<div/>',{text:errorThrown}))
 +
              .append($('<div/>').html(jqXHR.responseText))
 +
          }
 +
        });
 +
 +
// Modify completion information
 +
var def = $('.def',qu);
 +
if (localStorage)
 +
{
 +
if (localStorage.getItem(lsName) == "answered")
 +
{
 +
var qcorr = $('<div/>', {'class':'qincorrect', 'title':'You have answered this question incorrectly before.'});
 +
def.before(qcorr);
 +
}
 +
}
 +
  return false;
 
}
 
}
.res table{
+
function maxlen(l){
   background:none;
+
   var r = 0;
 +
  for(var i=0;i<l.length;i++)
 +
    r = Math.max(r,l[i].length);
 +
  return r;
 
}
 
}
table td{
+
function truncate(s){
   border:solid gray 1px;
+
   if (s.length<15) return s;
   padding:.2em .7em;
+
   return s.substring(0,13)+"..";
 
}
 
}
 
+
function mkTable(a){
h2{
+
   var t = $('<table/>');
   border-bottom:none;
+
  t.append($('<tr/>'));
 +
  var isnum = [];
 +
  if (!a.fields || !a.rows) return t;
 +
  for(var i=0;i<a.fields.length;i++){
 +
    $('tr',t).append($('<th/>',{text:truncate(a.fields[i])}));
 +
    var allNum = 1;
 +
    for(var j=0;j<a.rows.length;j++){
 +
      if (a.rows[j] && a.rows[j][i] && !a.rows[j][i].match(/^[0-9.]*$/))
 +
        allNum = 0;
 +
    }
 +
    isnum.push(allNum);
 +
  }
 +
  for(var j=0;j<a.rows.length;j++){
 +
    var tr = $('<tr/>').appendTo(t);
 +
    for(var k=0;k<a.rows[j].length;k++){
 +
      var td = $('<td/>',{text:a.rows[j][k]});
 +
      if (isnum[k]) td.addClass('r');
 +
      td.appendTo(tr);
 +
    }
 +
  }
 +
  return t;
 
}
 
}
  
span.id {
+
/* ======================= Designer js starts here */
font-size: 300%;
+
display: block;
+
float: left;
+
padding: 0px 5px;
+
margin-right: 5px;
+
margin-top:0.8ex;
+
}
+
  
div.tutblock,
+
// the following scripts should not be present here - they should be linked as external files !!!
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 */  
+
// this script helps to manage browser inconsistency across different os
 +
function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);
  
/* SQL ZOO COLOR PALETTE:
 
  
    #dae5d9 - light green (bg color) [ alt: #d2e5d1 ]
+
// display site logo
    #161525 - dark blue
+
$(function(){
    #3b434e - light blue
+
  $('<a/>',{href:'http://sqlzoo.net/w/index.php',id:'mp-logo',title:'Zoo You!'})
    #ee8301 - orange [ darker alt: #ff530d ]
+
    .append($('<img/>',{src:'/design/sql_zoo_logo05.png',alt:'SQLzoo logo'}))
    #e3e3e3 - near white
+
    .appendTo($('#mw-head-base'))
    #4a787d - bright blue (links) [ alt: #668195 ]
+
});
    #c4c4c4 - light grey (sub menu links)
+
    #909898 - mid grey (sub menu description)
+
 
   
 
   
*/
+
// display site description
 +
$(document).ready(function(){
 +
  $(function(){
 +
    $("#mp-logo").append(" <h1 id='logo-desc'>Interactive <span>SQL <span>Tutorial</span></span></h1>");
 +
  });
 +
});
 +
 
 +
// display language selector
 +
$(function(){
 +
    $('<div/>',{id:'language'}).appendTo($('#mw-head-base'))
 +
 +
    var lang = $('<ul/>',{id:'lang','class':'side_nav_sub'});
 +
        lang.append('<li><a id="en" href="/wiki/Main_Page"></li>');
 +
        lang.append('<li><a id="de" href="/wiki/Main_Page/de"></a></li>');
 +
        lang.append('<li><a id="fr" href="/wiki/Main_Page/fr"></a></li>');
 
   
 
   
/* =========================== GLOBAL SETTINGS: ============================= */
+
    $('#language').append(lang);
  
/* remove the Wiki markup */
+
    $('<img/>',{src:'/design/en2.png',alt:'SQL zoo in English'})
#p-logo, #left-navigation, #p-cactions, #p-tb, #pt-mytalk, #pt-watchlist, #pt-mycontris, .editsection, #mw-usercsspreview {
+
      .appendTo($('#en'));
    display:none;
+
     $('<img/>',{src:'/design/de2.png',alt:'SQL zoo in German'})
}
+
      .appendTo($('#de'));
body #mw-head-base {
+
     $('<img/>',{src:'/design/fr2.png',alt:'SQL zoo in French'})
     background-image:none;
+
      .appendTo($('#fr'));
}
+
});
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 {
+
// assemble and display main nav menu
     color:#3b434e;
+
$(function(){
     text-decoration:none;
+
     var ml1 =
}
+
    [['1 SELECT basics',  'SELECT_basics','Some simple queries to get you started']
a:visited {color:#668195;}
+
    ,['2 SELECT from WORLD','SELECT_from_WORLD_Tutorial','Finding facts about countries']
a:hover {color:#ff530d;}
+
    ,['3 SELECT from Nobel','SELECT_from_Nobel_Tutorial','More practice with SELECT statements']
a:active {color:#e3e3e3;}
+
    ,['4 SELECT within SELECT','SELECT_within_SELECT_Tutorial','Using the results of one query inside another']
 +
    ,['5 SUM and COUNT','SUM_and_COUNT','Apply aggregate functions']
 +
    ,['6 JOIN','The_JOIN_operation','Gathering data from more than one table']
 +
    ,['7 More JOIN','More_JOIN_operations','Getting data from the movie database']
 +
    ,['8 Using NULL','Using_Null','Dealing with missing data']
 +
    ,['9 Self JOIN','Self_join','Dealing with missing data']
 +
,['10 SQL Quizzes','Tutorial_Quizzes','Test your knowledge with multiple choice quizzes']
 +
    ];
 +
     var mm1 = $('<ul/>',{id:'mm1','class':'dropdown mm_sub'});
 +
    for(var i=0;i<ml1.length;i++){
 +
  var maxWidth = 50; // adjust the value so that it fits menu well
 +
  var NoQ = localStorage.getItem(ml1[i][1] + '_numberOfQuestions');
 +
  if (!NoQ) NoQ = 1;
 +
  var NoC = localStorage.getItem(ml1[i][1] + '_numberOfCorrect');
 +
  if (!NoC) NoC = 0;  
 +
  var pbWidth = parseFloat(maxWidth) * NoC / NoQ;
 +
  var mprogbar = $('<div/>',{'class':'progressbarbg1'}).append($('<div/>',{'class':'progressbar1', 'id':ml1[i][1], css:{'width':pbWidth}}));
 +
          mm1.append($('<li/>').append($('<a/>',{href:'/wiki/'+ml1[i][1],text:ml1[i][0]})).append(ml1[i][2]).append(mprogbar));
 +
    }
 +
    var mm2 = $('<ul/>',{id:'mm2','class':'dropdown mm_sub'});
 +
        mm2.append('<li><a href="/wiki/AdventureWorks">1 AdventureWorks</a> Flogging sports gear. Assessment for CO22008 2007/8</li>');
 +
        mm2.append('<li><a href="/wiki/Neeps">2 Neeps</a> A timetable database</li>');
 +
        mm2.append('<li><a href="/wiki/Musicians">3 Musicians</a> Concerts and compositions</li>');
 +
        mm2.append('<li><a href="/wiki/Southwind">4 Southwind</a> Buying and selling</li>');
 +
        mm2.append('<li><a href="/wiki/Dressmaker">5 Dressmaker</a> Constructing clothing</li>');
 +
        mm2.append('<li><a href="/wiki/Congestion Charging">6 Congestion Charging</a> Monitoring traffic (old questions)</li>');
 +
        mm2.append('<li><a href="/wiki/Weather data for Southhampton">7 Weather data for Southhampton</a></li>');
 +
        mm2.append('<li><a href="/wiki/Album Tracks Style">8 Album Tracks Style</a> Music data</li>');
 +
 +
    var mm3 = $('<ul/>',{id:'mm3','class':'dropdown mm_sub'});
 +
        mm3.append('<li><a href="/wiki/SELECT_Reference">SELECT</a>How to read the data from a database.</li>');
 +
        mm3.append('<li><a href="/wiki/CREATE_and_DROP_Reference">CREATE and DROP</a>How to create tables, indexes, views and other things. How to get rid of them.</li>');
 +
        mm3.append('<li><a href="/wiki/INSERT_and_DELETE_Reference">INSERT and DELETE</a>How to put records into a table, change them and how to take them out again.</li>');
 +
        mm3.append('<li><a href="/wiki/DATE_and_TIME_Reference">DATE and TIME</a>How to work with dates; adding, subtracting and formatting.</li>');
 +
        mm3.append('<li><a href="/wiki/Functions_Reference">Functions</a>How to use string functions, logical functions and mathematical functions.</li>');
 +
        mm3.append('<li><a href="/wiki/Users_Reference">Users</a>How to create users, GRANT and DENY access, get at other peoples tables. How to find processes and kill them.</li>');
 +
        mm3.append('<li><a href="/wiki/Meta_Data_Reference">Meta Data</a>How to find out what tables and columns exist. How to count and limit the rows return.</li>');
 +
        mm3.append('<li><a href="/wiki/Hacks_Reference">SQL Hacks</a>Useful SQL hacks .</li>');
 +
 +
    var mm = $('<ul/>',{id:'main_menu'}).appendTo('#mw-head-base');
 +
        mm.append('<li id="mm1"><a href="/" class="navlink">Tutorials</a></li>');
 +
        mm.append('<li id="mm2"><a href="/" class="navlink">Assessments</a></li>');
 +
        mm.append('<li id="mm3"><a href="/" class="navlink">Reference</a></li>');
 +
 +
    $('#mm1').append(mm1);
 +
    $('#mm2').append(mm2);
 +
    $('#mm3').append(mm3);
  
 +
    $('#main_menu').wrap('<div id="navigation_horiz" />');
 +
    $('#navigation_horiz').naviDropDown({
 +
      dropDownWidth: '35em'
 +
    });
 +
});
  
 +
// stick on top elements that need to be visible
 +
$(function(){
 +
    $("#main_menu").addClass("stickableMenu");
 +
    $("#p-Reference").addClass("stickableRef");
 +
    $(".ref_section").addClass("stickableDbRef");
 +
});
  
/* ================================== ADMIN WIKI LINKS: */
+
$(document).scroll(function() {
 +
    var useFixedMenu = $(document).scrollTop() > 175;
 +
    $('.stickableMenu').toggleClass('fixedMenu', useFixedMenu);
 +
   
 +
//    var useFixedRef = $(document).scrollTop() > 275;
 +
//   $('.stickableRef').toggleClass('fixedRef', useFixedRef);
  
 +
    $('.stickableDbRef').toggleClass('fixedDbRef', $(document).scrollTop() > 275);
 +
});
  
 +
// swap classes on external links to change their side icons
 +
$(function(){
 +
$(".external").addClass("zoo_external");
 +
$(".external").removeClass("external");
 +
});
  
/* reposition temporary admin links */
+
/* === Designer js ends here === */
#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 */
+
// Insert tables into Quiz distractors
 
+
var qq = $('.question');
#right-navigation {
+
for (var i = 0; i < qq.length; i++)
  margin: 1.9em .3em 0 0;
+
{
}
+
var q = $(qq[i]);
div.vectorTabs span {
+
var distractors = "ABCDE";
  background:none;
+
for (var j=0;j<distractors.length;j++){
}
+
var tans = $('table caption:contains("Table-'+distractors[j]+'")', q).parents('table');
div.vectorTabs span a {
+
if (tans.length>0)
  padding-top: .05em;
+
{
  color:#3b434e;
+
var ttd = $('table tr td:contains("Table-'+distractors[j]+'")', q);
  text-shadow: 1px 1px 0 #E4EDE6;
+
if (ttd.length>0){
}
+
  ttd.empty();
div.vectorTabs span a:hover {
+
  ttd.append(tans);
  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 */
+
$(function(){
 +
  $('input.check').each(function(i,e){
 +
    $(this).attr('id','quiz_d_'+i);
 +
  });
 +
  $('tr.proposal').each(function(i,e){
 +
    var tds = $('td',$(this));
 +
    var html1= $(tds[1]).html();
 +
    $(tds[1]).html($('<label/>',{html:html1,'for':$('input',$(this)).attr('id') }));
 +
  })
 +
})
 +
//Connor 23/7/12 creates the labels for the multiple choice questions allowing them to be highlighted.
  
#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);
 
  
 
+
//Analytics code
}
+
  var _gaq = _gaq || [];
#zoolinks #css_link:hover {
+
  _gaq.push(['_setAccount', 'UA-33860668-1']);
    color:orange;
+
  _gaq.push(['_trackPageview']);
    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 {
+
  (function() {
     background-image:url('http://socweb8.napier.ac.uk/~09011004/zoo_tutorials/design/penguin.png');
+
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    background-size:1.8em;  
+
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    background-repeat:no-repeat;
+
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    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: -1px -1px 1px #333333;
+
    -webkit-box-shadow: -1px -1px 1px #333333;
+
    box-shadow: -1px -1px 1px #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 {
+
//JSON
    opacity:1;
+
(function($){var escapeable=/["\\\x00-\x1f\x7f-\x9f]/g,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};$.toJSON=typeof JSON==='object'&&JSON.stringify?JSON.stringify:function(o){if(o===null){return'null';}
    -webkit-transform:scale(1);
+
var type=typeof o;if(type==='undefined'){return undefined;}
    -moz-transform:scale(1);
+
if(type==='number'||type==='boolean'){return''+o;}
    -o-transform:scale(1);
+
if(type==='string'){return $.quoteString(o);}
    transform:scale(1);
+
if(type==='object'){if(typeof o.toJSON==='function'){return $.toJSON(o.toJSON());}
    -moz-box-shadow: 5px 5px 2px #666666;
+
if(o.constructor===Date){var month=o.getUTCMonth()+1,day=o.getUTCDate(),year=o.getUTCFullYear(),hours=o.getUTCHours(),minutes=o.getUTCMinutes(),seconds=o.getUTCSeconds(),milli=o.getUTCMilliseconds();if(month<10){month='0'+month;}
    -webkit-box-shadow: 5px 5px 2px #666666;
+
if(day<10){day='0'+day;}
    box-shadow: 8px 8px 12px #666666;
+
if(hours<10){hours='0'+hours;}
    height:auto;
+
if(minutes<10){minutes='0'+minutes;}
}
+
if(seconds<10){seconds='0'+seconds;}
 +
if(milli<100){milli='0'+milli;}
 +
if(milli<10){milli='0'+milli;}
 +
return'"'+year+'-'+month+'-'+day+'T'+
 +
hours+':'+minutes+':'+seconds+'.'+milli+'Z"';}
 +
if(o.constructor===Array){var ret=[];for(var i=0;i<o.length;i++){ret.push($.toJSON(o[i])||'null');}
 +
return'['+ret.join(',')+']';}
 +
var name,val,pairs=[];for(var k in o){type=typeof k;if(type==='number'){name='"'+k+'"';}else if(type==='string'){name=$.quoteString(k);}else{continue;}
 +
type=typeof o[k];if(type==='function'||type==='undefined'){continue;}
 +
val=$.toJSON(o[k]);pairs.push(name+':'+val);}
 +
return'{'+pairs.join(',')+'}';}};$.evalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){return eval('('+src+')');};$.secureEvalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){var filtered=src.replace(/\\["\\\/bfnrtu]/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,'');if(/^[\],:{}\s]*$/.test(filtered)){return eval('('+src+')');}else{throw new SyntaxError('Error parsing JSON, source is not valid.');}};$.quoteString=function(string){if(string.match(escapeable)){return'"'+string.replace(escapeable,function(a){var c=meta[a];if(typeof c==='string'){return c;}
 +
c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';}
 +
return'"'+string+'"';};})(jQuery);
  
 
/* ================================== 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='#abb79d', endColorstr='#00dfe5de',GradientType=0 ); /* IE6-9 */
 
}
 
#mp-logo {
 
    position:absolute; left:1em; top:0.2em; z-index:+1;
 
}
 
#mp-logo img {
 
    width:19.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;
 
}
 
 
 
 
/* ================================== 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 .5s; /* Firefox 4 */
 
    -webkit-transition:all .5s; /* Safari and Chrome */
 
    -o-transition:all .5s; /* Opera */
 
    transition:all .5s; /* 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');
+
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
  background-size:3.5em;
+
*
 +
* Uses the built in easing capabilities added In jQuery 1.1
 +
* to offer multiple easing options
 +
*
 +
* TERMS OF USE - jQuery Easing
 +
*
 +
* Open source under the BSD License.
 +
*
 +
* Copyright © 2008 George McGinley Smith
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 
*/
 
*/
  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 */
+
// t: current time, b: begInnIng value, c: change In value, d: duration
 +
jQuery.easing['jswing'] = jQuery.easing['swing'];
  
.progressbarbg1 {
+
jQuery.extend( jQuery.easing,
  width: 8ex;
+
{
  height: 1.6ex;
+
def: 'easeOutQuad',
  background:black;
+
swing: function (x, t, b, c, d) {
  border-radius: 1ex;
+
//alert(jQuery.easing.default);
  border:2.5px solid #92A599;
+
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
  /* add some position settings here #92A599  #8FA397 */
+
},
  float:right;
+
easeInQuad: function (x, t, b, c, d) {
  margin:-1em 0 0 0;
+
return c*(t/=d)*t + b;
}
+
},
.progressbar1 {
+
easeOutQuad: function (x, t, b, c, d) {
  width: 7ex;
+
return -c *(t/=d)*(t-2) + b;
  height: 1ex;
+
},
  position: relative;
+
easeInOutQuad: function (x, t, b, c, d) {
  top: 0.3ex;
+
if ((t/=d/2) < 1) return c/2*t*t + b;
  left: .3ex;
+
return -c/2 * ((--t)*(t-2) - 1) + b;
  background: #92A599;
+
},
  border-radius: 1ex;
+
easeInCubic: function (x, t, b, c, d) {
  border-width: 1px;
+
return c*(t/=d)*t*t + b;
  border-color: #000000;
+
},
}
+
easeOutCubic: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t + 1) + b;
 +
},
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
return c/2*((t-=2)*t*t + 2) + b;
 +
},
 +
easeInQuart: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t + b;
 +
},
 +
easeOutQuart: function (x, t, b, c, d) {
 +
return -c * ((t=t/d-1)*t*t*t - 1) + b;
 +
},
 +
easeInOutQuart: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
 +
return -c/2 * ((t-=2)*t*t*t - 2) + b;
 +
},
 +
easeInQuint: function (x, t, b, c, d) {
 +
return c*(t/=d)*t*t*t*t + b;
 +
},
 +
easeOutQuint: function (x, t, b, c, d) {
 +
return c*((t=t/d-1)*t*t*t*t + 1) + b;
 +
},
 +
easeInOutQuint: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
 +
return c/2*((t-=2)*t*t*t*t + 2) + b;
 +
},
 +
easeInSine: function (x, t, b, c, d) {
 +
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
 +
},
 +
easeOutSine: function (x, t, b, c, d) {
 +
return c * Math.sin(t/d * (Math.PI/2)) + b;
 +
},
 +
easeInOutSine: function (x, t, b, c, d) {
 +
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
 +
},
 +
easeInExpo: function (x, t, b, c, d) {
 +
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 +
},
 +
easeOutExpo: function (x, t, b, c, d) {
 +
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 +
},
 +
easeInOutExpo: function (x, t, b, c, d) {
 +
if (t==0) return b;
 +
if (t==d) return b+c;
 +
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 +
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 +
},
 +
easeInCirc: function (x, t, b, c, d) {
 +
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
 +
},
 +
easeOutCirc: function (x, t, b, c, d) {
 +
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
 +
},
 +
easeInOutCirc: function (x, t, b, c, d) {
 +
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
 +
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
 +
},
 +
easeInElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
},
 +
easeOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
 +
},
 +
easeInOutElastic: function (x, t, b, c, d) {
 +
var s=1.70158;var p=0;var a=c;
 +
if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
 +
if (a < Math.abs(c)) { a=c; var s=p/4; }
 +
else var s = p/(2*Math.PI) * Math.asin (c/a);
 +
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
 +
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
 +
},
 +
easeInBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*(t/=d)*t*((s+1)*t - s) + b;
 +
},
 +
easeOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;
 +
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 +
},
 +
easeInOutBack: function (x, t, b, c, d, s) {
 +
if (s == undefined) s = 1.70158;  
 +
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
 +
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
 +
},
 +
easeInBounce: function (x, t, b, c, d) {
 +
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
 +
},
 +
easeOutBounce: function (x, t, b, c, d) {
 +
if ((t/=d) < (1/2.75)) {
 +
return c*(7.5625*t*t) + b;
 +
} else if (t < (2/2.75)) {
 +
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 +
} else if (t < (2.5/2.75)) {
 +
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 +
} else {
 +
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 +
}
 +
},
 +
easeInOutBounce: function (x, t, b, c, d) {
 +
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
 +
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
 +
}
 +
});
  
/* 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;
 
}
 
/* homepage slogan */
 
.slogan {
 
    font-size: 1.3em;
 
    font-weight:normal;
 
    color:#3b434e;
 
}
 
.slogan span {
 
    font-weight:bold;
 
    color:#161525;
 
}
 
div.tutblock,
 
div.refblock,
 
div.resblock {
 
    border:none;
 
    margin-top:.2em;
 
    margin-bottom:-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;
+
* TERMS OF USE - EASING EQUATIONS
}
+
*
 +
* Open source under the BSD License.  
 +
*
 +
* Copyright © 2001 Robert Penner
 +
* All rights reserved.
 +
*
 +
* Redistribution and use in source and binary forms, with or without modification,
 +
* are permitted provided that the following conditions are met:
 +
*
 +
* Redistributions of source code must retain the above copyright notice, this list of
 +
* conditions and the following disclaimer.
 +
* Redistributions in binary form must reproduce the above copyright notice, this list
 +
* of conditions and the following disclaimer in the documentation and/or other materials
 +
* provided with the distribution.
 +
*
 +
* Neither the name of the author nor the names of contributors may be used to endorse
 +
* or promote products derived from this software without specific prior written permission.
 +
*
 +
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 +
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 +
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 +
*  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 +
*  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 +
*  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 +
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 +
*  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 +
* OF THE POSSIBILITY OF SUCH DAMAGE.
 +
*
 +
*/
 +
/**
 +
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
 +
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
 +
*
 +
* @param  f  onMouseOver function || An object with configuration options
 +
* @param  g  onMouseOut function  || Nothing (use configuration options object)
 +
* @author    Brian Cherne <brian@cherne.net>
 
*/
 
*/
.db_ref th {
+
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
    background-color:#161525;
+
/**
    color:#dae5d9;
+
* plugin: jquery.naviDropDown.js
    padding:.2em .7em .2em .5em;
+
* author: kt.cheung @ Brandammo
}
+
* website: www.brandammo.co.uk
 +
* version: 1.0
 +
* date: 19th feb 2011
 +
* description: simple jquery navigation drop down menu with easing and hoverIntent
  
.db_ref td:first-child, .db_ref th:first-child {
+
Copyright (c) 2011 KT Cheung
    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 {
+
Permission is hereby granted, free of charge, to any person obtaining a copy
    -moz-border-radius: 0 .8em 0 0;
+
of this software and associated documentation files (the "Software"), to deal
    -webkit-border-radius: 0 .8em 0 0;
+
in the Software without restriction, including without limitation the rights
    border-radius: 0 .8em 0 0;
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
}
+
copies of the Software, and to permit persons to whom the Software is
 +
furnished to do so, subject to the following conditions:
  
.db_ref th:only-child{
+
The above copyright notice and this permission notice shall be included in
    -moz-border-radius: .8em .8em 0 0;
+
all copies or substantial portions of the Software.
    -webkit-border-radius: .8em .8em 0 0;
+
    border-radius: .8em .8em 0 0;
+
}
+
  
.db_ref tr:last-child td:first-child {
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
    -moz-border-radius: 0 0 0 .8em;
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
    -webkit-border-radius: 0 0 0 .8em;
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
    border-radius: 0 0 0 .8em;
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
}
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 +
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 +
THE SOFTWARE.
  
.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);
+
}
+
  
 +
(function($){
  
 +
  $.fn.naviDropDown = function(options) { 
 +
 
 +
//set up default options
 +
var defaults = {
 +
dropDownClass: 'dropdown', //the class name for your drop down
 +
dropDownWidth: 'auto', //the default width of drop down elements
 +
slideDownEasing: 'easeInOutCirc', //easing method for slideDown
 +
slideUpEasing: 'easeInOutCirc', //easing method for slideUp
 +
slideDownDuration: 500, //easing duration for slideDown
 +
slideUpDuration: 500, //easing duration for slideUp
 +
orientation: 'horizontal' //orientation - either 'horizontal' or 'vertical'
 +
};
 +
 
 +
var opts = $.extend({}, defaults, options);
  
/* ================================== TUTORIALS CONTENT: */
+
    return this.each(function() {
 
+
  var $this = $(this);
 
+
  $this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
 
+
 
.ref_section {
+
  var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
        float:right;
+
  var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
        margin-left:1em
+
  if(opts.orientation == 'horizontal') {
}
+
//$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
.mw-content-ltr #toc, .mw-content-ltr .toc, .mw-content-ltr .tochidden {
+
  }
    -webkit-border-radius: 1em;
+
  if(opts.orientation == 'vertical') {
    -moz-border-radius:1em;
+
$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
    border-radius: 1em;
+
  }
    border-collapse: separate;
+
 
    padding:0 .5em 0 .5em;
+
  $this.find('li').hoverIntent(getDropDown, hideDropDown);
}
+
    });
.mw-content-ltr table#toc td, .mw-content-ltr .toc td, .mw-content-ltr .tochidden td {
+
    border:none; margin:0; padding:0;
+
function getDropDown(){
}
+
activeNav = $(this);
.extra_space {
+
showDropDown();
 
+
}
}
+
.mw-headline {
+
function showDropDown(){
    margin-bottom:-2em;
+
activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
}
+
}
 
+
 
+
function hideDropDown(){
 
+
activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
/* ============================== PROGRESS PANEL */
+
}
 
+
 
+
   };
 
+
})(jQuery);
.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;
+
  -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;
+
}
+
 
+
/* ===================== 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;
+
/* color:#3f5765; */
+
    font-weight:bold;
+
}
+
.qu a {
+
    color:#ee8301;
+
/* color:#3f5765; */
+
    font-weight:bold;
+
}
+
.mw-content-ltr a:hover {
+
    color:#ee8301;
+
}
+
.qu a:hover {
+
    color:#161525;
+
}
+
 
+
.quizlink  a{
+
    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;
+
}
+
.quizlink a:hover {
+
    color:#ee8301;
+
    background:#161525;
+
}
+
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
+
}
+

Revision as of 22:20, 2 May 2013

/* Any JavaScript here will be loaded for all users on every page load. */
$(function(){
  var engine = $('<div class="portal"/>')
    .append($('<h5>Engine</h5>'))
    .append($('<div class=body/>')
      .append($('<ul/>')
        .append($('<li/>')
          .append($('<select id=engine/>')
            .append('<option value=mysql>MySQL</option>')
            .append('<option value=oracle>Oracle</option>')
            .append('<option value=sqlserver>SQL Server</option>')
            .append('<option value=postgres>PostgreSQL</option>')
            .append('<option id=ingres>Ingres</option>')
            .append('<option id=db2>DB2</option>')
            .change(function(){setDefaultText();})
          )
        )
      )
    )
 
  $('#right-navigation').after($('<ul/>',{'id':'zoolinks'})
     .append($('<li/>').append($('<a/>',{href:'http://csszoo.net',text:'CSS',id:'css_link', title:'Learn CSS! visit CSSzoo'})))
     .append($('<li/>').append($('<a/>',{href:'http://progzoo.net',text:'Java',id:'java_link', title:'Hungry for Java tutorials? ProgZoo is for you'})))
     .append($('<li/>').append($('<a/>',{href:'http://linuxzoo.net',text:'Linux',id:'linux_link', title:'Linux Zoo tutoials!'})))
     .append($('<li/>',{'id':'book'}).append($('<a/>',{href:'http://www.oreilly.com/catalog/sqlhks/',id:'sql_hacks',title:'Try/buy SQL Hacks book'})))
  );
 
  $('#p-Reference').before(engine);
 
  //Adverts
  $('<img/>',{src:'/design/sqlhacks.png',alt:'SQL Hacks book ad'})
    .appendTo($('#sql_hacks'));
  $('#p-googleadsense').prependTo('#footer');
 
  if (wgCanonicalNamespace=='MediaWiki' || wgCanonicalNamespace=='Special')
    $('#p-googleadsense').hide();
 
	// Reset localStorage
	var rst = $('.lsclear');
	rst.click(function(e){
	   if (localStorage) 
			localStorage.clear();
	   location.reload();
	});
 
	var numberOfQuestions = 0;
	var numberOfAnswered = 0;
	var numberOfCorrect = 0;
	var startAt = Math.max(1,$('#startAt').text()*1);
	var qu = $('.qu,.ht,.err');
	var curEng;
	if (localStorage && localStorage.getItem("currentEngine"))
	{
		curEng = localStorage.getItem("currentEngine");
		$('#engine').val(curEng);
	}
	else
		curEng = $('#engine').val();
 
	for(var i=0;i<qu.length;i++){
		var id = i+1;
		var q = qu[i];
		var lsName = wgPageName + '_' + 'frm__' + id;
 
		var def = $('.def',q);
		if (def.length>1){
			var pick = def.filter(function(){
				var clss = $(this).attr('class').split(' ');
				for(var k=0;k<clss.length;k++)
					if (clss[k].match("^e-")) return false;
				return true
				});
			for(var j=0;j<def.length;j++)
			  if ($(def[j]).hasClass('e-'+curEng))
				pick = $(def[j]);
			def = pick;
		}
 
		//Hints
		var hint = $('.hint', q);
		hint.hide();
		hint.each(function(){
			var htitle = $(this).attr("title");
			var hnt = $('<div/>', {'class':'hnt', 'text':htitle});
			var hidden = $(this);
			hnt.click(function(e){
			   e.preventDefault();
			   hidden.toggle("slow");});
			$(this).before(hnt);
		});
 
 
		var txt = def.text();
		// replace the default text with user's last query if available in LS
		if (localStorage.getItem(lsName+"_arr_"+curEng))
		{
			var lsArray = JSON.parse(localStorage.getItem(lsName+"_arr_"+curEng));
			txt = lsArray[lsArray.length-1];
		}
 
		var ans = $('.ans',q).text();
		var tdy = $('.tidy',q).text();
		var frm = $('<form/>',{name:'frm__'+id,id:'frm__'+id})
			.append($('<div/>',{'class':'quf'})
			   .append($('<textarea></textarea>',
				 {value:$.trim(txt),
				  rows:2+Math.max(Math.max(4 ,txt.split(/[\n\r]+/).length),ans.split(/[\n\r]+/).length),
				  cols:2+Math.max(Math.max(45,maxlen(txt.split(/[\n\r]+/))),maxlen(ans.split(/[\n\r]+/))),
				  'class':'sql',
				  id:'txtar_'+id}))
			   .append($('<br/>'))
			   .append($('<button/>',{text:'Submit SQL','class':'submitSQL',click:goBaby}))
			   .append($('<div/>',{text:'Restore default','class':'reset',click:restoreDefault}))
			);
 
		def.after(frm);
 
 
		// Display completion information
		if (localStorage)
		{
			if (!localStorage.getItem(lsName))
				localStorage.setItem(lsName, "unanswered");
			if (localStorage.getItem(lsName) == "answered")
			{
				//$(".completion", q).html("You have answered this question <u>incorrectly</u> before.");
				numberOfAnswered++;
				var qcorr = $('<div/>', {'class':'qincorrect', 'title':'You have answered this question incorrectly before.'});
				def.before(qcorr);
			}
			else if (localStorage.getItem(lsName) == "correct")
			{
				//$(".completion", q).html("You have answered this question <u>correctly</u> before.");
				numberOfCorrect++;
				numberOfAnswered++;
 
				var qcorr = $('<div/>', {'class':'qcorrect', 'title':'You have answered this question correctly before.'});
				def.before(qcorr);
			}
			else
			{
				//$(".completion", q).html("You have not answered this question yet.");
			}
		}
 
		var lhs = $('<div/>',{css:{width:'60ex',marginRight:'2ex','float':'left'}});
		lhs.append($('<span/>',{text:(startAt+i)+'.','class':'id'}));
		lhs.append($(q).children());
		$(q).append(lhs);
                // This line caused problems when styling - I removed the css margin-left from it - M
		//$(q).append($('<div/>',{text:'result','class':'res',css:{'margin-left':'1ex'}}));
                $(q).append($('<div/>',{text:'result','class':'res'}));
 
		//Show additional info if available for active angine
		var ecomm = $('.ecomm,.link',q);
		var ecomm1 = ecomm.filter(false);
		if (ecomm.length>0){
			var curEng = $('#engine').val();
			for(var j=0;j<ecomm.length;j++)
			  if ($(ecomm[j]).hasClass('e-'+curEng))
				ecomm1 = $(ecomm[j]);
		}
		for (var j = 0; j < ecomm.length; j++)
		{
			if ($(ecomm[j]).get(0) == ecomm1.get(0))
			{
				$(ecomm[j]).show();
			}
			else
			{
				$(ecomm[j]).hide();
			}
		}
 
		var ecomm = $('.link',q);
		var ecomm1 = def.filter(function(){
				var clss = $(this).attr('class').split(' ');
				for(var k=0;k<clss.length;k++)
					if (clss[k].match("^e-")) return false;
				return true
				});
		if (ecomm.length>0){
			var curEng = $('#engine').val();
			for(var j=0;j<ecomm.length;j++)
			  if ($(ecomm[j]).hasClass('e-'+curEng))
				ecomm1 = $(ecomm[j]);
		}
		for (var j = 0; j < ecomm.length; j++)
		{
			if ($(ecomm[j]).get(0) == ecomm1.get(0))
			{
				$(ecomm[j]).show();
			}
			else
			{
				$(ecomm[j]).hide();
			}
		}
		numberOfQuestions = id;
	}
	if (numberOfQuestions == 0)
		numberOfQuestions = 1;
 
	// Display completion info
	$(".summary").html("You have answered "+numberOfAnswered+" out of "+numberOfQuestions+" questions on this page.<br/>"+numberOfCorrect+" of your answers were correct.");
	// Save completion info
	if (localStorage)
	{
		localStorage.setItem(wgPageName+'_numberOfQuestions', numberOfQuestions);
		localStorage.setItem(wgPageName+'_numberOfCorrect', numberOfCorrect);
	}
 
	//Progress bar
	var maxWidth = $('.progressbar').css('width');
	var barModification = parseFloat(maxWidth) * numberOfCorrect / numberOfQuestions;
	$('.progressbar').css('width', barModification);
 
  //Put in the answers if url includes answer=1
  if (window.location.search && /answer/.test(window.location.search)){
    $('<def/>',{text:"Cheat mode",css:{position:'fixed',right:'2ex',
                   bottom:'2ex',width:'14ex',backgroundColor:'yellow',padding:'2ex',
                   textAlign:'center'}})
      .appendTo($('body'));
    $('.quf textarea').each(function(){
       $(this).val($(this).closest('form').next('.ans').text());
    })
  }
 
})
 
function setDefaultText() {
	var qu = $('.ht,.err');
	var curEng = $('#engine').val();
	if (localStorage)
		localStorage.setItem("currentEngine", curEng);
	for(var i=0;i<qu.length;i++){
		var id = i+1;
		var q = qu[i];
 
		var def = $('.def',q);
		if (def.length>1){
			var pick = def.filter(function(){
				var clss = $(this).attr('class').split(' ');
				for(var k=0;k<clss.length;k++)
					if (clss[k].match("^e-")) return false;
				return true
				});
			for(var j=0;j<def.length;j++)
			  if ($(def[j]).hasClass('e-'+curEng))
				pick = $(def[j]);
			def = pick;
		}
 
		var lsName = wgPageName + '_' + 'frm__' + id;
		var txt = def.text();
		// replace the default text with user's last query if available in LS
		if (localStorage.getItem(lsName+"_arr_"+curEng))
		{
			var lsArray = JSON.parse(localStorage.getItem(lsName+"_arr_"+curEng));
			txt = lsArray[lsArray.length-1];
		}
		$('textarea#txtar_'+id).val(txt);
 
		//Show additional info if available for chosen engine
		var ecomm = $('.ecomm',q);
		var ecomm1 = ecomm.filter(false);
		if (ecomm.length>0){
			var curEng = $('#engine').val();
			for(var j=0;j<ecomm.length;j++)
			  if ($(ecomm[j]).hasClass('e-'+curEng))
				ecomm1 = $(ecomm[j]);
		}
		for (var j = 0; j < ecomm.length; j++)
		{
			if ($(ecomm[j]).get(0) == ecomm1.get(0))
			{
				$(ecomm[j]).show();
			}
			else
			{
				$(ecomm[j]).hide();
			}
		}
 
		//Show headers for chosen engine
		var ecomm = $('.link',q);
		var ecomm1 = def.filter(function(){
				var clss = $(this).attr('class').split(' ');
				for(var k=0;k<clss.length;k++)
					if (clss[k].match("^e-")) return false;
				return true
				});
		if (ecomm.length>0){
			var curEng = $('#engine').val();
			for(var j=0;j<ecomm.length;j++)
			  if ($(ecomm[j]).hasClass('e-'+curEng))
				ecomm1 = $(ecomm[j]);
		}
		for (var j = 0; j < ecomm.length; j++)
		{
			if ($(ecomm[j]).get(0) == ecomm1.get(0))
			{
				$(ecomm[j]).show();
			}
			else
			{
				$(ecomm[j]).hide();
			}
		}
 
	}
}
 
function restoreDefault() {
	var qu = $(this).parents('.qu, .ht, .err');
	var def = $('.def',qu);
	var txt = def.text();
	qu.find('textarea.sql').val(txt);
}	
 
function updateProgressbar() {
	var numberOfQuestions = parseInt(localStorage.getItem(wgPageName+'_numberOfQuestions'));
	// A little workaround - max progressbar width is 96% of its background's width
	var maxWidth = parseFloat($('.progressbarbg').css('width')) * 0.96;
	var barModification = parseFloat($('.progressbar').css('width')) + maxWidth * 1 / numberOfQuestions;
	$('.progressbar').css('width', barModification);
}
 
function goBaby(){
  var qu = $(this).parents('.qu, .ht, .err');
  var lsUse = ((qu[0].getAttribute('class') != 'ht') && ($(qu[0]).find('.ans').length > 0));
  var lsName = wgPageName + '_' + $(this).parents('form').attr('id');
  if (lsUse && localStorage && (localStorage.getItem(lsName) != "correct"))
	localStorage.setItem(lsName, "answered");
  var sql = qu.find('textarea.sql').val();
  var parlst = $('.params').text().split(';');
  var params = {};
  for(var i=0;i<parlst.length;i++){
    var pair = parlst[i].split(':');
    params[pair[0]]=pair[1];
  }
  //Store the sql querry in LS
  if (localStorage)
  {
	var curEng = $('#engine').val();
	var lsArray = JSON.parse(localStorage.getItem(lsName+"_arr_"+curEng));
	if (!lsArray)
		lsArray = new Array();
	lsArray.push(sql);
	localStorage.setItem(lsName+"_arr_"+curEng, JSON.stringify(lsArray));
  }
  qu.find('.res').addClass('waiting');
  $.ajax({url:'/sqlgo.pl',cache:false,'type':'post',dataType:'json',
          data:{sql:sql.replace(/\xA0/g,' '),  //Mediawiki inserts &nbsp; before a %. We need to change it back to a space.CM 13/6/12
                format:'json',
                question:$('.id',qu).text(),
                wgUserName:wgUserName,
                cookie:$.cookie('oliver'),
                page:wgPageName,
                server:$('#engine').val(),
                setup:$('.setup',qu).text().replace(/\xA0/g,' '),
                tidy:$('.tidy',qu).text().replace(/\xA0/g,' '),
                answer:$('.ans',qu).text().replace(/\xA0/g,' '),
                schema:params['schema']
               },
          success:function(d){
            var res = qu.find('.res');
            res.empty().removeClass('waiting')
            if (d.error){
              res.append($('<h1/>',{text:'SQLZoo System Error:'}))
              res.append($('<div/>',{text:d.error}))
              return;
            }
			var headerPresent = false;
            for (var i = 0; i < d.sql.length; i++)
				{
				if (!d || !d.sql || !d.sql[i]){
				  res.append($('<h1/>',{text:'SQLZoo System Error:'}))
				  res.append($('<div/>',{text:"Problem with d or d.sql or d.sql[0]"}))
				  return;
				}
				if (d.sql[i].error){
				  res.append($('<h1/>',{text:'Error:'}))
				  res.append($('<div/>',{text:d.sql[i].error}))
				  return;
				}
				var legend = "Result:";
				if (d.score && d.answer && d.answer.length==1 && d.answer[0].fields){
				  if (d.score == 100){
					legend = 'Correct answer';
					if (lsUse && localStorage)
						localStorage.setItem(lsName, "correct");
					var def = $('.def',qu);
					if (localStorage.getItem(lsName) == "correct")
					{
						if ($(".qcorrect", qu).length == 0)
						{
							var qcorr = $('<div/>', {'class':'qcorrect', 'title':'You have answered this question correctly before.'});
							def.before(qcorr);
							updateProgressbar();
						}
					}
			      }
				  else if (d.answer[0].fields.length>d.sql[0].fields.length)
					legend = 'Too few columns';
				  else if (d.answer[0].fields.length<d.sql[0].fields.length)
					legend = 'Too many columns';
				  else if (d.answer[0].rows.length>d.sql[0].rows.length)
					legend = 'Too few rows';
				  else if (d.answer[0].rows.length<d.sql[0].rows.length)
					legend = 'Too many rows';
 
				}
				if (!headerPresent)
				{
					res.append($('<h1/>',{text:legend}));
					headerPresent = true;
				}
				var t = mkTable(d.sql[i]);
				t.addClass('sqlmine')
				 .appendTo(res);
				if (d.answer && d.answer.length>0 && d.score<100){
				  res.append($('<div/>',{text:'Show correct result','class':'showtxt'})
					.click(function(){
					  $(this).next().show('slow');
					})
				  );
				  var a = mkTable(d.answer[0]);
				  a.addClass('sqlans');
				  a.appendTo(res);
				}
			}
          },
          error:function(jqXHR,textStatus,errorThrown){
            qu.find('.res').empty().removeClass('waiting')
              .append($('<h1/>',{'class':'syserr',text:'SQLZOO system error:'}))
              .append($('<div/>',{text:textStatus}))
              .append($('<div/>',{text:errorThrown}))
              .append($('<div/>').html(jqXHR.responseText))
          }
         });
 
		// Modify completion information
		var def = $('.def',qu);
		if (localStorage)
		{
			if (localStorage.getItem(lsName) == "answered")
			{
				var qcorr = $('<div/>', {'class':'qincorrect', 'title':'You have answered this question incorrectly before.'});
				def.before(qcorr);
			}
		}
  return false;
}
function maxlen(l){
  var r = 0;
  for(var i=0;i<l.length;i++)
    r = Math.max(r,l[i].length);
  return r;
}
function truncate(s){
  if (s.length<15) return s;
  return s.substring(0,13)+"..";
}
function mkTable(a){
  var t = $('<table/>');
  t.append($('<tr/>'));
  var isnum = [];
  if (!a.fields || !a.rows) return t;
  for(var i=0;i<a.fields.length;i++){
    $('tr',t).append($('<th/>',{text:truncate(a.fields[i])}));
    var allNum = 1;
    for(var j=0;j<a.rows.length;j++){
      if (a.rows[j] && a.rows[j][i] && !a.rows[j][i].match(/^[0-9.]*$/))
        allNum = 0;
    }
    isnum.push(allNum);
  }
  for(var j=0;j<a.rows.length;j++){
    var tr = $('<tr/>').appendTo(t);
    for(var k=0;k<a.rows[j].length;k++){
      var td = $('<td/>',{text:a.rows[j][k]});
      if (isnum[k]) td.addClass('r');
      td.appendTo(tr);
    }
  }
  return t;
}
 
/* ======================= Designer js starts here */
 
// the following scripts should not be present here - they should be linked as external files !!!
 
// this script helps to manage browser inconsistency across different os
function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);
 
 
// display site logo
$(function(){
  $('<a/>',{href:'http://sqlzoo.net/w/index.php',id:'mp-logo',title:'Zoo You!'})
    .append($('<img/>',{src:'/design/sql_zoo_logo05.png',alt:'SQLzoo logo'}))
    .appendTo($('#mw-head-base'))
});
 
// display site description
$(document).ready(function(){
  $(function(){
    $("#mp-logo").append(" <h1 id='logo-desc'>Interactive <span>SQL <span>Tutorial</span></span></h1>");
  });
});
 
// display language selector
$(function(){
     $('<div/>',{id:'language'}).appendTo($('#mw-head-base'))
 
     var lang = $('<ul/>',{id:'lang','class':'side_nav_sub'});
        lang.append('<li><a id="en" href="/wiki/Main_Page"></li>');
        lang.append('<li><a id="de" href="/wiki/Main_Page/de"></a></li>');
        lang.append('<li><a id="fr" href="/wiki/Main_Page/fr"></a></li>');
 
    $('#language').append(lang);
 
    $('<img/>',{src:'/design/en2.png',alt:'SQL zoo in English'})
       .appendTo($('#en'));
    $('<img/>',{src:'/design/de2.png',alt:'SQL zoo in German'})
       .appendTo($('#de'));
    $('<img/>',{src:'/design/fr2.png',alt:'SQL zoo in French'})
       .appendTo($('#fr'));
});
 
// assemble and display main nav menu
$(function(){
    var ml1 =
    [['1 SELECT basics',  'SELECT_basics','Some simple queries to get you started']
    ,['2 SELECT from WORLD','SELECT_from_WORLD_Tutorial','Finding facts about countries']
    ,['3 SELECT from Nobel','SELECT_from_Nobel_Tutorial','More practice with SELECT statements']
    ,['4 SELECT within SELECT','SELECT_within_SELECT_Tutorial','Using the results of one query inside another']
    ,['5 SUM and COUNT','SUM_and_COUNT','Apply aggregate functions']
    ,['6 JOIN','The_JOIN_operation','Gathering data from more than one table']
    ,['7 More JOIN','More_JOIN_operations','Getting data from the movie database']
    ,['8 Using NULL','Using_Null','Dealing with missing data']
    ,['9 Self JOIN','Self_join','Dealing with missing data']
	,['10 SQL Quizzes','Tutorial_Quizzes','Test your knowledge with multiple choice quizzes']
    ];
    var mm1 = $('<ul/>',{id:'mm1','class':'dropdown mm_sub'});
    for(var i=0;i<ml1.length;i++){
	  var maxWidth = 50; // adjust the value so that it fits menu well
	  var NoQ = localStorage.getItem(ml1[i][1] + '_numberOfQuestions');
	  if (!NoQ) NoQ = 1;
	  var NoC = localStorage.getItem(ml1[i][1] + '_numberOfCorrect');
	  if (!NoC) NoC = 0;	  
	  var pbWidth = parseFloat(maxWidth) * NoC / NoQ;
	  var mprogbar = $('<div/>',{'class':'progressbarbg1'}).append($('<div/>',{'class':'progressbar1', 'id':ml1[i][1], css:{'width':pbWidth}}));
          mm1.append($('<li/>').append($('<a/>',{href:'/wiki/'+ml1[i][1],text:ml1[i][0]})).append(ml1[i][2]).append(mprogbar));
    }
    var mm2 = $('<ul/>',{id:'mm2','class':'dropdown mm_sub'});
        mm2.append('<li><a href="/wiki/AdventureWorks">1 AdventureWorks</a> Flogging sports gear. Assessment for CO22008 2007/8</li>');
        mm2.append('<li><a href="/wiki/Neeps">2 Neeps</a> A timetable database</li>');
        mm2.append('<li><a href="/wiki/Musicians">3 Musicians</a> Concerts and compositions</li>');
        mm2.append('<li><a href="/wiki/Southwind">4 Southwind</a> Buying and selling</li>');
        mm2.append('<li><a href="/wiki/Dressmaker">5 Dressmaker</a> Constructing clothing</li>');
        mm2.append('<li><a href="/wiki/Congestion Charging">6 Congestion Charging</a> Monitoring traffic (old questions)</li>');
        mm2.append('<li><a href="/wiki/Weather data for Southhampton">7 Weather data for Southhampton</a></li>');
        mm2.append('<li><a href="/wiki/Album Tracks Style">8 Album Tracks Style</a> Music data</li>');
 
    var mm3 = $('<ul/>',{id:'mm3','class':'dropdown mm_sub'});
        mm3.append('<li><a href="/wiki/SELECT_Reference">SELECT</a>How to read the data from a database.</li>');
        mm3.append('<li><a href="/wiki/CREATE_and_DROP_Reference">CREATE and DROP</a>How to create tables, indexes, views and other things. How to get rid of them.</li>');
        mm3.append('<li><a href="/wiki/INSERT_and_DELETE_Reference">INSERT and DELETE</a>How to put records into a table, change them and how to take them out again.</li>');
        mm3.append('<li><a href="/wiki/DATE_and_TIME_Reference">DATE and TIME</a>How to work with dates; adding, subtracting and formatting.</li>');
        mm3.append('<li><a href="/wiki/Functions_Reference">Functions</a>How to use string functions, logical functions and mathematical functions.</li>');
        mm3.append('<li><a href="/wiki/Users_Reference">Users</a>How to create users, GRANT and DENY access, get at other peoples tables. How to find processes and kill them.</li>');
        mm3.append('<li><a href="/wiki/Meta_Data_Reference">Meta Data</a>How to find out what tables and columns exist. How to count and limit the rows return.</li>');
        mm3.append('<li><a href="/wiki/Hacks_Reference">SQL Hacks</a>Useful SQL hacks .</li>');
 
    var mm = $('<ul/>',{id:'main_menu'}).appendTo('#mw-head-base');
        mm.append('<li id="mm1"><a href="/" class="navlink">Tutorials</a></li>');
        mm.append('<li id="mm2"><a href="/" class="navlink">Assessments</a></li>');
        mm.append('<li id="mm3"><a href="/" class="navlink">Reference</a></li>');
 
    $('#mm1').append(mm1);
    $('#mm2').append(mm2);
    $('#mm3').append(mm3);
 
    $('#main_menu').wrap('<div id="navigation_horiz" />');
    $('#navigation_horiz').naviDropDown({
      dropDownWidth: '35em'
    });
});
 
// stick on top elements that need to be visible
$(function(){
    $("#main_menu").addClass("stickableMenu");
    $("#p-Reference").addClass("stickableRef");
    $(".ref_section").addClass("stickableDbRef");
});
 
$(document).scroll(function() {
    var useFixedMenu = $(document).scrollTop() > 175;
    $('.stickableMenu').toggleClass('fixedMenu', useFixedMenu);
 
//    var useFixedRef = $(document).scrollTop() > 275;
//    $('.stickableRef').toggleClass('fixedRef', useFixedRef);
 
    $('.stickableDbRef').toggleClass('fixedDbRef', $(document).scrollTop() > 275);
});
 
// swap classes on external links to change their side icons
$(function(){
 $(".external").addClass("zoo_external");
 $(".external").removeClass("external");
});
 
/* === Designer js ends here === */
 
 
// Insert tables into Quiz distractors
var qq = $('.question');
for (var i = 0; i < qq.length; i++)
{
	var q = $(qq[i]);
	var distractors = "ABCDE";
	for (var j=0;j<distractors.length;j++){
		var tans = $('table caption:contains("Table-'+distractors[j]+'")', q).parents('table');
		if (tans.length>0)
		{
			var ttd = $('table tr td:contains("Table-'+distractors[j]+'")', q);
			if (ttd.length>0){
			   ttd.empty();
			   ttd.append(tans);
			}
		}
	}
}
 
$(function(){
  $('input.check').each(function(i,e){
    $(this).attr('id','quiz_d_'+i);
  });
  $('tr.proposal').each(function(i,e){
    var tds = $('td',$(this));
    var html1= $(tds[1]).html();
    $(tds[1]).html($('<label/>',{html:html1,'for':$('input',$(this)).attr('id') }));
  })
})
//Connor 23/7/12 creates the labels for the multiple choice questions allowing them to be highlighted.
 
 
//Analytics code
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-33860668-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
 
//JSON
(function($){var escapeable=/["\\\x00-\x1f\x7f-\x9f]/g,meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};$.toJSON=typeof JSON==='object'&&JSON.stringify?JSON.stringify:function(o){if(o===null){return'null';}
var type=typeof o;if(type==='undefined'){return undefined;}
if(type==='number'||type==='boolean'){return''+o;}
if(type==='string'){return $.quoteString(o);}
if(type==='object'){if(typeof o.toJSON==='function'){return $.toJSON(o.toJSON());}
if(o.constructor===Date){var month=o.getUTCMonth()+1,day=o.getUTCDate(),year=o.getUTCFullYear(),hours=o.getUTCHours(),minutes=o.getUTCMinutes(),seconds=o.getUTCSeconds(),milli=o.getUTCMilliseconds();if(month<10){month='0'+month;}
if(day<10){day='0'+day;}
if(hours<10){hours='0'+hours;}
if(minutes<10){minutes='0'+minutes;}
if(seconds<10){seconds='0'+seconds;}
if(milli<100){milli='0'+milli;}
if(milli<10){milli='0'+milli;}
return'"'+year+'-'+month+'-'+day+'T'+
hours+':'+minutes+':'+seconds+'.'+milli+'Z"';}
if(o.constructor===Array){var ret=[];for(var i=0;i<o.length;i++){ret.push($.toJSON(o[i])||'null');}
return'['+ret.join(',')+']';}
var name,val,pairs=[];for(var k in o){type=typeof k;if(type==='number'){name='"'+k+'"';}else if(type==='string'){name=$.quoteString(k);}else{continue;}
type=typeof o[k];if(type==='function'||type==='undefined'){continue;}
val=$.toJSON(o[k]);pairs.push(name+':'+val);}
return'{'+pairs.join(',')+'}';}};$.evalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){return eval('('+src+')');};$.secureEvalJSON=typeof JSON==='object'&&JSON.parse?JSON.parse:function(src){var filtered=src.replace(/\\["\\\/bfnrtu]/g,'@').replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,']').replace(/(?:^|:|,)(?:\s*\[)+/g,'');if(/^[\],:{}\s]*$/.test(filtered)){return eval('('+src+')');}else{throw new SyntaxError('Error parsing JSON, source is not valid.');}};$.quoteString=function(string){if(string.match(escapeable)){return'"'+string.replace(escapeable,function(a){var c=meta[a];if(typeof c==='string'){return c;}
c=a.charCodeAt();return'\\u00'+Math.floor(c/16).toString(16)+(c%16).toString(16);})+'"';}
return'"'+string+'"';};})(jQuery);
 
/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * Uses the built in easing capabilities added In jQuery 1.1
 * to offer multiple easing options
 *
 * TERMS OF USE - jQuery Easing
 * 
 * Open source under the BSD License. 
 * 
 * Copyright © 2008 George McGinley Smith
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
*/
 
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
 
jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
	easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (x, t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158; 
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (x, t, b, c, d) {
		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
	},
	easeOutBounce: function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});
 
/*
 *
 * TERMS OF USE - EASING EQUATIONS
 * 
 * Open source under the BSD License. 
 * 
 * Copyright © 2001 Robert Penner
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
 */
/**
* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
* 
* @param  f  onMouseOver function || An object with configuration options
* @param  g  onMouseOut function  || Nothing (use configuration options object)
* @author    Brian Cherne <brian@cherne.net>
*/
(function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev]);};var handleHover=function(e){var p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return false;}var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
/**
* plugin: jquery.naviDropDown.js
* author: kt.cheung @ Brandammo
* website: www.brandammo.co.uk
* version: 1.0
* date: 19th feb 2011
* description: simple jquery navigation drop down menu with easing and hoverIntent
 
Copyright (c) 2011 KT Cheung
 
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
 
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
 
**/
 
(function($){
 
  $.fn.naviDropDown = function(options) {  
 
	//set up default options 
	var defaults = { 
		dropDownClass: 'dropdown', //the class name for your drop down
		dropDownWidth: 'auto',	//the default width of drop down elements
		slideDownEasing: 'easeInOutCirc', //easing method for slideDown
		slideUpEasing: 'easeInOutCirc', //easing method for slideUp
		slideDownDuration: 500, //easing duration for slideDown
		slideUpDuration: 500, //easing duration for slideUp
		orientation: 'horizontal' //orientation - either 'horizontal' or 'vertical'
	}; 
 
	var opts = $.extend({}, defaults, options); 	
 
    return this.each(function() {  
	  var $this = $(this);
	  $this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
 
	  var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
	  var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
	  if(opts.orientation == 'horizontal') {
		//$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
	  }
	  if(opts.orientation == 'vertical') {
		$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
	  }
 
	  $this.find('li').hoverIntent(getDropDown, hideDropDown);
    });
 
	function getDropDown(){
		activeNav = $(this);
		showDropDown();
	}
 
	function showDropDown(){
		activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
	}
 
	function hideDropDown(){
		activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
	}
 
  };
})(jQuery);
Personal tools
Namespaces

Variants
Actions
Reference
Toolbox
Google AdSense