Template:Iitm/main

From 2010.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
 +
<head>
 +
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
 +
<script type="text/javascript" src="http://jquery.com/demo/thickbox/thickbox-code/thickbox.js"></script>
 +
<link rel="stylesheet" href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" type="text/css" media="screen" />
 +
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 +
  <script src="http://d2o0t5hpnwv4c1.cloudfront.net/004_Moo/tutorial/demo/sliding_effect.js"></script>
 +
<script> google.load("jquery", "1.4.2"); </script>
 +
<script language="javascript" src="jquery.dimensions.js"></script>
 +
<script type="text/javascript">
 +
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
 +
ddtabmenu.definemenu("ddtabs1", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
 +
</script>
 +
 +
<script type="text/javascript">
 +
$('.left-menu ul')[0].innerHTML="<li><a href=\"https://2010.igem.org\" style=\"font-weight:bold; text-transform:none\">iGEM HQ</a></li>"+$('.left-menu ul')[0].innerHTML;
 +
$(function() {
 +
$('ul.llmenu').lavaLamp({ speed: 300, autoReturn: false , target:'li'});
 +
});
 +
$(function(){
 +
        $('ul#accmenu').accordion({
 +
              header:'.head',
 +
              fillSpace:false,
 +
              autoHeight:false,
 +
              navigation:true,
 +
              animated: 'easeslide'})
 +
});
 +
</script>
 +
 +
<script type="text/javascript">
 +
$('#rightMenu a')
 +
.css( {backgroundPosition: "0 0"} )
 +
.mouseover(function(){
 +
$(this).stop().animate(
 +
{backgroundPosition:"(0 -250px)"},
 +
{duration:500})
 +
})
 +
.mouseout(function(){
 +
$(this).stop().animate(
 +
{backgroundPosition:"(0 0)"},
 +
{duration:500})
 +
})
 +
</script>
 +
 +
 +
<script type="text/javascript">
 +
$(function() {
 +
$("#button").toggle(
 +
function() {
 +
$("#effect").animate({backgroundColor: '#aa0000', color: '#fff', width: 500}, 1000);
 +
},
 +
function() {
 +
$("#effect").animate({backgroundColor: '#fff', color: '#000', width: 240}, 1000);
 +
}
 +
);
 +
});
 +
$(document).ready(function(){
 +
if($("#nav")) {
 +
$("#nav dd").hide();
 +
$("#nav dt b").click(function() {
 +
if(this.className.indexOf("clicked") != -1) {
 +
$(this).parent().next().slideUp(200);
 +
$(this).removeClass("clicked");
 +
}
 +
else {
 +
$("#nav dt b").removeClass();
 +
$(this).addClass("clicked");
 +
$("#nav dd:visible").slideUp(200);
 +
$(this).parent().next().slideDown(500);
 +
}
 +
return false;
 +
});
 +
}
 +
});
 +
</script>
 +
 +
<script type="text/javascript">
 +
/****************************************************************
 +
  *                                                              *
 +
  *  CurvyCorners                                                *
 +
  *  ------------                                                *
 +
  *                                                              *
 +
  *  This script generates rounded corners for your boxes.      *
 +
  *                                                              *
 +
  *  Version 2.0.4                                              *
 +
  *  Copyright (c) 2009 Cameron Cooke                            *
 +
  *  Contributors: Tim Hutchison, CPK Smithies, Terry Rigel      *
 +
  *                                                              *
 +
  *  Website: http://www.curvycorners.net                        *
 +
  *  SVN:    http://curvycorners.googlecode.com/                *
 +
  *  Email:  cameron@curvycorners.net                          *
 +
  *  Discuss: http://groups.google.com/group/curvycorners        *
 +
  *                                                              *
 +
  *  Please consult the SVN for a list of changes since the last *
 +
  *  revision.                                                  *
 +
  *                                                              *
 +
  *  This library is free software; you can redistribute        *
 +
  *  it and/or modify it under the terms of the GNU              *
 +
  *  Lesser General Public License as published by the          *
 +
  *  Free Software Foundation; either version 2.1 of the        *
 +
  *  License, or (at your option) any later version.            *
 +
  *                                                              *
 +
  *  This library is distributed in the hope that it will        *
 +
  *  be useful, but WITHOUT ANY WARRANTY; without even the      *
 +
  *  implied warranty of MERCHANTABILITY or FITNESS FOR A        *
 +
  *  PARTICULAR PURPOSE. See the GNU Lesser General Public      *
 +
  *  License for more details.                                  *
 +
  *                                                              *
 +
  *  You should have received a copy of the GNU Lesser          *
 +
  *  General Public License along with this library;            *
 +
  *  Inc., 59 Temple Place, Suite 330, Boston,                  *
 +
  *  MA 02111-1307 USA                                          *
 +
  *                                                              *
 +
  ****************************************************************/
 +
 +
/*
 +
Version 2.x now autoMagically applies borders via CSS rules.
 +
Safari, Chrome and Mozilla support rounded borders via
 +
 +
-webkit-border-radius, -moz-border-radius
 +
 +
We let these browsers render their borders natively.
 +
Firefox for Windows renders non-antialiased
 +
borders so they look a bit ugly. Google's Chrome will render its "ugly"
 +
borders as well. So if we let FireFox, Safari, and Chrome render their
 +
borders natively, then we only have to support IE and Opera
 +
for rounded borders. Fortunately IE reads CSS properties
 +
that it doesn't understand (Opera, Firefox and Safari discard them);
 +
so for IE and Opera we find and apply -webkit-border-radius and friends.
 +
 +
So to make curvycorners work with any major browser simply add the following
 +
CSS declarations and it should be good to go...
 +
 +
.round {
 +
  -webkit-border-radius: 3ex;
 +
  -moz-border-radius: 3ex;
 +
}
 +
 +
NB at present you must (for Opera's sake) include these styles in
 +
the page itself.
 +
*/
 +
 +
function browserdetect() {
 +
  var agent = navigator.userAgent.toLowerCase();
 +
  this.isIE      = agent.indexOf("msie") > -1;
 +
  this.ieVer = this.isIE ? /msie\s(\d\.\d)/.exec(agent)[1] : 0;
 +
  this.isMoz    = agent.indexOf('firefox') != -1;
 +
  this.isSafari  = agent.indexOf('safari') != -1;
 +
  this.quirksMode= this.isIE && (!document.compatMode || document.compatMode.indexOf("BackCompat") > -1);
 +
  this.isOp      = 'opera' in window;
 +
  this.isWebKit  = agent.indexOf('webkit') != -1;
 +
  if (this.isIE) {
 +
    this.get_style = function(obj, prop) {
 +
      if (!(prop in obj.currentStyle)) return "";
 +
      var matches = /^([\d.]+)(\w*)/.exec(obj.currentStyle[prop]);
 +
      if (!matches) return obj.currentStyle[prop];
 +
      if (matches[1] == 0) return '0';
 +
      // now convert to pixels if necessary
 +
      if (matches[2] && matches[2] !== 'px') {
 +
        var style = obj.style.left;
 +
        var rtStyle = obj.runtimeStyle.left;
 +
        obj.runtimeStyle.left = obj.currentStyle.left;
 +
        obj.style.left = matches[1] + matches[2];
 +
        matches[0] = obj.style.pixelLeft;
 +
        obj.style.left = style;
 +
        obj.runtimeStyle.left = rtStyle;
 +
      }
 +
      return matches[0];
 +
    };
 +
  }
 +
  else {
 +
    this.get_style = function(obj, prop) {
 +
      prop = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 +
      return document.defaultView.getComputedStyle(obj, '').getPropertyValue(prop);
 +
    };
 +
  }
 +
}
 +
var curvyBrowser = new browserdetect;
 +
 +
/* Force caching of bg images in IE6 */
 +
if (curvyBrowser.isIE) {
 +
  try {
 +
    document.execCommand("BackgroundImageCache", false, true);
 +
  }
 +
  catch(e) {};
 +
}
 +
 +
// object that parses border-radius properties for a box
 +
 +
function curvyCnrSpec(selText) {
 +
  this.selectorText = selText;
 +
  this.tlR = this.trR = this.blR = this.brR = 0;
 +
  this.tlu = this.tru = this.blu = this.bru = "";
 +
  this.antiAlias = true; // default true
 +
}
 +
curvyCnrSpec.prototype.setcorner = function(tb, lr, radius, unit) {
 +
  if (!tb) { // no corner specified
 +
    this.tlR = this.trR = this.blR = this.brR = parseInt(radius);
 +
    this.tlu = this.tru = this.blu = this.bru = unit;
 +
  }
 +
  else { // corner specified
 +
    propname = tb.charAt(0) + lr.charAt(0);
 +
    this[propname + 'R'] = parseInt(radius);
 +
    this[propname + 'u'] = unit;
 +
  }
 +
}
 +
/*
 +
  get(propstring)
 +
  where propstring is:
 +
  - 'tR' or 'bR' : returns top or bottom radius.
 +
  - 'tlR', 'trR', 'blR' or 'brR' : returns top/bottom left/right radius.
 +
  - 'tlu', 'tru', 'blr' or 'bru' : returns t/b l/r unit (px, em...)
 +
  - 'tRu' or 'bRu' : returns top/bottom radius+unit
 +
  - 'tlRu', 'trRu', 'blRu', 'brRu' : returns t/b l/r radius+unit
 +
*/
 +
curvyCnrSpec.prototype.get = function(prop) {
 +
  if (/^(t|b)(l|r)(R|u)$/.test(prop)) return this[prop];
 +
  if (/^(t|b)(l|r)Ru$/.test(prop)) {
 +
    var pname = prop.charAt(0) + prop.charAt(1);
 +
    return this[pname + 'R'] + this[pname + 'u'];
 +
  }
 +
  if (/^(t|b)Ru?$/.test(prop)) {
 +
    var tb = prop.charAt(0);
 +
    tb += this[tb + 'lR'] > this[tb + 'rR'] ? 'l' : 'r';
 +
    var retval = this[tb + 'R'];
 +
    if (prop.length === 3 && prop.charAt(2) === 'u')
 +
      retval += this[tb = 'u'];
 +
    return retval;
 +
  }
 +
  throw new Error('Don\'t recognize property ' + prop);
 +
}
 +
curvyCnrSpec.prototype.radiusdiff = function(tb) {
 +
  if (tb !== 't' && tb !== 'b') throw new Error("Param must be 't' or 'b'");
 +
  return Math.abs(this[tb + 'lR'] - this[tb + 'rR']);
 +
}
 +
curvyCnrSpec.prototype.setfrom = function(obj) {
 +
  this.tlu = this.tru = this.blu = this.bru = 'px'; // default to px
 +
  if ('tl' in obj) this.tlR = obj.tl.radius;
 +
  if ('tr' in obj) this.trR = obj.tr.radius;
 +
  if ('bl' in obj) this.blR = obj.bl.radius;
 +
  if ('br' in obj) this.brR = obj.br.radius;
 +
  if ('antiAlias' in obj) this.antiAlias = obj.antiAlias;
 +
};
 +
curvyCnrSpec.prototype.cloneOn = function(box) { // not needed by IE
 +
  var props = ['tl', 'tr', 'bl', 'br'];
 +
  var converted = 0;
 +
  var i, propu;
 +
 +
  for (i in props) if (!isNaN(i)) {
 +
    propu = this[props[i] + 'u'];
 +
    if (propu !== '' && propu !== 'px') {
 +
      converted = new curvyCnrSpec;
 +
      break;
 +
    }
 +
  }
 +
  if (!converted)
 +
    converted = this; // no need to clone
 +
  else {
 +
    var propi, propR, save = curvyBrowser.get_style(box, 'left');
 +
    for (i in props) if (!isNaN(i)) {
 +
      propi = props[i];
 +
      propu = this[propi + 'u'];
 +
      propR = this[propi + 'R'];
 +
      if (propu !== 'px') {
 +
        var save = box.style.left;
 +
        box.style.left = propR + propu;
 +
        propR = box.style.pixelLeft;
 +
        box.style.left = save;
 +
      }
 +
      converted[propi + 'R'] = propR;
 +
      converted[propi + 'u'] = 'px';
 +
    }
 +
    box.style.left = save;
 +
  }
 +
  return converted;
 +
}
 +
curvyCnrSpec.prototype.radiusSum = function(tb) {
 +
  if (tb !== 't' && tb !== 'b') throw new Error("Param must be 't' or 'b'");
 +
  return this[tb + 'lR'] + this[tb + 'rR'];
 +
}
 +
curvyCnrSpec.prototype.radiusCount = function(tb) {
 +
  var count = 0;
 +
  if (this[tb + 'lR']) ++count;
 +
  if (this[tb + 'rR']) ++count;
 +
  return count;
 +
}
 +
curvyCnrSpec.prototype.cornerNames = function() {
 +
  var ret = [];
 +
  if (this.tlR) ret.push('tl');
 +
  if (this.trR) ret.push('tr');
 +
  if (this.blR) ret.push('bl');
 +
  if (this.brR) ret.push('br');
 +
  return ret;
 +
}
 +
 +
/*
 +
  Object that parses Opera CSS
 +
*/
 +
function operasheet(sheetnumber) {
 +
  var txt = document.styleSheets.item(sheetnumber).ownerNode.text;
 +
  txt = txt.replace(/\/\*(\n|\r|.)*?\*\//g, ''); // strip comments
 +
  // this pattern extracts all border-radius-containing rulesets
 +
  // matches will be:
 +
  // [0] = the whole lot
 +
  // [1] = the selector text
 +
  // [2] = all the rule text between braces
 +
  // [3] = top/bottom and left/right parts if present (only if webkit/CSS3)
 +
  // [4] = top|bottom
 +
  // [5] = left|right
 +
  // .. but 3..5 are useless as they're only the first match.
 +
  var pat = new RegExp("^\s*([\\w.#][-\\w.#, ]+)[\\n\\s]*\\{([^}]+border-((top|bottom)-(left|right)-)?radius[^}]*)\\}", "mg");
 +
  var matches;
 +
  this.rules = [];
 +
  while ((matches = pat.exec(txt)) !== null) {
 +
    var pat2 = new RegExp("(..)border-((top|bottom)-(left|right)-)?radius:\\s*([\\d.]+)(in|em|px|ex|pt)", "g");
 +
    var submatches, cornerspec = new curvyCnrSpec(matches[1]);
 +
    while ((submatches = pat2.exec(matches[2])) !== null)
 +
      if (submatches[1] !== "z-")
 +
        cornerspec.setcorner(submatches[3], submatches[4], submatches[5], submatches[6]);
 +
    this.rules.push(cornerspec);
 +
  }
 +
}
 +
// static class function to determine if the sheet is worth parsing
 +
operasheet.contains_border_radius = function(sheetnumber) {
 +
  return /border-((top|bottom)-(left|right)-)?radius/.test(document.styleSheets.item(sheetnumber).ownerNode.text);
 +
}
 +
 +
/*
 +
Usage:
 +
 +
  curvyCorners(settingsObj, "selectorStr");
 +
  curvyCorners(settingsObj, domObj1[, domObj2[, domObj3[, . . . [, domObjN]]]]);
 +
  selectorStr::= "<complexSelector>[, <complexSelector>]..."
 +
  complexSelector::= <selector>[ <selector]
 +
  selector::= "[<elementname>].classname" | "#id"
 +
*/
 +
 +
function curvyCorners() {
 +
  var i, j, boxCol, settings, startIndex;
 +
  // Check parameters
 +
  if (typeof arguments[0] !== "object") throw curvyCorners.newError("First parameter of curvyCorners() must be an object.");
 +
  if (arguments[0] instanceof curvyCnrSpec) {
 +
    settings = arguments[0];
 +
    if (!settings.selectorText && typeof arguments[1] === 'string')
 +
      settings.selectorText = arguments[1];
 +
  }
 +
  else {
 +
    if (typeof arguments[1] !== "object" && typeof arguments[1] !== "string") throw curvyCorners.newError("Second parameter of curvyCorners() must be an object or a class name.");
 +
    j = arguments[1];
 +
    if (typeof j !== 'string') j = '';
 +
    if (j !== '' && j.charAt(0) !== '.' && 'autoPad' in arguments[0]) j = '.' + j; // for compatibility, prefix with dot
 +
    settings = new curvyCnrSpec(j);
 +
    settings.setfrom(arguments[0]);
 +
  }
 +
 +
  // Get object(s)
 +
  if (settings.selectorText) {
 +
    startIndex = 0;
 +
    var args = settings.selectorText.replace(/\s+$/,'').split(/,\s*/); // handle comma-separated selector list
 +
    boxCol = new Array;
 +
 +
    // converts div#mybox to #mybox
 +
    function idof(str) {
 +
      var ret = str.split('#');
 +
      return (ret.length === 2 ? "#" : "") + ret.pop();
 +
    }
 +
 +
    for (i = 0; i < args.length; ++i) {
 +
      var arg = idof(args[i]);
 +
      var argbits = arg.split(' ');
 +
      switch (arg.charAt(0)) {
 +
        case '#' : // id
 +
          j = argbits.length === 1 ? arg : argbits[0];
 +
          j = document.getElementById(j.substr(1));
 +
          if (j === null)
 +
            curvyCorners.alert("No object with ID " + arg + " exists yet.\nCall curvyCorners(settings, obj) when it is created.");
 +
          else if (argbits.length === 1)
 +
            boxCol.push(j);
 +
          else
 +
            boxCol = boxCol.concat(curvyCorners.getElementsByClass(argbits[1], j));
 +
        break;
 +
        default :
 +
          if (argbits.length === 1)
 +
            boxCol = boxCol.concat(curvyCorners.getElementsByClass(arg));
 +
          else {
 +
            var encloser = curvyCorners.getElementsByClass(argbits[0]);
 +
            for (j = 0; j < encloser.length; ++j) {
 +
              boxCol = boxCol.concat(curvyCorners.getElementsByClass(argbits[1], encloser));
 +
            }
 +
          }
 +
        //break;
 +
      }
 +
    }
 +
  }
 +
  else {
 +
    // Get objects
 +
    startIndex = 1;
 +
    boxCol = arguments;
 +
  }
 +
 +
  // Loop through each argument
 +
  for (i = startIndex, j = boxCol.length; i < j; ++i) {
 +
    if (boxCol[i] && (!('IEborderRadius' in boxCol[i].style) || boxCol[i].style.IEborderRadius != 'set')) {
 +
      if (boxCol[i].className && boxCol[i].className.indexOf('curvyRedraw') !== -1) {
 +
        if (typeof curvyCorners.redrawList === 'undefined') curvyCorners.redrawList = new Array;
 +
        curvyCorners.redrawList.push({
 +
          node : boxCol[i],
 +
          spec : settings,
 +
          copy : boxCol[i].cloneNode(false)
 +
        });
 +
      }
 +
      boxCol[i].style.IEborderRadius = 'set';
 +
      var obj = new curvyObject(settings, boxCol[i]);
 +
      obj.applyCorners();
 +
    }
 +
  }
 +
}
 +
curvyCorners.prototype.applyCornersToAll = function () { // now redundant
 +
  curvyCorners.alert('This function is now redundant. Just call curvyCorners(). See documentation.');
 +
};
 +
 +
curvyCorners.redraw = function() {
 +
  if (!curvyBrowser.isOp && !curvyBrowser.isIE) return;
 +
  if (!curvyCorners.redrawList) throw curvyCorners.newError('curvyCorners.redraw() has nothing to redraw.');
 +
  var old_block_value = curvyCorners.bock_redraw;
 +
  curvyCorners.block_redraw = true;
 +
  for (var i in curvyCorners.redrawList) {
 +
    if (isNaN(i)) continue; // in case of added prototype methods
 +
    var o = curvyCorners.redrawList[i];
 +
    if (!o.node.clientWidth) continue; // don't resize hidden boxes
 +
    var newchild = o.copy.cloneNode(false);
 +
    for (var contents = o.node.firstChild; contents != null; contents = contents.nextSibling)
 +
      if (contents.className === 'autoPadDiv') break;
 +
    if (!contents) {
 +
      curvyCorners.alert('Couldn\'t find autoPad DIV');
 +
      break;
 +
    }
 +
    o.node.parentNode.replaceChild(newchild, o.node);
 +
    while (contents.firstChild) newchild.appendChild(contents.removeChild(contents.firstChild));
 +
    o = new curvyObject(o.spec, o.node = newchild);
 +
    o.applyCorners();
 +
  }
 +
  curvyCorners.block_redraw = old_block_value;
 +
}
 +
curvyCorners.adjust = function(obj, prop, newval) {
 +
  if (curvyBrowser.isOp || curvyBrowser.isIE) {
 +
    if (!curvyCorners.redrawList) throw curvyCorners.newError('curvyCorners.adjust() has nothing to adjust.');
 +
    var i, j = curvyCorners.redrawList.length;
 +
    for (i = 0; i < j; ++i) if (curvyCorners.redrawList[i].node === obj) break;
 +
    if (i === j) throw curvyCorners.newError('Object not redrawable');
 +
    obj = curvyCorners.redrawList[i].copy;
 +
  }
 +
  if (prop.indexOf('.') === -1)
 +
    obj[prop] = newval;
 +
  else eval('obj.' + prop + "='" + newval + "'");
 +
}
 +
curvyCorners.handleWinResize = function() {
 +
  if (!curvyCorners.block_redraw) curvyCorners.redraw();
 +
}
 +
curvyCorners.setWinResize = function(onoff) {
 +
  curvyCorners.block_redraw = !onoff;
 +
}
 +
curvyCorners.newError = function(errorMessage) {
 +
  return new Error("curvyCorners Error:\n" + errorMessage)
 +
}
 +
curvyCorners.alert = function(errorMessage) {
 +
  if (typeof curvyCornersVerbose === 'undefined' || curvyCornersVerbose) alert(errorMessage);
 +
}
 +
 +
// curvyCorners object (can be called directly)
 +
 +
function curvyObject() {
 +
  var boxDisp;
 +
  this.box              = arguments[1];
 +
  this.settings        = arguments[0];
 +
  this.topContainer = this.bottomContainer = this.shell = boxDisp = null;
 +
  var boxWidth = this.box.clientWidth; // browser-independent IE-emulation (NB includes padding)
 +
 +
  // if no client width, maybe the box or a parent has 'display:none'.
 +
 +
  if (!boxWidth && curvyBrowser.isIE) {
 +
    this.box.style.zoom = 1; // can force IE to calculate width
 +
    boxWidth = this.box.clientWidth;
 +
  }
 +
  if (!boxWidth) {
 +
    if (!this.box.parentNode) throw this.newError("box has no parent!"); // unlikely...
 +
    for (boxDisp = this.box; ; boxDisp = boxDisp.parentNode) {
 +
      if (!boxDisp || boxDisp.tagName === 'BODY') { // we've hit the buffers
 +
        this.applyCorners = function() {} // make the error benign
 +
        curvyCorners.alert(this.errmsg("zero-width box with no accountable parent", "warning"));
 +
        return;
 +
      }
 +
      if (boxDisp.style.display === 'none') break;
 +
    }
 +
    // here, we've found the box whose display is set to 'none'.
 +
    boxDisp.style.display = 'block'; // display in order to get browser to calculate clientWidth
 +
    boxWidth = this.box.clientWidth;
 +
  }
 +
  if (arguments[0] instanceof curvyCnrSpec)
 +
    this.spec = arguments[0].cloneOn(this.box); // convert non-pixel units
 +
  else {
 +
    this.spec = new curvyCnrSpec('');
 +
    this.spec.setfrom(this.settings); // no need for unit conversion, use settings param. directly
 +
  }
 +
 +
  // Get box formatting details
 +
  var borderWidth    = curvyBrowser.get_style(this.box, "borderTopWidth");
 +
  var borderWidthB    = curvyBrowser.get_style(this.box, "borderBottomWidth");
 +
  var borderWidthL    = curvyBrowser.get_style(this.box, "borderLeftWidth");
 +
  var borderWidthR    = curvyBrowser.get_style(this.box, "borderRightWidth");
 +
  var borderColour    = curvyBrowser.get_style(this.box, "borderTopColor");
 +
  var borderColourB  = curvyBrowser.get_style(this.box, "borderBottomColor");
 +
  var borderColourL  = curvyBrowser.get_style(this.box, "borderLeftColor");
 +
  var boxColour      = curvyBrowser.get_style(this.box, "backgroundColor");
 +
  var backgroundImage = curvyBrowser.get_style(this.box, "backgroundImage");
 +
  var backgroundRepeat= curvyBrowser.get_style(this.box, "backgroundRepeat");
 +
  if (this.box.currentStyle && this.box.currentStyle.backgroundPositionX) {
 +
  var backgroundPosX  = curvyBrowser.get_style(this.box, "backgroundPositionX");
 +
  var backgroundPosY  = curvyBrowser.get_style(this.box, "backgroundPositionY");
 +
  }
 +
  else {
 +
    var backgroundPosX = curvyBrowser.get_style(this.box, 'backgroundPosition');
 +
    backgroundPosX = backgroundPosX.split(' ');
 +
    var backgroundPosY = backgroundPosX[1];
 +
    backgroundPosX = backgroundPosX[0];
 +
  }
 +
  var boxPosition    = curvyBrowser.get_style(this.box, "position");
 +
  var topPadding      = curvyBrowser.get_style(this.box, "paddingTop");
 +
  var bottomPadding  = curvyBrowser.get_style(this.box, "paddingBottom");
 +
  var leftPadding    = curvyBrowser.get_style(this.box, "paddingLeft");
 +
  var rightPadding    = curvyBrowser.get_style(this.box, "paddingRight");
 +
  var border          = curvyBrowser.get_style(this.box, "border");
 +
  filter = curvyBrowser.ieVer > 7 ? curvyBrowser.get_style(this.box, 'filter') : null; // IE8 bug fix
 +
 +
  var topMaxRadius    = this.spec.get('tR');
 +
  var botMaxRadius    = this.spec.get('bR');
 +
  var styleToNPx = function(val) {
 +
    if (typeof val === 'number') return val;
 +
    if (typeof val !== 'string') throw new Error('unexpected styleToNPx type ' + typeof val);
 +
    var matches = /^[-\d.]([a-z]+)$/.exec(val);
 +
    if (matches && matches[1] != 'px') throw new Error('Unexpected unit ' + matches[1]);
 +
    if (isNaN(val = parseInt(val))) val = 0;
 +
    return val;
 +
  }
 +
  var min0Px = function(val) {
 +
    return val <= 0 ? "0" : val + "px";
 +
  }
 +
 +
  // Set formatting properties
 +
  try {
 +
    this.borderWidth    = styleToNPx(borderWidth);
 +
    this.borderWidthB    = styleToNPx(borderWidthB);
 +
    this.borderWidthL    = styleToNPx(borderWidthL);
 +
    this.borderWidthR    = styleToNPx(borderWidthR);
 +
    this.boxColour      = curvyObject.format_colour(boxColour);
 +
    this.topPadding      = styleToNPx(topPadding);
 +
    this.bottomPadding  = styleToNPx(bottomPadding);
 +
    this.leftPadding    = styleToNPx(leftPadding);
 +
    this.rightPadding    = styleToNPx(rightPadding);
 +
    this.boxWidth        = boxWidth;
 +
    this.boxHeight      = this.box.clientHeight;
 +
    this.borderColour    = curvyObject.format_colour(borderColour);
 +
    this.borderColourB  = curvyObject.format_colour(borderColourB);
 +
    this.borderColourL  = curvyObject.format_colour(borderColourL);
 +
    this.borderString    = this.borderWidth + "px" + " solid " + this.borderColour;
 +
    this.borderStringB  = this.borderWidthB + "px" + " solid " + this.borderColourB;
 +
    this.backgroundImage = ((backgroundImage != "none")? backgroundImage : "");
 +
    this.backgroundRepeat= backgroundRepeat;
 +
  }
 +
  catch(e) {
 +
    throw this.newError('getMessage' in e ? e.getMessage() : e.message);
 +
  }
 +
  var clientHeight = this.boxHeight;
 +
  var clientWidth = boxWidth; // save it as it gets trampled on later
 +
  if (curvyBrowser.isOp) {
 +
    backgroundPosX = styleToNPx(backgroundPosX);
 +
    backgroundPosY = styleToNPx(backgroundPosY);
 +
    if (backgroundPosX) {
 +
      var t = clientWidth + this.borderWidthL + this.borderWidthR;
 +
      if (backgroundPosX > t) backgroundPosX = t;
 +
      backgroundPosX = (t / backgroundPosX * 100) + '%'; // convert to percentage
 +
    }
 +
    if (backgroundPosY) {
 +
      var t = clientHeight + this.borderWidth + this.borderWidthB;
 +
      if (backgroundPosY > t) backgroundPosY = t;
 +
      backgroundPosY = (t / backgroundPosY * 100) + '%'; // convert to percentage
 +
    }
 +
  }
 +
  if (curvyBrowser.quirksMode) {
 +
  }
 +
  else {
 +
    this.boxWidth -= this.leftPadding + this.rightPadding;
 +
    this.boxHeight -= this.topPadding + this.bottomPadding;
 +
  }
 +
 +
  // Create content container
 +
  this.contentContainer = document.createElement("div");
 +
  if (filter) this.contentContainer.style.filter = filter; // IE8 bug fix
 +
  while (this.box.firstChild) this.contentContainer.appendChild(this.box.removeChild(this.box.firstChild));
 +
 +
  if (boxPosition != "absolute") this.box.style.position = "relative";
 +
  this.box.style.padding = '0';
 +
  this.box.style.border = this.box.style.backgroundImage = 'none';
 +
  this.box.style.backgroundColor = 'transparent';
 +
 +
  this.box.style.width  = (clientWidth + this.borderWidthL + this.borderWidthR) + 'px';
 +
  this.box.style.height  = (clientHeight + this.borderWidth + this.borderWidthB) + 'px';
 +
 +
  // Ok we add an inner div to actually put things into this will allow us to keep the height
 +
 +
  var newMainContainer = document.createElement("div");
 +
  newMainContainer.style.position = "absolute";
 +
  if (filter) newMainContainer.style.filter = filter; // IE8 bug fix
 +
  if (curvyBrowser.quirksMode) {
 +
    newMainContainer.style.width  = (clientWidth + this.borderWidthL + this.borderWidthR) + 'px';
 +
  } else {
 +
    newMainContainer.style.width  = clientWidth + 'px';
 +
  }
 +
  newMainContainer.style.height = min0Px(clientHeight + this.borderWidth + this.borderWidthB - topMaxRadius - botMaxRadius);
 +
  newMainContainer.style.padding  = "0";
 +
  newMainContainer.style.top    = topMaxRadius + "px";
 +
  newMainContainer.style.left  = "0";
 +
  if (this.borderWidthL)
 +
    newMainContainer.style.borderLeft = this.borderWidthL + "px solid " + this.borderColourL;
 +
  if (this.borderWidth && !topMaxRadius)
 +
    newMainContainer.style.borderTop = this.borderWidth + "px solid " + this.borderColour;
 +
  if (this.borderWidthR)
 +
    newMainContainer.style.borderRight = this.borderWidthR + "px solid " + this.borderColourL;
 +
  if (this.borderWidthB && !botMaxRadius)
 +
    newMainContainer.style.borderBottom = this.borderWidthB + "px solid " + this.borderColourB;
 +
  newMainContainer.style.backgroundColor    = boxColour;
 +
  newMainContainer.style.backgroundImage    = this.backgroundImage;
 +
  newMainContainer.style.backgroundRepeat  = this.backgroundRepeat;
 +
  this.shell = this.box.appendChild(newMainContainer);
 +
 +
  boxWidth = curvyBrowser.get_style(this.shell, "width");
 +
  if (boxWidth === "" || boxWidth === "auto" || boxWidth.indexOf("%") !== -1) throw this.newError('Shell width is ' + boxWidth);
 +
  this.boxWidth = (boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1) ? parseInt(boxWidth) : this.shell.clientWidth;
 +
 +
  /*
 +
    This method creates the corners and
 +
    applies them to the div element.
 +
  */
 +
  this.applyCorners = function() {
 +
    /*
 +
      Set up background offsets. This may need to be delayed until
 +
      the background image is loaded.
 +
    */
 +
    if (this.backgroundObject) {
 +
      var bgOffset = function(style, imglen, boxlen) {
 +
        if (style === 0) return 0;
 +
        var retval;
 +
        if (style === 'right' || style === 'bottom') return boxlen - imglen;
 +
        if (style === 'center') return (boxlen - imglen) / 2;
 +
        if (style.indexOf('%') > 0) return (boxlen - imglen) * 100 / parseInt(style);
 +
        return styleToNPx(style);
 +
      }
 +
      this.backgroundPosX  = bgOffset(backgroundPosX, this.backgroundObject.width, clientWidth);
 +
      this.backgroundPosY  = bgOffset(backgroundPosY, this.backgroundObject.height, clientHeight);
 +
    }
 +
    else if (this.backgroundImage) {
 +
      this.backgroundPosX = styleToNPx(backgroundPosX);
 +
      this.backgroundPosY = styleToNPx(backgroundPosY);
 +
    }
 +
    /*
 +
      Create top and bottom containers.
 +
      These will be used as a parent for the corners and bars.
 +
    */
 +
    // Build top bar only if a top corner is to be drawn
 +
    if (topMaxRadius) {
 +
      newMainContainer = document.createElement("div");
 +
      newMainContainer.style.width = this.boxWidth + "px";
 +
      newMainContainer.style.fontSize = "1px";
 +
      newMainContainer.style.overflow = "hidden";
 +
      newMainContainer.style.position = "absolute";
 +
      newMainContainer.style.paddingLeft  = this.borderWidth + "px";
 +
      newMainContainer.style.paddingRight = this.borderWidth + "px";
 +
      newMainContainer.style.height = topMaxRadius + "px";
 +
      newMainContainer.style.top    = -topMaxRadius + "px";
 +
      newMainContainer.style.left  = -this.borderWidthL + "px";
 +
      this.topContainer = this.shell.appendChild(newMainContainer);
 +
    }
 +
    // Build bottom bar only if a bottom corner is to be drawn
 +
    if (botMaxRadius) {
 +
      var newMainContainer = document.createElement("div");
 +
      newMainContainer.style.width = this.boxWidth + "px";
 +
      newMainContainer.style.fontSize = "1px";
 +
      newMainContainer.style.overflow = "hidden";
 +
      newMainContainer.style.position = "absolute";
 +
      newMainContainer.style.paddingLeft  = this.borderWidthB + "px";
 +
      newMainContainer.style.paddingRight = this.borderWidthB + "px";
 +
      newMainContainer.style.height  =  botMaxRadius + "px";
 +
      newMainContainer.style.bottom  = -botMaxRadius + "px";
 +
      newMainContainer.style.left    = -this.borderWidthL + "px";
 +
      this.bottomContainer = this.shell.appendChild(newMainContainer);
 +
    }
 +
 +
    var corners = this.spec.cornerNames();  // array of available corners
 +
 +
    /*
 +
    Loop for each corner
 +
    */
 +
    for (var i in corners) if (!isNaN(i)) {
 +
      // Get current corner type from array
 +
      var cc = corners[i];
 +
      var specRadius = this.spec[cc + 'R'];
 +
      // Has the user requested the currentCorner be round?
 +
      // Code to apply correct color to top or bottom
 +
      var bwidth, bcolor, borderRadius, borderWidthTB;
 +
      if (cc == "tr" || cc == "tl") {
 +
        bwidth = this.borderWidth;
 +
        bcolor = this.borderColour;
 +
        borderWidthTB = this.borderWidth;
 +
      } else {
 +
        bwidth = this.borderWidthB;
 +
        bcolor = this.borderColourB;
 +
        borderWidthTB = this.borderWidthB;
 +
      }
 +
      borderRadius = specRadius - borderWidthTB;
 +
      var newCorner = document.createElement("div");
 +
      newCorner.style.height = this.spec.get(cc + 'Ru');
 +
      newCorner.style.width  = this.spec.get(cc + 'Ru');
 +
      newCorner.style.position = "absolute";
 +
      newCorner.style.fontSize = "1px";
 +
      newCorner.style.overflow = "hidden";
 +
      // THE FOLLOWING BLOCK OF CODE CREATES A ROUNDED CORNER
 +
      // ---------------------------------------------------- TOP
 +
      var intx, inty, outsideColour;
 +
      var trans = filter ? parseInt(/alpha\(opacity.(\d+)\)/.exec(filter)[1]) : 100; // IE8 bug fix
 +
      // Cycle the x-axis
 +
      for (intx = 0; intx < specRadius; ++intx) {
 +
        // Calculate the value of y1 which identifies the pixels inside the border
 +
        var y1 = (intx + 1 >= borderRadius) ? -1 : Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(intx + 1, 2))) - 1;
 +
        // Calculate y2 and y3 only if there is a border defined
 +
        if (borderRadius != specRadius) {
 +
          var y2 = (intx >= borderRadius) ? -1 : Math.ceil(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(intx, 2)));
 +
          var y3 = (intx + 1 >= specRadius) ? -1 : Math.floor(Math.sqrt(Math.pow(specRadius, 2) - Math.pow((intx+1), 2))) - 1;
 +
        }
 +
        // Calculate y4
 +
        var y4 = (intx >= specRadius) ? -1 : Math.ceil(Math.sqrt(Math.pow(specRadius, 2) - Math.pow(intx, 2)));
 +
        // Draw bar on inside of the border with foreground colour
 +
        if (y1 > -1) this.drawPixel(intx, 0, this.boxColour, trans, (y1 + 1), newCorner, true, specRadius);
 +
        // Draw border/foreground antialiased pixels and border only if there is a border defined
 +
        if (borderRadius != specRadius) {
 +
          // Cycle the y-axis
 +
          if (this.spec.antiAlias) {
 +
            for (inty = y1 + 1; inty < y2; ++inty) {
 +
              // For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs
 +
              if (this.backgroundImage != "") {
 +
                var borderFract = curvyObject.pixelFraction(intx, inty, borderRadius) * 100;
 +
                this.drawPixel(intx, inty, bcolor, trans, 1, newCorner, borderFract >= 30, specRadius);
 +
              }
 +
              else if (this.boxColour !== 'transparent') {
 +
                var pixelcolour = curvyObject.BlendColour(this.boxColour, bcolor, curvyObject.pixelFraction(intx, inty, borderRadius));
 +
                this.drawPixel(intx, inty, pixelcolour, trans, 1, newCorner, false, specRadius);
 +
              }
 +
              else this.drawPixel(intx, inty, bcolor, trans >> 1, 1, newCorner, false, specRadius);
 +
            }
 +
            // Draw bar for the border
 +
            if (y3 >= y2) {
 +
              if (y2 == -1) y2 = 0;
 +
              this.drawPixel(intx, y2, bcolor, trans, (y3 - y2 + 1), newCorner, false, 0);
 +
            }
 +
            outsideColour = bcolor;  // Set the colour for the outside AA curve
 +
            inty = y3;              // start_pos - 1 for y-axis AA pixels
 +
          }
 +
          else { // no antiAlias
 +
            if (y3 > y1) { // NB condition was >=, changed to avoid zero-height divs
 +
              this.drawPixel(intx, (y1 + 1), bcolor, trans, (y3 - y1), newCorner, false, 0);
 +
            }
 +
          }
 +
        }
 +
        else {
 +
          outsideColour = this.boxColour;  // Set the colour for the outside curve
 +
          inty = y1;              // start_pos - 1 for y-axis AA pixels
 +
        }
 +
        // Draw aa pixels?
 +
        if (this.spec.antiAlias) {
 +
          // Cycle the y-axis and draw the anti aliased pixels on the outside of the curve
 +
          while (++inty < y4) {
 +
            // For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs
 +
            this.drawPixel(intx, inty, outsideColour, (curvyObject.pixelFraction(intx, inty , specRadius) * trans), 1, newCorner, borderWidthTB <= 0, specRadius);
 +
          }
 +
        }
 +
      }
 +
      // END OF CORNER CREATION
 +
      // ---------------------------------------------------- END
 +
 +
      /*
 +
      Now we have a new corner we need to reposition all the pixels unless
 +
      the current corner is the bottom right.
 +
      */
 +
      // Loop through all children (pixel bars)
 +
      for (var t = 0, k = newCorner.childNodes.length; t < k; ++t) {
 +
        // Get current pixel bar
 +
        var pixelBar = newCorner.childNodes[t];
 +
        // Get current top and left properties
 +
        var pixelBarTop    = parseInt(pixelBar.style.top);
 +
        var pixelBarLeft  = parseInt(pixelBar.style.left);
 +
        var pixelBarHeight = parseInt(pixelBar.style.height);
 +
        // Reposition pixels
 +
        if (cc == "tl" || cc == "bl") {
 +
          pixelBar.style.left = (specRadius - pixelBarLeft - 1) + "px"; // Left
 +
        }
 +
        if (cc == "tr" || cc == "tl"){
 +
          pixelBar.style.top =  (specRadius - pixelBarHeight - pixelBarTop) + "px"; // Top
 +
        }
 +
        pixelBar.style.backgroundRepeat = this.backgroundRepeat;
 +
 +
        if (this.backgroundImage) switch(cc) {
 +
          case "tr":
 +
            pixelBar.style.backgroundPosition = (this.backgroundPosX - this.borderWidthL + specRadius - clientWidth - pixelBarLeft) + "px " + (this.backgroundPosY + pixelBarHeight + pixelBarTop + this.borderWidth - specRadius) + "px";
 +
          break;
 +
          case "tl":
 +
            pixelBar.style.backgroundPosition = (this.backgroundPosX - specRadius + pixelBarLeft + this.borderWidthL) + "px " + (this.backgroundPosY - specRadius + pixelBarHeight + pixelBarTop + this.borderWidth) + "px";
 +
          break;
 +
          case "bl":
 +
            pixelBar.style.backgroundPosition = (this.backgroundPosX - specRadius + pixelBarLeft + 1 + this.borderWidthL) + "px " + (this.backgroundPosY - clientHeight - this.borderWidth + (curvyBrowser.quirksMode ? pixelBarTop : -pixelBarTop) + specRadius) + "px";
 +
          break;
 +
          case "br":
 +
            if (curvyBrowser.quirksMode) {
 +
              pixelBar.style.backgroundPosition = (this.backgroundPosX + this.borderWidthL - clientWidth + specRadius - pixelBarLeft) + "px " + (this.backgroundPosY - clientHeight - this.borderWidth + pixelBarTop + specRadius) + "px";
 +
            } else {
 +
              pixelBar.style.backgroundPosition = (this.backgroundPosX - this.borderWidthL - clientWidth + specRadius - pixelBarLeft) + "px " + (this.backgroundPosY - clientHeight - this.borderWidth + specRadius - pixelBarTop) + "px";
 +
            }
 +
          //break;
 +
        }
 +
      }
 +
 +
      // Position the container
 +
      switch (cc) {
 +
        case "tl":
 +
          newCorner.style.top = newCorner.style.left = "0";
 +
          this.topContainer.appendChild(newCorner);
 +
        break;
 +
        case "tr":
 +
          newCorner.style.top = newCorner.style.right = "0";
 +
          this.topContainer.appendChild(newCorner);
 +
        break;
 +
        case "bl":
 +
          newCorner.style.bottom = newCorner.style.left = "0";
 +
          this.bottomContainer.appendChild(newCorner);
 +
        break;
 +
        case "br":
 +
          newCorner.style.bottom = newCorner.style.right = "0";
 +
          this.bottomContainer.appendChild(newCorner);
 +
        //break;
 +
      }
 +
    }
 +
 +
    /*
 +
      The last thing to do is draw the rest of the filler DIVs.
 +
    */
 +
 +
    // Find out which corner has the bigger radius and get the difference amount
 +
    var radiusDiff = {
 +
      t : this.spec.radiusdiff('t'),
 +
      b : this.spec.radiusdiff('b')
 +
    };
 +
 +
    for (z in radiusDiff) {
 +
      if (typeof z === 'function') continue; // for prototype, mootools frameworks
 +
      if (!this.spec.get(z + 'R')) continue; // no need if no corners
 +
      if (radiusDiff[z]) {
 +
        // check unsupported feature and warn if necessary
 +
        if (this.backgroundImage && this.spec.radiusSum(z) !== radiusDiff[z])
 +
          curvyCorners.alert(this.errmsg('Not supported: unequal non-zero top/bottom radii with background image'));
 +
        // Get the type of corner that is the smaller one
 +
        var smallerCornerType = (this.spec[z + "lR"] < this.spec[z + "rR"]) ? z + "l" : z + "r";
 +
 +
        // First we need to create a DIV for the space under the smaller corner
 +
        var newFiller = document.createElement("div");
 +
        newFiller.style.height = radiusDiff[z] + "px";
 +
        newFiller.style.width  =  this.spec.get(smallerCornerType + 'Ru');
 +
        newFiller.style.position = "absolute";
 +
        newFiller.style.fontSize = "1px";
 +
        newFiller.style.overflow = "hidden";
 +
        newFiller.style.backgroundColor = this.boxColour;
 +
 +
        // Position filler
 +
        switch (smallerCornerType) {
 +
          case "tl":
 +
            newFiller.style.bottom =
 +
            newFiller.style.left  = "0";
 +
            newFiller.style.borderLeft = this.borderString;
 +
            this.topContainer.appendChild(newFiller);
 +
          break;
 +
          case "tr":
 +
            newFiller.style.bottom =
 +
            newFiller.style.right  = "0";
 +
            newFiller.style.borderRight = this.borderString;
 +
            this.topContainer.appendChild(newFiller);
 +
          break;
 +
          case "bl":
 +
            newFiller.style.top    =
 +
            newFiller.style.left  = "0";
 +
            newFiller.style.borderLeft = this.borderStringB;
 +
            this.bottomContainer.appendChild(newFiller);
 +
          break;
 +
          case "br":
 +
            newFiller.style.top    =
 +
            newFiller.style.right  = "0";
 +
            newFiller.style.borderRight = this.borderStringB;
 +
            this.bottomContainer.appendChild(newFiller);
 +
          //break;
 +
        }
 +
      }
 +
 +
      // Create the bar to fill the gap between each corner horizontally
 +
      var newFillerBar = document.createElement("div");
 +
      if (filter) newFillerBar.style.filter = filter; // IE8 bug fix
 +
      newFillerBar.style.position = "relative";
 +
      newFillerBar.style.fontSize = "1px";
 +
      newFillerBar.style.overflow = "hidden";
 +
      newFillerBar.style.width = this.fillerWidth(z);
 +
      newFillerBar.style.backgroundColor = this.boxColour;
 +
      newFillerBar.style.backgroundImage = this.backgroundImage;
 +
      newFillerBar.style.backgroundRepeat= this.backgroundRepeat;
 +
 +
      switch (z) {
 +
        case "t":
 +
          // Top Bar
 +
          if (this.topContainer) {
 +
            if (curvyBrowser.quirksMode) {
 +
              newFillerBar.style.height = 100 + topMaxRadius + "px";
 +
            } else {
 +
              newFillerBar.style.height = 100 + topMaxRadius - this.borderWidth + "px";
 +
            }
 +
            newFillerBar.style.marginLeft  = this.spec.tlR ? (this.spec.tlR - this.borderWidthL) + "px" : "0";
 +
            newFillerBar.style.borderTop  = this.borderString;
 +
            if (this.backgroundImage) {
 +
              var x_offset = this.spec.tlR ?
 +
                (this.backgroundPosX - (topMaxRadius - this.borderWidthL)) + "px " : "0 ";
 +
              newFillerBar.style.backgroundPosition  = x_offset + this.backgroundPosY + "px";
 +
              // Reposition the box's background image
 +
              this.shell.style.backgroundPosition = this.backgroundPosX + "px " + (this.backgroundPosY - topMaxRadius + this.borderWidthL) + "px";
 +
            }
 +
            this.topContainer.appendChild(newFillerBar);
 +
          }
 +
        break;
 +
        case "b":
 +
          if (this.bottomContainer) {
 +
            // Bottom Bar
 +
            if (curvyBrowser.quirksMode) {
 +
              newFillerBar.style.height    = botMaxRadius + "px";
 +
            } else {
 +
              newFillerBar.style.height    = botMaxRadius - this.borderWidthB + "px";
 +
            }
 +
            newFillerBar.style.marginLeft  = this.spec.blR ? (this.spec.blR - this.borderWidthL) + "px" : "0";
 +
            newFillerBar.style.borderBottom = this.borderStringB;
 +
            if (this.backgroundImage) {
 +
              var x_offset = this.spec.blR ?
 +
                (this.backgroundPosX + this.borderWidthL - botMaxRadius) + "px " : this.backgroundPosX + "px ";
 +
              newFillerBar.style.backgroundPosition = x_offset + (this.backgroundPosY - clientHeight - this.borderWidth + botMaxRadius) + "px";
 +
            }
 +
            this.bottomContainer.appendChild(newFillerBar);
 +
          }
 +
        //break;
 +
      }
 +
    }
 +
 +
    // style content container
 +
    this.contentContainer.style.position = "absolute";
 +
    // contentContainer.style.border = "1px dotted #000"; // DEBUG, comment for production
 +
    this.contentContainer.className    = "autoPadDiv";
 +
    this.contentContainer.style.left  = this.borderWidthL + "px";
 +
    // Get padding amounts
 +
    // Apply top padding
 +
    this.contentContainer.style.paddingTop = this.topPadding + "px";
 +
    this.contentContainer.style.top = this.borderWidth + "px";
 +
    // skip bottom padding - it doesn't show!
 +
    // Apply left and right padding
 +
    this.contentContainer.style.paddingLeft = this.leftPadding + "px";
 +
    this.contentContainer.style.paddingRight = this.rightPadding + "px";
 +
    z = clientWidth;
 +
    if (!curvyBrowser.quirksMode) z -= this.leftPadding + this.rightPadding;
 +
    this.contentContainer.style.width = z + "px";
 +
    this.contentContainer.style.textAlign = curvyBrowser.get_style(this.box, 'textAlign');
 +
    this.box.style.textAlign = 'left'; // important otherwise layout goes wild
 +
 +
    this.box.appendChild(this.contentContainer);
 +
    if (boxDisp) boxDisp.style.display = 'none';
 +
  }
 +
  if (this.backgroundImage) {
 +
    backgroundPosX = this.backgroundCheck(backgroundPosX);
 +
    backgroundPosY = this.backgroundCheck(backgroundPosY);
 +
    if (this.backgroundObject) {
 +
      this.backgroundObject.holdingElement = this;
 +
      this.dispatch = this.applyCorners;
 +
      this.applyCorners = function() {
 +
        if (this.backgroundObject.complete)
 +
          this.dispatch();
 +
        else this.backgroundObject.onload = new Function('curvyObject.dispatch(this.holdingElement);');
 +
      }
 +
    }
 +
  }
 +
}
 +
 +
