Update the doc style from Qt

Reviewed-by: Oswald Buddenhagen

8 files changed, 2160 insertions, 397 deletions

diff --git a/doc/templates/scripts/functions.js b/doc/templates/scripts/functions.js
index 013542764d..58a0248591 100644
--- a/doc/templates/scripts/functions.js
+++ b/doc/templates/scripts/functions.js
@@ -1,10 +1,8 @@
-
 /* START non link areas where cursor should change to pointing hand */
 $('.t_button').mouseover(function() {
     $('.t_button').css('cursor','pointer');
 		/*document.getElementById(this.id).style.cursor='pointer';*/
 });
-
 /* END non link areas  */
 $('#smallA').click(function() {
 		$('.content .heading,.content h1, .content h2, .content h3, .content p, .content li, .content table').css('font-size','smaller');
@@ -20,6 +18,7 @@ $('#medA').click(function() {
 		$('.content p').css('font','13px/20px Verdana');
 		$('.content li').css('font','400 13px/1 Verdana');
 		$('.content li').css('line-height','14px');
+		$('.content .toc li').css('font', 'normal 10px/1.2 Verdana');
 		$('.content table').css('font','13px/1.2 Verdana');
 		$('.content .heading').css('font','600 16px/1 Arial');
 		$('.content .indexboxcont li').css('font','600 13px/1 Verdana');
@@ -34,27 +33,160 @@ $('#bigA').click(function() {
 		$(this).addClass('active')
 });
 
-function doSearch(str){
-
-if (str.length>3)
-  {
-  alert('start search');
- // document.getElementById("refWrapper").innerHTML="";
-  return;
-  }
- else
-  return;
-    
-//    var url="indexSearch.php";
-//    url=url+"?q="+str;
- //   url=url+"&sid="+Math.random();
-   // var url="http://localhost:8983/solr/select?";
-   // url=url+"&q="+str;
-   // url=url+"&fq=&start=0&rows=10&fl=&qt=&wt=&explainOther=&hl.fl=";
-    
-  //  $.get(url, function(data){ 
-   // alert(data);
-  // document.getElementById("refWrapper").innerHTML=data; 
- //});
-   
-}
\ No newline at end of file
+$('.feedclose').click(function() {
+	$('.bd').show();
+	$('.hd').show();
+	$('.footer').show();
+	$('#feedbackBox').hide();
+	$('#blurpage').hide();
+});
+
+$('.feedback').click(function() {
+	$('.bd').hide();
+	$('.hd').hide();
+	$('.footer').hide();
+	$('#feedbackBox').show();
+	$('#blurpage').show();
+});
+var lookupCount = 0;
+var articleCount = 0;
+var exampleCount = 0;
+var qturl = ""; // change from "http://doc.qt.nokia.com/4.6/" to 0 so we can have relative links
+
+function processNokiaData(response){
+	var propertyTags = response.getElementsByTagName('page');
+	
+ 	for (var i=0; i< propertyTags.length; i++) {
+		var linkStart   = "<li class=\"liveResult\"><a href='"+qturl+"";
+		var linkEnd  = "</a></li>";
+		
+		if(propertyTags[i].getElementsByTagName('pageType')[0].firstChild.nodeValue == 'APIPage'){
+			lookupCount++;
+
+			
+			for (var j=0; j< propertyTags[i].getElementsByTagName('pageWords').length; j++){
+				full_li_element = linkStart + propertyTags[i].getElementsByTagName('pageUrl')[j].firstChild.nodeValue;
+				full_li_element = full_li_element + "'>" + propertyTags[i].getElementsByTagName('pageTitle')[0].firstChild.nodeValue + linkEnd;
+					
+				$('#ul001').append(full_li_element);
+			$('#ul001 .defaultLink').css('display','none');
+
+		   		}
+			}
+	 
+		if(propertyTags[i].getElementsByTagName('pageType')[0].firstChild.nodeValue == 'Article'){
+			articleCount++;
+
+				 
+			for (var j=0; j< propertyTags[i].getElementsByTagName('pageWords').length; j++){
+			    full_li_element = linkStart + propertyTags[i].getElementsByTagName('pageUrl')[j].firstChild.nodeValue;
+				full_li_element =full_li_element + "'>" + propertyTags[i].getElementsByTagName('pageTitle')[0].firstChild.nodeValue + linkEnd ;
+					
+				$('#ul002').append(full_li_element);
+			$('#ul002 .defaultLink').css('display','none');
+
+	   		}
+		}
+		if(propertyTags[i].getElementsByTagName('pageType')[0].firstChild.nodeValue == 'Example'){
+			exampleCount++;
+
+
+			for (var j=0; j< propertyTags[i].getElementsByTagName('pageWords').length; j++){
+			    full_li_element = linkStart + propertyTags[i].getElementsByTagName('pageUrl')[j].firstChild.nodeValue;
+				full_li_element =full_li_element + "'>" + propertyTags[i].getElementsByTagName('pageTitle')[0].firstChild.nodeValue + linkEnd ;
+					
+				$('#ul003').append(full_li_element);
+			$('#ul003 .defaultLink').css('display','none');
+
+	   		}
+		} 
+		if(i==propertyTags.length){$('#pageType').removeClass('loading');}
+
+	}	
+	 
+	if(lookupCount == 0){$('#ul001').prepend('<li class=\"liveResult noMatch\">Found no result</li>');$('#ul001 li').css('display','block');$('.sidebar .search form input').removeClass('loading');}
+    if(articleCount == 0){$('#ul002').prepend('<li class=\"liveResult noMatch\">Found no result</li>');$('#ul002 li').css('display','block');}
+	if(exampleCount == 0){$('#ul003').prepend('<li class=\"liveResult noMatch\">Found no result</li>');$('#ul003 li').css('display','block');}
+	// reset count variables;
+	 lookupCount=0;
+	 articleCount = 0;
+     exampleCount = 0;
+	
+}
+//build regular expression object to find empty string or any number of blank
+var blankRE=/^\s*$/;
+function CheckEmptyAndLoadList()
+{
+	var pageUrl = window.location.href;
+	var pageVal = $('title').html();
+	$('#feedUrl').remove();
+	$('#pageVal').remove();
+	$('#feedform').append('<input id="feedUrl" name="feedUrl" value="'+pageUrl+'" style="display:none;">');
+	$('#feedform').append('<input id="pageVal" name="pageVal" value="'+pageVal+'" style="display:none;">');
+	$('.liveResult').remove();
+    $('.defaultLink').css('display','block');
+	var value = document.getElementById('pageType').value; 
+	if((blankRE.test(value)) || (value.length < 3))
+	{
+	//empty inputbox
+		// load default li elements into the ul if empty
+	//	loadAllList(); // replaced
+	 $('.defaultLink').css('display','block');
+	// $('.liveResult').css('display','none');
+	}else{
+	 $('.defaultLink').css('display','none');
+	}
+}
+/*
+$(window).resize(function(){
+if($(window).width()<400)
+	$('body').addClass('offline');
+else
+	$('body').removeClass('offline');
+	});
+	*/
+// Loads on doc ready
+	$(document).ready(function () {
+	//alert(pageUrl);
+	//$('#pageUrl').attr('foo',pageUrl);
+	var pageTitle = $('title').html();
+          var currentString = $('#pageType').val() ;
+		  if(currentString.length < 1){
+			$('.defaultLink').css('display','block');
+      	   		CheckEmptyAndLoadList();			
+		  }
+
+        $('#pageType').keyup(function () {
+          var searchString = $('#pageType').val() ;
+          if ((searchString == null) || (searchString.length < 3)) {
+				$('#pageType').removeClass('loading');
+				 $('.liveResult').remove(); // replaces removeResults();
+      	   		CheckEmptyAndLoadList();
+				$('.report').remove();
+				// debug$('.content').prepend('<li>too short or blank</li>'); // debug
+				return;
+		   }
+            if (this.timer) clearTimeout(this.timer);
+            this.timer = setTimeout(function () {
+				$('#pageType').addClass('loading');
+				// debug$('.content').prepend('<li>new search started </li>');// debug
+				// debug$('.content').prepend('<p class=\"report\">Search string ' +searchString +'</p>'); // debug
+
+               $.ajax({
+                contentType: "application/x-www-form-urlencoded",
+                url: 'http://' + location.host + '/nokiasearch/GetDataServlet',
+                data: 'searchString='+searchString,
+                dataType:'xml',
+				type: 'post',	 
+                success: function (response, textStatus) {
+
+				$('.liveResult').remove(); // replaces removeResults();
+								$('#pageType').removeClass('loading');
+
+                processNokiaData(response);
+
+ }     
+              });
+            }, 500);
+        });
+      }); 
diff --git a/doc/templates/scripts/narrow.js b/doc/templates/scripts/narrow.js
new file mode 100644
index 0000000000..12d0ce89d5
--- /dev/null
+++ b/doc/templates/scripts/narrow.js
@@ -0,0 +1,78 @@
+var narrowInit = function() {
+  /* TODO:
+  Could probably be more efficient, not hardcoding each element to be created
+  */
+  // 1: Create search form
+  var narrowSearch = $('<div id="narrowsearch"></div>');
+  var searchform = $("#qtdocsearch");
+  narrowSearch.append(searchform);
+  $("#qtdocheader .content .qtref").after(narrowSearch);
+
+  // 2: Create dropdowns
+  var narrowmenu = $('<ul id="narrowmenu" class="sf-menu"></ul>');
+
+  // Lookup
+  var lookuptext = $("#lookup h2").attr("title");
+  $("#lookup ul").removeAttr("id");
+  $("#lookup ul li").removeAttr("class");
+  $("#lookup ul li").removeAttr("style");
+  var lookupul = $("#lookup ul");
+  var lookuplist = $('<li></li>');
+  var lookuplink = $('<a href="#"></a>');
+  lookuplink.append(lookuptext);
+  lookuplist.append(lookuplink);
+  lookuplist.append(lookupul);
+  narrowmenu.append(lookuplist);
+
+  // Topics
+  var topicstext = $("#topics h2").attr("title");
+  $("#topics ul").removeAttr("id");
+  $("#topics ul li").removeAttr("class");
+  $("#topics ul li").removeAttr("style");
+  var topicsul = $("#topics ul");
+  var topicslist = $('<li></li>');
+  var topicslink = $('<a href="#"></a>');
+  topicslink.append(topicstext);
+  topicslist.append(topicslink);
+  topicslist.append(topicsul);
+  narrowmenu.append(topicslist);
+
+  // Examples
+  var examplestext = $("#examples h2").attr("title");
+  $("#examples ul").removeAttr("id");
+  $("#examples ul li").removeAttr("class");
+  $("#examples ul li").removeAttr("style");
+  var examplesul = $("#examples ul");
+  var exampleslist = $('<li></li>');
+  var exampleslink = $('<a href="#"></a>');
+  exampleslink.append(examplestext);
+  exampleslist.append(exampleslink);
+  exampleslist.append(examplesul);
+  narrowmenu.append(exampleslist);
+
+  $("#shortCut").after(narrowmenu);
+  $('ul#narrowmenu').superfish({
+    delay: 100,
+    autoArrows: false,
+    disableHI: true
+  });
+}
+
+$(document).ready(function(){
+  if ($('body').hasClass('narrow')) {
+    narrowInit();
+  }
+});
+
+$(window).bind('resize', function () {
+  if($(window).width()<600) {
+    $('body').addClass('narrow');
+
+    if ($("#narrowsearch").length == 0) {
+      narrowInit();
+    }
+  }
+  else {
+    $('body').removeClass('narrow');
+  }
+});
\ No newline at end of file
diff --git a/doc/templates/scripts/superfish.js b/doc/templates/scripts/superfish.js
new file mode 100644
index 0000000000..c6a9c7de04
--- /dev/null
+++ b/doc/templates/scripts/superfish.js
@@ -0,0 +1,121 @@
+
+/*
+ * Superfish v1.4.8 - jQuery menu widget
+ * Copyright (c) 2008 Joel Birch
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * 	http://www.opensource.org/licenses/mit-license.php
+ * 	http://www.gnu.org/licenses/gpl.html
+ *
+ * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
+ */
+
+;(function($){
+	$.fn.superfish = function(op){
+
+		var sf = $.fn.superfish,
+			c = sf.c,
+			$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
+			over = function(){
+				var $$ = $(this), menu = getMenu($$);
+				clearTimeout(menu.sfTimer);
+				$$.showSuperfishUl().siblings().hideSuperfishUl();
+			},
+			out = function(){
+				var $$ = $(this), menu = getMenu($$), o = sf.op;
+				clearTimeout(menu.sfTimer);
+				menu.sfTimer=setTimeout(function(){
+					o.retainPath=($.inArray($$[0],o.$path)>-1);
+					$$.hideSuperfishUl();
+					if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
+				},o.delay);	
+			},
+			getMenu = function($menu){
+				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
+				sf.op = sf.o[menu.serial];
+				return menu;
+			},
+			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
+			
+		return this.each(function() {
+			var s = this.serial = sf.o.length;
+			var o = $.extend({},sf.defaults,op);
+			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
+				$(this).addClass([o.hoverClass,c.bcClass].join(' '))
+					.filter('li:has(ul)').removeClass(o.pathClass);
+			});
+			sf.o[s] = sf.op = o;
+			
+			$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
+				if (o.autoArrows) addArrow( $('>a:first-child',this) );
+			})
+			.not('.'+c.bcClass)
+				.hideSuperfishUl();
+			
+			var $a = $('a',this);
+			$a.each(function(i){
+				var $li = $a.eq(i).parents('li');
+				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
+			});
+			o.onInit.call(this);
+			
+		}).each(function() {
+			var menuClasses = [c.menuClass];
+			if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
+			$(this).addClass(menuClasses.join(' '));
+		});
+	};
+
+	var sf = $.fn.superfish;
+	sf.o = [];
+	sf.op = {};
+	sf.IE7fix = function(){
+		var o = sf.op;
+		if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
+			this.toggleClass(sf.c.shadowClass+'-off');
+		};
+	sf.c = {
+		bcClass     : 'sf-breadcrumb',
+		menuClass   : 'sf-js-enabled',
+		anchorClass : 'sf-with-ul',
+		arrowClass  : 'sf-sub-indicator',
+		shadowClass : 'sf-shadow'
+	};
+	sf.defaults = {
+		hoverClass	: 'sfHover',
+		pathClass	: 'overideThisToUse',
+		pathLevels	: 1,
+		delay		: 800,
+		animation	: {opacity:'show'},
+		speed		: 'normal',
+		autoArrows	: true,
+		dropShadows : true,
+		disableHI	: false,		// true disables hoverIntent detection
+		onInit		: function(){}, // callback functions
+		onBeforeShow: function(){},
+		onShow		: function(){},
+		onHide		: function(){}
+	};
+	$.fn.extend({
+		hideSuperfishUl : function(){
+			var o = sf.op,
+				not = (o.retainPath===true) ? o.$path : '';
+			o.retainPath = false;
+			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
+					.find('>ul').hide().css('visibility','hidden');
+			o.onHide.call($ul);
+			return this;
+		},
+		showSuperfishUl : function(){
+			var o = sf.op,
+				sh = sf.c.shadowClass+'-off',
+				$ul = this.addClass(o.hoverClass)
+					.find('>ul:hidden').css('visibility','visible');
+			sf.IE7fix.call($ul);
+			o.onBeforeShow.call($ul);
+			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
+			return this;
+		}
+	});
+
+})(jQuery);
diff --git a/doc/templates/style/OfflineStyle.css b/doc/templates/style/OfflineStyle.css
new file mode 100644
index 0000000000..ddd580af53
--- /dev/null
+++ b/doc/templates/style/OfflineStyle.css
@@ -0,0 +1,819 @@
+@media screen
+{
+    html
+    {
+        color: #000000;
+        background: #FFFFFF;
+    }
+    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td
+    {
+        margin: 0;
+        padding: 0;
+    }
+    table
+    {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    fieldset, img
+    {
+        border: 0;
+    }
+    address, caption, cite, code, dfn, em, strong, th, var, optgroup
+    {
+        font-style: inherit;
+        font-weight: inherit;
+    }
+    del, ins
+    {
+        text-decoration: none;
+    }
+    li
+    {
+        list-style: none;
+    }
+    caption, th
+    {
+        text-align: left;
+    }
+    h1, h2, h3, h4, h5, h6
+    {
+        font-size: 100%;
+    }
+    q:before, q:after
+    {
+        content: '';
+    }
+    abbr, acronym
+    {
+        border: 0;
+        font-variant: normal;
+    }
+    sup
+    {
+        vertical-align: baseline;
+    }
+    sub
+    {
+        vertical-align: baseline;
+    }
+	tt, .qmlreadonly span, .qmldefault span
+	{
+		word-spacing:5px;
+	}
+    .heading
+    {
+        font: normal 600 16px/1.0 Arial;
+    }
+    .subtitle
+    {
+        font-size: 13px;
+    }
+    .small-subtitle
+    {
+        font-size: 13px;
+    }
+    legend
+    {
+        color: #000000;
+    }
+    input, button, textarea, select, optgroup, option
+    {
+        font-family: inherit;
+        font-size: inherit;
+        font-style: inherit;
+        font-weight: inherit;
+    }
+    input, button, textarea, select
+    {
+        font-size: 100%;
+    }
+    body
+    {
+        font: normal 13px/1.2 Verdana;
+        color: #363534;
+    }
+    strong
+    {
+        font-weight: bold;
+    }
+    em
+    {
+        font-style: italic;
+    }
+    a
+    {
+        color: #00732f;
+        text-decoration: none;
+    }
+    .header, .footer, .wrapper
+    {
+        /*min-width: 600px;*/
+        max-width: 1500px;
+        margin: 0 5px;
+    }
+    .wrapper
+    {
+	position:relative;
+	top:50px;
+    }
+    .wrapper .bd
+    {
+        position: relative;
+    }
+
+    .header, .footer
+    {
+        display: block;
+        clear: both;
+        overflow: hidden;
+    }
+    .header
+    {
+        height: 115px;
+        position: relative;
+    }
+    
+    
+    .header .qtref
+    {
+        position: absolute;
+        top: 28px;
+        left: 88px;
+        width: 302px;
+        height: 22px;
+    }
+    .header .qtref span
+    {
+        display: block;
+        height: 22px;
+    }
+    .wrap .content h1
+    {
+        font: 600 18px/1.2 Arial;
+    }
+    .wrap .content h2
+    {
+        font: 600 16px/1.2 Arial;
+    }
+    .wrap .content h3
+    {
+        font: 600 14px/1.2 Arial;
+    }
+    .wrap .content h4
+    {
+        font: 600 12px/1.2 Arial;
+    }
+	
+    .wrap .content p
+    {
+        line-height: 20px;
+        padding: 5px;
+    }
+    .wrap .content table p
+    {
+        line-height: 20px;
+        padding: 0px;
+    }	
+    .wrap .content ul
+    {
+        padding-left: 25px;
+        padding-top: 10px;
+    }
+    a:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+    .content a:visited
+    {
+        color: #4c0033;
+        text-decoration: none;
+    }
+     .content a:visited:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }   
+
+    pre
+    {
+        border: 1px solid #DDDDDD;
+        margin: 0 20px 10px 10px;
+        padding: 20px 15px 20px 20px;
+        overflow-x: auto;
+    }
+    table, pre
+    {
+        -moz-border-radius: 7px 7px 7px 7px;
+        background-color: #F6F6F6;
+        border: 1px solid #E6E6E6;
+        border-collapse: separate;
+        font-size: 11px;
+        /*min-width: 395px;*/
+        margin-bottom: 25px;
+        display: inline-block;
+    }
+    thead
+    {
+        margin-top: 5px;
+		font:600 12px/1.2 Arial;
+    }
+    th
+    {
+        padding: 5px 15px 5px 15px;
+        background-color: #E1E1E1;
+      /*  border-bottom: 1px solid #E6E6E6;*/
+        border-left: 1px solid #E6E6E6;
+      /*  border-right: 1px solid #E6E6E6;*/
+    }
+    td
+    {
+        padding: 3px 15px 3px 20px;
+  /*      border-left: 1px solid #E6E6E6;
+        border-right: 1px solid #E6E6E6;*/
+    }
+    tr.odd td:hover,  tr.even td:hover
+    {
+    /*    border-right: 1px solid #C3C3C3;
+        border-left: 1px solid #C3C3C3;*/
+    }
+		
+	td.rightAlign
+	{
+        padding: 3px 15px 3px 10px;
+	}
+    table tr.odd
+    {
+        border-left: 1px solid #E6E6E6;
+        background-color: #F6F6F6;
+        color: #66666E;
+    }
+    table tr.even
+    {
+        border-left: 1px solid #E6E6E6;
+        background-color: #ffffff;
+        color: #66666E;
+    }
+    table tr.odd td:hover, table tr.even td:hover
+    {
+        background-color: #E6E6E6;
+    }
+    		
+    span.comment
+    {
+        color: #8B0000;
+        font-style: italic;
+    }
+    span.string, span.char
+    {
+        color: #254117;
+    }
+
+    .qmltype
+    {
+        text-align: center;
+        font-size: 160%;
+    }
+    .qmlreadonly
+    {
+        float: right;
+        color: #254117;
+    }
+
+    .qmldefault
+    {
+        float: right;
+        color: red;
+    }
+
+	.footer
+    {
+		border-top:1px solid #E5E5E5;
+        min-height: 100px;
+        color: #797775;
+        font: normal 9px/1 Verdana;
+        text-align: center;
+        padding-top: 40px;
+        margin: 0;
+    }
+
+    
+     .wrap
+    {
+        margin: 0 5px 0 5px;
+    }
+    .wrap .toolbar
+    {
+     display:block;
+    }
+
+    .wrap .breadcrumb ul li
+    {
+        float: left;
+        background: url(../images/breadcrumb.png) no-repeat 0 5px;
+        padding-left: 15px;
+        margin-left: 15px;
+        font-weight: bold;
+    }
+    .wrap .breadcrumb ul li.last
+    {
+        font-weight: normal;
+    }
+    .wrap .breadcrumb ul li a
+    {
+      /*  color: #363534;*/
+        color: #00732F;
+    }
+    .wrap .breadcrumb ul li.first
+    {
+        background-image: none;
+        padding-left: 0;
+        margin-left: 0;
+    }
+    .wrap .content
+    {
+		word-wrap:break-word;
+    }
+    .wrap .content li
+    {
+        padding-left: 12px;
+        background: url(../images/bullet_sq.png) no-repeat 0 5px;
+        font: normal 400 10pt/1 Verdana;
+        margin-bottom: 10px; 
+    }
+
+    .offline .wrap .content
+    {
+        padding-top: 15px;
+    }
+
+    .header:after, .footer:after, .breadcrumb:after, .wrap .content:after, .group:after
+    {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+    
+    hr
+    {
+        background-color: #E6E6E6;
+        border: 1px solid #E6E6E6;
+        height: 1px;
+        width: 100%;
+        text-align: left;
+        margin: 5px 0px 5px 0px;
+    }
+
+    .content .alignedsummary
+    {
+        margin: 5px;
+		width:100%;
+    }
+
+     
+    .toc
+    {
+        float: right;
+        -moz-border-radius: 7px 7px 7px 7px;
+        background-color: #F6F6F6;
+        border: 1px solid #DDDDDD;
+        margin: 0 20px 10px 10px;
+        padding: 20px 15px 20px 20px;
+        height: auto;
+        width: 200px;
+    }
+
+    .toc h3, .generic a
+    {
+        font: 600 12px/1.2 Arial;
+    }
+
+    .wrap .content .toc ul
+    {
+        padding-left: 0px;
+    }
+
+
+    .wrap .content .toc .level2
+    {
+        margin-left: 15px;
+    }
+
+    .wrap .content .toc .level3
+    {
+        margin-left: 30px;
+    }
+
+    .content .toc li
+    {
+        font: normal 10px/1.2 Verdana;
+        background: url(../images/bullet_dn.png) no-repeat 0 5px;
+    }
+	
+	
+	.generic{
+		max-width:75%;
+	}
+	.generic td{
+		padding:0;
+	}
+	
+	.generic .odd .alphaChar{
+        background-color: #F6F6F6;
+	}
+	
+	.generic .even .alphaChar{
+        background-color: #FFFFFF;
+	}
+
+	.highlightedCode
+	{
+	margin:10px;
+	}
+
+	.flowList{
+	vertical-align:top;
+	}	
+	.alphaChar{
+	width:100%;
+	background-color:#F6F6F6;
+	border:1px solid #E6E6E6;
+	font-size:12pt;
+	padding-left:10px;
+	margin-top:10px;
+	margin-bottom:10px;
+	}
+
+	.flowList dl{
+	}
+	.flowList dd{
+	display:inline-block;
+	margin-left:10px;
+	width:250px;
+	}
+	.wrap .content .flowList p{
+	padding:0px;
+	}
+	
+    .relpage
+    {
+        -moz-border-radius: 7px 7px 7px 7px;
+        border: 1px solid #DDDDDD;
+        padding: 25px 25px;
+        clear: both;
+    }
+    .relpage ul
+    {
+        float: none;
+        padding: 15px;
+    }
+    .content .relpage li
+    {
+        font: normal 11px/1.2 Verdana;
+    }
+    h3.fn, span.fn
+    {
+        background-color: #F6F6F6;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #E6E6E6;
+        font-weight: bold;
+		word-spacing:3px;
+    }
+
+	.functionIndex {
+	font-size:12pt;
+	word-spacing:10px;
+	margin-bottom:10px;
+    background-color: #F6F6F6;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #E6E6E6;
+	width:100%;
+	}
+	
+	.centerAlign {	text-align:center;}
+	.rightAlign {text-align:right;}
+	.leftAlign {text-align:left;}
+	.topAlign{vertical-align:top	}
+	.functionIndex a{display:inline-block;}
+
+    /* start index box */
+    .indexbox
+    {
+        width: 100%;
+		display:inline-block;
+    }
+
+    .indexboxcont { display: block; }
+
+    .indexboxbar
+    {
+		border-bottom:1px solid #E5E5E5;
+        margin-bottom: 25px;
+    }
+
+    .indexboxcont .section
+    {
+        display: inline-block;
+        padding:0 2% 0 1%;
+        vertical-align:top;
+	}
+
+	.indexboxcont .section {
+	  float: left;
+	}
+
+    .indexboxcont .section p
+    {
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+    .indexboxcont .sectionlist
+    {
+        display: inline-block;
+		vertical-align:top;
+        padding: 0;
+    }
+    .indexboxcont .sectionlist ul
+    {
+        margin-bottom: 20px;
+    }
+
+    .indexboxcont .sectionlist ul li
+    {
+        line-height: 12px;
+    }
+
+    .content .indexboxcont li
+    {
+        font: normal 600 13px/1 Verdana;
+    }
+
+    .indexbox a:hover, .indexbox a:visited:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+
+    .indexbox a:visited
+    {
+        color: #00732f;
+        text-decoration: none;
+    }
+	
+	.indexbox .indexIcon {
+	width: 11%;
+	}
+	
+   
+    .indexboxcont:after
+    {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+	
+    body.offline
+    {
+      background-image: none;
+    }
+
+    .offline .footer {
+      margin: 0;
+    }
+    .offline .header
+    {
+      width: 100%;
+      margin: 0;
+      height: auto;
+      background-color: #ffffff;
+      padding: 10px 0 5px 0;
+      overflow: visible;
+	  border-bottom: solid #E5E5E5 1px;
+	  z-index:1;
+	  position:fixed;
+    }
+
+    .offline .header .content
+    {
+    }
+    .offline .header .qtref
+    {
+      color: #00732F;
+      position: static;
+      float: left;
+      margin-left: 5px;
+      font: bold 18px/1 Arial;
+    }
+
+    .offline .header .qtref:visited
+    {
+      color: #00732F;
+	  }
+    .offline .header .qtref:hover
+    {
+      color: #00732F;
+	  text-decoration:none;
+	  }
+    .offline .header .qtref span
+    {
+      background-image: none;
+      text-indent: 0;
+	  text-decoration:none;
+    }
+
+    .offline .wrap
+    {
+        margin: 0 5px 0 5px;
+    }
+
+    .offline .wrap .toolbar
+    {
+      display:block;
+	  padding-top:5px;
+    }
+
+    .offline .wrap .breadcrumb ul li {
+      font-weight: normal;
+    }
+
+    .offline .wrap .breadcrumb ul li a {
+      /*color: #44a51c;*/
+    }
+
+    .offline .wrap .breadcrumb ul li.last a {
+      /*color: #363534;*/
+    }
+    
+
+    
+    .narrow .indexboxcont .section {
+      width: 64%;
+      padding-left: 0;
+    }
+    
+    .narrow .indexboxcont .sectionlist {
+      width: 32.5%;
+    }
+
+    .header .icon,
+	.sidebar,
+	.feedback,
+	.t_button,
+    .feedback,
+	#feedbackBox,
+	#feedback,
+	#blurpage,
+	.indexbox .indexIcon span,
+	.wrapper .hd,
+	.offline .indexbox .indexIcon,
+	.offline .header #nav-logo,
+	#offlinemenu,
+	#offlinesearch,
+	.offline .header #nav-topright,
+    .offline .header #shortCut ,
+	.offline .wrapper .hd,
+    .offline .wrapper .ft,
+	.offline .sidebar,
+	.offline .wrap .feedback
+    {
+	display:none;
+    }
+
+    /* end offline mode */
+#narrowmenu {
+      display: none;
+      float: right;
+      margin: 15px 40px 0 0;
+      font-size: 11px;
+    }
+
+    .narrow #narrowmenu {
+      display: block;
+    }
+	
+	#narrowsearch{
+		display:none;
+	}
+
+	#narrowmenu ul
+	{
+	  border-bottom:solid 1px #E5E5E5;
+	  border-left:solid 1px #E5E5E5;
+	  border-right:solid 1px #E5E5E5;
+	}
+
+    #narrowmenu a {
+      line-height: 1.1;
+      background: url(../images/arrow_down.png) no-repeat 100% 50%;
+      white-space: nowrap;
+      padding: 0 16px 0 5px;
+    }
+
+    #narrowmenu li {
+      margin-left: 20px;
+    }
+
+    #narrowmenu li li {
+      margin: 0 0 5px 0;
+    }
+
+    #narrowmenu li li a {
+      padding: 0;
+      background-image: none;
+    }
+
+    #narrowmenu li,
+    #narrowmenu li ul {
+      background-color: #fff;
+    }
+
+    #narrowmenu li ul {
+      width: auto;
+      padding: 5px;
+ 	  margin-top:-15px;
+   }
+
+    .sf-menu li:hover ul, .sf-menu li.sfHover ul {
+      top: 1.2em;
+    }
+.sf-menu, .sf-menu * {
+	margin:			0;
+	padding:		0;
+	list-style:		none;
+}
+.sf-menu {
+	line-height:	1.0;
+}
+.sf-menu ul {
+	position:		absolute;
+	top:			-999em;
+	width:			10em; /* left offset of submenus need to match (see below) */
+}
+.sf-menu ul li {
+	width:			100%;
+}
+.sf-menu li:hover {
+	visibility:		inherit; /* fixes IE7 'sticky bug' */
+}
+.sf-menu li {
+	float:			left;
+	position:		relative;
+}
+.sf-menu a {
+	display:		block;
+	position:		relative;
+}
+.sf-menu li:hover ul,
+.sf-menu li.sfHover ul {
+	left:			0;
+	top:			2.5em; /* match top ul list item height */
+	z-index:		99;
+}
+ul.sf-menu li:hover li ul,
+ul.sf-menu li.sfHover li ul {
+	top:			-999em;
+}
+ul.sf-menu li li:hover ul,
+ul.sf-menu li li.sfHover ul {
+	left:			10em; /* match ul width */
+	top:			0;
+}
+ul.sf-menu li li:hover li ul,
+ul.sf-menu li li.sfHover li ul {
+	top:			-999em;
+}
+ul.sf-menu li li li:hover ul,
+ul.sf-menu li li li.sfHover ul {
+	left:			10em; /* match ul width */
+	top:			0;
+}
+
+}
+/* end of screen media */
+
+/* start of print media */
+
+@media print
+{
+     input, textarea, .header, .footer, .toolbar, .feedback, .wrapper .hd, .wrapper .bd .sidebar, .wrapper .ft
+    {
+        display: none;
+        background: none;
+    }
+    .content
+    {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        background: none;
+        display: block;
+    }
+}
+/* end of print media */
diff --git a/doc/templates/style/narrow.css b/doc/templates/style/narrow.css
new file mode 100644
index 0000000000..05159aa568
--- /dev/null
+++ b/doc/templates/style/narrow.css
@@ -0,0 +1,250 @@
+    /* start narrow mode */
+
+    body.narrow
+    {
+      background-image: none;
+    }
+
+    .narrow a {
+      color: #44a51c;
+    }
+
+    .narrow .header, .narrow .header .content, .narrow .footer, .narrow .wrapper {
+      margin: 0 7px;
+      min-width: 300px;
+    }
+
+    .narrow .footer {
+      margin: 0;
+    }
+    .narrow .header
+    {
+      width: 100%;
+      margin: 0;
+      height: auto;
+      background: #fff url(../images/header_bg.png) repeat-x 0 100%;
+      padding: 10px 0 5px 0;
+      overflow: visible;
+    }
+
+    .narrow .header .content
+    {
+    }
+
+    .narrow .header #nav-logo
+    {
+      display: none;
+    }
+
+    .narrow .header .qtref
+    {
+      width: auto;
+      height: auto;
+      color: #363534;
+      position: static;
+      float: left;
+      margin-left: 25px;
+      font: bold 18px/1 Arial;
+    }
+
+    .narrow .header .qtref a
+    {
+      color: #363534;
+    }
+
+    .narrow .header .qtref span
+    {
+      background-image: none;
+      text-indent: 0;
+    }
+
+    .narrow .header #nav-topright
+    {
+      display: none;
+    }
+
+    .narrow .header #shortCut
+    {
+      clear: both;
+      font-weight: normal;
+      position: static;
+      float: left;
+      margin: 15px 0 0 25px;
+      overflow: hidden;
+      padding: 0;
+      height: auto;
+    }
+
+    .narrow .header #shortCut ul
+    {
+      float: none;
+      margin: 0;
+      width: auto;
+      font-size: 11px;
+    }
+
+    .narrow .header #shortCut ul li
+    {
+      background-image: none;
+    }
+
+    .narrow .header #shortCut ul .shortCut-topleft-active,
+    .narrow .header #shortCut ul .shortCut-topleft-inactive
+    {
+      background-image: none;
+      height: auto;
+      padding: 0;
+      width: auto;
+    }
+    .narrow .header #shortCut ul li a
+    {
+      color: #44a51c;
+    }
+
+    .narrow .wrapper .hd
+    {
+        background: url(../images/bg_ul_blank.png) no-repeat 0 0;
+    }
+
+    .narrow .wrapper .bd
+    {
+        background: url(../images/bg_l_blank.png) repeat-y 0 0;
+    }
+
+    .narrow .wrapper .ft
+    {
+        background: url(../images/bg_ll_blank.png) no-repeat 0 0;
+    }
+
+    .narrow .sidebar
+    {
+        display: none;
+    }
+
+    .narrow .wrap
+    {
+        margin: 0 5px 0 5px;
+    }
+
+    .narrow .wrap .toolbar
+    {
+      border-bottom: none;
+    }
+
+    .narrow .wrap .content
+    {
+        padding-top: 15px;
+    }
+
+    .narrow .wrap .feedback
+    {
+        display: none;
+    }
+
+    .narrow .wrap .breadcrumb ul li {
+      font-weight: normal;
+    }
+
+    .narrow .wrap .breadcrumb ul li a {
+      color: #44a51c;
+    }
+
+    .narrow .wrap .breadcrumb ul li.last a {
+      color: #363534;
+    }
+    
+    #narrowsearch {
+      display: none;
+    }
+
+    .narrow #narrowsearch {
+      display: block;
+      float: right;
+      margin-right: 25px;
+      _position: relative;
+    }
+
+    .narrow #narrowsearch fieldset {
+      _position: absolute;
+      _margin-top: -1px;
+    }
+
+    .narrow #narrowsearch {
+      background: url("http://doc.qt.nokia.com/prototype/html/images/sprites-combined.png") no-repeat scroll -6px -348px transparent;
+      height: 21px;
+      padding: 2px 0 0 5px;
+      width: 167px;
+    }
+
+    .narrow #narrowsearch input {
+      border: none;
+      font: 13px/1.2 Verdana;
+      height: 19px;
+      outline: none;
+      padding: 0;
+      width: 158px;
+      *border: 1px solid #fff;
+      *height: 17px;
+      _height: 18px;
+    }
+
+    .narrow .indexbox .indexIcon {
+      display: none;
+    }
+
+    .narrow .indexboxcont .section {
+      width: 64%;
+      padding-left: 0;
+    }
+    
+    .narrow .indexboxcont .sectionlist {
+      width: 32.5%;
+    }
+
+    #narrowmenu {
+      display: none;
+      float: right;
+      margin: 15px 40px 0 0;
+      font-size: 11px;
+    }
+
+    .narrow #narrowmenu {
+      display: block;
+    }
+
+    #narrowmenu a {
+      line-height: 1.1;
+      background: url(../images/arrow_down.png) no-repeat 100% 50%;
+      white-space: nowrap;
+      padding: 0 16px 0 5px;
+    }
+
+    #narrowmenu li {
+      margin-left: 20px;
+    }
+
+    #narrowmenu li li {
+      margin: 0 0 5px 0;
+    }
+
+    #narrowmenu li li a {
+      padding: 0;
+      background-image: none;
+    }
+
+    #narrowmenu li,
+    #narrowmenu li ul {
+      background-color: #fff;
+	  margin-top:-1px;
+    }
+
+    #narrowmenu li ul {
+      width: auto;
+      padding: 5px;
+    }
+
+    .sf-menu li:hover ul, .sf-menu li.sfHover ul {
+      top: 1.2em;
+    }
+
+    /* end narrow mode */
diff --git a/doc/templates/style/style.css b/doc/templates/style/style.css
index 7be80d5f15..47fe2e0a04 100644
--- a/doc/templates/style/style.css
+++ b/doc/templates/style/style.css
@@ -39,7 +39,7 @@
     h1, h2, h3, h4, h5, h6
     {
         font-size: 100%;
-        font-weight: normal;
+/*        font-weight: normal; */
     }
     q:before, q:after
     {
@@ -58,6 +58,23 @@
     {
         vertical-align: baseline;
     }
+	tt, .qmlreadonly span, .qmldefault span
+	{
+		word-spacing:5px;
+	}
+    .heading
+    {
+        font: normal 600 16px/1.0 Arial;
+        padding-bottom: 15px;
+    }
+    .subtitle
+    {
+        font-size: 13px;
+    }
+    .small-subtitle
+    {
+        font-size: 13px;
+    }
     legend
     {
         color: #000000;
@@ -73,7 +90,6 @@
     {
         font-size: 100%;
     }
-    /* Page style */
     html
     {
         background-color: #e5e5e5;
@@ -92,11 +108,16 @@
     {
         font-style: italic;
     }
+    a
+    {
+        color: #00732f;
+        text-decoration: none;
+    }
     .header, .footer, .wrapper
     {
         min-width: 600px;
         max-width: 1500px;
-        margin: 0 6px;
+        margin: 0 30px;
     }
     .wrapper
     {
@@ -106,23 +127,19 @@
     {
         padding-left: 216px;
         height: 15px;
-        background: url(../images/bg_ul.png) no-repeat 0 0;
+        background: url(../images/page.png) no-repeat 0 0;
         overflow: hidden;
     }
     .offline .wrapper .hd
     {
-        background: url(../images/bg_ul_blank.png) no-repeat 0 0;
+        background: url(../images/page.png) no-repeat 0 -15px;
     }
     .wrapper .hd span
     {
         height: 15px;
         display: block;
-        background: url(../images/bg_ur.png) no-repeat 100% 0;
         overflow: hidden;
-    }
-    .offline .wrapper .hd span
-    {
-        /*         background: url(../images/bg_ur_blank.png) no-repeat 100% 0; */
+        background: url(../images/page.png) no-repeat 100% -30px;
     }
     .wrapper .bd
     {
@@ -137,18 +154,18 @@
     {
         padding-left: 216px;
         height: 15px;
-        background: url(../images/bg_ll.png) no-repeat 0 0;
+        background: url(../images/page.png) no-repeat 0 -75px;
         overflow: hidden;
     }
     .offline .wrapper .ft
     {
-        background: url(../images/bg_ll_blank.png) no-repeat 0 0;
+        background: url(../images/page.png) no-repeat 0 -90px;
     }
     .wrapper .ft span
     {
         height: 15px;
         display: block;
-        background: url(../images/bg_lr.png) no-repeat 100% 0;
+        background: url(../images/page.png) no-repeat 100% -60px;
         overflow: hidden;
     }
     .header, .footer
@@ -182,186 +199,9 @@
         width: 302px;
         height: 22px;
         text-indent: -999em;
-        background: url(../images/header.png) no-repeat 0 0;
-    }
-    /* header elements */
-    #nav-topright
-    {
-        height: 70px;
-    }
-
-    #nav-topright ul
-    {
-        list-style-type: none;
-        float: right;
-        width: 370px;
-        margin-top: 11px;
-    }
-
-    #nav-topright li
-    {
-        display: inline-block;
-        margin-right: 20px;
-        float: left;
-    }
-
-    #nav-topright li.nav-topright-last
-    {
-        margin-right: 0;
-    }
-
-    #nav-topright li a
-    {
-        background: transparent url(../images/sprites-combined.png) no-repeat;
-        height: 18px;
-        display: block;
-        overflow: hidden;
-        text-indent: -9999px;
-    }
-
-    #nav-topright li.nav-topright-home a
-    {
-        width: 65px;
-        background-position: -2px -91px;
-    }
-
-    #nav-topright li.nav-topright-home a:hover
-    {
-        background-position: -2px -117px;
-    }
-
-
-    #nav-topright li.nav-topright-dev a
-    {
-        width: 30px;
-        background-position: -76px -91px;
-    }
-
-    #nav-topright li.nav-topright-dev a:hover
-    {
-        background-position: -76px -117px;
-    }
-
-
-    #nav-topright li.nav-topright-labs a
-    {
-        width: 40px;
-        background-position: -114px -91px;
-    }
-
-    #nav-topright li.nav-topright-labs a:hover
-    {
-        background-position: -114px -117px;
-    }
-
-    #nav-topright li.nav-topright-doc a
-    {
-        width: 32px;
-        background-position: -162px -91px;
-    }
-
-    #nav-topright li.nav-topright-doc a:hover, #nav-topright li.nav-topright-doc-active a
-    {
-        background-position: -162px -117px;
-    }
-
-    #nav-topright li.nav-topright-blog a
-    {
-        width: 40px;
-        background-position: -203px -91px;
-    }
-
-    #nav-topright li.nav-topright-blog a:hover, #nav-topright li.nav-topright-blog-active a
-    {
-        background-position: -203px -117px;
-    }
-
-    #nav-topright li.nav-topright-shop a
-    {
-        width: 40px;
-        background-position: -252px -91px;
-    }
-
-    #nav-topright li.nav-topright-shop a:hover, #nav-topright li.nav-topright-shop-active a
-    {
-        background-position: -252px -117px;
-    }
-
-    #nav-logo
-    {
-        background: transparent url(     "../images/sprites-combined.png" ) no-repeat 0 -225px;
-        left: -3px;
-        position: absolute;
-        width: 75px;
-        height: 75px;
-        top: 13px;
-    }
-    #nav-logo a
-    {
-        width: 75px;
-        height: 75px;
-        display: block;
-        text-indent: -9999px;
-        overflow: hidden;
-    }
-    /* Clearing */
-    .header:after, .footer:after, .breadcrumb:after, .wrap .content:after, .group:after
-    {
-        content: ".";
-        display: block;
-        height: 0;
-        clear: both;
-        visibility: hidden;
+        background: url(../images/sprites-combined.png) no-repeat -78px -235px;
     }
-    /* ^ Clearing */
 
-
-
-    .shortCut-topleft-inactive
-    {
-        padding-left: 3px;
-        background: transparent url(     "../images/sprites-combined.png" ) repeat 0px -58px;
-        height: 20px;
-        /*width: 93px;*/
-    }
-    .shortCut-topleft-inactive span
-    {
-        font-variant: normal;
-    }
-    #shortCut
-    {
-        padding-top: 10px;
-        font-weight: bolder;
-        color: #b0adab;
-    }
-    #shortCut ul
-    {
-        list-style-type: none;
-        float: left;
-        width: 347px;
-        margin-left: 100px;
-    }
-    #shortCut li
-    {
-        display: inline-block;
-        margin-right: 25px;
-        float: left;
-        white-space: nowrap;
-    }
-    #shortCut li a
-    {
-        color: #b0adab;
-        text-decoration: none;
-    }
-    #shortCut li a:hover
-    {
-        color: #44a51c;
-        text-decoration: none;
-    }
-
-    /* end of header elements */    
-    
-    /* menu element */
     .sidebar
     {
         float: left;
@@ -369,32 +209,32 @@
         width: 200px;
         font-size: 11px;
     }
-    .sidebar a
-    {
-        color: #00732f;
-        text-decoration: none;
-    }
-    .offline .sidebar, .offline .feedback
+
+    .offline .sidebar, .offline .feedback, .offline .t_button
     {
         display: none;
     }
+
     .sidebar .searchlabel
     {
         padding: 0 0 2px 17px;
         font: normal bold 11px/1.2 Verdana;
     }
+
     .sidebar .search
     {
         padding: 0 15px 0 16px;
     }
+
     .sidebar .search form
     {
-        width: 167px;
-        height: 21px;
-        padding: 2px 0 0 5px;
-        background: url(../images/form_bg.png) no-repeat 0 0;
+        background: url(../images/sprites-combined.png) no-repeat -6px -348px;
+		height:21px;
+		padding:2px 0 0 5px;
+		width:167px;
     }
-    .sidebar .search form fieldset input#searchstring
+
+    .sidebar .search form input#pageType
     {
         width: 158px;
         height: 19px;
@@ -403,35 +243,68 @@
         outline: none;
         font: 13px/1.2 Verdana;
     }
+
     .sidebar .box
     {
         padding: 17px 15px 5px 16px;
     }
+
     .sidebar .box .first
     {
         background-image: none;
     }
+
     .sidebar .box h2
     {
         font: normal 18px/1.2 Arial;
-        padding: 15px 0 0 40px;
+        padding: 0;
         min-height: 32px;
     }
+    .sidebar .box h2 span
+    {
+        overflow: hidden;
+        display: inline-block;
+    }
     .sidebar .box#lookup h2
     {
-        background: url(../images/api_lookup.png) no-repeat 0 0;
+        background-image: none;
+    }
+    .sidebar #lookup.box h2 span
+    {
+        background: url(../images/sprites-combined.png) no-repeat -6px -311px;
+        width: 27px;
+        height: 35px;
+        margin-right: 13px;
     }
     .sidebar .box#topics h2
     {
-        background: url(../images/api_topics.png) no-repeat 0 0;
+        background-image: none;
+    }
+    .sidebar #topics.box h2 span
+    {
+        background: url(../images/sprites-combined.png) no-repeat -94px -311px;
+        width: 27px;
+        height: 32px;
+        margin-right: 13px;
     }
     .sidebar .box#examples h2
     {
-        background: url(../images/api_examples.png) no-repeat 0 0;
+        background-image: none;
     }
+    .sidebar #examples.box h2 span
+    {
+        background: url(../images/sprites-combined.png) no-repeat -48px -311px;
+        width: 30px;
+        height: 31px;
+        margin-right: 9px;
+    }
+
     .sidebar .box .list
     {
         display: block;
+		max-height:200px;
+		overflow-y:auto;
+		overflow-x:none;
     }
     .sidebar .box .live
     {
@@ -443,33 +316,34 @@
     {
         text-decoration: underline;
     }
+    .sidebar .box ul
+    {
+	padding:10px;
+    }
     .sidebar .box ul li
     {
         padding-left: 12px;
         background: url(../images/bullet_gt.png) no-repeat 0 5px;
-        margin-bottom: 15px;
+        margin-bottom: 5px;
     }
     .sidebar .bottombar
     {
         background: url(../images/box_bg.png) repeat-x 0 bottom;
     }
-    /* content elements */
     .wrap
     {
-        overflow: hidden;
+        margin: 0 5px 0 208px;
+        overflow: visible; 
     }
     .offline .wrap
     {
         margin: 0 5px 0 5px;
     }
-    /* tool bar */
     .wrap .toolbar
     {
         background-color: #fafafa;
         border-bottom: 1px solid #d1d1d1;
-        height: 20px;
-        margin-left: 3px;
-        margin-right: 5px;
+        height: 20px; 
         position: relative;
     }
     .wrap .toolbar .toolblock
@@ -487,7 +361,7 @@
     {
         padding: 0 0 10px 21px;
         right: 5px;
-        vertical-align: top;
+        vertical-align: middle;
         overflow: hidden;
     }
     .wrap .toolbar .toolbuttons .active
@@ -507,32 +381,56 @@
         font-weight: bold;
         color: #B0ADAB;
     }
-    #smallA
+
+    .toolbuttons #print
+    {
+        border-left: 1px solid #c5c4c4;
+        margin-top: 0;
+        padding-left: 7px;
+        text-indent: 0;
+    }
+    .toolbuttons #print a
+    {
+        width: 16px;
+        height: 16px;
+    }
+
+    .toolbuttons #print a span
+    {
+        width: 16px;
+        height: 16px;
+        text-indent: -999em;
+        display: block;
+        overflow: hidden;
+        background: url(../images/sprites-combined.png) no-repeat -137px -311px;
+    }
+
+    .toolbuttons #smallA
     {
         font-size: 10pt;
     }
-    #medA
+    .toolbuttons #medA
     {
         font-size: 12pt;
     }
-    #bigA
+    .toolbuttons #bigA
     {
         font-size: 14pt;
+        margin-right: 7px;
     }
+
     #smallA:hover, #medA:hover, #bigA:hover
     {
         color: #00732F;
     }
-    #print
+
+    .offline .wrap .breadcrumb
     {
-        font-size: 14pt;
-        line-height: 20pt;
     }
-    #printIcon
+
+    .wrap .breadcrumb ul
     {
-        margin-left: 5px;
     }
-    /* bread crumbs */
     .wrap .breadcrumb ul li
     {
         float: left;
@@ -545,6 +443,10 @@
     {
         font-weight: normal;
     }
+    .wrap .breadcrumb ul li a
+    {
+        color: #363534;
+    }
     .wrap .breadcrumb ul li.first
     {
         background-image: none;
@@ -553,30 +455,31 @@
     }
     .wrap .content
     {
-        padding: 8px;
-        position: relative;
+        padding: 30px;
+		word-wrap:break-word;
     }
-    /* text elements */
-    .heading
+
+    .wrap .content li
     {
-        font: normal 600 16px/1.0 Arial;
-        padding-bottom: 15px;
+        padding-left: 12px;
+        background: url(../images/bullet_sq.png) no-repeat 0 5px;
+        font: normal 400 10pt/1 Verdana;
+       /* color: #44a51c;*/
+        margin-bottom: 10px; 
     }
-
-    .subtitle
+    .content li:hover
     {
-        font-size: 13px;
+      /*  text-decoration: underline;*/
     }
 
-    .small-subtitle
+    .offline .wrap .content
     {
-        font-size: 13px;
+        padding-top: 15px;
     }
-    
+
     .wrap .content h1
     {
         font: 600 18px/1.2 Arial;
-        padding-bottom: 15px;
     }
     .wrap .content h2
     {
@@ -588,31 +491,18 @@
     }
     .wrap .content p
     {
-        line-height:20px;
-        padding:10px 5px 10px 5px;
-    }
-    .wrap .content ul
-    {
-        padding-left: 10px;
-    }
-    .wrap .content li
-    {
-        padding-left: 12px;
-        background: url(../images/bullet_sq.png) no-repeat 0 5px;
-        font: normal 400 10pt/1 Verdana;
-        margin-bottom: 10px;
-        line-height: 14px;
+        line-height: 20px;
+        padding: 5px;
     }
-
-    .wrap .content li ul
+    .wrap .content table p
     {
-        margin-top: 10px;
-    }
-
-    a
+        line-height: 20px;
+        padding: 0px;
+    }	
+    .wrap .content ul
     {
-        color: #00732F;
-        text-decoration: none;
+        padding-left: 25px;
+        padding-top: 10px;
     }
     a:hover
     {
@@ -624,22 +514,26 @@
         color: #4c0033;
         text-decoration: none;
     }
-    .offline .wrap .content
+     .content a:visited:hover
     {
-        padding-top: 15px;
-    }
-    .footer
+        color: #4c0033;
+        text-decoration: underline;
+    }   .footer
     {
         min-height: 100px;
         color: #797775;
         font: normal 9px/1 Verdana;
         text-align: center;
         padding-top: 40px;
+        background-color: #E6E7E8;
+        margin: 0;
     }
     .feedback
     {
-        float: right;
-        padding-right: 10px;
+        float: none;
+        position: absolute;
+        right: 15px;
+        bottom: 10px;
         font: normal 8px/1 Verdana;
         color: #B0ADAB;
     }
@@ -650,37 +544,244 @@
         color: #00732F;
         text-decoration: underline;
     }
+    .header:after, .footer:after, .breadcrumb:after, .wrap .content:after, .group:after
+    {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+    #nav-topright
+    {
+        height: 70px;
+    }
+
+    #nav-topright ul
+    {
+        list-style-type: none;
+        float: right;
+        width: 370px;
+        margin-top: 11px;
+    }
+
+    #nav-topright li
+    {
+        display: inline-block;
+        margin-right: 20px;
+        float: left;
+    }
+
+    #nav-topright li.nav-topright-last
+    {
+        margin-right: 0;
+    }
+
+    #nav-topright li a
+    {
+        background: transparent url(../images/sprites-combined.png) no-repeat;
+        height: 18px;
+        display: block;
+        overflow: hidden;
+        text-indent: -9999px;
+    }
+
+    #nav-topright li.nav-topright-home a
+    {
+        width: 65px;
+        background-position: -2px -91px;
+    }
+
+    #nav-topright li.nav-topright-home a:hover
+    {
+        background-position: -2px -117px;
+    }
+
+
+    #nav-topright li.nav-topright-dev a
+    {
+        width: 30px;
+        background-position: -76px -91px;
+    }
+
+    #nav-topright li.nav-topright-dev a:hover
+    {
+        background-position: -76px -117px;
+    }
+
+
+    #nav-topright li.nav-topright-labs a
+    {
+        width: 40px;
+        background-position: -114px -91px;
+    }
+
+    #nav-topright li.nav-topright-labs a:hover
+    {
+        background-position: -114px -117px;
+    }
+
+    #nav-topright li.nav-topright-doc a
+    {
+        width: 32px;
+        background-position: -162px -91px;
+    }
+
+    #nav-topright li.nav-topright-doc a:hover, #nav-topright li.nav-topright-doc-active a
+    {
+        background-position: -162px -117px;
+    }
+
+    #nav-topright li.nav-topright-blog a
+    {
+        width: 40px;
+        background-position: -203px -91px;
+    }
+
+    #nav-topright li.nav-topright-blog a:hover, #nav-topright li.nav-topright-blog-active a
+    {
+        background-position: -203px -117px;
+    }
+
+    #nav-topright li.nav-topright-shop a
+    {
+        width: 40px;
+        background-position: -252px -91px;
+    }
+
+    #nav-topright li.nav-topright-shop a:hover, #nav-topright li.nav-topright-shop-active a
+    {
+        background-position: -252px -117px;
+    }
+
+    #nav-logo
+    {
+        background: transparent url(../images/sprites-combined.png ) no-repeat 0 -225px;
+        left: -3px;
+        position: absolute;
+        width: 75px;
+        height: 75px;
+        top: 13px;
+    }
+    #nav-logo a
+    {
+        width: 75px;
+        height: 75px;
+        display: block;
+        text-indent: -9999px;
+        overflow: hidden;
+    }
+
+
+    .shortCut-topleft-inactive
+    {
+        padding-left: 3px;
+        background: transparent url( ../images/sprites-combined.png) no-repeat 0px -58px;
+        height: 20px;
+        width: 47px;
+    }
+    .shortCut-topleft-inactive span
+    {
+        font-variant: normal;
+    }
+	    .shortCut-topleft-inactive span a:hover,     .shortCut-topleft-active a:hover
+	{
+		text-decoration:none;
+	}
+    #shortCut
+    {
+        padding-top: 10px;
+        font-weight: bolder;
+        color: #b0adab;
+    }
+    #shortCut ul
+    {
+        list-style-type: none;
+        float: left;
+        width: 347px;
+        margin-left: 100px;
+    }
+    #shortCut li
+    {
+        display: inline-block;
+        margin-right: 25px;
+        float: left;
+        white-space: nowrap;
+    }
+    #shortCut li a
+    {
+        color: #b0adab;
+    }
+    #shortCut li a:hover
+    {
+        color: #44a51c;
+    }
+
     hr
     {
-        background-color: #e0e0e0;
+        background-color: #E6E6E6;
+        border: 1px solid #E6E6E6;
         height: 1px;
         width: 100%;
         text-align: left;
         margin: 15px 0px 15px 0px;
     }
-    
+
     .content .alignedsummary
     {
-        margin: 6px;
+        margin: 15px;
+    }
+    pre
+    {
+        border: 1px solid #DDDDDD;
+        margin: 0 20px 10px 10px;
+        padding: 20px 15px 20px 20px;
+        overflow-x: auto;
     }
-    /* tables */
     table, pre
     {
         -moz-border-radius: 7px 7px 7px 7px;
         background-color: #F6F6F6;
         border: 1px solid #E6E6E6;
         border-collapse: separate;
-        font-size: 11px; 
-        min-width: 395px; 
+        font-size: 11px;
+        /*min-width: 395px;*/
         margin-bottom: 25px;
+        display: inline-block;
+    }
+    thead
+    {
+        margin-top: 5px;
+		font:600 12px/1.2 Arial;
+    }
+    th
+    {
+        padding: 5px 15px 5px 15px;
+        background-color: #E1E1E1;
+      /*  border-bottom: 1px solid #E6E6E6;*/
+        border-left: 1px solid #E6E6E6;
+      /*  border-right: 1px solid #E6E6E6;*/
     }
-    thead{margin-top: 5px;}
-    th{ padding: 3px 6px 3px 6px; font-weight: bold; }
-    td{padding: 3px 6px 3px 10px;}
+    td
+    {
+        padding: 3px 15px 3px 20px;
+  /*      border-left: 1px solid #E6E6E6;
+        border-right: 1px solid #E6E6E6;*/
+    }
+    tr.odd td:hover,  tr.even td:hover
+    {
+    /*    border-right: 1px solid #C3C3C3;
+        border-left: 1px solid #C3C3C3;*/
+    }
+		
+	td.rightAlign
+	{
+        padding: 3px 15px 3px 10px;
+	}
     table tr.odd
     {
         border-left: 1px solid #E6E6E6;
-        background-color: #F6F6F6; 
+        background-color: #F6F6F6;
         color: #66666E;
     }
     table tr.even
@@ -689,14 +790,11 @@
         background-color: #ffffff;
         color: #66666E;
     }
-    table tr.odd:hover
-    {
-        background-color: #E6E6E6; 
-    }
-    table tr.even:hover
+    table tr.odd td:hover, table tr.even td:hover
     {
         background-color: #E6E6E6;
     }
+    		
     span.comment
     {
         color: #8B0000;
@@ -706,15 +804,7 @@
     {
         color: #254117;
     }
-    pre
-    {
-        -moz-border-radius:7px 7px 7px 7px;
-        background-color:#F6F6F6;
-        border:1px solid #DDDDDD;
-        margin:0 20px 10px 0;
-        padding:10px;
-        overflow-x:auto;
-    }
+
     .qmltype
     {
         text-align: center;
@@ -725,24 +815,28 @@
         float: right;
         color: #254117;
     }
-    .qmldefault.
+
+    .qmldefault
     {
         float: right;
         color: red;
     }
+
     .qmldoc
     {
     }
+
     *.qmlitem p
     {
     }
+
     #feedbackBox
     {
-        display:none;
-        -moz-border-radius:7px 7px 7px 7px;
-        border:1px solid #DDDDDD;
-        position:fixed;
-        top:100px;
+        display: none;
+        -moz-border-radius: 7px 7px 7px 7px;
+        border: 1px solid #DDDDDD;
+        position: fixed;
+        top: 100px;
         left: 33%;
         height: 190px;
         width: 400px;
@@ -750,29 +844,29 @@
         background-color: #e6e7e8;
         z-index: 4;
     }
-    #feedcloseX a
+    #feedcloseX 
     {
-        display:inline;
+        display: inline;
         padding: 5px 5px 0 0;
-        margin-bottom:3px;
+        margin-bottom: 3px;
         color: #363534;
-        font-weight:600;
+        font-weight: 600;
         float: right;
         text-decoration: none;
     }
+
     #feedbox
-    /* here */
     {
-        display:inline;
+        display: inline;
         width: 370px;
         height: 120px;
-        margin:0px 25px 10px 15px;
+        margin: 0px 25px 10px 15px;
     }
     #feedsubmit
     {
-        display:inline;
-        float:right;
-        margin:4px 32px 0 0;
+        display: inline;
+        float: right;
+        margin: 4px 32px 0 0;
     }
     #blurpage
     {
@@ -788,28 +882,77 @@
     }
     .toc
     {
-        float: right; 
-        -moz-border-radius:7px 7px 7px 7px;
-        background-color:#F6F6F6;
-        border:1px solid #DDDDDD;
-        margin:0 20px 10px 10px;
-        padding:10px 6px 10px 10px;
+        float: right;
+        -moz-border-radius: 7px 7px 7px 7px;
+        background-color: #F6F6F6;
+        border: 1px solid #DDDDDD;
+        margin: 0 20px 10px 10px;
+        padding: 20px 15px 20px 20px;
         height: auto;
         width: 200px;
     }
 
-    .toc h3
+    .toc h3, .generic a
     {
-        font:600 12px/1.2 Arial;
+        font: 600 12px/1.2 Arial;
     }
 
+	.generic{
+		max-width:75%;
+	}
+	.generic td{
+		padding:0;
+	}
+	
+	.generic .odd .alphaChar{
+        background-color: #F6F6F6;
+	}
+	
+	.generic .even .alphaChar{
+        background-color: #FFFFFF;
+	}
+
+	.alignedsummary{}
+	.propsummary{}
+	.memItemLeft{}
+	.memItemRight{}
+	.bottomAlign{}
+	.highlightedCode
+	{
+	margin:10px;
+	}
+	.LegaleseLeft{}
+	.valuelist{}
+	.annotated{}
+	.obsolete{}
+	.compat{}
+	.flags{}
+	.qmlsummary{}
+	.qmlitem{}
+	.qmlproto{}
+	.qmlname{}
+	.qmlreadonly{}
+	.qmldefault{}
+	.qmldoc{}
+	.qt-style{}
+	.redFont{}
+	code{}
+	
     .wrap .content .toc ul
     {
-        float: left;
-/*         padding: 6px; */
-        
+        padding-left: 0px;
+    }
+
+
+    .wrap .content .toc .level2
+    {
+        margin-left: 15px;
+    }
+
+    .wrap .content .toc .level3
+    {
+        margin-left: 30px;
     }
-  
 
     .content .toc li
     {
@@ -817,134 +960,220 @@
         background: url(../images/bullet_dn.png) no-repeat 0 5px;
     }
 
-    .relpage 
+    .relpage
     {
         -moz-border-radius: 7px 7px 7px 7px;
         border: 1px solid #DDDDDD;
         padding: 25px 25px;
-        clear:both;
+        clear: both;
     }
     .relpage ul
     {
         float: none;
         padding: 15px;
     }
-    .content .relpage li 
+    .content .relpage li
     {
         font: normal 11px/1.2 Verdana;
     }
-    /* edit */
     h3.fn, span.fn
     {
         background-color: #F6F6F6;
         border-width: 1px;
         border-style: solid;
         border-color: #E6E6E6;
-        font-weight: bold; 
-        padding-left: 3px;
-        /*  padding: 6px 0px 6px 10px;*/
-         /*     margin: 42px 0px 0px 0px;*/
+        font-weight: bold;
+		word-spacing:3px;
     }
-    /* edit */
 
-    .indexbox
-    {
-        width: 100%; 
-    }
-    .content .indexboxcont li
-    {
-        font: normal 600 13px/1 Verdana;
-    }
+	.functionIndex {
+	font-size:12pt;
+	word-spacing:10px;
+	margin-bottom:10px;
+    background-color: #F6F6F6;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #E6E6E6;
+	width:100%;
+	}
+	
+	.centerAlign
+	{
+	text-align:center;	
+	}
+	
+	.rightAlign
+	{
+	text-align:right;	
+	}
 
- /*   .indexbox a
-    {
-        color: #00732f;
-        text-decoration: none;
-    }*/
-    .indexbox a:hover, .indexbox a:visited:hover
-    {
-        color: #4c0033;
-        text-decoration: underline;
-    }
-    .indexbox a:visited
+	
+	.leftAlign
+	{
+	text-align:left;	
+	}
+
+	.topAlign{
+	vertical-align:top
+	}
+	
+	.functionIndex a{
+	display:inline-block;
+	}
+
+    /* start index box */
+    .indexbox
     {
-        color: #00732f;
-        text-decoration: none;
+        width: 100%;
+		display:inline-block;
     }
 
     .indexboxcont
     {
         display: block;
+       /* overflow: hidden;*/
     }
 
     .indexboxbar
     {
-        background: transparent url(     "../images/horBar.png" ) repeat-x left bottom;
+        background: transparent url(../images/horBar.png ) repeat-x left bottom;
         margin-bottom: 25px;
+     /*   background-image: none;
+        border-bottom: 1px solid #e2e2e2;*/
     }
 
     .indexboxcont .section
     {
-        display: inline-block; 
+        display: inline-block;
         width: 49%; 
         *width:42%;
         _width:42%;
         padding:0 2% 0 1%;
         vertical-align:top;
+
 }
 
     .indexboxcont .indexIcon
-    { 
+    {
         width: 11%; 
         *width:18%;
         _width:18%;
         overflow:hidden;
+
+}
+
+.indexboxcont .section {
+  float: left;
 }
+
     .indexboxcont .section p
-    { 
+    {
         padding-top: 20px;
         padding-bottom: 20px;
     }
-
     .indexboxcont .sectionlist
     {
         display: inline-block;
-        width: 33%;
-        margin-right: -2px;
-        vertical-align: top;
+		vertical-align:top;
+		width: 32.5%;
         padding: 0;
     }
-    .tricol
-    {
-       
-    }
     .indexboxcont .sectionlist ul
     {
-        padding-left: 15px;
         margin-bottom: 20px;
     }
-/*
+
     .indexboxcont .sectionlist ul li
     {
         line-height: 12px;
     }
-*/
-    .lastcol
+
+    .content .indexboxcont li
     {
-        display: inline-block;
-        vertical-align: top;
-        padding: 0;
-        max-width: 25%;
+        font: normal 600 13px/1 Verdana;
     }
 
-    .tricol .lastcol
+    .indexbox a:hover, .indexbox a:visited:hover
     {
-        margin-left:-6px;
+        color: #4c0033;
+        text-decoration: underline;
+    }
+
+    .indexbox a:visited
+    {
+        color: #00732f;
+        text-decoration: none;
+    }
+	
+	.indexbox .indexIcon {
+	width: 11%;
+	}
+
+	
+    .indexbox .indexIcon span
+    {
+        display: block;
+    }
+    
+    .indexbox.guide .indexIcon span
+    {
+        width: 96px;
+        height: 137px;
+        background: url(../images/sprites-combined.png) no-repeat -5px -376px;
+        padding: 0;
+    }
+    
+    .indexbox.tools .indexIcon span
+    {
+        width: 115px;
+        height: 137px;
+        background: url(../images/sprites-combined.png) no-repeat -111px -376px;
+        padding: 0;
+    }
+    .indexboxcont:after
+    {
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
     }
+	
+.sidebar .search form input.loading
+{
+        background:url("../images/spinner.gif") no-repeat scroll right center transparent;
+}
+
+    /* end of screen media */
+
+.flowList{
+vertical-align:top;
+}	
+.alphaChar{
+width:100%;
+background-color:#F6F6F6;
+border:1px solid #E6E6E6;
+font-size:12pt;
+padding-left:10px;
+margin-top:10px;
+margin-bottom:10px;
+}
 
-    /*.toc ul*/
+.flowList dl{
+}
+.flowList dd{
+display:inline-block;
+margin-left:10px;
+width:250px;
+}
+.wrap .content .flowList p{
+padding:0px;
+}
+pre.highlightedCode {
+	display: block;
+	overflow:hidden;
+}
 
-    /* end page elements */
 }
 /* end of screen media */
 
@@ -952,7 +1181,7 @@
 
 @media print
 {
-    .header, .footer, .toolbar, .feedback, .wrapper .hd, .wrapper .bd .sidebar, .wrapper .ft
+     input, textarea, .header, .footer, .toolbar, .feedback, .wrapper .hd, .wrapper .bd .sidebar, .wrapper .ft
     {
         display: none;
         background: none;
diff --git a/doc/templates/style/superfish.css b/doc/templates/style/superfish.css
new file mode 100644
index 0000000000..0cf0f7dc96
--- /dev/null
+++ b/doc/templates/style/superfish.css
@@ -0,0 +1,51 @@
+.sf-menu, .sf-menu * {
+	margin:			0;
+	padding:		0;
+	list-style:		none;
+}
+.sf-menu {
+	line-height:	1.0;
+}
+.sf-menu ul {
+	position:		absolute;
+	top:			-999em;
+	width:			10em; /* left offset of submenus need to match (see below) */
+}
+.sf-menu ul li {
+	width:			100%;
+}
+.sf-menu li:hover {
+	visibility:		inherit; /* fixes IE7 'sticky bug' */
+}
+.sf-menu li {
+	float:			left;
+	position:		relative;
+}
+.sf-menu a {
+	display:		block;
+	position:		relative;
+}
+.sf-menu li:hover ul,
+.sf-menu li.sfHover ul {
+	left:			0;
+	top:			2.5em; /* match top ul list item height */
+	z-index:		99;
+}
+ul.sf-menu li:hover li ul,
+ul.sf-menu li.sfHover li ul {
+	top:			-999em;
+}
+ul.sf-menu li li:hover ul,
+ul.sf-menu li li.sfHover ul {
+	left:			10em; /* match ul width */
+	top:			0;
+}
+ul.sf-menu li li:hover li ul,
+ul.sf-menu li li.sfHover li ul {
+	top:			-999em;
+}
+ul.sf-menu li li li:hover ul,
+ul.sf-menu li li li.sfHover ul {
+	left:			10em; /* match ul width */
+	top:			0;
+}
diff --git a/doc/templates/style/superfish_skin.css b/doc/templates/style/superfish_skin.css
new file mode 100644
index 0000000000..8d84827c41
--- /dev/null
+++ b/doc/templates/style/superfish_skin.css
@@ -0,0 +1,83 @@
+
+/*** DEMO SKIN ***/
+.sf-menu {
+	float:			left;
+	margin-bottom:	1em;
+}
+.sf-menu a {
+	border-left:	1px solid #fff;
+	border-top:		1px solid #CFDEFF;
+	padding: 		.75em 1em;
+	text-decoration:none;
+}
+.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
+	color:			#13a;
+}
+.sf-menu li {
+	background:		#BDD2FF;
+}
+.sf-menu li li {
+	background:		#AABDE6;
+}
+.sf-menu li li li {
+	background:		#9AAEDB;
+}
+.sf-menu li:hover, .sf-menu li.sfHover,
+.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
+	background:		#CFDEFF;
+	outline:		0;
+}
+
+/*** arrows **/
+.sf-menu a.sf-with-ul {
+	padding-right: 	2.25em;
+	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
+}
+.sf-sub-indicator {
+	position:		absolute;
+	display:		block;
+	right:			.75em;
+	top:			1.05em; /* IE6 only */
+	width:			10px;
+	height:			10px;
+	text-indent: 	-999em;
+	overflow:		hidden;
+	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
+}
+a > .sf-sub-indicator {  /* give all except IE6 the correct values */
+	top:			.8em;
+	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
+}
+/* apply hovers to modern browsers */
+a:focus > .sf-sub-indicator,
+a:hover > .sf-sub-indicator,
+a:active > .sf-sub-indicator,
+li:hover > a > .sf-sub-indicator,
+li.sfHover > a > .sf-sub-indicator {
+	background-position: -10px -100px; /* arrow hovers for modern browsers*/
+}
+
+/* point right for anchors in subs */
+.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
+.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
+/* apply hovers to modern browsers */
+.sf-menu ul a:focus > .sf-sub-indicator,
+.sf-menu ul a:hover > .sf-sub-indicator,
+.sf-menu ul a:active > .sf-sub-indicator,
+.sf-menu ul li:hover > a > .sf-sub-indicator,
+.sf-menu ul li.sfHover > a > .sf-sub-indicator {
+	background-position: -10px 0; /* arrow hovers for modern browsers*/
+}
+
+/*** shadows for all but IE6 ***/
+.sf-shadow ul {
+	background:	url('../images/shadow.png') no-repeat bottom right;
+	padding: 0 8px 9px 0;
+	-moz-border-radius-bottomleft: 17px;
+	-moz-border-radius-topright: 17px;
+	-webkit-border-top-right-radius: 17px;
+	-webkit-border-bottom-left-radius: 17px;
+}
+.sf-shadow ul.sf-shadow-off {
+	background: transparent;
+}