curvyObject.prototype.backgroundCheck = function(style) {
 +
  if (style === 'top' || style === 'left' || parseInt(style) === 0) return 0;
 +
  if (!(/^[-\d.]+px$/.test(style))  && !this.backgroundObject) {
 +
    this.backgroundObject = new Image;
 +
    var imgName = function(str) {
 +
      var matches = /url\("?([^'"]+)"?\)/.exec(str);
 +
      return (matches ? matches[1] : str);
 +
    }
 +
    this.backgroundObject.src = imgName(this.backgroundImage);
 +
  }
 +
  return style;
 +
}
 +
 +
curvyObject.dispatch = function(obj) {
 +
  if ('dispatch' in obj)
 +
    obj.dispatch();
 +
  else throw obj.newError('No dispatch function');
 +
}
 +
 +
// append a pixel DIV to newCorner
 +
 +
curvyObject.prototype.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius) {
 +
  var pixel = document.createElement("div");
 +
  pixel.style.height  = height + "px";
 +
  pixel.style.width    = "1px";
 +
  pixel.style.position = "absolute";
 +
  pixel.style.fontSize = "1px";
 +
  pixel.style.overflow = "hidden";
 +
  var topMaxRadius = this.spec.get('tR');
 +
  pixel.style.backgroundColor = colour;
 +
  // Don't apply background image to border pixels
 +
  if (image && this.backgroundImage != "") {
 +
    pixel.style.backgroundImage = this.backgroundImage;
 +
    pixel.style.backgroundPosition  = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) - this.borderWidth) + "px";
 +
  }
 +
  // Set opacity if the transparency is anything other than 100
 +
  if (transAmount != 100) curvyObject.setOpacity(pixel, transAmount);
 +
  // Set position
 +
  pixel.style.top = inty + "px";
 +
  pixel.style.left = intx + "px";
 +
  //pixel.nodeValue = ' ';
 +
  newCorner.appendChild(pixel);
 +
}
 +
 +
curvyObject.prototype.fillerWidth = function(tb) {
 +
  var bWidth = curvyBrowser.quirksMode ? 0 : this.spec.radiusCount(tb) * this.borderWidthL;
 +
  return (this.boxWidth - this.spec.radiusSum(tb) + bWidth) + 'px';
 +
}
 +
 +
curvyObject.prototype.errmsg = function(msg, gravity) {
 +
  var extradata = "\ntag: " + this.box.tagName;
 +
  if (this.box.id) extradata += "\nid: " + this.box.id;
 +
  if (this.box.className) extradata += "\nclass: " + this.box.className;
 +
  var parent;
 +
  if ((parent = this.box.parentNode) === null)
 +
    extradata += "\n(box has no parent)";
 +
  else {
 +
    extradata += "\nParent tag: " + parent.tagName;
 +
    if (parent.id) extradata += "\nParent ID: " + parent.id;
 +
    if (parent.className) extradata += "\nParent class: " + parent.className;
 +
  }
 +
  if (gravity === undefined) gravity = 'warning';
 +
  return 'curvyObject ' + gravity + ":\n" + msg + extradata;
 +
}
 +
 +
curvyObject.prototype.newError = function(msg) {
 +
  return new Error(this.errmsg(msg, 'exception'));
 +
}
 +
 +
// ------------- UTILITY FUNCTIONS
 +
 +
//  Convert a number 0..255 to hex
 +
 +
 +
curvyObject.IntToHex = function(strNum) {
 +
  var hexdig = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F' ];
 +
 +
  return hexdig[strNum >>> 4] + '' + hexdig[strNum & 15];
 +
}
 +
 +
/*
 +
  Blends the two colours by the fraction
 +
  returns the resulting colour as a string in the format "#FFFFFF"
 +
*/
 +
 +
curvyObject.BlendColour = function(Col1, Col2, Col1Fraction) {
 +
  if (Col1 === 'transparent' || Col2 === 'transparent') throw this.newError('Cannot blend with transparent');
 +
  if (Col1.charAt(0) !== '#') {
 +
    //curvyCorners.alert('Found colour1 ' + Col1 + ': please let us know you saw this report.');
 +
    Col1 = curvyObject.format_colour(Col1);
 +
  }
 +
  if (Col2.charAt(0) !== '#') {
 +
    //curvyCorners.alert('Found colour2 ' + Col2 + ': please let us know you saw this report.');
 +
    Col2 = curvyObject.format_colour(Col2);
 +
  }
 +
  var red1 = parseInt(Col1.substr(1, 2), 16);
 +
  var green1 = parseInt(Col1.substr(3, 2), 16);
 +
  var blue1 = parseInt(Col1.substr(5, 2), 16);
 +
  var red2 = parseInt(Col2.substr(1, 2), 16);
 +
  var green2 = parseInt(Col2.substr(3, 2), 16);
 +
  var blue2 = parseInt(Col2.substr(5, 2), 16);
 +
 +
  if (Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1;
 +
 +
  var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction)));
 +
  if (endRed > 255) endRed = 255;
 +
  if (endRed < 0) endRed = 0;
 +
 +
  var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction)));
 +
  if (endGreen > 255) endGreen = 255;
 +
  if (endGreen < 0) endGreen = 0;
 +
 +
  var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction)));
 +
  if (endBlue > 255) endBlue = 255;
 +
  if (endBlue < 0) endBlue = 0;
 +
 +
  return "#" + curvyObject.IntToHex(endRed) + curvyObject.IntToHex(endGreen)+ curvyObject.IntToHex(endBlue);
 +
}
 +
 +
/*
 +
  For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
 +
  line.  Returns a number between 0 and 1
 +
*/
 +
 +
curvyObject.pixelFraction = function(x, y, r) {
 +
  var fraction;
 +
  var rsquared = r * r;
 +
 +
  /*
 +
    determine the co-ordinates of the two points on the perimeter of the pixel that the
 +
    circle crosses
 +
  */
 +
  var xvalues = new Array(2);
 +
  var yvalues = new Array(2);
 +
  var point = 0;
 +
  var whatsides = "";
 +
 +
  // x + 0 = Left
 +
  var intersect = Math.sqrt(rsquared - Math.pow(x, 2));
 +
 +
  if (intersect >= y && intersect < (y + 1)) {
 +
    whatsides = "Left";
 +
    xvalues[point] = 0;
 +
    yvalues[point] = intersect - y;
 +
    ++point;
 +
  }
 +
  // y + 1 = Top
 +
  intersect = Math.sqrt(rsquared - Math.pow(y + 1, 2));
 +
 +
  if (intersect >= x && intersect < (x + 1)) {
 +
    whatsides += "Top";
 +
    xvalues[point] = intersect - x;
 +
    yvalues[point] = 1;
 +
    ++point;
 +
  }
 +
  // x + 1 = Right
 +
  intersect = Math.sqrt(rsquared - Math.pow(x + 1, 2));
 +
 +
  if (intersect >= y && intersect < (y + 1)) {
 +
    whatsides += "Right";
 +
    xvalues[point] = 1;
 +
    yvalues[point] = intersect - y;
 +
    ++point;
 +
  }
 +
  // y + 0 = Bottom
 +
  intersect = Math.sqrt(rsquared - Math.pow(y, 2));
 +
 +
  if (intersect >= x && intersect < (x + 1)) {
 +
    whatsides += "Bottom";
 +
    xvalues[point] = intersect - x;
 +
    yvalues[point] = 0;
 +
  }
 +
 +
  /*
 +
    depending on which sides of the perimeter of the pixel the circle crosses calculate the
 +
    fraction of the pixel inside the circle
 +
  */
 +
  switch (whatsides) {
 +
    case "LeftRight":
 +
      fraction = Math.min(yvalues[0], yvalues[1]) + ((Math.max(yvalues[0], yvalues[1]) - Math.min(yvalues[0], yvalues[1])) / 2);
 +
    break;
 +
 +
    case "TopRight":
 +
      fraction = 1 - (((1 - xvalues[0]) * (1 - yvalues[1])) / 2);
 +
    break;
 +
 +
    case "TopBottom":
 +
      fraction = Math.min(xvalues[0], xvalues[1]) + ((Math.max(xvalues[0], xvalues[1]) - Math.min(xvalues[0], xvalues[1])) / 2);
 +
    break;
 +
 +
    case "LeftBottom":
 +
      fraction = yvalues[0] * xvalues[1] / 2;
 +
    break;
 +
 +
    default:
 +
      fraction = 1;
 +
  }
 +
 +
  return fraction;
 +
}
 +
 +
// Returns an array of rgb values
 +
 +
curvyObject.rgb2Array = function(rgbColour) {
 +
  // Remove rgb()
 +
  var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
 +
 +
  // Split RGB into array
 +
  return rgbValues.split(", ");
 +
}
 +
 +
// This function converts CSS rgb(x, x, x) to hexadecimal
 +
 +
curvyObject.rgb2Hex = function(rgbColour) {
 +
  try {
 +
    // Get array of RGB values
 +
    var rgbArray = curvyObject.rgb2Array(rgbColour);
 +
 +
    // Get RGB values
 +
    var red  = parseInt(rgbArray[0]);
 +
    var green = parseInt(rgbArray[1]);
 +
    var blue  = parseInt(rgbArray[2]);
 +
 +
    // Build hex colour code
 +
    var hexColour = "#" + curvyObject.IntToHex(red) + curvyObject.IntToHex(green) + curvyObject.IntToHex(blue);
 +
  }
 +
  catch (e) {
 +
    var msg = 'getMessage' in e ? e.getMessage() : e.message;
 +
    throw new Error("Error (" + msg + ") converting RGB value to Hex in rgb2Hex");
 +
  }
 +
 +
  return hexColour;
 +
}
 +
 +
/*
 +
  Function by Simon Willison from sitepoint.com
 +
  Modified by Cameron Cooke adding Safari's rgba support
 +
*/
 +
 +
curvyObject.setOpacity = function(obj, opacity) {
 +
  opacity = (opacity == 100) ? 99.999 : opacity;
 +
 +
  if (curvyBrowser.isSafari && obj.tagName != "IFRAME") {
 +
    // Get array of RGB values
 +
    var rgbArray = curvyObject.rgb2Array(obj.style.backgroundColor);
 +
 +
    // Get RGB values
 +
    var red  = parseInt(rgbArray[0]);
 +
    var green = parseInt(rgbArray[1]);
 +
    var blue  = parseInt(rgbArray[2]);
 +
 +
    // Safari using RGBA support
 +
    obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity/100 + ")";
 +
  }
 +
  else if (typeof obj.style.opacity !== "undefined") { // W3C
 +
    obj.style.opacity = opacity / 100;
 +
  }
 +
  else if (typeof obj.style.MozOpacity !== "undefined") { // Older Mozilla
 +
    obj.style.MozOpacity = opacity / 100;
 +
  }
 +
  else if (typeof obj.style.filter != "undefined") { // IE
 +
    obj.style.filter = "alpha(opacity=" + opacity + ")";
 +
  }
 +
  else if (typeof obj.style.KHTMLOpacity != "undefined") { // Older KHTML Based curvyBrowsers
 +
    obj.style.KHTMLOpacity = opacity / 100;
 +
  }
 +
}
 +
 +
 +
// Cross browser add event wrapper
 +
 +
function addEvent(elm, evType, fn, useCapture) {
 +
  if (elm.addEventListener) {
 +
    elm.addEventListener(evType, fn, useCapture);
 +
    return true;
 +
  }
 +
  if (elm.attachEvent) return elm.attachEvent('on' + evType, fn);
 +
  elm['on' + evType] = fn;
 +
  return false;
 +
}
 +
 +
// Gets the computed colour.
 +
curvyObject.getComputedColour = function(colour) {
 +
  var d = document.createElement('DIV');
 +
  d.style.backgroundColor = colour;
 +
  document.body.appendChild(d);
 +
 +
  if(window.getComputedStyle) { // Mozilla, Opera, Chrome, Safari
 +
    var rtn = document.defaultView.getComputedStyle(d, null).getPropertyValue('background-color');
 +
    d.parentNode.removeChild(d);
 +
    if(rtn.substr(0, 3) === "rgb") rtn = curvyObject.rgb2Hex(rtn);
 +
    return rtn;
 +
  }
 +
  else { // IE
 +
    var rng = document.body.createTextRange();
 +
    rng.moveToElementText(d);
 +
    rng.execCommand('ForeColor', false, colour);
 +
    var iClr = rng.queryCommandValue('ForeColor');
 +
    var rgb = "rgb("+(iClr & 0xFF)+", "+((iClr & 0xFF00)>>8)+", "+((iClr & 0xFF0000)>>16)+")";
 +
    d.parentNode.removeChild(d);
 +
    rng = null;
 +
    return curvyObject.rgb2Hex(rgb);
 +
  }
 +
}
 +
 +
// convert colour name, rgb() and #RGB to #RRGGBB
 +
curvyObject.format_colour = function(colour) {
 +
  // Make sure colour is set and not transparent
 +
  if (colour != "" && colour != "transparent") {
 +
    // RGB Value?
 +
    if (colour.substr(0, 3) === "rgb") {
 +
      // Get HEX aquiv.
 +
      colour = curvyObject.rgb2Hex(colour);
 +
    }
 +
    else if (colour.charAt(0) !== '#') {
 +
      // Convert colour name to hex value
 +
      colour = curvyObject.getComputedColour(colour);
 +
    }
 +
    else if (colour.length === 4) {
 +
      // 3 chr colour code add remainder
 +
      colour = "#" + colour.charAt(1) + colour.charAt(1) + colour.charAt(2) + colour.charAt(2) + colour.charAt(3) + colour.charAt(3);
 +
    }
 +
  }
 +
  return colour;
 +
}
 +
 +
// Get elements by class by Dustin Diaz / CPKS
 +
// NB if searchClass is a class name, it MUST be preceded by '.'
 +
 +
curvyCorners.getElementsByClass = function(searchClass, node) {
 +
  var classElements = new Array;
 +
  if (node === undefined) node = document;
 +
  searchClass = searchClass.split('.'); // see if there's a tag in there
 +
  var tag = '*'; // prepare for no tag
 +
  if (searchClass.length === 1) {
 +
    tag = searchClass[0];
 +
    searchClass = false;
 +
  }
 +
  else {
 +
    if (searchClass[0]) tag = searchClass[0];
 +
    searchClass = searchClass[1];
 +
  }
 +
  var i, els, elsLen;
 +
  if (tag.charAt(0) === '#') {
 +
    els = document.getElementById(tag.substr(1));
 +
    if (els) classElements.push(els);
 +
  }
 +
  else {
 +
    els = node.getElementsByTagName(tag);
 +
    elsLen = els.length;
 +
    if (searchClass) {
 +
      var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
 +
      for (i = 0; i < elsLen; ++i) {
 +
        if (pattern.test(els[i].className)) classElements.push(els[i]);
 +
      }
 +
    }
 +
    else for (i = 0; i < elsLen; ++i) classElements.push(els[i]);
 +
  }
 +
  return classElements;
 +
}
 +
 +
if (curvyBrowser.isMoz || curvyBrowser.isWebKit)
 +
  var curvyCornersNoAutoScan = true; // it won't do anything anyway.
 +
else {
 +
 +
  // autoscan code
 +
 +
  curvyCorners.scanStyles = function() {
 +
    function units(num) {
 +
      var matches = /^[\d.]+(\w+)$/.exec(num);
 +
      return matches[1];
 +
    }
 +
    var t, i, j;
 +
 +
    if (curvyBrowser.isIE) {
 +
      function procIEStyles(rule) {
 +
        var style = rule.style;
 +
 +
        if(curvyBrowser.ieVer > 6.0) {
 +
          var allR = style['-webkit-border-radius'] || 0;
 +
          var tR  = style['-webkit-border-top-right-radius'] || 0;
 +
          var tL  = style['-webkit-border-top-left-radius'] || 0;
 +
          var bR  = style['-webkit-border-bottom-right-radius'] || 0;
 +
          var bL  = style['-webkit-border-bottom-left-radius'] || 0;
 +
        }
 +
        else {
 +
          var allR = style['webkit-border-radius'] || 0;
 +
          var tR  = style['webkit-border-top-right-radius'] || 0;
 +
          var tL  = style['webkit-border-top-left-radius'] || 0;
 +
          var bR  = style['webkit-border-bottom-right-radius'] || 0;
 +
          var bL  = style['webkit-border-bottom-left-radius'] || 0;
 +
        }
 +
        if (allR || tL || tR || bR || bL) {
 +
          var settings = new curvyCnrSpec(rule.selectorText);
 +
          if (allR)
 +
            settings.setcorner(null, null, parseInt(allR), units(allR));
 +
          else {
 +
            if (tR) settings.setcorner('t', 'r', parseInt(tR), units(tR));
 +
            if (tL) settings.setcorner('t', 'l', parseInt(tL), units(tL));
 +
            if (bL) settings.setcorner('b', 'l', parseInt(bL), units(bL));
 +
            if (bR) settings.setcorner('b', 'r', parseInt(bR), units(bR));
 +
          }
 +
          curvyCorners(settings);
 +
        }
 +
      }
 +
      for (t = 0; t < document.styleSheets.length; ++t) {
 +
        if (document.styleSheets[t].imports) {
 +
          for (i = 0; i < document.styleSheets[t].imports.length; ++i)
 +
            for (j = 0; j < document.styleSheets[t].imports[i].rules.length; ++j)
 +
              procIEStyles(document.styleSheets[t].imports[i].rules[j]);
 +
        }
 +
        for (i = 0; i < document.styleSheets[t].rules.length; ++i)
 +
          procIEStyles(document.styleSheets[t].rules[i]);
 +
      }
 +
    }
 +
    else if (curvyBrowser.isOp) {
 +
      for (t = 0; t < document.styleSheets.length; ++t) {
 +
        if (operasheet.contains_border_radius(t)) {
 +
          j = new operasheet(t);
 +
          for (i in j.rules) if (!isNaN(i))
 +
            curvyCorners(j.rules[i]);
 +
        }
 +
      }
 +
    }
 +
    else curvyCorners.alert('Scanstyles does nothing in Webkit/Firefox');
 +
  };
 +
 +
  // Dean Edwards/Matthias Miller/John Resig
 +
 +
  curvyCorners.init = function() {
 +
    // quit if this function has already been called
 +
    if (arguments.callee.done) return;
 +
 +
    // flag this function so we don't do the same thing twice
 +
    arguments.callee.done = true;
 +
 +
    // kill the timer
 +
    if (curvyBrowser.isWebKit && curvyCorners.init.timer) {
 +
      clearInterval(curvyCorners.init.timer);
 +
      curvyCorners.init.timer = null;
 +
    }
 +
 +
    // do stuff
 +
    curvyCorners.scanStyles();
 +
  };
 +
}
 +
 +
if (typeof curvyCornersNoAutoScan === 'undefined' || curvyCornersNoAutoScan === false) {
 +
  if (curvyBrowser.isOp)
 +
    document.addEventListener("DOMContentLoaded", curvyCorners.init, false);
 +
  else addEvent(window, 'load', curvyCorners.init, false);
 +
}
 +
</script>
 +
 +
 +
<style type="text/css">
 +
.toggler { width: 500px; height: 200px; position: relative;}
 +
#button { padding: .5em 1em; text-decoration: none; }
 +
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
 +
#effect h3 { margin: 0; padding: 0.4em; text-align: left; }
 +
 +
 +
#header {
 +
position: relative;
 +
left: 2px;
 +
text-align: left;
 +
margin: 0px;
 +
width: 955px;
 +
}
 +
 +
#header a {
 +
color: white;
 +
}
 +
 +
#content {
 +
font-family: Osaka, verdana, Sans-Serif;
 +
background-color: white;
 +
}
 +
 +
.mainContent {
 +
width: 943px;
 +
position: absolute;
 +
padding:5px;
 +
top: 160px;
 +
font-size: 14px;
 +
margin:5px;
 +
}
 +
 +
.baby {
 +
padding: 5px;
 +
font-family: "Comic Sans MS";
 +
font-size: medium;
 +
}
 +
 +
.bodybaby {
 +
padding: 5px;
 +
font-family: "Comic Sans MS";
 +
font-size: medium;
 +
border-bottom: 2px solid black;
 +
color: black;
 +
}
 +
 +
.bodybaby a {
 +
color: black;
 +
}
 +
 +
.sidep {
 +
display: inline;
 +
background-color: #boc4de;
 +
width: 170px;
 +
float: right;
 +
font-size: x-small;
 +
border: 1px solid #b0c4de;
 +
}
 +
 +
.outline {
 +
display: inline;
 +
padding: 5px;
 +
background-color: #boc4de;
 +
width: 250px;
 +
float: left;
 +
font-size: x-small;
 +
border: 1px solid #b0c4de;
 +
}
 +
 +
#procedure,
 +
#procedure a {
 +
display: relative;
 +
text-decoration: none;
 +
color: black;
 +
list-style: none;
 +
}
 +
 +
#procedure a:hover {
 +
color: white;
 +
text-decoration: none;
 +
}
 +
 +
.bolded {
 +
font-size: 16px;
 +
}
 +
 +
#unique {
 +
margin: 5px 21px !important;
 +
border: none !important;
 +
background-color: white;
 +
}
 +
 +
#freedom {
 +
width: 105px;
 +
position: relative;
 +
left: -20px;
 +
top: 2px;
 +
display: block;
 +
list-style: none;
 +
text-align: left;
 +
color: white !important;
 +
background-color: #c9c9db;
 +
font-family: "Comic Sans MS";
 +
font-size: 16px;
 +
}
 +
#freedom li a {
 +
text-align: left;
 +
padding-left: 7px;
 +
}
 +
 +
#freedom li a:hover {
 +
  background-color: #b2b2cc;
 +
}
 +
#freedom li a.selected {
 +
position: relative;
 +
left: 10px;
 +
color: black;
 +
}
 +
 +
.tabContainer {
 +
position: relative;
 +
top: 0px;
 +
left: 4px;
 +
height: 23px;
 +
width: 99%;
 +
}
 +
.tabContainer p {
 +
  text-align:left;
 +
top: 1px;
 +
}
 +
 +
/* ================================================================
 +
This copyright notice must be untouched at all times.
 +
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
 +
=================================================================== */
 +
 +
#nav {padding:0; margin:0; background:white; width: 205px}
 +
#nav a:hover {text-decoration:underline;}
 +
#nav dt b, #nav dt a {display:block; font-weight:normal; font-size:14px; color:#fff; padding: 5px 10px; cursor:pointer; width:205px; background-color: #016b9d;}
 +
#nav dt a {color:#000; text-decoration:none;}
 +
#nav dd {padding:0; margin:0;}
 +
#nav dd ul {padding:0; margin:0; list-style:none;}
 +
#nav dd ul li {padding-left:20px; width:205px}
 +
#nav dd ul li a {font-size:12px; color:#000; text-decoration:none;}
 +
 +
 +
 +
input.searchButton {
 +
background:none repeat scroll 0 0 transparent;
 +
border:medium none;
 +
color:#000066;
 +
font-size:100%;
 +
font-weight:bold;
 +
margin:1px 10px 0;
 +
}
 +
 +
#search-controls {
 +
display: block;
 +
background: none;
 +
position: absolute;
 +
top: -100px;
 +
left: -50px;}
 +
 +
.left-menu {
 +
width: 300px;
 +
margin-top: -75px;
 +
border: none; }
 +
 +
.left-menu ul {
 +
border: none; }
 +
 +
#searchform {
 +
background: none;
 +
display: block;
 +
float: right;}
 +
 +
#menubar.right-menu {
 +
width: 300px;
 +
display: block;
 +
float: left;
 +
margin-top: -75px;
 +
border: none; }
 +
 +
 +
#top-section {
 +
height: 0px;
 +
margin-top: -5px;
 +
margin-bottom: 0 !important;
 +
margin-left: auto;
 +
padding:0;
 +
border: none;}
 +
 +
#p-logo {
 +
height: 0px;
 +
overflow: hidden;
 +
display: none;
 +
border:none;  }
 +
 +
#footer {
 +
border: none;
 +
width: 900px;
 +
margin: 0;
 +
padding: 0; }
 +
 +
.firstHeading {
 +
display: none; }
 +
 +
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
 +
.code code { display: block; padding: 3px; margin-bottom: 0; }
 +
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
 +
.indent1 { padding-left: 1em; }
 +
.indent2 { padding-left: 2em; }
 +
 +
/* sidenav styling */
 +
#sidenav {
 +
clear: both;
 +
        line-height: 50%;
 +
}
 +
 +
#sidenav li {
 +
list-style-type: none;
 +
display: block;
 +
margin: 8px 0px;
 +
        font-size: 14px;
 +
}
 +
 +
#sidenav li li {
 +
padding-left: 16px;
 +
}
 +
 +
#sidenav li a {
 +
color: #333;
 +
padding: 0px 4px 0px 10px;
 +
background-color: transparent;
 +
        font-weight: bold;
 +
}
 +
 +
#sidenav ul a {
 +
font-weight: normal;
 +
}
 +
 +
#sidenav li li a,
 +
#sidenav li.sel li a {
 +
padding-left: 0px;
 +
}
 +
 +
#sidenav li.sel a,
 +
#sidenav li a:hover,
 +
#sidenav li a:active,
 +
#sidenav.col li.sel ul li a:hover,
 +
#sidenav.col li.sel ul li a:active {
 +
color: #fff;
 +
text-decoration: none;
 +
}
 +
 +
 +
 +
 +
/* ----------------------------------------------------------------------------------------------------------------*/
 +
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
 +
/* ----------------------------------------------------------------------------------------------------------------*/
 +
*{padding: 0; margin: 0;}
 +
 +
/* ----------------------------------------------------------------------------------------------------------------*/
 +
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
 +
/* ----------------------------------------------------------------------------------------------------------------*/
 +
#TB_window {
 +
font: 12px Arial, Helvetica, sans-serif;
 +
color: #333333;
 +
}
 +
 +
#TB_secondLine {
 +
font: 10px Arial, Helvetica, sans-serif;
 +
color:#666666;
 +
}
 +
 +
#TB_window a:link {color: #666666;}
 +
#TB_window a:visited {color: #666666;}
 +
#TB_window a:hover {color: #000;}
 +
#TB_window a:active {color: #666666;}
 +
#TB_window a:focus{color: #666666;}
 +
 +
/* ----------------------------------------------------------------------------------------------------------------*/
 +
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
 +
/* ----------------------------------------------------------------------------------------------------------------*/
 +
#TB_overlay {
 +
position: fixed;
 +
z-index:100;
 +
top: 0px;
 +
left: 0px;
 +
height:100%;
 +
width:100%;
 +
}
 +
 +
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
 +
.TB_overlayBG {
 +
background-color:#000;
 +
filter:alpha(opacity=75);
 +
-moz-opacity: 0.75;
 +
opacity: 0.75;
 +
}
 +
 +
* html #TB_overlay { /* ie6 hack */
 +
    position: absolute;
 +
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
 +
}
 +
 +
#TB_window {
 +
position: fixed;
 +
background: #ffffff;
 +
z-index: 102;
 +
color:#000000;
 +
display:none;
 +
border: 4px solid #525252;
 +
text-align:left;
 +
top:50%;
 +
left:50%;
 +
}
 +
 +
* html #TB_window { /* ie6 hack */
 +
position: absolute;
 +
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
 +
}
 +
 +
#TB_window img#TB_Image {
 +
display:block;
 +
margin: 15px 0 0 15px;
 +
border-right: 1px solid #ccc;
 +
border-bottom: 1px solid #ccc;
 +
border-top: 1px solid #666;
 +
border-left: 1px solid #666;
 +
}
 +
 +
#TB_caption{
 +
height:25px;
 +
padding:7px 30px 10px 25px;
 +
float:left;
 +
}
 +
 +
#TB_closeWindow{
 +
height:25px;
 +
padding:11px 25px 10px 0;
 +
float:right;
 +
}
 +
 +
#TB_closeAjaxWindow{
 +
padding:7px 10px 5px 0;
 +
margin-bottom:1px;
 +
text-align:right;
 +
float:right;
 +
}
 +
 +
#TB_ajaxWindowTitle{
 +
float:left;
 +
padding:7px 0 5px 10px;
 +
margin-bottom:1px;
 +
}
 +
 +
#TB_title{
 +
background-color:#e8e8e8;
 +
height:27px;
 +
}
 +
 +
#TB_ajaxContent{
 +
clear:both;
 +
padding:2px 15px 15px 15px;
 +
overflow:auto;
 +
text-align:left;
 +
line-height:1.4em;
 +
}
 +
 +
#TB_ajaxContent.TB_modal{
 +
padding:15px;
 +
}
 +
 +
#TB_ajaxContent p{
 +
padding:5px 0px 5px 0px;
 +
}
 +
 +
#TB_load{
 +
position: fixed;
 +
display:none;
 +
height:13px;
 +
width:208px;
 +
z-index:103;
 +
top: 50%;
 +
left: 50%;
 +
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
 +
}
 +
 +
* html #TB_load { /* ie6 hack */
 +
position: absolute;
 +
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
 +
}
 +
 +
#TB_HideSelect{
 +
z-index:99;
 +
position:fixed;
 +
top: 0;
 +
left: 0;
 +
background-color:#fff;
 +
border:none;
 +
filter:alpha(opacity=0);
 +
-moz-opacity: 0;
 +
opacity: 0;
 +
height:100%;
 +
width:100%;
 +
}
 +
 +
* html #TB_HideSelect { /* ie6 hack */
 +
    position: absolute;
 +
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
 +
}
 +
 +
#TB_iframeContent{
 +
clear:both;
 +
border:none;
 +
margin-bottom:-1px;
 +
margin-top:1px;
 +
_margin-bottom:1px;
 +
}
 +
 +
<This is where I hack from | Tehelka>
 +
 +
#navwrapper {
 +
position: absolute;
 +
width: 100%;
 +
}
 +
 +
#topnav {
 +
height: 75px;<html>
<head>
<head>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
Line 505: Line 2,392:
#navwrapper {
#navwrapper {
position: absolute;
position: absolute;
-
width: 955px;
+
width: 800px;
}
}
Line 752: Line 2,639:
<div id="whitespace" style="height: 70px;"></div>
<div id="whitespace" style="height: 70px;"></div>
<img src="http://microbewiki.kenyon.edu/images/a/a0/Lactobacillus.jpg" />
<img src="http://microbewiki.kenyon.edu/images/a/a0/Lactobacillus.jpg" />
 +
</div>
 +
</body>
 +
</html>
 +
 +
overflow: hidden;
 +
}
 +
 +
#topnav li {
 +
list-style: none;
 +
float: left;
 +
}
 +
 +
#topnav li a {
 +
display: block;
 +
width: 183px;
 +
height: 60px;
 +
margin-right: 7px;
 +
background-color: #4ca14c;
 +
font-family: "Comic Sans MS";
 +
font-size: medium;
 +
line-height: 1.25em;
 +
color: #fff;
 +
-webkit-border-radius: 1.5ex;
 +
-moz-border-radius: 1.5ex;
 +
margin-bottom: 0px;
 +
}
 +
 +
#topnav li a.last {
 +
margin-right: 0px;
 +
}
 +
 +
#topnav li.over ul,
 +
#topnav li:hover ul,
 +
body.about #topnav li.about ul,
 +
body.people #topnav li.people ul,
 +
body.academics #topnav li.project ul,
 +
body.notebook #topnav li.notebook ul,
 +
body.contributions #topnav li.safety ul {
 +
display: block;
 +
-webkit-border-radius: 1.5ex;
 +
-moz-border-radius: 1.5ex;
 +
}
 +
 +
body.about #topnav li.about ul,
 +
body.people #topnav li.people ul,
 +
body.academics #topnav li.project ul,
 +
body.notebook #topnav li.notebook ul,
 +
body.contributions #topnav li.safety ul {
 +
z-index: 1;
 +
}
 +
 +
#topnav li.over ul,
 +
#topnav li:hover ul {
 +
z-index: 100;
 +
}
 +
 +
#topnav li ul {
 +
display: none;
 +
clear: both;
 +
position: absolute;
 +
top: 111px;
 +
left: 0px;
 +
width: 950px;
 +
overflow: hidden;
 +
}
 +
 +
#topnav li li {
 +
float: none;
 +
display: block;
 +
}
 +
 +
#topnav li a:hover,
 +
#topnav li a:active {
 +
text-decoration: none;
 +
}
 +
 +
#topnav li li {
 +
display: block;
 +
float: left;
 +
padding-top: 11px;
 +
padding-bottom: 14.5px;
 +
}
 +
 +
#topnav li li a {
 +
margin: 0;
 +
padding: 0 8px;
 +
background-color: transparent;
 +
height: auto;
 +
width: auto;
 +
font-weight: normal;
 +
        font-size: small;
 +
        border-right: none;
 +
}
 +
 +
#topnav li li.last a {
 +
background-image: none;
 +
padding-right: 0px;
 +
        border-right: none;
 +
}
 +
 +
#topnav li li a:hover,
 +
#topnav li li a:active,
 +
#topnav li li.sel a {
 +
text-transform: uppercase;
 +
}
 +
 +
 +
 +
/* specific styles */
 +
 +
#topnav li.about a:hover,
 +
#topnav li.about a:active,
 +
#topnav li.about ul,
 +
body.about #topnav li.about a:link,
 +
body.about #topnav li.about a:visited {
 +
background-color: #8b0000;
 +
}
 +
 +
#topnav li.about ul {
 +
width: 923px;
 +
}
 +
 +
#topnav li.people a:hover,
 +
#topnav li.people a:active,
 +
#topnav li.people ul,
 +
body.people #topnav li.people a:link,
 +
body.people #topnav li.people a:visited,
 +
body.people #sidenav .sel a:link,
 +
body.people #sidenav .sel a:visited,
 +
body.people #sidenav a:hover,
 +
body.people #sidenav a:active,
 +
body.people #sidenav li.sel li a:hover,
 +
body.people #sidenav li.sel li a:active {
 +
background-color: #e6881a;
 +
}
 +
 +
#topnav li.people ul {
 +
width: 713px;
 +
padding-left: 210px;
 +
}
 +
 +
#topnav li.project a:hover,
 +
#topnav li.project a:active,
 +
#topnav li.project ul,
 +
body.project #topnav li.project a:link,
 +
body.project #topnav li.project a:visited,
 +
body.project #sidenav li.sel a:link,
 +
body.project #sidenav li.sel a:visited,
 +
body.project #sidenav li.sel li a:hover,
 +
body.project #sidenav li.sel li a:active,
 +
body.project #sidenav li a:hover,
 +
body.project #sidenav li a:active,
 +
body.project #sidenav li.sel li a:hover,
 +
body.project #sidenav li.sel li a:active {
 +
background-color: #2e2e91;
 +
}
 +
 +
#topnav li.project ul {
 +
width: 558px;
 +
padding-left: 365px;
 +
}
 +
 +
#topnav li.notebook a:hover,
 +
#topnav li.notebook a:active,
 +
#topnav li.notebook ul,
 +
body.notebook #topnav li.notebook a:link,
 +
body.notebook #topnav li.notebook a:visited,
 +
body.notebook #sidenav li.sel a:link,
 +
body.notebook #sidenav li.sel a:visited,
 +
body.notebook #sidenav li.sel li a:hover,
 +
body.notebook #sidenav li.sel li a:active,
 +
body.notebook #sidenav li a:hover,
 +
body.notebook #sidenav li a:active,
 +
body.notebook #sidenav li.sel li a:hover,
 +
body.notebook #sidenav li.sel li a:active {
 +
background-color: #016b9d;
 +
}
 +
 +
#topnav li.notebook ul {
 +
width: 363px;
 +
padding-left: 560px;
 +
}
 +
 +
#topnav li.safety a:hover,
 +
#topnav li.safety a:active,
 +
#topnav li.safety ul,
 +
body.safety #topnav li.safety a:link,
 +
body.safety #topnav li.safety a:visited,
 +
body.safety #sidenav li.sel a:link,
 +
body.safety #sidenav li.sel a:visited,
 +
body.safety #sidenav li a:hover,
 +
body.safety #sidenav li a:active,
 +
body.safety #sidenav li.sel li a:hover,
 +
body.safety #sidenav li.sel li a:active {
 +
background-color: #2e2e2e;
 +
}
 +
 +
#topnav li.safety ul {
 +
width: 393px;
 +
padding-left: 530px;
 +
}
 +
 +
</style>
 +
 +
 +
</head>
 +
<body>
 +
<div id="header">
 +
<div id="whitespace" style="height: 50px;"></div>
 +
<div id="navwrapper">
 +
<ul id="topnav">
 +
<li class="about"><a href="https://2010.igem.org/Team:IIT_Madras"><table style="padding: 20px; background-color: transparent; color:white; "><tr><td>Home</td></table>
 +
</a>
 +
</li>
 +
<li class="people"><a href="https://2010.igem.org/Team:IIT_Madras/People"><table style="padding: 20px; background-color: transparent;
 +
 +
color:white; "><tr><td>People</td></table>
 +
</a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Team">Team</a></li>
 +
                                <li> | </li>
 +
                              <li><a href="https://2010.igem.org/Team:IIT_Madras/Gallery">Gallery</a></li>
 +
</ul></li>
 +
<li class="project"><a href="https://2010.igem.org/Team:IIT_Madras/Project"><table style="padding: 20px; background-color: transparent;
 +
 +
color:white; "><tr><td>Description</td></table></a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Project">Project</a></li>
 +
                                <li> | </li>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Parts">Parts</a></li>
 +
                                <li> | </li>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Applications">Applications</a></li>
 +
</ul></li>
 +
<li class="notebook"><a href="https://2010.igem.org/Team:IIT_Madras/Documentation"><table style="padding: 20px; background-color: transparent;
 +
 +
color:white; "><tr><td>Documentation</td></table></a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Notebook">Notebook</a></li>
 +
                                <li> | </li>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Protocols">Protocols</a></li>
 +
</ul></li>
 +
<li class="safety"><a href="https://2010.igem.org/Team:IIT_Madras/Safety" class="last"><table style="padding: 20px; background-color: transparent;
 +
 +
color:white;"><tr><td>Human Practices</td></table></a>
 +
<ul>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Safety">Safety</a></li>
 +
                                <li> | </li>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/Perception">Perception</a></li>
 +
                                <li> | </li>
 +
<li><a href="https://2010.igem.org/Team:IIT_Madras/GLP">Good Lab Practices</a></li>
 +
</ul></li>
 +
 +
</ul>
 +
</div>
 +
<div id="whitespace" style="height: 70px;"></div>
 +
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 02:15, 27 October 2010

overflow: hidden; }

  1. topnav li {

list-style: none; float: left; }

  1. topnav li a {

display: block; width: 183px; height: 60px; margin-right: 7px; background-color: #4ca14c; font-family: "Comic Sans MS"; font-size: medium; line-height: 1.25em; color: #fff; -webkit-border-radius: 1.5ex; -moz-border-radius: 1.5ex; margin-bottom: 0px; }

  1. topnav li a.last {

margin-right: 0px; }

  1. topnav li.over ul,
  2. topnav li:hover ul,

body.about #topnav li.about ul, body.people #topnav li.people ul, body.academics #topnav li.project ul, body.notebook #topnav li.notebook ul, body.contributions #topnav li.safety ul { display: block; -webkit-border-radius: 1.5ex; -moz-border-radius: 1.5ex; }

body.about #topnav li.about ul, body.people #topnav li.people ul, body.academics #topnav li.project ul, body.notebook #topnav li.notebook ul, body.contributions #topnav li.safety ul { z-index: 1; }

  1. topnav li.over ul,
  2. topnav li:hover ul {

z-index: 100; }

  1. topnav li ul {

display: none; clear: both; position: absolute; top: 111px; left: 0px; width: 950px; overflow: hidden; }

  1. topnav li li {

float: none; display: block; }

  1. topnav li a:hover,
  2. topnav li a:active {

text-decoration: none; }

  1. topnav li li {

display: block; float: left; padding-top: 11px; padding-bottom: 14.5px; }

  1. topnav li li a {

margin: 0; padding: 0 8px; background-color: transparent; height: auto; width: auto; font-weight: normal;

       font-size: small;
       border-right: none;

}

  1. topnav li li.last a {

background-image: none; padding-right: 0px;

       border-right: none;

}

  1. topnav li li a:hover,
  2. topnav li li a:active,
  3. topnav li li.sel a {

text-transform: uppercase; }


/* specific styles */

  1. topnav li.about a:hover,
  2. topnav li.about a:active,
  3. topnav li.about ul,

body.about #topnav li.about a:link, body.about #topnav li.about a:visited { background-color: #8b0000; }

  1. topnav li.about ul {

width: 923px; }

  1. topnav li.people a:hover,
  2. topnav li.people a:active,
  3. topnav li.people ul,

body.people #topnav li.people a:link, body.people #topnav li.people a:visited, body.people #sidenav .sel a:link, body.people #sidenav .sel a:visited, body.people #sidenav a:hover, body.people #sidenav a:active, body.people #sidenav li.sel li a:hover, body.people #sidenav li.sel li a:active { background-color: #e6881a; }

  1. topnav li.people ul {

width: 713px; padding-left: 210px; }

  1. topnav li.project a:hover,
  2. topnav li.project a:active,
  3. topnav li.project ul,

body.project #topnav li.project a:link, body.project #topnav li.project a:visited, body.project #sidenav li.sel a:link, body.project #sidenav li.sel a:visited, body.project #sidenav li.sel li a:hover, body.project #sidenav li.sel li a:active, body.project #sidenav li a:hover, body.project #sidenav li a:active, body.project #sidenav li.sel li a:hover, body.project #sidenav li.sel li a:active { background-color: #2e2e91; }

  1. topnav li.project ul {

width: 558px; padding-left: 365px; }

  1. topnav li.notebook a:hover,
  2. topnav li.notebook a:active,
  3. topnav li.notebook ul,

body.notebook #topnav li.notebook a:link, body.notebook #topnav li.notebook a:visited, body.notebook #sidenav li.sel a:link, body.notebook #sidenav li.sel a:visited, body.notebook #sidenav li.sel li a:hover, body.notebook #sidenav li.sel li a:active, body.notebook #sidenav li a:hover, body.notebook #sidenav li a:active, body.notebook #sidenav li.sel li a:hover, body.notebook #sidenav li.sel li a:active { background-color: #016b9d; }

  1. topnav li.notebook ul {

width: 363px; padding-left: 560px; }

  1. topnav li.safety a:hover,
  2. topnav li.safety a:active,
  3. topnav li.safety ul,

body.safety #topnav li.safety a:link, body.safety #topnav li.safety a:visited, body.safety #sidenav li.sel a:link, body.safety #sidenav li.sel a:visited, body.safety #sidenav li a:hover, body.safety #sidenav li a:active, body.safety #sidenav li.sel li a:hover, body.safety #sidenav li.sel li a:active { background-color: #2e2e2e; }

  1. topnav li.safety ul {

width: 393px; padding-left: 530px; }

</style>


</head> <body>