Search Results

Search found 904 results on 37 pages for 'ie6'.

Page 35/37 | < Previous Page | 31 32 33 34 35 36 37 | Next Page >

Undefined index: email in C:\wamp\www\emailvalidate.php on line 4

- by klari

I am new to Ajax. In my Ajax I get the following error message : Notice: Undefined index: address in C:\wamp\www\test\sample.php on line 11 I googled but I didn't get a solution for my specified issue. Here is what I did. HTML Form with Ajax (test1.php) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("mydiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","test2.php",true); xmlhttp.send(); } </script> </head> <body> <form id="form1" name="form1" method="post" action="sample.php"> <p> <label for="mail"></label> <input type="text" name="mail" id="mail" onblur="loadXMLDoc()" /> <input type="submit" name="submit" id="submit" value="Submit" /> </p> <p><div id = 'mydiv'></div></p> </form> </body> </html> test2.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <?php echo "Your Address is ".$_POST['address']; ?> </body> </html> I am sure it is very simple issue but I don't know how to solve it. Any help ?

Read the article
Simple jquery Fade Slideshow fails on certain browsers

- by cmay

So I have a simple slideshow on my website which just shows one image then shows another until it reaches the end or the user hits skip in which case it shows index.html. The site is served on apache2 with Django. The slideshow works perfectly on most machines, but certain machines it shows some images twice and other images not at all and the timing is off. I am using jquery 1.4.3. Below is the section of html where I push the image urls from the database to the javascript {% for image in latest_images %} {% thumbnail image.image_file "800x600" crop="center" as im %} <script>FadeImageList.push("{{im.url}}");</script> {% endthumbnail %} {% endfor %} Below is the full javascript file var FadeImageList = []; var fadeDuration = 2000; var fadeImgID = '#slideShow'; var homePageID = '#homePage'; var menuID = '#menu'; var skipFlag = 0; $(document).ready(function(){ $(homePageID).fadeOut(50); PlaySlideshow(FadeImageList); }); var PlaySlideshow = function(FadeImageList){ var newImgSrc = FadeImageList.shift(); $('#skip').click(function(){$('#loader').show();skipFlag = 1;}); if(((typeof(newImgSrc) !== "string") || (skipFlag === 1))){ EndSlideShow(); return; } else{ $(fadeImgID).fadeOut(fadeDuration,function(){ $(fadeImgID).attr('src', newImgSrc); $(fadeImgID).fadeIn(fadeDuration,function(){ PlaySlideshow(FadeImageList); }); }); } }; var EndSlideShow = function(fadeSettings){ $(fadeImgID).fadeOut(400,function(){ $(homePageID).fadeIn(400); $("#skip").fadeOut(400); $('#loader').hide(); }); }; The strange thing is I've had it work and fail on identically version numbered browsers on the same os but on different machines. It consistently either works or fails on a machine. I've had it fail in ie 7,8 firefox 3.6.3 and chrome. I've also had it succeed in ie6,7,8 firefox 3.6.3,3.4.2,3.1 and chrome.

Read the article
IE dynamic image caching issue?

- by rdevitt

I have an html page that is loading multiple iframes into which are embedded dynamic images created from a Tomcat server page (.jsp). This works as expected from Chrome and Firefox, but for some reason IE displays all of the images the same (as the first image). I've created an example: http://coupondiscounts.com/dev/jsImageTest.html jsImageTest.html -- This page simply loads 6 instances of the testImageFrame.html page in separate iframes one-at-a-time, using Javascript. testImageFrame.html -- This is the page loaded in all the iframes. It contains only a JavaScript block that writes out the current time and an img tag. The img is dynamically generated by a .jsp page on a different server. It should be a white box on a black background. In the box are the current time (from the Tomcat server using Java) and a randomly created double between 0 & 1. What happens (in IE): The page almost instantly loads four identical iframes. Depending on the speed of your machine, the JavaScript times may vary by a second or two. The images' times will all be the same as will be the random number. This holds true even for the last two iframes which are loaded 5 and 10 seconds after the others (using JavaScript setTimeout()). What should happen (as it does in Chrome and FF): The page loads the same 4 iframes, but the random numbers in the images will be different. The times in the images occasionally span a second as well. Anyone have a clue as to what's going on here? Is IE doing some strange caching? The image header has "no-cache," "no-store" and all that. I've tried it on IE6 and 7. You can use the "Next" button to create another iframe. In IE, the images are always the same. Notes: I don't really need iframes, just the images, but if I only use img tags, the problem appears in Chrome and FF as well. I also don't really need to load these iframes dynamically, I was just trying to abstract the issue further and allow a delayed load for the latter 2 images.

Read the article
Hoe to convert a JSON array of paths to images stored on a server into a javaScript array to display them? Using AJAX

- by MichaelF

I need for html file/ ajax code to take the JSON message and store the PATHS as a javaScript array. Then my buildImage function can display the first image in the array. I'm new to AJAX and believe my misunderstanding lies within the converting of the JSON to Javascript. I'm confused also about if my code creates a JSON array or object or either. I might need also to download a library to my app to understand JSON? Below is a PHP file loading the paths of the images. I believe json ecode is converting the PHP Array in a Json message. <?php include("mysqlconnect.php"); $select_query = "SELECT `ImagesPath` FROM `offerstbl` ORDER by `ImagesId` DESC"; $sql = mysql_query($select_query) or die(mysql_error()); $data = array(); while($row = mysql_fetch_array($sql,MYSQL_BOTH)){ $data[] = $row['ImagesPath']; } echo $images = json_encode($data); ?> Below is the script in is going to be loaded on an Cordova app. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/cascading.css"> <script> function importJson(str) { // console.log(typeof xmlhttp.responseText); if (str=="") { document.getElementById("content").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { //var images = JSON.parse(xmlhttp.responseText); document.getElementById("content").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","http://server/content.php"); xmlhttp.send(); } function buildImage(src) { var img = document.createElement('img') img.src = src alert("1"); document.getElementById('content').appendChild(img); } for (var i = 0; i < images.length; i++) { buildImage(images[i]); } </script> </head> <body onload= "importJson();"> <div class="contents" id="content" ></div> <img src="img/logo.png" height="10px" width="10px" onload= "buildImage();"> </body>

Read the article
Submitting form in php file accessed by Ajax?

- by dronnoc

Hi people, I am trying to figure out how to submit a form in a page being accessed by Ajax? here are some code snippets to help demonstrate what i am trying to say. HTML BODY - THIS IS WHAT THE USER WILL SEE. <html> <head> <script language="javascript" src="linktoajaxfile.js"> </head> <body onLoad="gotoPage(0)"> <div id="fillThis"> </div> </body> </html> AJAX FILE var xmlhttp function gotoPage(phase) { xmlhttp=GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="pageofstuffce.php"; url=url+"?stg="+phase; url=url+"&sid="+Math.random(); xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged() { if (xmlhttp.readyState==4) { document.getElementById("fillThis").innerHTML=xmlhttp.responseText; } } function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } PAGE OF DATA <?php $stage = $_GET['stg']; if($stage == 0) { echo '<a onClick="gotoPage(1)">click me</a>'; } elseif($stage == 1) { <form> <input type="text" name="name"> <input type="submit" name="submit"> </form> } elseif(somehow can reach here) { show data from form. } ?> Can anyone perhaps help me get past the form and display the data in the same page? Also, i have looked around, and i don't think anything around has what i need... correct me if i'm wrong though :) Thanks in advance, and i hope i didn't put in too much detail :) Dronnoc EDIT Forgot to mention what I've tried; I have tried submitting the form to itself (same file) and that destroyed the ajax link, and opened the page. i have also tried just having the button move the page onto another step, but the $_POST variable is empty... i am at a loss, so does anyone else have any ideas?

Read the article
Form Search Onkeyup event

- by Aryan

I Have a Form In which the form should automatically search when i complete entering the 10th character in the text field but the below code is searching for each n every character i enter in the text field . . . I just want the result after completing the 10th character not for each n every character . . i have used onkeyup event and i set that value to 10 but still it is searching for each n every character... please do help me <body OnKeyPress="return disableKeyPress(event)"> <section id="content" class="container_12 clearfix" data-sort=true> <center><table class='dynamic styled with-prev-next' data-table-tools='{'display':true}' align=center> <script> function disableEnterKey(e) { var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox return (key != 13); } function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","resdb.php?id="+str,true); xmlhttp.send(); } </script> <script type='text/javascript'> //<![CDATA[ $(window).load(function(){ $('#id').keyup(function(){ if(this.value.length ==10) }); });//]]> </script> <form id="form" method="post" name="form" > <tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr> <td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td> <tr><td><p align="center"></b> <input type="text" onkeyup="showUser(this.value)" onKeyPress="return disableEnterKey(event)" data-type="autocomplete" data-source="extras/autocomplete1.php" name="id" id="id" maxlength="10" placeholder=" Hall-Ticket Number">&emsp;</p></td></tr> </table> </center> </form> <center> <div id="txtHint"><b>Results will be displayed here</b></div> </center> </body>

Read the article
Tooltip arrow right

- by Tabatha M

I'm trying to make this tooltip arrow point to the right towards the link. CSS .tooltipside { position: relative; cursor: help; display: inline-block; outline: none; } .tooltipside span { visibility: hidden; position: absolute; bottom: -22px; z-index: 999; width: 52px; margin-left: -63px; padding: 2px; border: 1px solid #80a7ba; background-color: white; -moz-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset; text-shadow: 0 1px 0 rgba(255,255,255,.4); } .tooltipside:hover { border: 0; /* IE6 fix */ } .tooltipside:hover span { visibility: visible; } .tooltipside span:before, .tooltipside span:after { content: ""; position: absolute; z-index: 1000; bottom: -7px; left: 50%; margin-left: -8px; border-top: 8px solid #80a7ba; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 0; } .tooltipside span:before { border-top-color: #ccc; bottom: -8px; } ? The html is <a href='#' class='tooltipside'><span> <img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png' border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>? It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this? Thanks

Read the article
Week in Geek: New Security Flaw Confirmed for Internet Explorer Edition

- by Asian Angel

This week we learned how to use a PC to stay entertained while traveling for the holidays, create quality photo prints with free software, share links between any browser and any smartphone, create perfect Christmas photos using How-To Geek’s 10 best how-to photo guides, and had fun decorating Firefox with a collection of Holiday 2010 Personas themes. Photo by Repoort. Random Geek Links Photo by Asian Angel. Critical 0-Day Flaw Affects All Internet Explorer Versions, Microsoft Warns Microsoft has confirmed a zero-day vulnerability affecting all supported versions of Internet Explorer, including IE8, IE7 and IE6. Note: Article contains link to Microsoft Security Advisory detailing two work-arounds until a security update is released. Hackers targeting human rights, indie media groups Hackers are increasingly hitting the Web sites of human rights and independent media groups in an attempt to silence them, says a new study released this week by Harvard University’s Berkman Center for Internet & Society. OpenBSD: audits give no indication of back doors So far, the analyses of OpenBSD’s crypto and IPSec code have not provided any indication that the system contains back doors for listening to encrypted VPN connections. But the developers have already found two bugs during their current audits. Sophos: Beware Facebook’s new facial-recognition feature Facebook’s new facial recognition software might result in undesirable photos of users being circulated online, warned a security expert, who urged users to keep abreast with the social network’s privacy settings to prevent the abovementioned scenario from becoming a reality. Microsoft withdraws flawed Outlook update Microsoft has withdrawn update KB2412171 for Outlook 2007, released last Patch Tuesday, after a number of user complaints. Skype: Millions still without service Skype was still working to right itself going into the holiday weekend from a major outage that began this past Wednesday. Mozilla improves sync setup and WebGL in Firefox 4 beta 8 Firefox 4.0 beta 8 brings better support for WebGL and introduces an improved setup process for Firefox Sync that simplifies the steps for configuring the synchronization service across multiple devices. Chrome OS the litmus test for cloud The success or failure of Google’s browser-oriented Chrome OS will be the litmus test to decide if the cloud is capable of addressing user needs for content and services, according to a new Ovum report released Monday. FCC Net neutrality rules reach mobile apps The Federal Communications Commission (FCC) finally released its long-expected regulations on Thursday and the related explanations total a whopping 194 pages. One new item that was not previously disclosed: mobile wireless providers can’t block “applications that compete with the provider’s” own voice or video telephony services. KDE and the Document Foundation join Open Invention Network The KDE e.V. and the Document Foundation (TDF) have both joined the Open Invention Network (OIN) as licensees, expanding the organization’s roster of supporters. Report: SEC looks into Hurd’s ousting from HP The scandal surrounding Mark Hurd’s departure from the world’s largest technology company in August has officially drawn attention from the U.S. Securities and Exchange Commission. Report: Google requests delay of new Google TVs Google TV is apparently encountering a bit of static that has resulted in a programming change. Geek Video of the Week This week we have a double dose of geeky video goodness for you with the original Mac vs PC video and the trailer for the sequel. Photo courtesy of Peacer. Mac vs PC Photo courtesy of Peacer. Mac vs PC 2 Trailer Random TinyHacker Links Awesome Tools To Extract Audio From Video Here’s a list of really useful, and free tools to rip audio from videos. Getting Your iPhone Out of Recovery Mode Is your iPhone stuck in recovery mode? This tutorial will help you get it out of that state. Google Shared Spaces Quickly create a shared space and collaborate with friends online. McAfee Internet Security 2011 – Upgrade not worthy of a version change McAfee has released their 2011 version of security products. And as this review details, the upgrades are minimal when compared to their 2010 products. For more information, check out the review. 200 Countries Plotted Hans Rosling’s famous lectures combine enormous quantities of public data with a sport’s commentator’s style to reveal the story of the world’s past, present and future development. Now he explores stats in a way he has never done before – using augmented reality animation. Super User Questions Enjoy looking through this week’s batch of popular questions and answers from Super User. How to restore windows 7 to a known working state every time it boots? Is there an easy way to mass-transfer all files between two computers? Coffee spilled inside computer, damaged hard drive Computer does not boot after ram upgrade Keyboard not detected when trying to install Ubuntu 10.10 How-To Geek Weekly Article Recap Have you had a super busy week while preparing for the holiday weekend? Then here is your chance to get caught up on your reading with our five hottest articles for the week. Ask How-To Geek: Rescuing an Infected PC, Installing Bloat-free iTunes, and Taming a Crazy Trackpad How to Use the Avira Rescue CD to Clean Your Infected PC Eight Geektacular Christmas Projects for Your Day Off VirtualBox 4.0 Rocks Extensions and a Simplified GUI Ask the Readers: How Many Monitors Do You Use with Your Computer? One Year Ago on How-To Geek Here are more great articles from one year ago for you to read and enjoy during the holiday break. Enjoy Distraction-Free Writing with WriteMonkey Shutter is a State of Art Screenshot Tool for Ubuntu Get Hex & RGB Color Codes the Easy Way Find User Scripts for Your Favorite Websites the Easy Way Access Your Unsorted Bookmarks the Easy Way (Firefox) The Geek Note That “wraps” things up for this week and we hope that everyone enjoys the rest of their holiday break! Found a great tip during the break? Then be sure to send it in to us at [email protected]. Photo by ArSiSa7. Latest Features How-To Geek ETC How to Use the Avira Rescue CD to Clean Your Infected PC The Complete List of iPad Tips, Tricks, and Tutorials Is Your Desktop Printer More Expensive Than Printing Services? 20 OS X Keyboard Shortcuts You Might Not Know HTG Explains: Which Linux File System Should You Choose? HTG Explains: Why Does Photo Paper Improve Print Quality? Simon’s Cat Explores the Christmas Tree! [Video] The Outdoor Lights Scene from National Lampoon’s Christmas Vacation [Video] The Famous Home Alone Pizza Delivery Scene [Classic Video] Chronicles of Narnia: The Voyage of the Dawn Treader Theme for Windows 7 Cardinal and Rabbit Sharing a Tree on a Cold Winter Morning Wallpaper An Alternate Star Wars Christmas Special [Video]

Read the article
float right image pushes down text in table below in IE9 [migrated]

- by Cheers and hth. - Alf

I'm not a webmaster, not even a web developer, but I'm tasked with adding content to a Wordpress site developed by Someone Else(TM). Here's a page illustrating the problem: http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/. It shows up nice in Firefox: But in IE9 the floated picture pushed down the text in the table below, so that it looks rather awful: I found some related questions on the web, e.g. "CSS: Float right in IE doesn't work!" and "why does a floating DIV mess up table positioning?", and the suggestions there led me to set clear: none on the div around the table, the table itself, and then each individual tr and finally even on each individual td. I also set width="99%" on the table, and tried (but I don't know how correctly) to apply the IE6 quirk fix margin-right: -3px. So here's the content as written in Wordpress, including the unsuccessful attempted fixes: <h1><div style="float: right"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="200" height="242" class="size-full wp-image-671"/></a></div>Fiskekonkurranse i Hovden!</h1> <div style="background-color: #FAF0F0; clear: none;"><table width="99%" style="clear: none; right-margin: -3px;"> <tr style=" clear: none;"> <td style="text-align: left; clear: none;">Dato:</td> <td style="text-align: left; clear: none;">Lørdag 21.juli</td> </tr> <tr style=" clear: none;"> <td style="text-align: left; padding-left: 2em"; clear: none;>/ barn, Flytebrygga</td> <td style="text-align: left; clear: none;">15.00 – 16.00</td> </tr> <tr style=" clear: none;"> <td style="text-align: left; padding-left: 2em; clear: none;">/ voksne (over 12 år), Moloen</td> <td style="text-align: left; clear: none;">15.00 – 17.00 </td> </tr> <tr style=" clear: none;"> <td style="text-align: left; clear: none;">Sted:</td> <td style="text-align: left; clear: none;">Hovden</td> </tr> <tr style=" clear: none;"> <td style="text-align: left; clear: none;">Pris:</td> <td style="text-align: left; clear: none;">voksen (over 12 år) kr. 50,-, barn kr. 30,-</td> </tr style=" clear: none;"> <tr> <td style="text-align: left; clear: none;">Arrangør:</td> <td style="text-align: left; clear: none;">Hovden Grendelag</td> </tr> </table></div> Velkommen til den årlige Fiskekonkurransen i Hovden lørdag 21. juli! <a href="http://www.reginedagan.no/program/fiskekonkurranse-i-hovden/fiskekonkurranse-2011-bilde-nedskalertjpg/" rel="attachment wp-att-672"><img src="http://www.reginedagan.no/wp-content/uploads/2012/03/fiskekonkurranse-2011-bilde-nedskalertjpg.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" width="400" height="267" class="alignleft size-full wp-image-672" /></a>Det blir stangfiske fra moloen og egen barnekonkurranse fra flytebrygga. Premiering for størst fisk, størst antall kg og flest antall stk. Premiering for barn kl. 16:30 på moloen. Alle premieres. Premiering for voksne på festen om kvelden. Salg av pølser og brus, vafler og kaffe, samt sluker. <div style="clear: left; border: 1px dashed gray; padding: 1em;"> Fest på Hovden samfunnshus kl. 21 – 02. Musikk: «Mister West», Steinar Aarsnes, Andøya. CC. Salg av øl/vin og snacks. </div> VEL MØTT — SKITT FISKE! And the resulting HTML served to a browser (only the relevant first part): <div style="float: right;"><a href="http://www.reginedagan.no/?attachment_id=671"><img src="http://www.reginedagan.no/wp-content/uploads/2012/06/fiskekonkurranse-2011-bilde-3-nedskalert.jpg" alt="Fra fiskekonkurransen i 2011" title="Fra fiskekonkurransen i 2011" class="size-full wp-image-671" height="242" width="200"></a></div> <p>Fiskekonkurranse i Hovden!</p></h1> <div style="background-color: rgb(250, 240, 240); clear: none;"> <table style="clear: none;" width="99%"> <tbody><tr style="clear: none;"> <td style="text-align: left; clear: none;">Dato:</td> <td style="text-align: left; clear: none;">Lørdag 21.juli</td> </tr> The able to reproduce the effect with simpler code by setting clear: right on the table. However, I'm unable to reproduce the effect with default styling or with clear: none (as above). So it seems maybe it's something Wordpress does, or maybe it's something the theme thing or whatever it is does – but it's very similar to what others have observed, so there is strong indication that it's also a quirk in IE. Help?

Read the article
Twitter Bootstrap styling conflicts with plug-ins like jqGrid and other third part libraries

- by Renso

Issues:The concern is that the Twitter Bootstrap framework is that some of their css selectors are simply too generic and have incompatibility issues and conflicts with most third party plug-ins and css libraries, like jQuery-UI and jqGrid.My most pressing concern is only with the generic selector for the styling of "INPUT" controls.Some concerns:So basically anyone using BS (Bootstrap) will have to override styling 100% of the time on all input controls on all their web pages for all the plug-ins they use that render their own styling for input controls. This seems to chisel away any reason for using Bootstrap. Overriding Bootstrap css in this case seems illogical at best as it implies the BS styling is not correct or as granular as it is supposed to be. It also suggests you realize there is an issue here. Any person who has written a fair amount of css will realize that it is a mammoth task to to take an existing app, converting it to BS and then having to find all non-BS input controls and styling them all. The worst part is that there is no generic styling for this as each input control has a different source/context, some are regular tags and some belong to plug-ins, each with their own flavor of styling. For new web apps the challenge is not that different, each time you add a new plug-in you will have to test all facets of it, and I mean all of it, pop-ups, etc, that contain any kind of input control to make sure it is styled correctly. I am having a hard time seeing the benefits of BS in this context. So until the BS team addresses the issue, or not, you may be wondering what is the easiest solution.Help the community to drive this issue home by creating a new issue on github, see my entry here: https://github.com/twitter/bootstrap/issues/4008. As you can see I got some good and some negative feedback, but we all agree it is an issue. I do believe my solution below should be reverse compatible if the proper class declarations were followed as recommended by Bootstrap.The solution:Add a higher-level qualifier to the input selector, which may not break anything. Add "control-group" and "controls" classes as higher-level selectors, as they have to be declared inside those classes anyway as far as I understand the design approach of BS. So in my example below can modify the css without possible breaking anything, see the css at the bottom. I tested this briefly and seems to render just as expected. May not be complete as I only spent a few minutes on the css. Your feedback will be greatly appreciated. <div class="control-group"> <label title="" for="Contact_FirstName" class="control-label">First Name</label> <div class="controls"> <input type="text" value="" name="Contact.FirstName" id="Contact_FirstName" data-val-required="The Reader Contact&#39;s First Name is required" data-val-length-min="2" data-val-length-max="250" data-val-length="The maximum length allowed for the Reader Contact&#39;s First Name is 250 characters and must be two or more characters long" data-val="true" class="input-medium"> <span data-valmsg-replace="true" data-valmsg-for="Contact.FirstName" class="field-validation-valid"></span> </div></div>Here are the SCSS (SASS) updates. In stead of just including the updates I decided to include the entire bootstrap SCSS file so you can just copy-and-paste it in stead of trying to figure out what selectors have changed./*! * Bootstrap v2.0.4 * Enhacement by Renso Hollhumer * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. * Enhancement by Renso Hollhumer: To isolate styling of INPUT tags to the Bootstrap context only */.clearfix { *zoom: 1;}.clearfix:before,.clearfix:after { display: table; content: "";}.clearfix:after { clear: both;}.hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;}.input-block-level { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section { display: block;}audio,canvas,video { display: inline-block; *display: inline; *zoom: 1;}audio:not([controls]) { display: none;}html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}a:hover,a:active { outline: 0;}sub,sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline;}sup { top: -0.5em;}sub { bottom: -0.25em;}img { max-width: 100%; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;}#map_canvas img { max-width: none;}button,input,select,textarea { margin: 0; font-size: 100%; vertical-align: middle;}button,input { *overflow: visible; line-height: normal;}button::-moz-focus-inner,input::-moz-focus-inner { padding: 0; border: 0;}button,input[type="button"],input[type="reset"],input[type="submit"] { cursor: pointer; -webkit-appearance: button;}input[type="search"] { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none;}textarea { overflow: auto; vertical-align: top;}body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; color: #333333; background-color: #ffffff;}a { color: #0088cc; text-decoration: none;}a:hover { color: #005580; text-decoration: underline;}.row { margin-left: -20px; *zoom: 1;}.row:before,.row:after { display: table; content: "";}.row:after { clear: both;}[class*="span"] { float: left; margin-left: 20px;}.container,.navbar-fixed-top .container,.navbar-fixed-bottom .container { width: 940px;}.span12 { width: 940px;}.span11 { width: 860px;}.span10 { width: 780px;}.span9 { width: 700px;}.span8 { width: 620px;}.span7 { width: 540px;}.span6 { width: 460px;}.span5 { width: 380px;}.span4 { width: 300px;}.span3 { width: 220px;}.span2 { width: 140px;}.span1 { width: 60px;}.offset12 { margin-left: 980px;}.offset11 { margin-left: 900px;}.offset10 { margin-left: 820px;}.offset9 { margin-left: 740px;}.offset8 { margin-left: 660px;}.offset7 { margin-left: 580px;}.offset6 { margin-left: 500px;}.offset5 { margin-left: 420px;}.offset4 { margin-left: 340px;}.offset3 { margin-left: 260px;}.offset2 { margin-left: 180px;}.offset1 { margin-left: 100px;}.row-fluid { width: 100%; *zoom: 1;}.row-fluid:before,.row-fluid:after { display: table; content: "";}.row-fluid:after { clear: both;}.row-fluid [class*="span"] { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.127659574%; *margin-left: 2.0744680846382977%;}.row-fluid [class*="span"]:first-child { margin-left: 0;}.row-fluid .span12 { width: 99.99999998999999%; *width: 99.94680850063828%;}.row-fluid .span11 { width: 91.489361693%; *width: 91.4361702036383%;}.row-fluid .span10 { width: 82.97872339599999%; *width: 82.92553190663828%;}.row-fluid .span9 { width: 74.468085099%; *width: 74.4148936096383%;}.row-fluid .span8 { width: 65.95744680199999%; *width: 65.90425531263828%;}.row-fluid .span7 { width: 57.446808505%; *width: 57.3936170156383%;}.row-fluid .span6 { width: 48.93617020799999%; *width: 48.88297871863829%;}.row-fluid .span5 { width: 40.425531911%; *width: 40.3723404216383%;}.row-fluid .span4 { width: 31.914893614%; *width: 31.8617021246383%;}.row-fluid .span3 { width: 23.404255317%; *width: 23.3510638276383%;}.row-fluid .span2 { width: 14.89361702%; *width: 14.8404255306383%;}.row-fluid .span1 { width: 6.382978723%; *width: 6.329787233638298%;}.container { margin-right: auto; margin-left: auto; *zoom: 1;}.container:before,.container:after { display: table; content: "";}.container:after { clear: both;}.container-fluid { padding-right: 20px; padding-left: 20px; *zoom: 1;}.container-fluid:before,.container-fluid:after { display: table; content: "";}.container-fluid:after { clear: both;}p { margin: 0 0 9px;}p small { font-size: 11px; color: #999999;}.lead { margin-bottom: 18px; font-size: 20px; font-weight: 200; line-height: 27px;}h1,h2,h3,h4,h5,h6 { margin: 0; font-family: inherit; font-weight: bold; color: inherit; text-rendering: optimizelegibility;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small { font-weight: normal; color: #999999;}h1 { font-size: 30px; line-height: 36px;}h1 small { font-size: 18px;}h2 { font-size: 24px; line-height: 36px;}h2 small { font-size: 18px;}h3 { font-size: 18px; line-height: 27px;}h3 small { font-size: 14px;}h4,h5,h6 { line-height: 18px;}h4 { font-size: 14px;}h4 small { font-size: 12px;}h5 { font-size: 12px;}h6 { font-size: 11px; color: #999999; text-transform: uppercase;}.page-header { padding-bottom: 17px; margin: 18px 0; border-bottom: 1px solid #eeeeee;}.page-header h1 { line-height: 1;}ul,ol { padding: 0; margin: 0 0 9px 25px;}ul ul,ul ol,ol ol,ol ul { margin-bottom: 0;}ul { list-style: disc;}ol { list-style: decimal;}li { line-height: 18px;}ul.unstyled,ol.unstyled { margin-left: 0; list-style: none;}dl { margin-bottom: 18px;}dt,dd { line-height: 18px;}dt { font-weight: bold; line-height: 17px;}dd { margin-left: 9px;}.dl-horizontal dt { float: left; width: 120px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.dl-horizontal dd { margin-left: 130px;}hr { margin: 18px 0; border: 0; border-top: 1px solid #eeeeee; border-bottom: 1px solid #ffffff;}strong { font-weight: bold;}em { font-style: italic;}.muted { color: #999999;}abbr[title] { cursor: help; border-bottom: 1px dotted #999999;}abbr.initialism { font-size: 90%; text-transform: uppercase;}blockquote { padding: 0 0 0 15px; margin: 0 0 18px; border-left: 5px solid #eeeeee;}blockquote p { margin-bottom: 0; font-size: 16px; font-weight: 300; line-height: 22.5px;}blockquote small { display: block; line-height: 18px; color: #999999;}blockquote small:before { content: '\2014 \00A0';}blockquote.pull-right { float: right; padding-right: 15px; padding-left: 0; border-right: 5px solid #eeeeee; border-left: 0;}blockquote.pull-right p,blockquote.pull-right small { text-align: right;}q:before,q:after,blockquote:before,blockquote:after { content: "";}address { display: block; margin-bottom: 18px; font-style: normal; line-height: 18px;}small { font-size: 100%;}cite { font-style: normal;}code,pre { padding: 0 3px 2px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: #333333; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}code { padding: 2px 4px; color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8;}pre { display: block; padding: 8.5px; margin: 0 0 9px; font-size: 12.025px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}pre.prettyprint { margin-bottom: 18px;}pre code { padding: 0; color: inherit; background-color: transparent; border: 0;}.pre-scrollable { max-height: 340px; overflow-y: scroll;}.label,.badge { font-size: 10.998px; font-weight: bold; line-height: 14px; color: #ffffff; vertical-align: baseline; white-space: nowrap; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #999999;}.label { padding: 1px 4px 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}.badge { padding: 1px 9px 2px; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;}a.label:hover,a.badge:hover { color: #ffffff; text-decoration: none; cursor: pointer;}.label-important,.badge-important { background-color: #b94a48;}.label-important[href],.badge-important[href] { background-color: #953b39;}.label-warning,.badge-warning { background-color: #f89406;}.label-warning[href],.badge-warning[href] { background-color: #c67605;}.label-success,.badge-success { background-color: #468847;}.label-success[href],.badge-success[href] { background-color: #356635;}.label-info,.badge-info { background-color: #3a87ad;}.label-info[href],.badge-info[href] { background-color: #2d6987;}.label-inverse,.badge-inverse { background-color: #333333;}.label-inverse[href],.badge-inverse[href] { background-color: #1a1a1a;}table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0;}.table { width: 100%; margin-bottom: 18px;}.table th,.table td { padding: 8px; line-height: 18px; text-align: left; vertical-align: top; border-top: 1px solid #dddddd;}.table th { font-weight: bold;}.table thead th { vertical-align: bottom;}.table caption + thead tr:first-child th,.table caption + thead tr:first-child td,.table colgroup + thead tr:first-child th,.table colgroup + thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td { border-top: 0;}.table tbody + tbody { border-top: 2px solid #dddddd;}.table-condensed th,.table-condensed td { padding: 4px 5px;}.table-bordered { border: 1px solid #dddddd; border-collapse: separate; *border-collapse: collapsed; border-left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.table-bordered th,.table-bordered td { border-left: 1px solid #dddddd;}.table-bordered caption + thead tr:first-child th,.table-bordered caption + tbody tr:first-child th,.table-bordered caption + tbody tr:first-child td,.table-bordered colgroup + thead tr:first-child th,.table-bordered colgroup + tbody tr:first-child th,.table-bordered colgroup + tbody tr:first-child td,.table-bordered thead:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child th,.table-bordered tbody:first-child tr:first-child td { border-top: 0;}.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px;}.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px;}.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child { -webkit-border-radius: 0 0 0 4px; -moz-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px;}.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px;}.table-striped tbody tr:nth-child(odd) td,.table-striped tbody tr:nth-child(odd) th { background-color: #f9f9f9;}.table tbody tr:hover td,.table tbody tr:hover th { background-color: #f5f5f5;}table .span1 { float: none; width: 44px; margin-left: 0;}table .span2 { float: none; width: 124px; margin-left: 0;}table .span3 { float: none; width: 204px; margin-left: 0;}table .span4 { float: none; width: 284px; margin-left: 0;}table .span5 { float: none; width: 364px; margin-left: 0;}table .span6 { float: none; width: 444px; margin-left: 0;}table .span7 { float: none; width: 524px; margin-left: 0;}table .span8 { float: none; width: 604px; margin-left: 0;}table .span9 { float: none; width: 684px; margin-left: 0;}table .span10 { float: none; width: 764px; margin-left: 0;}table .span11 { float: none; width: 844px; margin-left: 0;}table .span12 { float: none; width: 924px; margin-left: 0;}table .span13 { float: none; width: 1004px; margin-left: 0;}table .span14 { float: none; width: 1084px; margin-left: 0;}table .span15 { float: none; width: 1164px; margin-left: 0;}table .span16 { float: none; width: 1244px; margin-left: 0;}table .span17 { float: none; width: 1324px; margin-left: 0;}table .span18 { float: none; width: 1404px; margin-left: 0;}table .span19 { float: none; width: 1484px; margin-left: 0;}table .span20 { float: none; width: 1564px; margin-left: 0;}table .span21 { float: none; width: 1644px; margin-left: 0;}table .span22 { float: none; width: 1724px; margin-left: 0;}table .span23 { float: none; width: 1804px; margin-left: 0;}table .span24 { float: none; width: 1884px; margin-left: 0;}form { margin: 0 0 18px;}fieldset { padding: 0; margin: 0; border: 0;}legend { display: block; width: 100%; padding: 0; margin-bottom: 27px; font-size: 19.5px; line-height: 36px; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5;}legend small { font-size: 13.5px; color: #999999;}.control-group .controls { label, input, button, select, textarea { font-size: 13px; font-weight: normal; line-height: 18px; }}.control-group .controls { input, button, select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }}label { display: block; margin-bottom: 5px;}.control-group .controls { select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; height: 18px; padding: 4px; margin-bottom: 9px; font-size: 13px; line-height: 18px; color: #555555; }}.control-group .controls { input, textarea { width: 210px; }}.control-group .controls { textarea { height: auto; }}.control-group .controls { textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { background-color: #ffffff; border: 1px solid #cccccc; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -moz-transition: border linear 0.2s, box-shadow linear 0.2s; -ms-transition: border linear 0.2s, box-shadow linear 0.2s; -o-transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s; }}.control-group .controls { textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); }}.control-group .controls { input[type="radio"], input[type="checkbox"] { margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; cursor: pointer; }}.control-group .controls { input[type="submit"], input[type="reset"], input[type="button"], input[type="radio"], input[type="checkbox"] { width: auto; }}.uneditable-textarea { width: auto; height: auto;}.control-group .controls { select, input[type="file"] { height: 28px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */ line-height: 28px; }}.control-group .controls { select { width: 220px; border: 1px solid #bbb; }}.control-group .controls { select[multiple], select[size] { height: auto; }}.control-group .controls { select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }}.radio,.checkbox { min-height: 18px; padding-left: 18px;}.radio input[type="radio"],.checkbox input[type="checkbox"] { float: left; margin-left: -18px;}.controls > .radio:first-child,.controls > .checkbox:first-child { padding-top: 5px;}.radio.inline,.checkbox.inline { display: inline-block; padding-top: 5px; margin-bottom: 0; vertical-align: middle;}.radio.inline + .radio.inline,.checkbox.inline + .checkbox.inline { margin-left: 10px;}.control-group .controls { .input-mini { width: 60px; }}.control-group .controls { .input-small { width: 90px; }}.control-group .controls { .input-medium { width: 150px; }}.control-group .controls { .input-large { width: 210px; }}.input-xlarge { .input-xlarge { width: 270px; }}.input-xxlarge { .input-xxlarge { width: 530px; }}.control-group .controls { input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; }}.input-append input[class*="span"],.input-append .uneditable-input[class*="span"],.input-prepend input[class*="span"],.input-prepend .uneditable-input[class*="span"],.row-fluid .input-prepend [class*="span"],.row-fluid .input-append [class*="span"] { display: inline-block;}.control-group .controls { input, textarea, .uneditable-input { margin-left: 0; }}input.span12, textarea.span12, .uneditable-input.span12 { width: 930px;}input.span11, textarea.span11, .uneditable-input.span11 { width: 850px;}input.span10, textarea.span10, .uneditable-input.span10 { width: 770px;}input.span9, textarea.span9, .uneditable-input.span9 { width: 690px;}input.span8, textarea.span8, .uneditable-input.span8 { width: 610px;}input.span7, textarea.span7, .uneditable-input.span7 { width: 530px;}input.span6, textarea.span6, .uneditable-input.span6 { width: 450px;}input.span5, textarea.span5, .uneditable-input.span5 { width: 370px;}input.span4, textarea.span4, .uneditable-input.span4 { width: 290px;}input.span3, textarea.span3, .uneditable-input.span3 { width: 210px;}input.span2, textarea.span2, .uneditable-input.span2 { width: 130px;}input.span1, textarea.span1, .uneditable-input.span1 { width: 50px;}input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly] { cursor: not-allowed; background-color: #eeeeee; border-color: #ddd;}input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly] { background-color: transparent;}.control-group.warning > label,.control-group.warning .help-block,.control-group.warning .help-inline { color: #c09853;}.control-group.warning .checkbox,.control-group.warning .radio,.control-group.warning input,.control-group.warning select,.control-group.warning textarea { color: #c09853; border-color: #c09853;}.control-group.warning .checkbox:focus,.control-group.warning .radio:focus,.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus { border-color: #a47e3c; -webkit-box-shadow: 0 0 6px #dbc59e; -moz-box-shadow: 0 0 6px #dbc59e; box-shadow: 0 0 6px #dbc59e;}.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on { color: #c09853; background-color: #fcf8e3; border-color: #c09853;}.control-group.error > label,.control-group.error .help-block,.control-group.error .help-inline { color: #b94a48;}.control-group.error .checkbox,.control-group.error .radio,.control-group.error input,.control-group.error select,.control-group.error textarea { color: #b94a48; border-color: #b94a48;}.control-group.error .checkbox:focus,.control-group.error .radio:focus,.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus { border-color: #953b39; -webkit-box-shadow: 0 0 6px #d59392; -moz-box-shadow: 0 0 6px #d59392; box-shadow: 0 0 6px #d59392;}.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on { color: #b94a48; background-color: #f2dede; border-color: #b94a48;}.control-group.success > label,.control-group.success .help-block,.control-group.success .help-inline { color: #468847;}.control-group.success .checkbox,.control-group.success .radio,.control-group.success input,.control-group.success select,.control-group.success textarea { color: #468847; border-color: #468847;}.control-group.success .checkbox:focus,.control-group.success .radio:focus,.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus { border-color: #356635; -webkit-box-shadow: 0 0 6px #7aba7b; -moz-box-shadow: 0 0 6px #7aba7b; box-shadow: 0 0 6px #7aba7b;}.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on { color: #468847; background-color: #dff0d8; border-color: #468847;}input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid { color: #b94a48; border-color: #ee5f5b;}input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus { border-color: #e9322d; -webkit-box-shadow: 0 0 6px #f8b9b7; -moz-box-shadow: 0 0 6px #f8b9b7; box-shadow: 0 0 6px #f8b9b7;}.form-actions { padding: 17px 20px 18px; margin-top: 18px; margin-bottom: 18px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; *zoom: 1;}.form-actions:before,.form-actions:after { display: table; content: "";}.form-actions:after { clear: both;}.uneditable-input { overflow: hidden; white-space: nowrap; cursor: not-allowed; background-color: #ffffff; border-color: #eee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);}:-moz-placeholder { color: #999999;}:-ms-input-placeholder { color: #999999;}::-webkit-input-placeholder { color: #999999;}.help-block,.help-inline { color: #555555;}.help-block { display: block; margin-bottom: 9px;}.help-inline { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; vertical-align: middle; padding-left: 5px;}.input-prepend,.input-append { margin-bottom: 5px;}.input-prepend input,.input-append input,.input-prepend select,.input-append select,.input-prepend .uneditable-input,.input-append .uneditable-input { position: relative; margin-bottom: 0; *margin-left: 0; vertical-align: middle; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}.input-prepend input:focus,.input-append input:focus,.input-prepend select:focus,.input-append select:focus,.input-prepend .uneditable-input:focus,.input-append .uneditable-input:focus { z-index: 2;}.input-prepend .uneditable-input,.input-append .uneditable-input { border-left-color: #ccc;}.input-prepend .add-on,.input-append .add-on { display: inline-block; width: auto; height: 18px; min-width: 16px; padding: 4px 5px; font-weight: normal; line-height: 18px; text-align: center; text-shadow: 0 1px 0 #ffffff; vertical-align: middle; background-color: #eeeeee; border: 1px solid #ccc;}.input-prepend .add-on,.input-append .add-on,.input-prepend .btn,.input-append .btn { margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}.input-prepend .active,.input-append .active { background-color: #a9dba9; border-color: #46a546;}.input-prepend .add-on,.input-prepend .btn { margin-right: -1px;}.input-prepend .add-on:first-child,.input-prepend .btn:first-child { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;}.input-append input,.input-append select,.input-append .uneditable-input { -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;}.input-append .uneditable-input { border-right-color: #ccc; border-left-color: #eee;}.input-append .add-on:last-child,.input-append .btn:last-child { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}.input-prepend.input-append input,.input-prepend.input-append select,.input-prepend.input-append .uneditable-input { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}.input-prepend.input-append .add-on:first-child,.input-prepend.input-append .btn:first-child { margin-right: -1px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;}.input-prepend.input-append .add-on:last-child,.input-prepend.input-append .btn:last-child { margin-left: -1px; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px;}.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .help-inline,.form-inline .help-inline,.form-horizontal .help-inline,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input,.form-search .input-prepend,.form-inline .input-prepend,.form-horizontal .input-prepend,.form-search .input-append,.form-inline .input-append,.form-horizontal .input-append { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; margin-bottom: 0;}.form-search .hide,.form-inline .hide,.form-horizontal .hide { display: none;}.form-search label,.form-inline label { display: inline-block;}.form-search .input-append,.form-inline .input-append,.form-search .input-prepend,.form-inline .input-prepend { margin-bottom: 0;}.form-search .radio,.form-search .checkbox,.form-inline .radio,.form-inline .checkbox { padding-left: 0; margin-bottom: 0; vertical-align: middle;}.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"],.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"] { float: left; margin-right: 3px; margin-left: 0;}.control-group { margin-bottom: 9px;}legend + .control-group { margin-top: 18px; -webkit-margin-top-collapse: separate;}.form-horizontal .control-group { margin-bottom: 18px; *zoom: 1;}.form-horizontal .control-group:before,.form-horizontal .control-group:after { display: table; content: "";}.form-horizontal .control-group:after { clear: both;}.form-horizontal .control-label { float: left; width: 140px; padding-top: 5px; text-align: right;}.form-horizontal .controls { *display: inline-block; *padding-left: 20px; margin-left: 160px; *margin-left: 0;}.form-horizontal .controls:first-child { *padding-left: 160px;}.form-horizontal .help-block { margin-top: 9px; margin-bottom: 0;}.form-horizontal .form-actions { padding-left: 160px;}.btn { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; *line-height: 20px; color: #333333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; cursor: pointer; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #e6e6e6; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); border: 1px solid #cccccc; *border: 0; border-bottom-color: #b3b3b3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; *margin-left: .3em; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);}.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color: #e6e6e6; *background-color: #d9d9d9;}.btn:active,.btn.active { background-color: #cccccc \9;}.btn:first-child { *margin-left: 0;}.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; *background-color: #d9d9d9; /* Buttons in IE7 don't get borders, so darken on hover */ background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear;}.btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}.btn.active,.btn:active { background-color: #e6e6e6; background-color: #d9d9d9 \9; background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}.btn.disabled,.btn[disabled] { cursor: default; background-color: #e6e6e6; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.btn-large [class^="icon-"] { margin-top: 1px;}.btn-small { padding: 5px 9px; font-size: 11px; line-height: 16px;}.btn-small [class^="icon-"] { margin-top: -1px;}.btn-mini { padding: 2px 6px; font-size: 11px; line-height: 14px;}.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover,.btn-inverse,.btn-inverse:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active { color: rgba(255, 255, 255, 0.75);}.btn { border-color: #ccc; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}.btn-primary { background-color: #0074cc; background-image: -moz-linear-gradient(top, #0088cc, #0055cc); background-image: -ms-linear-gradient(top, #0088cc, #0055cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0055cc); background-image: -o-linear-gradient(top, #0088cc, #0055cc); background-image: linear-gradient(top, #0088cc, #0055cc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0); border-color: #0055cc #0055cc #003580; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #0055cc; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] { background-color: #0055cc; *background-color: #004ab3;}.btn-primary:active,.btn-primary.active { background-color: #004099 \9;}.btn-warning { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0); border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #f89406; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled] { background-color: #f89406; *background-color: #df8505;}.btn-warning:active,.btn-warning.active { background-color: #c67605 \9;}.btn-danger { background-color: #da4f49; background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: -ms-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); background-image: linear-gradient(top, #ee5f5b, #bd362f); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', GradientType=0); border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #bd362f; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled] { background-color: #bd362f; *background-color: #a9302a;}.btn-danger:active,.btn-danger.active { background-color: #942a25 \9;}.btn-success { background-color: #5bb75b; background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -ms-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(top, #62c462, #51a351); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', GradientType=0); border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #51a351; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled] { background-color: #51a351; *background-color: #499249;}.btn-success:active,.btn-success.active { background-color: #408140 \9;}.btn-info { background-color: #49afcd; background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); background-image: linear-gradient(top, #5bc0de, #2f96b4); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0); border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #2f96b4; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled] { background-color: #2f96b4; *background-color: #2a85a0;}.btn-info:active,.btn-info.active { background-color: #24748c \9;}.btn-inverse { background-color: #414141; background-image: -moz-linear-gradient(top, #555555, #222222); background-image: -ms-linear-gradient(top, #555555, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#222222)); background-image: -webkit-linear-gradient(top, #555555, #222222); background-image: -o-linear-gradient(top, #555555, #222222); background-image: linear-gradient(top, #555555, #222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#222222', GradientType=0); border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #222222; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled] { background-color: #222222; *background-color: #151515;}.btn-inverse:active,.btn-inverse.active { background-color: #080808 \9;}button.btn,input[type="submit"].btn { *padding-top: 2px; *padding-bottom: 2px;}button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner { padding: 0; border: 0;}button.btn.btn-large,input[type="submit"].btn.btn-large { *padding-top: 7px; *padding-bottom: 7px;}button.btn.btn-small,input[type="submit"].btn.btn-small { *padding-top: 3px; *padding-bottom: 3px;}button.btn.btn-mini,input[type="submit"].btn.btn-mini { *padding-top: 1px; *padding-bottom: 1px;}.btn-group { position: relative; *zoom: 1; *margin-left: .3em;}.btn-group:before,.btn-group:after { display: table; content: "";}.btn-group:after { clear: both;}.btn-group:first-child { *margin-left: 0;}.btn-group + .btn-group { margin-left: 5px;}.btn-toolbar { margin-top: 9px; margin-bottom: 9px;}.btn-toolbar .btn-group { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1;}.btn-group > .btn { position: relative; float: left; margin-left: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}.btn-group > .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px;}.btn-group > .btn:last-child,.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px;}.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px;}.btn-group > .btn.large:last-child,.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px;}.btn-group > .btn:hover,.btn-group > .btn:focus,.btn-group > .btn:active,.btn-group > .btn.active { z-index: 2;}.btn-group .dropdown-toggle:active,.btn-group.open .dropdown-toggle { outline: 0;}.btn-group > .dropdown-toggle { padding-left: 8px; padding-right: 8px; -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); *padding-top: 4px; *padding-bottom: 4px;}.btn-group > .btn-mini.dropdown-toggle { padding-left: 5px; padding-right: 5px;}.btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px;}.btn-group > .btn-large.dropdown-toggle { padding-left: 12px; padding-right: 12px;}.btn-group.open .dropdown-toggle { background-image: none; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);}.btn-group.open .btn.dropdown-toggle { background-color: #e6e6e6;}.btn-group.open .btn-primary.dropdown-toggle { background-color: #0055cc;}.btn-group.open .btn-warning.dropdown-toggle { background-color: #f89406;}.btn-group.open .btn-danger.dropdown-toggle { background-color: #bd362f;}.btn-group.open .btn-success.dropdown-toggle { background-color: #51a351;}.btn-group.open .btn-info.dropdown-toggle { background-color: #2f96b4;}.btn-group.open .btn-inverse.dropdown-toggle { background-color: #222222;}.btn .caret { margin-top: 7px; margin-left: 0;}.btn:hover .caret,.open.btn-group .caret { opacity: 1; filter: alpha(opacity=100);}.btn-mini .caret { margin-top: 5px;}.btn-small .caret { margin-top: 6px;}.btn-large .caret { margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px;}.dropup .btn-large .caret { border-bottom: 5px solid #000000; border-top: 0;}.btn-primary .caret,.btn-warning .caret,.btn-danger .caret,.btn-info .caret,.btn-success .caret,.btn-inverse .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 0.75; filter: alpha(opacity=75);}.nav { margin-left: 0; margin-bottom: 18px; list-style: none;}.nav > li > a { display: block;}.nav > li > a:hover { text-decoration: none; background-color: #eeeeee;}.nav > .pull-right { float: right;}.nav .nav-header { display: block; padding: 3px 15px; font-size: 11px; font-weight: bold; line-height: 18px; color: #999999; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase;}.nav li + .nav-header { margin-top: 9px;}.nav-list { padding-left: 15px; padding-right: 15px; margin-bottom: 0;}.nav-list > li > a,.nav-list .nav-header { margin-left: -15px; margin-right: -15px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);}.nav-list > li > a { padding: 3px 15px;}.nav-list > .active > a,.nav-list > .active > a:hover { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #0088cc;}.nav-list [class^="icon-"] { margin-right: 2px;}.nav-list .divider { *width: 100%; height: 1px; margin: 8px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff;}.nav-tabs,.nav-pills { *zoom: 1;}.nav-tabs:before,.nav-pills:before,.nav-tabs:after,.nav-pills:after { display: table; content: "";}.nav-tabs:after,.nav-pills:after { clear: both;}.nav-tabs > li,.nav-pills > li { float: left;}.nav-tabs > li > a,.nav-pills > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; line-height: 14px;}.nav-tabs { border-bottom: 1px solid #ddd;}.nav-tabs > li { margin-bottom: -1px;}.nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; line-height: 18px; border: 1px solid transparent; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;}.nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd;}.nav-tabs > .active > a,.nav-tabs > .active > a:hover { color: #555555; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default;}.nav-pills > li > a { padding-top: 8px; padding-bottom: 8px; margin-top: 2px; margin-bottom: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}.nav-pills > .active > a,.nav-pills > .active > a:hover { color: #ffffff; background-color: #0088cc;}.nav-stacked > li { float: none;}.nav-stacked > li > a { margin-right: 0;}.nav-tabs.nav-stacked { border-bottom: 0;}.nav-tabs.nav-stacked > li > a { border: 1px solid #ddd; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}.nav-tabs.nav-stacked > li:first-child > a { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;}.nav-tabs.nav-stacked > li:last-child > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}.nav-tabs.nav-stacked > li > a:hover { border-color: #ddd; z-index: 2;}.nav-pills.nav-stacked > li > a { margin-bottom: 3px;}.nav-pills.nav-stacked > li:last-child > a { margin-bottom: 1px;}.nav-tabs .dropdown-menu { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;}.nav-pills .dropdown-menu { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.nav-tabs .dropdown-toggle .caret,.nav-pills .dropdown-toggle .caret { border-top-color: #0088cc; border-bottom-color: #0088cc; margin-top: 6px;}.nav-tabs .dropdown-toggle:hover .caret,.nav-pills .dropdown-toggle:hover .caret { border-top-color: #005580; border-bottom-color: #005580;}.nav-tabs .active .dropdown-toggle .caret,.nav-pills .active .dropdown-toggle .caret { border-top-color: #333333; border-bottom-color: #333333;}.nav > .dropdown.active > a:hover { color: #000000; cursor: pointer;}.nav-tabs .open .dropdown-toggle,.nav-pills .open .dropdown-toggle,.nav > li.dropdown.open.active > a:hover { color: #ffffff; background-color: #999999; border-color: #999999;}.nav li.dropdown.open .caret,.nav li.dropdown.open.active .caret,.nav li.dropdown.open a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; opacity: 1; filter: alpha(opacity=100);}.tabs-stacked .open > a:hover { border-color: #999999;}.tabbable { *zoom: 1;}.tabbable:before,.tabbable:after { display: table; content: "";}.tabbable:after { clear: both;}.tab-content { overflow: auto;}.tabs-below > .nav-tabs,.tabs-right > .nav-tabs,.tabs-left > .nav-tabs { border-bottom: 0;}.tab-content > .tab-pane,.pill-content > .pill-pane { display: none;}.tab-content > .active,.pill-content > .active { display: block;}.tabs-below > .nav-tabs { border-top: 1px solid #ddd;}.tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0;}.tabs-below > .nav-tabs > li > a { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;}.tabs-below > .nav-tabs > li > a:hover { border-bottom-color: transparent; border-top-color: #ddd;}.tabs-below > .nav-tabs > .active > a,.tabs-below > .nav-tabs > .active > a:hover { border-color: transparent #ddd #ddd #ddd;}.tabs-left > .nav-tabs > li,.tabs-right > .nav-tabs > li { float: none;}.tabs-left > .nav-tabs > li > a,.tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px;}.tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd;}.tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}.tabs-left > .nav-tabs > li > a:hover { border-color: #eeeeee #dddddd #eeeeee #eeeeee;}.tabs-left > .nav-tabs .active > a,.tabs-left > .nav-tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff;}.tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd;}.tabs-right > .nav-tabs > li > a { margin-left: -1px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;}.tabs-right > .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #eeeeee #dddddd;}.tabs-right > .nav-tabs .active > a,.tabs-right > .nav-tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; *border-left-color: #ffffff;}.navbar { *position: relative; *z-index: 2; overflow: visible; margin-bottom: 18px;}.navbar-inner { min-height: 40px; padding-left: 20px; padding-right: 20px; background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);}.navbar .container { width: auto;}.nav-collapse.collapse { height: auto;}.navbar { color: #999999;}.navbar .brand:hover { text-decoration: none;}.navbar .brand { float: left; display: block; padding: 8px 20px 12px; margin-left: -20px; font-size: 20px; font-weight: 200; line-height: 1; color: #999999;}.navbar .navbar-text { margin-bottom: 0; line-height: 40px;}.navbar .navbar-link { color: #999999;}.navbar .navbar-link:hover { color: #ffffff;}.navbar .btn,.navbar .btn-group { margin-top: 5px;}.navbar .btn-group .btn { margin: 0;}.navbar-form { margin-bottom: 0; *zoom: 1;}.navbar-form:before,.navbar-form:after { display: table; content: "";}.navbar-form:after { clear: both;}.navbar-form input,.navbar-form select,.navbar-form .radio,.navbar-form .checkbox { margin-top: 5px;}.navbar-form input,.navbar-form select { display: inline-block; margin-bottom: 0;}.navbar-form input[type="image"],.navbar-form input[type="checkbox"],.navbar-form input[type="radio"] { margin-top: 3px;}.navbar-form .input-append,.navbar-form .input-prepend { margin-top: 6px; white-space: nowrap;}.navbar-form .input-append input,.navbar-form .input-prepend input { margin-top: 0;}.navbar-search { position: relative; float: left; margin-top: 6px; margin-bottom: 0;}.navbar-search .search-query { padding: 4px 9px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 1; color: #ffffff; background-color: #626262; border: 1px solid #151515; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;}.navbar-search .search-query:-moz-placeholder { color: #cccccc;}.navbar-search .search-query:-ms-input-placeholder { color: #cccccc;}.navbar-search .search-query::-webkit-input-placeholder { color: #cccccc;}.navbar-search .search-query:focus,.navbar-search .search-query.focused { padding: 5px 10px; color: #333333; text-shadow: 0 1px 0 #ffffff; background-color: #ffffff; border: 0; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); outline: 0;}.navbar-fixed-top,.navbar-fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; margin-bottom: 0;}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner { padding-left: 0; padding-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}.navbar-fixed-top .container,.navbar-fixed-bottom .container { width: 940px;}.navbar-fixed-top { top: 0;}.navbar-fixed-bottom { bottom: 0;}.navbar .nav { position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0;}.navbar .nav.pull-right { float: right;}.navbar .nav > li { display: block; float: left;}.navbar .nav > li > a { float: none; padding: 9px 10px 11px; line-height: 19px; color: #999999; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}.navbar .btn { display: inline-block; padding: 4px 10px 4px; margin: 5px 5px 6px; line-height: 18px;}.navbar .btn-group { margin: 0; padding: 5px 5px 6px;}.navbar .nav > li > a:hover { background-color: transparent; color: #ffffff; text-decoration: none;}.navbar .nav .active > a,.navbar .nav .active > a:hover { color: #ffffff; text-decoration: none; background-color: #222222;}.navbar .divider-vertical { height: 40px; width: 1px; margin: 0 9px; overflow: hidden; background-color: #222222; border-right: 1px solid #333333;}.navbar .nav.pull-right { margin-left: 10px; margin-right: 0;}.navbar .btn-navbar { display: none; float: right; padding: 7px 10px; margin-left: 5px; margin-right: 5px; background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222)); background-image: -webkit-linear-gradient(top, #333333, #222222); background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(top, #333333, #222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #222222; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);}.navbar .btn-navbar:hover,.navbar .btn-navbar:active,.navbar .btn-navbar.active,.navbar .btn-navbar.disabled,.navbar .btn-navbar[disabled] { background-color: #222222; *background-color: #151515;}.navbar .btn-navbar:active,.navbar .btn-navbar.active { background-color: #080808 \9;}.navbar .btn-navbar .icon-bar { display: block; width: 18px; height: 2px; background-color: #f5f5f5; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);}.btn-navbar .icon-bar + .icon-bar { margin-top: 3px;}.navbar .dropdown-menu:before { content: ''; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; top: -7px; left: 9px;}.navbar .dropdown-menu:after { content: ''; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; left: 10px;}.navbar-fixed-bottom .dropdown-menu:before { border-top: 7px solid #ccc; border-top-color: rgba(0, 0, 0, 0.2); border-bottom: 0; bottom: -7px; top: auto;}.navbar-fixed-bottom .dropdown-menu:after { border-top: 6px solid #ffffff; border-bottom: 0; bottom: -6px; top: auto;}.navbar .nav li.dropdown .dropdown-toggle .caret,.navbar .nav li.dropdown.open .caret { border-top-color: #ffffff; border-bottom-color: #ffffff;}.navbar .nav li.dropdown.active .caret { opacity: 1; filter: alpha(opacity=100);}.navbar .nav li.dropdown.open > .dropdown-toggle,.navbar .nav li.dropdown.active > .dropdown-toggle,.navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: transparent;}.navbar .nav li.dropdown.active > .dropdown-toggle:hover { color: #ffffff;}.navbar .pull-right .dropdown-menu,.navbar .dropdown-menu.pull-right { left: auto; right: 0;}.navbar .pull-right .dropdown-menu:before,.navbar .dropdown-menu.pull-right:before { left: auto; right: 12px;}.navbar .pull-right .dropdown-menu:after,.navbar .dropdown-menu.pull-right:after { left: auto; right: 13px;}.breadcrumb { padding: 7px 14px; margin: 0 0 18px; list-style: none; background-color: #fbfbfb; background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5)); background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); background-image: linear-gradient(top, #ffffff, #f5f5f5); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); border: 1px solid #ddd; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff;}.breadcrumb li { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; text-shadow: 0 1px 0 #ffffff;}.breadcrumb .divider { padding: 0 5px; color: #999999;}.breadcrumb .active a { color: #333333;}.pagination { height: 36px; margin: 18px 0;}.pagination ul { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; margin-left: 0; margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);}.pagination li { display: inline;}.pagination a { float: left; padding: 0 14px; line-height: 34px; text-decoration: none; border: 1px solid #ddd; border-left-width: 0;}.pagination a:hover,.pagination .active a { background-color: #f5f5f5;}.pagination .active a { color: #999999; cursor: default;}.pagination .disabled span,.pagination .disabled a,.pagination .disabled a:hover { color: #999999; background-color: transparent; cursor: default;}.pagination li:first-child a { border-left-width: 1px; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;}.pagination li:last-child a { -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;}.pagination-centered { text-align: center;}.pagination-right { text-align: right;}.pager { margin-left: 0; margin-bottom: 18px; list-style: none; text-align: center; *zoom: 1;}.pager:before,.pager:after { display: table; content: "";}.pager:after { clear: both;}.pager li { display: inline;}.pager a { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}.pager a:hover { text-decoration: none; background-color: #f5f5f5;}.pager .next a { float: right;}.pager .previous a { float: left;}.pager .disabled a,.pager .disabled a:hover { color: #999999; background-color: #fff; cursor: default;}.thumbnails { margin-left: -20px; list-style: none; *zoom: 1;}.thumbnails:before,.thumbnails:after { display: table; content: "";}.thumbnails:after { clear: both;}.row-fluid .thumbnails { margin-left: 0;}.thumbnails > li { float: left; margin-bottom: 18px; margin-left: 20px;}.thumbnail { display: block; padding: 4px; line-height: 1; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);}a.thumbnail:hover { border-color: #0088cc; -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);}.thumbnail > img { display: block; max-width: 100%; margin-left: auto; margin-right: auto;}.thumbnail .caption { padding: 9px;}.alert { padding: 8px 35px 8px 14px; margin-bottom: 18px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #c09853;}.alert-heading { color: inherit;}.alert .close { position: relative; top: -2px; right: -21px; line-height: 18px;}.alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847;}.alert-danger,.alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48;}.alert-info { background-color: #d9edf7; border-color: #bce8f1; color: #3a87ad;}.alert-block { padding-top: 14px; padding-bottom: 14px;}.alert-block > p,.alert-block > ul { margin-bottom: 0;}.alert-block p + p { margin-top: 5px;}@-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; }}@-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; }}@-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; }}@-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; }}@keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; }}.progress { overflow: hidden; height: 18px; margin-bottom: 18px; background-color: #f7f7f7; background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9)); background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9); background-image: linear-gradient(top, #f5f5f5, #f9f9f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.progress .bar { width: 0%; height: 18px; color: #ffffff; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e90d2; background-image: -moz-linear-gradient(top, #149bdf, #0480be); background-image: -ms-linear-gradient(top, #149bdf, #0480be); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be)); background-image: -webkit-linear-gradient(top, #149bdf, #0480be); background-image: -o-linear-gradient(top, #149bdf, #0480be); background-image: linear-gradient(top, #149bdf, #0480be); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -ms-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease;}.progress-striped .bar { background-color: #149bdf; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; -o-background-size: 40px 40px; background-size: 40px 40px;}.progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; -ms-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite;}.progress-danger .bar { background-color: #dd514c; background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35)); background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); background-image: linear-gradient(top, #ee5f5b, #c43c35); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);}.progress-danger.progress-striped .bar { background-color: #ee5f5b; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.progress-success .bar { background-color: #5eb95e; background-image: -moz-linear-gradient(top, #62c462, #57a957); background-image: -ms-linear-gradient(top, #62c462, #57a957); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957)); background-image: -webkit-linear-gradient(top, #62c462, #57a957); background-image: -o-linear-gradient(top, #62c462, #57a957); background-image: linear-gradient(top, #62c462, #57a957); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);}.progress-success.progress-striped .bar { background-color: #62c462; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.progress-info .bar { background-color: #4bb1cf; background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9)); background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); background-image: -o-linear-gradient(top, #5bc0de, #339bb9); background-image: linear-gradient(top, #5bc0de, #339bb9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);}.progress-info.progress-striped .bar { background-color: #5bc0de; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.progress-warning .bar { background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -ms-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(top, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);}.progress-warning.progress-striped .bar { background-color: #fbb450; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);}.hero-unit { padding: 60px; margin-bottom: 30px; background-color: #eeeeee; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.hero-unit h1 { margin-bottom: 0; font-size: 60px; line-height: 1; color: inherit; letter-spacing: -1px;}.hero-unit p { font-size: 18px; font-weight: 200; line-height: 27px; color: inherit;}.tooltip { position: absolute; z-index: 1020; display: block; visibility: visible; padding: 5px; font-size: 11px; opacity: 0; filter: alpha(opacity=0);}.tooltip.in { opacity: 0.8; filter: alpha(opacity=80);}.tooltip.top { margin-top: -2px;}.tooltip.right { margin-left: 2px;}.tooltip.bottom { margin-top: 2px;}.tooltip.left { margin-left: -2px;}.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000000;}.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000000;}.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000000;}.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #000000;}.tooltip-inner { max-width: 200px; padding: 3px 8px; color: #ffffff; text-align: center; text-decoration: none; background-color: #000000; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.tooltip-arrow { position: absolute; width: 0; height: 0;}.popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; padding: 5px;}.popover.top { margin-top: -5px;}.popover.right { margin-left: 5px;}.popover.bottom { margin-top: 5px;}.popover.left { margin-left: -5px;}.popover.top .arrow { bottom: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #000000;}.popover.right .arrow { top: 50%; left: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #000000;}.popover.bottom .arrow { top: 0; left: 50%; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #000000;}.popover.left .arrow { top: 50%; right: 0; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #000000;}.popover .arrow { position: absolute; width: 0; height: 0;}.popover-inner { padding: 3px; width: 280px; overflow: hidden; background: #000000; background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);}.popover-title { padding: 9px 15px; line-height: 1; background-color: #f5f5f5; border-bottom: 1px solid #eee; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;}.popover-content { padding: 14px; background-color: #ffffff; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box;}.popover-content p,.popover-content ul,.popover-content ol { margin-bottom: 0;}.modal-open .dropdown-menu { z-index: 2050;}.modal-open .dropdown.open { *z-index: 2050;}.modal-open .popover { z-index: 2060;}.modal-open .tooltip { z-index: 2070;}.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000;}.modal-backdrop.fade { opacity: 0;}.modal-backdrop,.modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80);}.modal { position: fixed; top: 50%; left: 50%; z-index: 1050; overflow: auto; width: 560px; margin: -250px 0 0 -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; /* IE6-7 */ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box;}.modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; -moz-transition: opacity .3s linear, top .3s ease-out; -ms-transition: opacity .3s linear, top .3s ease-out; -o-transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out; top: -25%;}.modal.fade.in { top: 50%;}.modal-header { padding: 9px 15px; border-bottom: 1px solid #eee;}.modal-header .close { margin-top: 2px;}.modal-body { overflow-y: auto; max-height: 400px; padding: 15px;}.modal-form { margin-bottom: 0;}.modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #ddd; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -webkit-box-shadow: inset 0 1px 0 #ffffff; -moz-box-shadow: inset 0 1px 0 #ffffff; box-shadow: inset 0 1px 0 #ffffff; *zoom: 1;}.modal-footer:before,.modal-footer:after { display: table; content: "";}.modal-footer:after { clear: both;}.modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0;}.modal-footer .btn-group .btn + .btn { margin-left: -1px;}.dropup,.dropdown { position: relative;}.dropdown-toggle { *margin-bottom: -3px;}.dropdown-toggle:active,.open .dropdown-toggle { outline: 0;}.caret { display: inline-block; width: 0; height: 0; vertical-align: top; border-top: 4px solid #000000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; opacity: 0.3; filter: alpha(opacity=30);}.dropdown .caret { margin-top: 8px; margin-left: 2px;}.dropdown:hover .caret,.open .caret { opacity: 1; filter: alpha(opacity=100);}.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 4px 0; margin: 1px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box;}.dropdown-menu.pull-right { right: 0; left: auto;}.dropdown-menu .divider { *width: 100%; height: 1px; margin: 8px 1px; *margin: -5px 0 5px; overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff;}.dropdown-menu a { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: #333333; white-space: nowrap;}.dropdown-menu li > a:hover,.dropdown-menu .active > a,.dropdown-menu .active > a:hover { color: #ffffff; text-decoration: none; background-color: #0088cc;}.open { *z-index: 1000;}.open > .dropdown-menu { display: block;}.pull-right > .dropdown-menu { right: 0; left: auto;}.dropup .caret,.navbar-fixed-bottom .dropdown .caret { border-top: 0; border-bottom: 4px solid #000000; content: "\2191";}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px;}.typeahead { margin-top: 2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.accordion { margin-bottom: 18px;}.accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}.accordion-heading { border-bottom: 0;}.accordion-heading .accordion-toggle { display: block; padding: 8px 15px;}.accordion-toggle { cursor: pointer;}.accordion-inner { padding: 9px 15px; border-top: 1px solid #e5e5e5;}.carousel { position: relative; margin-bottom: 18px; line-height: 1;}.carousel-inner { overflow: hidden; width: 100%; position: relative;}.carousel .item { display: none; position: relative; -webkit-transition: 0.6s ease-in-out left; -moz-transition: 0.6s ease-in-out left; -ms-transition: 0.6s ease-in-out left; -o-transition: 0.6s ease-in-out left; transition: 0.6s ease-in-out left;}.carousel .item > img { display: block; line-height: 1;}.carousel .active,.carousel .next,.carousel .prev { display: block;}.carousel .active { left: 0;}.carousel .next,.carousel .prev { position: absolute; top: 0; width: 100%;}.carousel .next { left: 100%;}.carousel .prev { left: -100%;}.carousel .next.left,.carousel .prev.right { left: 0;}.carousel .active.left { left: -100%;}.carousel .active.right { left: 100%;}.carousel-control { position: absolute; top: 40%; left: 15px; width: 40px; height: 40px; margin-top: -20px; font-size: 60px; font-weight: 100; line-height: 30px; color: #ffffff; text-align: center; background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50);}.carousel-control.right { left: auto; right: 15px;}.carousel-control:hover { color: #ffffff; text-decoration: none; opacity: 0.9; filter: alpha(opacity=90);}.carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 15px 5px; background: #333333; background: rgba(0, 0, 0, 0.75);}.carousel-caption h4,.carousel-caption p { color: #ffffff;}.well { min-height: 20px; padding: 19px; margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0, 0, 0, 0.05); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);}.well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15);}.well-large { padding: 24px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.well-small { padding: 9px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}.close { float: right; font-size: 20px; font-weight: bold; line-height: 18px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20);}.close:hover { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40);}button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none;}.pull-right { float: right;}.pull-left { float: left;}.hide { display: none;}.show { display: block;}.invisible { visibility: hidden;}.fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -ms-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear;}.fade.in { opacity: 1;}.collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -ms-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease;}.collapse.in { height: auto;}.hidden { display: none; visibility: hidden;}.visible-phone { display: none !important;}.visible-tablet { display: none !important;}.hidden-desktop { display: none !important;}@media (max-width: 767px) { .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; }}@media (min-width: 768px) and (max-width: 979px) { .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; }}@media (max-width: 480px) { .nav-collapse { -webkit-transform: translate3d(0, 0, 0); } .page-header h1 small { display: block; line-height: 18px; } input[type="checkbox"], input[type="radio"] { border: 1px solid #ccc; } .form-horizontal .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } .form-horizontal .controls { margin-left: 0; } .form-horizontal .control-list { padding-top: 0; } .form-horizontal .form-actions { padding-left: 10px; padding-right: 10px; } .modal { position: absolute; top: 10px; left: 10px; right: 10px; width: auto; margin: 0; } .modal.fade.in { top: auto; } .modal-header .close { padding: 10px; margin: -10px; } .carousel-caption { position: static; }}@media (max-width: 767px) { body { padding-left: 20px; padding-right: 20px; } .navbar-fixed-top, .navbar-fixed-bottom { margin-left: -20px; margin-right: -20px; } .container-fluid { padding: 0; } .dl-horizontal dt { float: none; clear: none; width: auto; text-align: left; } .dl-horizontal dd { margin-left: 0; } .container { width: auto; } .row-fluid { width: 100%; } .row, .thumbnails { margin-left: 0; } [class*="span"], .row-fluid [class*="span"] { float: none; display: block; width: auto; margin-left: 0; } .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { display: inline-block; width: auto; }}@media (min-width: 768px) and (max-width: 979px) { .row { margin-left: -20px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; } .row:after { clear: both; } [class*="span"] { float: left; margin-left: 20px; } .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 724px; } .span12 { width: 724px; } .span11 { width: 662px; } .span10 { width: 600px; } .span9 { width: 538px; } .span8 { width: 476px; } .span7 { width: 414px; } .span6 { width: 352px; } .span5 { width: 290px; } .span4 { width: 228px; } .span3 { width: 166px; } .span2 { width: 104px; } .span1 { width: 42px; } .offset12 { margin-left: 764px; } .offset11 { margin-left: 702px; } .offset10 { margin-left: 640px; } .offset9 { margin-left: 578px; } .offset8 { margin-left: 516px; } .offset7 { margin-left: 454px; } .offset6 { margin-left: 392px; } .offset5 { margin-left: 330px; } .offset4 { margin-left: 268px; } .offset3 { margin-left: 206px; } .offset2 { margin-left: 144px; } .offset1 { margin-left: 82px; } .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.762430939%; *margin-left: 2.709239449638298%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.999999993%; *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; *width: 5.747913482638298%; } input, textarea, .uneditable-input { margin-left: 0; } input.span12, textarea.span12, .uneditable-input.span12 { width: 714px; } input.span11, textarea.span11, .uneditable-input.span11 { width: 652px; } input.span10, textarea.span10, .uneditable-input.span10 { width: 590px; } input.span9, textarea.span9, .uneditable-input.span9 { width: 528px; } input.span8, textarea.span8, .uneditable-input.span8 { width: 466px; } input.span7, textarea.span7, .uneditable-input.span7 { width: 404px; } input.span6, textarea.span6, .uneditable-input.span6 { width: 342px; } input.span5, textarea.span5, .uneditable-input.span5 { width: 280px; } input.span4, textarea.span4, .uneditable-input.span4 { width: 218px; } input.span3, textarea.span3, .uneditable-input.span3 { width: 156px; } input.span2, textarea.span2, .uneditable-input.span2 { width: 94px; } input.span1, textarea.span1, .uneditable-input.span1 { width: 32px; }}@media (min-width: 1200px) { .row { margin-left: -30px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; } .row:after { clear: both; } [class*="span"] { float: left; margin-left: 30px; } .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 1170px; } .span12 { width: 1170px; } .span11 { width: 1070px; } .span10 { width: 970px; } .span9 { width: 870px; } .span8 { width: 770px; } .span7 { width: 670px; } .span6 { width: 570px; } .span5 { width: 470px; } .span4 { width: 370px; } .span3 { width: 270px; } .span2 { width: 170px; } .span1 { width: 70px; } .offset12 { margin-left: 1230px; } .offset11 { margin-left: 1130px; } .offset10 { margin-left: 1030px; } .offset9 { margin-left: 930px; } .offset8 { margin-left: 830px; } .offset7 { margin-left: 730px; } .offset6 { margin-left: 630px; } .offset5 { margin-left: 530px; } .offset4 { margin-left: 430px; } .offset3 { margin-left: 330px; } .offset2 { margin-left: 230px; } .offset1 { margin-left: 130px; } .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.564102564%; *margin-left: 2.510911074638298%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 100%; *width: 99.94680851063829%; } .row-fluid .span11 { width: 91.45299145300001%; *width: 91.3997999636383%; } .row-fluid .span10 { width: 82.905982906%; *width: 82.8527914166383%; } .row-fluid .span9 { width: 74.358974359%; *width: 74.30578286963829%; } .row-fluid .span8 { width: 65.81196581200001%; *width: 65.7587743226383%; } .row-fluid .span7 { width: 57.264957265%; *width: 57.2117657756383%; } .row-fluid .span6 { width: 48.717948718%; *width: 48.6647572286383%; } .row-fluid .span5 { width: 40.170940171000005%; *width: 40.117748681638304%; } .row-fluid .span4 { width: 31.623931624%; *width: 31.5707401346383%; } .row-fluid .span3 { width: 23.076923077%; *width: 23.0237315876383%; } .row-fluid .span2 { width: 14.529914530000001%; *width: 14.4767230406383%; } .row-fluid .span1 { width: 5.982905983%; *width: 5.929714493638298%; } input, textarea, .uneditable-input { margin-left: 0; } input.span12, textarea.span12, .uneditable-input.span12 { width: 1160px; } input.span11, textarea.span11, .uneditable-input.span11 { width: 1060px; } input.span10, textarea.span10, .uneditable-input.span10 { width: 960px; } input.span9, textarea.span9, .uneditable-input.span9 { width: 860px; } input.span8, textarea.span8, .uneditable-input.span8 { width: 760px; } input.span7, textarea.span7, .uneditable-input.span7 { width: 660px; } input.span6, textarea.span6, .uneditable-input.span6 { width: 560px; } input.span5, textarea.span5, .uneditable-input.span5 { width: 460px; } input.span4, textarea.span4, .uneditable-input.span4 { width: 360px; } input.span3, textarea.span3, .uneditable-input.span3 { width: 260px; } input.span2, textarea.span2, .uneditable-input.span2 { width: 160px; } input.span1, textarea.span1, .uneditable-input.span1 { width: 60px; } .thumbnails { margin-left: -30px; } .thumbnails > li { margin-left: 30px; } .row-fluid .thumbnails { margin-left: 0; }}@media (max-width: 979px) { body { padding-top: 0; } .navbar-fixed-top, .navbar-fixed-bottom { position: static; } .navbar-fixed-top { margin-bottom: 18px; } .navbar-fixed-bottom { margin-top: 18px; } .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding: 5px; } .navbar .container { width: auto; padding: 0; } .navbar .brand { padding-left: 10px; padding-right: 10px; margin: 0 0 0 -5px; } .nav-collapse { clear: both; } .nav-collapse .nav { float: none; margin: 0 0 9px; } .nav-collapse .nav > li { float: none; } .nav-collapse .nav > li > a { margin-bottom: 2px; } .nav-collapse .nav > .divider-vertical { display: none; } .nav-collapse .nav .nav-header { color: #999999; text-shadow: none; } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { padding: 6px 15px; font-weight: bold; color: #999999; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; } .nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover { background-color: #222222; } .nav-collapse.in .btn-group { margin-top: 5px; padding: 0; } .nav-collapse .dropdown-menu { position: static; top: auto; left: auto; float: none; display: block; max-width: none; margin: 0 15px; padding: 0; background-color: transparent; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .nav-collapse .dropdown-menu:before, .nav-collapse .dropdown-menu:after { display: none; } .nav-collapse .dropdown-menu .divider { display: none; } .nav-collapse .navbar-form, .nav-collapse .navbar-search { float: none; padding: 9px 15px; margin: 9px 0; border-top: 1px solid #222222; border-bottom: 1px solid #222222; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); } .navbar .nav-collapse .nav.pull-right { float: none; margin-left: 0; } .nav-collapse, .nav-collapse.collapse { overflow: hidden; height: 0; } .navbar .btn-navbar { display: block; } .navbar-static .navbar-inner { padding-left: 10px; padding-right: 10px; }}@media (min-width: 980px) { .nav-collapse.collapse { height: auto !important; overflow: visible !important; }}

Read the article
Creating a multi-column rollover image gallery with HTML 5

- by nikolaosk

I know it has been a while since I blogged about HTML 5. I have two posts in this blog about HTML 5. You can find them here and here.I am creating a small content website (only text,images and a contact form) for a friend of mine.He wanted to create a rollover gallery.The whole concept is that we have some small thumbnails on a page, the user hovers over them and they appear enlarged on a designated container/placeholder on a page. I am trying not to use Javascript scripts when I am using effects on a web page and this is what I will be doing in this post. Well some people will say that HTML 5 is not supported in all browsers. That is true but most of the modern browsers support most of its recommendations. For people who still use IE6 some hacks must be devised.Well to be totally honest I cannot understand why anyone at this day and time is using IE 6.0.That really is beyond me.Well, the point of having a web browser is to be able to ENJOY the great experience that the WE? offers today. Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. In order to be absolutely clear this is not (and could not be ) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.For the people who are not convinced yet that they should invest time and resources on becoming experts on HTML 5 I should point out that HTML 5 websites will be ranked higher than others. Search engines will be able to locate better the content of our site and its relevance/importance since it is using semantic tags. Let's move now to the actual hands-on example. In this case (since I am mad Liverpool supporter) I will create a rollover image gallery of Liverpool F.C legends. I create a folder in my desktop. I name it Liverpool Gallery.Then I create two subfolders in it, large-images (I place the large images in there) and thumbs (I place the small images in there).Then I create an empty .html file called LiverpoolLegends.html and an empty .css file called style.css.Please have a look at the HTML Markup that I typed in my fancy editor package below<!doctype html><html lang="en"><head><title>Liverpool Legends Gallery</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body><header><h1>A page dedicated to Liverpool Legends</h1><h2>Do hover over the images with the mouse to see the full picture</h2></header><ul id="column1"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/john-barnes.jpg" alt=""><img class="large" src="large-images/john-barnes-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/ian-rush.jpg" alt=""><img class="large" src="large-images/ian-rush-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/graeme-souness.jpg" alt=""><img class="large" src="large-images/graeme-souness-large.jpg" alt=""></a></li></ul><ul id="column2"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/steven-gerrard.jpg" alt=""><img class="large" src="large-images/steven-gerrard-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/kenny-dalglish.jpg" alt=""><img class="large" src="large-images/kenny-dalglish-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/robbie-fowler.jpg" alt=""><img class="large" src="large-images/robbie-fowler-large.jpg" alt=""></a></li></ul><ul id="column3"><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/alan-hansen.jpg" alt=""><img class="large" src="large-images/alan-hansen-large.jpg" alt=""></a></li><li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#"><img src="thumbs/michael-owen.jpg" alt=""><img class="large" src="large-images/michael-owen-large.jpg" alt=""></a></li></ul></body></html> It is very easy to follow the markup. Please have a look at the new doctype and the new semantic tag <header>. I have 3 columns and I place my images in there.There is a class called "large".I will use this class in my CSS code to hide the large image when the mouse is not on (hover) an image Make sure you validate your HTML 5 page in the validator found hereHave a look at the CSS code below that makes it all happen.img { border:none;}#column1 { position: absolute; top: 30; left: 100; }li { margin: 15px; list-style-type:none;}#column1 a img.large { position: absolute; top: 0; left:700px; visibility: hidden;}#column1 a:hover { background: white;}#column1 a:hover img.large { visibility:visible;}#column2 { position: absolute; top: 30; left: 195px; }li { margin: 5px; list-style-type:none;}#column2 a img.large { position: absolute; top: 0; left:510px; margin-left:0; visibility: hidden;}#column2 a:hover { background: white;}#column2 a:hover img.large { visibility:visible;}#column3 { position: absolute; top: 30; left: 400px; width:108px;}li { margin: 5px; list-style-type:none;}#column3 a img.large { width: 260px; height:260px; position: absolute; top: 0; left:315px; margin-left:0; visibility: hidden;}#column3 a:hover { background: white;}#column3 a:hover img.large { visibility:visible;}?n the first line of the CSS code I set the images to have no border.Then I place the first column in the page and then remove the bullets from the list elements.Then I use the large CSS class to create a position for the large image and hide it.Finally when the hover event takes place I make the image visible.I repeat the process for the next two columns. I have tested the page with IE 10 and the latest versions of Opera,Chrome and Firefox.Feel free to style your HTML 5 gallery any way you want through the magic of CSS.I did not bother adding background colors and borders because that was beyond the scope of this post. Hope it helps!!!!

Read the article
How to serve static files for multiple Django projects via nginx to same domain

- by thanley

I am trying to setup my nginx conf so that I can serve the relevant files for my multiple Django projects. Ultimately I want each app to be available at www.example.com/app1, www.example.com/app2 etc. They all serve static files from a 'static-files' directory located in their respective project root. The project structure: Home Ubuntu Web www.example.com ref logs app app1 app1 static bower_components templatetags app1_project templates static-files app2 app2 static templates templatetags app2_project static-files app3 tests templates static-files static app3_project app3 venv When I use the conf below, there are no problems for serving the static-files for the app that I designate in the /static/ location. I can also access the different apps found at their locations. However, I cannot figure out how to serve all of the static files for all the apps at the same time. I have looked into using the 'try_files' command for the static location, but cannot figure out how to see if it is working or not. Nginx Conf - Only serving static files for one app: server { listen 80; server_name example.com; server_name www.example.com; access_log /home/ubuntu/web/www.example.com/logs/access.log; error_log /home/ubuntu/web/www.example.com/logs/error.log; root /home/ubuntu/web/www.example.com/; location /static/ { alias /home/ubuntu/web/www.example.com/app/app1/static-files/; } location /media/ { alias /home/ubuntu/web/www.example.com/media/; } location /app1/ { include uwsgi_params; uwsgi_param SCRIPT_NAME /app1; uwsgi_modifier1 30; uwsgi_pass unix:///home/ubuntu/web/www.example.com/app1.sock; } location /app2/ { include uwsgi_params; uwsgi_param SCRIPT_NAME /app2; uwsgi_modifier1 30; uwsgi_pass unix:///home/ubuntu/web/www.example.com/app2.sock; } location /app3/ { include uwsgi_params; uwsgi_param SCRIPT_NAME /app3; uwsgi_modifier1 30; uwsgi_pass unix:///home/ubuntu/web/www.example.com/app3.sock; } # what to serve if upstream is not available or crashes error_page 400 /static/400.html; error_page 403 /static/403.html; error_page 404 /static/404.html; error_page 500 502 503 504 /static/500.html; # Compression gzip on; gzip_http_version 1.0; gzip_comp_level 5; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript; # Some version of IE 6 don't handle compression well on some mime-types, # so just disable for them gzip_disable "MSIE [1-6].(?!.*SV1)"; # Set a vary header so downstream proxies don't send cached gzipped # content to IE6 gzip_vary on; } Essentially I want to have something like (I know this won't work) location /static/ { alias /home/ubuntu/web/www.example.com/app/app1/static-files/; alias /home/ubuntu/web/www.example.com/app/app2/static-files/; alias /home/ubuntu/web/www.example.com/app/app3/static-files/; } or (where it can serve the static files based on the uri) location /static/ { try_files $uri $uri/ =404; } So basically, if I use try_files like above, is the problem in my project directory structure? Or am I totally off base on this and I need to put each app in a subdomain instead of going this route? Thanks for any suggestions TLDR: I want to go to: www.example.com/APP_NAME_HERE And have nginx serve the static location: /home/ubuntu/web/www.example.com/app/APP_NAME_HERE/static-files/;

Read the article
How can I tell Firefox to ignore unprintable characters?

- by BrianH

Edit: Summary Apparently the intended character to display in this case is an "en-dash". This page has a table half way down that shows that for the –, some software will convert the correct hex code of 2013 to 0096. (look at the first row in the table). This answer on Stackoverflow explains that somehow this is a mixup between Windows-1252 and UTF-8 This blog article enforces this: Character 150 (0x96) is the unicode character "START OF GUARDED AREA" in the non-displayed C1 control character range, but in the Windows-1252 encoding it's mapped to to the displayable character 0x2013 "en-dash" (a short dash). Others have struggled with this when producing content, as this answer on Stackoverflow shows how to replace 0x0096 with 0x2013. Google must realize this, because as stated in my original question below, Google's cached version of the Amazon page has – so it seems they are automatically correcting these mistakes on pages they cache. I have tried setting my encoding to Windows-1252 but that does not help. So now I guess my question is, how can I tell Firefox to ignore unprintable characters like these? Original content below: (Firefox 3.6.13 on Windows XP) Every once in a while I notice an odd character on certain web pages when browsing the web. It is a outline of a box with a 4-digit number inside. And example of a page that has these characters is: http://aws.amazon.com/ec2/#highlights After each section heading (Elastic, Completely Controlled, ...) I see a box with the number "0096" inside. I looked at the cached version on Google, and google has – in it's place, so I'm guessing I should be seeing a dash there instead of the box with the numbers in it. I have tried changing the character encoding in Firefox but haven't been able to find one that shows these characters correctly. Is there a way to allow Firefox to view these characters? Thanks in advance! Edit - adding a screen shot of the "special" characters: Edit #2 - tried in Ubuntu - new screenshots I logged into my Ubuntu desktop and browsed to the amazon page in Chrome and Firefox. Chrome completely ignores character, even if I inspect or view page source. Firefox in Unbutu displays the character exactly like Firefox on my Windows XP box. I copied the character and played around with it at the command line - here is a screenshot of the results: It looks like I can paste the character into this post as well: `` It is definitely not isolated to Windows XP. I tried setting the character encoding for my terminal to Windows 1252 (from Dennis' comment below), but then it just displays this character as a question mark. I pulled the webpage down with wget and with curl, and both outputs show this characters as: <96> It makes me wonder if this character renders correctly for anyone? It appears webkit just ignores it, my IE6 ignores it, Firefox displays the box with the numbers in it. I would have to imagine the design team at Amazon can see it correctly? It's not a huge deal to get these characters displaying correctly, but it would be nice to know if there is a solution to this.

Read the article
Open-source and client-side IRC-Client

- by user125197

I'm administrating a homepage with an IRC-Webclient. At the moment, it uses a Java-client, modified to be SSL-compatible and compatible with whatever design I want to use. The usual PJIRC thing, with users wishes and concerns implemented (I'll give you SSL-PJIRC if you want - no problem. The login-script will be improved for IE6-support this weekend, means write the object tag if an old IE is found, that's it. Rest runs perfectly well). But still, the better user experience would be a client that only requires the user to enable JavaScript. So, before I go into rewriting and customizing a complete Java-IRC-solution, I'd like to ask some other people - after researching for half a year of time. The requirements are: a) Free hosting, no cgi-bin is acceptable. A lot of hosters also have CGI supported, but it doesn't allow IRC-access. So, seems you are limited to x10-hosting for CGI:IRC. b) Solution must be open source (not free as in free beer, but free as in free speech - I want to be able to read every line of the code). c) Hosting cannot be limited to Windows-hosting. Free operation systems (anything with Linux, BSD, whatever - I think you get what I mean) must be possible. d) No server-side technology. I'm limited to everything that runs client-side only. (Well, a Java-Applet does...). d) Solution must support SSL. e) The side must be able to move. Means, you register to a new free hoster, load your things up via FileZilla and the thing simply runs. No server-concerning implementations needed. f) Old browsers must be supported. From all my research, there are two ways a) Java-Applet b) Use HTML5-Websockets (it is impossible to use the JavaScript-library I found, as it depends on ActiveX - means, Windows hosting). b) means "you are going to enter very unstable content". I worked with HTML5 for month, and, well ... Though, HTML5 also is not suitable for older browsers (old browser support is an absolutely necessary requirement). PHP by the way is a server side solution ... so no line of PHP. My idea now was a Java Applet, and a fallback which again is embedded and proprietary, but only requieres JavaScript (wsirc or Mibbit are great here, whilst I prefer wsirc ... and zooming fonts that are plainly to small, but worse, cannot read the code). So my question is - with free hosting, not installation on server, plain upload - do you see and open source, complelety client-side, ssl-compatible way to use or write a client? This wouldn't be my first programming project, I'm not afraid of the code. If there was a way and I had to write it, even from scratch, I'd do. From all I know, there sadly is none. But maybe some experienced admin has an idea? Best Wishes, yetanotheruser Sry my English isn't perfect. It's enough for programming at least.

Read the article
14+ Real Estate WordPress Themes

- by Aditi

If you are looking for a great WordPress real estate theme. Below is a list of some of the best wordpress real estate themes, so you can find one, which is the best suited for you and be at par with increasing industry demands in real estates business.We have covered only the best themes available. The Themes are flexible & can be used by anybody in real estate business. If you are realtor, agent, appraiser or realty these can be modified as per your use. Estate It is an immensely powerful and simple to manage business theme. It offers advanced SEO control, clean code and styling modification features. It has new “Properties” management facility when installed – proving it’s far more than just a WordPress theme. It offers flexible page templates, an advanced search facility that allows you to drill down into properties based on very specific criteria, Google Maps integration and smart property images management. It is a complete web solution. It also has IDX functionality due to dsIDXpress plugin integration, which allows multi-listing services. Price: $200 View Demo Download ElegantEstate It makes your WordPress blog into a full-feature real estate website. The theme makes browsing your listings easy, and adds special integration features for property info, photos, Google Maps and more. Help increase sales by establishing an elegant and professional online presence today. It has opera compatibility, Netscape compatibility, Safari compatibility, WordPress 3.0 compatibility. It comes with five color schemes, threaded comments, optional blog-style structure, Gravatar ready, firefox compatible, IE8 + IE7 + IE6 compatible, advertisement ready, widget ready sidebars, theme options page, custom thumbnail images, PSD files, valid XHTML + CSS, smooth table less design, ePanel theme options, page templates, complete localization and many more features. Price: $39 (Package includes more than 55 themes) View Demo Download Open House Open House is fully compatible with WordPress 3.0+ and a highly customizable Real Estate WordPress theme. It has Google Maps Integration with Street View. It has a professional look for Agents and Realtors both. It is best suited for all markets and countries with theme localization, translation and internationalization. It provides for English, Spanish and Portuguese language files in the Developer Package. It has custom scripts, which makes it easy to add/delete/modify listings. It also includes photo gallery with a lightbox effect, gorgeous photo fade animations and automatic Google Maps integration. The theme can be used as a single or multi-agent website with individual Agent-Realtor pages with listings and biography information, Agent photo uploader, financing calculator.There is Multi Category search for potential customers to locate the house they want. Price: $39.95 essential | $69.95 standard | $99.95 premium View Demo Download Residence Real Estate It is a WordPress 3.0+ compatible stunning real estate theme. It has a dynamic real estate framework management module for easy edit-delete-add more features options, which makes this theme super easy to customize to the market needs. It allows you to add your own labels and values in your own language and switch the theme to your own language with English and Spanish files included with the ability to add your own language. It offers Multi-Category search with breadcrumb filtered results, easy photo gallery management with drag-drop sorting of images. It allows you to build your own multi-category search section menu with custom labels-choices and unlimited dropdown menus. They have been presented in a professional module with search results in breadcrumb navigation. Price: $39.95 essential | $69.95 standard | $99.95 premium View Demo Download Smooth Smooth is a WordPress Real Estate theme. It is a complete theme, which comes with Multi Category Search, Google Maps Integration, Agent Photo and Logo uploader that offers a professional and extremely affordable solution for Realtors and Agents to showcase their properties with ease. You can add your listings with the extremely easy and flexible Dynamic Real Estate Framework, edit-add-modify-delete all features, labels and values within the WordPress administration and upload unlimited photos to your galleries with latest WordPress 3.0+ features. It is a complete solution for real estate sites. Price: $39.95 essential | $69.95 standard | $99.95 premium View Demo Download Homeowners It is another WordPress Real Estate theme, which is a fast loading optimized theme with Google Maps Integration, fully compatible with WordPress 3.0 features and all Real Estate markets. It has a professional clean look and it is full of features extremely easy to modify. It also provides for 12 new styles provided. English, Spanish and Portuguese language files are provided in the Developer Package. Homeowners WordPress Real Estate features custom scripts that make add/delete/modify listings an easy task with an included photo gallery with a lightbox effect and automatic Google Map integration with street view (New) Agents will have access only to their own listings and add the listing management for their account making this theme an ideal affordable solution for Realtors and Real Estate agencies. The theme can be used as a single or multi-agent website with individual Agent-Realtor pages with listings and biography information, Agent photo uploader, financing calculator. Multi category search has also been provided. Price: $39.95 essential | $69.95 standard | $99.95 premium View Demo Download Real Agent Real Estate This theme is a WordPress 3.0+ compatible clean grid based real estate theme. It has a dynamic real estate framework management module for easy edit-delete-add more features options. It is easy to customize according to market. It allows you to add your own labels and values in your own language switch the theme to your own language with English and Spanish files included with the ability to add your own language. Multi-Category search with breadcrumb filtered results, easy photo gallery management with drag-drop sorting of images. You can upload property photos in bulk with the native WordPress uploader and the new image editing and resizing options in WordPress 3.0+. The theme features 5 different color styles, blue, black, red, green and purple with professional layouts, logo and agent photo uploaders. This theme is best suited for individual or multiple agents both. Price: $39.95 essential | $69.95 standard | $99.95 premium View Demo Download Agent Press The AgentPress theme is an ideal solution for real estate agents. It offers multiple page templates that can be used to create a complete real estate website. You can create from single property templates to a custom homepage easily with it. It is compatible to WordPress 3.0 and 3.1. It has custom background/header, property template, 6 layout options, fixed width, threaded comments and many more features. Price: $99.95 View Demo Download Real Estate It is one of the best Real Estate themes. It offers single click auto install of the site, Allow user to pay & submit properties on your site, Multi-agent site with profiles, Strategically built real estate site with professional design, User dashboard to edit/renew their submissions, Auto generated Google Maps and Image Slideshows and many more unique features. Once the users search property as per their criteria, the properties are listed with all the necessary parameters that let them select the property of their choice. Users can also add the property to favorite so they can check the property later from their member area dashboard. Admin may display different sidebar on this page and add widgets of their choice. This theme is full of custom, dynamic widgets such as top agents, finance calculator, user login; advertise blocks, testimonials and so on. There is a property details page where users can see the actual property. The agent details is displayed with the full contact details and appropriate links so the visitor can get all info about the property being sold, seller and may contact them by filling out a simple form. The email will be sent directly to the person who listed the property. Price: $89.95 Single | $159.95 Developer View Demo Download Broker Real Estate It is also a WordPress 3.0+ compatible real estate theme. It has a featured property slideshow, dynamic real estate framework management module for easy edit-delete-add more features. You can add your own labels and values in your own language. It offers multi-category search with breadcrumb-filtered results, easy photo gallery management with drag-drop sorting of images. You can also build your own multi-category search section menu with custom labels-choices and unlimited dropdown menus. Price: $39.95 essential | $69.95 standard | $99.95 premium View Demo Download Decasa It has custom search panel that lets your user easily browse your properties by keyword search or category select drop downs. It offers the property exposé, which is a user-friendly overview over the most important details of each real estate object. You can easily add this data through a post settings meta box on the post edit screen. You can easily create a real estate image gallery. Its theme options panel makes it easy to make the basic theme settings. It supports the new WordPress post thumbnail feature. When uploading an image file the theme will automatically create all the necessary image size. You can also create your own custom menu easily and fast with drag and drop without touching any code. Price: 39 € View Demo Download RealtorPress A real estate premium WordPress theme from PremiumPress. Versatile WordPress Theme that can be used by individual agents or real estate companies. The theme allows you to easily add property listings via the custom backend admin area or import CSV spreadsheets. It features customisable search options, Google maps integration, real estate data custom field creator, image management tools and more. Price: $79 | Premium Collection: $259 (all PremiumPress themes) View Demo Download Related posts:21+ WordPress Photo Blog & Portfolio Themes 14+ WordPress Portfolio Themes Professional WordPress Business Themes

Read the article
IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer6 - IE8 ?

- by Vaibhav Bhalke

Now My final Application.html file contains are < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd" < html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" < head < meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" / < /head < body < script type="text/javascript" language="javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" < /script < script type="text/javascript" FB_RequireFeatures(["Connect"], function(){ var x=1; } ); < /script < script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript" < /script < /body < /html My Java code for LIke Box is as follows FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); mainPanel .getElement() .setInnerHTML( "< script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'< /script< script type='text/javascript'FB.init('');< /script< fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'< /fb:fan"); initWidget(mainPanel); } } We used proper facebook API_KEY & PAGE_ID It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. If we add FBPageFanWidget.java in our web applicaton then Our Home page is not display in IE because we add Facebook LikeBox so we made changes in Our FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); if (!isIE()) { mainPanel.getElement() .setInnerHTML("<script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('');</script><fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'></fb:fan>"); } initWidget(mainPanel); } public native String getUserAgent() /-{ return navigator.userAgent; }-/; private boolean isIE() { return (getUserAgent().indexOf("MSIE") > -1); } } when we did this changes Then Facebook Like Box display in every browser excluding IE6 - IE8 :( and also display Our Home page in IE8 excludeing Facebook Like Box. It means There is probelm in IE ? or what changes i need to do in my html file or java file to show facebook like Box properly with displaying our home page It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. Please Reply ASAP. Hope-for Best Co-operation from your side !!!!

Read the article
how do I access XHR responseBody from Javascript?

- by Cheeso

I've got a web page that uses XMLHttpRequest to download a binary resource. Because it's binary I'm trying to use xhr.responseBody to access the bytes. I've seen a few posts suggesting that it's impossible to access the bytes directly from Javascript. This sounds crazy to me. Weirdly, xhr.responseBody is accessible from VBScript, so the suggestion is that I must define a method in VBScript in the webpage, and then call that method from Javascript. See jsdap for one example. var IE_HACK = (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)); if (IE_HACK) document.write('<script type="text/vbscript">\n\ Function BinaryToArray(Binary)\n\ Dim i\n\ ReDim byteArray(LenB(Binary))\n\ For i = 1 To LenB(Binary)\n\ byteArray(i-1) = AscB(MidB(Binary, i, 1))\n\ Next\n\ BinaryToArray = byteArray\n\ End Function\n\ </script>'); var xml = (window.XMLHttpRequest) ? new XMLHttpRequest() // Mozilla/Safari/IE7+ : (window.ActiveXObject) ? new ActiveXObject("MSXML2.XMLHTTP") // IE6 : null; // Commodore 64? xml.open("GET", url, true); if (xml.overrideMimeType) { xml.overrideMimeType('text/plain; charset=x-user-defined'); } else { xml.setRequestHeader('Accept-Charset', 'x-user-defined'); } xml.onreadystatechange = function() { if (xml.readyState == 4) { if (!binary) { callback(xml.responseText); } else if (IE_HACK) { // call a VBScript method to copy every single byte callback(BinaryToArray(xml.responseBody).toArray()); } else { callback(getBuffer(xml.responseText)); } } }; xml.send(''); Is this really true? The best way? copying every byte? For a large binary stream that's not gonna be very efficient. There is also a possible technique using ADODB.Stream, which is a COM equivalent of a MemoryStream. See here for an example. It does not require VBScript but does require a separate COM object. if (typeof (ActiveXObject) != "undefined" && typeof (httpRequest.responseBody) != "undefined") { // Convert httpRequest.responseBody byte stream to shift_jis encoded string var stream = new ActiveXObject("ADODB.Stream"); stream.Type = 1; // adTypeBinary stream.Open (); stream.Write (httpRequest.responseBody); stream.Position = 0; stream.Type = 1; // adTypeBinary; stream.Read.... /// ???? what here } I don't think that's gonna work - ADODB.Stream is disabled on most machines these days. In The IE8 developer tools - the IE equivalent of Firebug - I can see the responseBody is an array of bytes and I can even see the bytes themselves. The data is right there. I don't understand why I can't get to it. Is it possible for me to read it with responseText? hints? (other than defining a VBScript method)

Read the article
Vertical textes inside of table headers with respect of a JavaScript based on SVG library

- by Oleg

I use jqGrid with many columns contains Boolean information, which are displayed as checkboxes inside of table (see http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm as an example). To display information more compact I use vertical column headers. It works very well and works in jqGrid in all browsers (see my discussion with Tony Tomov in jqGrid forum http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/), but in IE vertical texts looks not nice enough. I was asked from users why the texted displayed so strange. So I think about using a JavaScript based SVG library like SVG Web ( http://code.google.com/p/svgweb/ ) or Raphaël ( http://raphaeljs.com/ ). SVG is very powerful and it is difficult to find a good example is not very easy. I need only display vertical texts (-90 grad, from bottom to up) and use if possible without working in mode of absolute position. So one more times my question: I need have a possibility to display vertical texts (-90 grad rotation) inside of <td> element of table header. I want use a JavaScript based SVG library like SVG Web or Raphaël. The solution must support on IE6. Have somebody a good reference to example which could help me to do this? If somebody post a whole solution of the problem I would be happy. To be exact here is my current solution: I define .rotate { -webkit-transform: rotate(-90deg); /* Safari, Chrome */ -moz-transform: rotate(-90deg); /* Firefox */ -o-transform: rotate(-90deg); /* Opera starting with 10.50 */ /* Internet Explorer: */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } define RotateCheckboxColumnHeaders function var RotateCheckboxColumnHeaders = function (grid, headerHeight) { // we use grid as context (if one have more as one table on tnhe page) var trHead = $("thead:first tr", grid.hdiv); var cm = grid.getGridParam("colModel"); $("thead:first tr th").height(headerHeight); headerHeight = $("thead:first tr th").height(); for (var iCol = 0; iCol < cm.length; iCol++) { var cmi = cm[iCol]; if (cmi.formatter === 'checkbox') { // we must set width of column header div BEFOR adding class "rotate" to // prevent text cutting based on the current column width var headDiv = $("th:eq(" + iCol + ") div", trHead); headDiv.width(headerHeight).addClass("rotate"); if (!$.browser.msie) { if ($.browser.mozilla) { headDiv.css("left", (cmi.width - headerHeight) / 2 + 3).css("bottom", 7); } else { headDiv.css("left", (cmi.width - headerHeight) / 2); } } else { var ieVer = jQuery.browser.version.substr(0, 3); // Internet Explorer if (ieVer !== "6.0" && ieVer !== "7.0") { headDiv.css("left", cmi.width / 2 - 4).css("bottom", headerHeight / 2); $("span", headDiv).css("left", 0); } else { headDiv.css("left", 3); } } } } }; And include a call like RotateCheckboxColumnHeaders(grid, 110); after creating jqGrid.

Read the article
How to echo if field is not found?

- by Fahad

Hi I'm trying to figure out how to echo back if the value entered does not match when a database lookup is done. I'm using ajax to run the request and php to do the lookup ajax.js: function showResult(str) { if (str=="") { document.getElementById("description").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("description").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getuser.php?voucher="+str,true); xmlhttp.send(null); } and getuser.php: <?php $q=$_GET["voucher"]; $con = mysql_connect('localhost', 'root', ''); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("test", $con); $sql="SELECT * FROM redemption WHERE voucher = '".$q."'"; $result = mysql_query($sql); echo "<table> <tr> <th>Name</th> <th>Product</th> <th>Address</th> <th>Status</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['product'] . "</td>"; echo "<td>" . $row['address'] ." ".$row['city'] ." ".$row['province'] ." ".$row['postal'] . "</td>"; echo "<td>" . $row['status'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?> What I would like to do is that once the person enters an invalid or a voucher number that is not found I would like to return an error that "Voucher number is not found". There is also a column in the db that stores the status such as "redeemed" or "not redeemed". How could I check for both whether the voucher number exists and if it has already been redeemed? I assume it'd have to be a syntax such as $sql="SELECT * FROM redemption WHERE voucher = '".$q."'" AND status = 'not redeemed' and then use an else or case statement perhaps? Thanks in advance

Read the article
JavaScript source file not loading in IE8 Popup

- by dkris

I have an issue where the JavaScript source file is loading in popup for IE6, Chrome, Firefox, Safari and Opera. But the same source file is not loading up in IE8. As a result of this the HTML is not being replaced in the Popup and I am getting an error in IE8 popup saying tinyMCE is not defined I have referred to http://stackoverflow.com/questions/2949234/formatting-this-javascript-line and solved issue on all browsers except IE8. The JavaScript function is as follows: function openSupportPage() { var features="width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes"; var winId=window.open('','',features); winId.document.open(); winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="../css/default.css" type="text/css">\n'); var winDoc = winId.document; var sEl = winDoc.createElement("script"); sEl.src = "../js/tiny_mce/tiny_mce.js";/*TinyMCE source file*/ sEl.type="text/javascript"; winDoc.getElementsByTagName("head")[0].appendChild(sEl); winId.document.write('<script type="text/javascript">\n'); winId.document.write('function inittextarea() {\n'); winId.document.write('tinyMCE.init({ \n'); winId.document.write('elements : "content",\n'); winId.document.write('theme : "advanced",\n'); winId.document.write('readonly : true,\n'); winId.document.write('mode : "exact",\n'); winId.document.write('theme : "advanced",\n'); winId.document.write('readonly : true,\n'); winId.document.write('setup : function(ed) {\n'); winId.document.write('ed.onInit.add(function() {\n'); winId.document.write('tinyMCE.activeEditor.execCommand("mceToggleVisualAid");\n'); winId.document.write('});\n'); winId.document.write('}\n'); winId.document.write('});}</script>\n'); window.setTimeout(function () {/*using setTimeout to wait for the JS source file to load*/ winId.document.write('</head><body onload="inittextarea()">\n'); winId.document.write(' \n'); var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML; hiddenFrameHTML = hiddenFrameHTML.replace(/&/gi, "&"); hiddenFrameHTML = hiddenFrameHTML.replace(/</gi, "<"); hiddenFrameHTML = hiddenFrameHTML.replace(/>/gi, ">"); winId.document.write(hiddenFrameHTML); winId.document.write('<textarea id="content" rows="10" style="width:100%">\n'); winId.document.write(document.getElementById(top.document.forms[0].id + ":supportStuff").innerHTML); winId.document.write('</textArea>\n'); var hiddenFrameHTML2 = document.getElementById("HiddenFrame2").innerHTML; hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&/gi, "&"); hiddenFrameHTML2 = hiddenFrameHTML2.replace(/</gi, "<"); hiddenFrameHTML2 = hiddenFrameHTML2.replace(/>/gi, ">"); winId.document.write(hiddenFrameHTML2); winId.document.write('</body></html>\n'); winId.document.close(); }, 300); } Additional Information: Screen shot of the page Rendered HTML Original JSPF please help me with this one.

Read the article
IE8 Crashes Strangely on JavaScript Popup

- by dkris

Hi, I am facing a strange issue after the popup is created onclick. The popup opens up but hangs immediately on IE8 (works fine on all the other browsers including IE6). But on adding the alertbox as show in the JavaScript code, the popup works fine. I am using **https** and not **http** and i feel popup is not able to load the JS file because of SSL. Here is the how i am generating the onclick event: <a id="forgotPasswordLink" href="#" onclick="openSupportPage();"> Some Text </a> The onclick function is defined this way: function openSupportPage() { var features = "width=700,height=400,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes"; var winId = window.open('', '', features); winId.focus(); winId.document.open(); winId.document.write('<html><head><title>' + document.title + '</title><link rel="stylesheet" href="./css/default.css" type="text/css">\n'); var is_ie6 = ( window.external && typeof window.XMLHttpRequest == "undefined"); alert(is_ie6);/*The JS include below*/ /*works in popup only with this alert box.*/ /*else IE8 Hangs*/ winId.document.write('<script src="../js/tiny_mce/tiny_mce.js" type="text/javascript">Script_IE8</script>\n'); winId.document.write('<script type="text/javascript">\n'); winId.document.write('function inittextarea() {\n'); winId.document.write('tinyMCE.init({ \n'); winId.document.write('elements : "content",\n'); winId.document.write('theme : "advanced",\n'); winId.document.write('readonly : true,\n'); winId.document.write('mode : "exact",\n'); winId.document.write('theme : "advanced",\n'); winId.document.write('readonly : true,\n'); winId.document.write('setup : function(ed) {\n'); winId.document.write('ed.onInit.add(function() {\n'); winId.document.write('tinyMCE.activeEditor.execCommand("mceToggleVisualAid");\n'); winId.document.write('});\n'); winId.document.write('}\n'); winId.document.write('});}</script>\n'); winId.document.write('</head><body onload="inittextarea()">\n'); winId.document.write(' \n'); var hiddenFrameHTML = document.getElementById("HiddenFrame").innerHTML; hiddenFrameHTML = hiddenFrameHTML.replace(/&/gi, "&"); hiddenFrameHTML = hiddenFrameHTML.replace(/</gi, "<"); hiddenFrameHTML = hiddenFrameHTML.replace(/>/gi, ">"); winId.document.write(hiddenFrameHTML); winId.document.write('<textarea id="content" rows="10" style="width:100%">\n'); winId.document.write(document.getElementById(top.document.forms[0].id + ":supportStuff").innerHTML); winId.document.write('</textArea>\n'); var hiddenFrameHTML2 = document.getElementById("HiddenFrame2").innerHTML; hiddenFrameHTML2 = hiddenFrameHTML2.replace(/&/gi, "&"); hiddenFrameHTML2 = hiddenFrameHTML2.replace(/</gi, "<"); hiddenFrameHTML2 = hiddenFrameHTML2.replace(/>/gi, ">"); winId.document.write(hiddenFrameHTML2); winId.document.write('</body></html>\n'); winId.document.close(); } Please help me on this one. I could provide more information on this if needed. I have referred to these posts already: http://stackoverflow.com/questions/776639/problem-of-import-js-file-in-https-page-in-ie8 http://stackoverflow.com/questions/2597289/force-browser-modeie8-and-document-modeie8-standards Additional Information: Screen shot of the page Rendered HTML Original JSPF

Read the article
setTimeout in javascript not giving browser 'breathing room'

- by C Bauer

Alright, I thought I had this whole setTimeout thing perfect but I seem to be horribly mistaken. I'm using excanvas and javascript to draw a map of my home state, however the drawing procedure chokes the browser. Right now I'm forced to pander to IE6 because I'm in a big organisation, which is probably a large part of the slowness. So what I thought I'd do is build a procedure called distributedDrawPolys (I'm probably using the wrong word there, so don't focus on the word distributed) which basically pops the polygons off of a global array in order to draw 50 of them at a time. This is the method that pushes the polygons on to the global array and runs the setTimeout: for (var x = 0; x < polygon.length; x++) { coordsObject.push(polygon[x]); fifty++; if (fifty > 49) { timeOutID = setTimeout(distributedDrawPolys, 5000); fifty = 0; } } I put an alert at the end of that method, it runs in practically a second. The distributed method looks like: function distributedDrawPolys() { if (coordsObject.length > 0) { for (x = 0; x < 50; x++) { //Only do 50 polygons var polygon = coordsObject.pop(); var coordinate = polygon.selectNodes("Coordinates/point"); var zip = polygon.selectNodes("ZipCode"); var rating = polygon.selectNodes("Score"); if (zip[0].text.indexOf("HH") == -1) { var lastOriginCoord = []; for (var y = 0; y < coordinate.length; y++) { var point = coordinate[y]; latitude = shiftLat(point.getAttribute("lat")); longitude = shiftLong(point.getAttribute("long")); if (y == 0) { lastOriginCoord[0] = point.getAttribute("long"); lastOriginCoord[1] = point.getAttribute("lat"); } if (y == 1) { beginPoly(longitude, latitude); } if (y > 0) { if (translateLongToX(longitude) > 0 && translateLongToX(longitude) < 800 && translateLatToY(latitude) > 0 && translateLatToY(latitude) < 600) { drawPolyPoint(longitude, latitude); } } } y = 0; if (zip[0].text != targetZipCode) { if (rating[0] != null) { if (rating[0].text == "Excellent") { endPoly("rgb(0,153,0)"); } else if (rating[0].text == "Good") { endPoly("rgb(153,204,102)"); } else if (rating[0].text == "Average") { endPoly("rgb(255,255,153)"); } } else { endPoly("rgb(255,255,255)"); } } else { endPoly("rgb(255,0,0)"); } } } } Ugh I don't know if that is properly formatted, I ended up with an extra bracket < So I thought the setTimeout method would allow the site to draw the polygons in groups so the users would be able to interact with the page while it was still drawing. What am I doing wrong here?

Read the article
IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer 6 - IE8 ?

- by Vaibhav Bhalke

IE / Facebook Issue : Why Facebook Like box not display in Internet Explorer6 - IE8 ? Facebook like box display throgh my web application on every browser excluding IE-IE8 Now final Application.html file contains are < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"><BR> < html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <BR>< head> < meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> < /head><BR> < body> < script type="text/javascript" language="javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> < /script> <BR> < script type="text/javascript"> FB_RequireFeatures(["Connect"], function(){ var x=1; } ); < /script> <BR> < script src="http://static.ak.connect.facebook.com/connect.php/en_US" type="text/javascript"> < /script> < /body> < /html> My Java code for LIke Box is as follows FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); mainPanel .getElement() .setInnerHTML( "< script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'>< /script>< script type='text/javascript'>FB.init('');< /script>< fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'>< /fb:fan>"); initWidget(mainPanel); } } We used proper facebook API_KEY & PAGE_ID It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. If we add FBPageFanWidget.java in our web applicaton then Our Home page is not display in IE because we add Facebook LikeBox so we made changes in Our FBPageFanWidget.java class FBPageFanWidget extends Composite { public FBPageFanWidget() { VerticalPanel mainPanel = new VerticalPanel(); if (!isIE()) { mainPanel.getElement() .setInnerHTML("<script type='text/javascript' src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('');</script><fb:fan profile_id=\"113106068709539\" stream=\"0\" connections=\"10\" logobar=\"0\" width=\"244\" height=\"240\" css='http://127.0.01:8080/webapplicationname/facebook.css?1'></fb:fan>"); } initWidget(mainPanel); } public native String getUserAgent() /*-{ return navigator.userAgent; }-*/; private boolean isIE() { return (getUserAgent().indexOf("MSIE") > -1); } } when we did this changes Then Facebook Like Box display in every browser excluding IE6 - IE8 :( and also display Our Home page in IE8 excludeing Facebook Like Box. It means There is probelm in IE ? or what changes i need to do in my html file or java file to show facebook like Box properly with displaying our home page It's very important for us to Show Facebook like Box in Our web application Because we have more IE users. Please Reply ASAP. Hope-for Best Co-operation from your side !!!!

Read the article
Javascript works great locally, but not on my server

- by Jonathan Cohen

I'm teaching myself javascript by creating a script for displaying an external rss feed on a webpage. The code I patched together works great locally. This is a screen grab of the code producing exactly the desired behavior. The code is populating all the information inside the section "Blog: Shades of Gray", except for "tagged" which I hard coded: But when I upload the site files to my server, the code doesn't work at all. This is a screen grab of the code on my site NOT producing the desired behavior... This feels like I'm not getting something really basic about how javascript works locally vs. on the server. I did my half hour of googling for an answer and no trails look promising. So I'd really appreciate your help. This is my site (under construction) http://jonathangcohen.com Below is the code, which can also be found at http://jonathangcohen.com/grabFeeds.js. /*Javascript for Displaying an External RSS Feed on a Webpage Wrote some code that’ll grab attributes from an rss feed and assign IDs for displaying on a webpage. The code references my Tumblr blog but it’ll extend to any RSS feed.*/ window.onload = writeRSS; function writeRSS(){ writeBlog(); } function writeBlog(){ if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","http://blog.jonathangcohen.com/rss.xml",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; var x=xmlDoc.getElementsByTagName("item"); //append category to link for (i=0;i<3;i++) { if (i == 0){ //print category var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue document.getElementById("getBlogCategory1").innerHTML = '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>'; //print date var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue thisDate = new Date(); thisDate = formatTumblrDate(k); document.getElementById("getBlogPublishDate1").innerHTML = thisDate; //print title var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue document.getElementById("getBlogTitle1").innerHTML = '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>'; } if (i == 1){ //print category var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue document.getElementById("getBlogCategory2").innerHTML = '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>'; //print date var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue thisDate = new Date(); thisDate = formatTumblrDate(k); document.getElementById("getBlogPublishDate2").innerHTML = thisDate; //print title var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue document.getElementById("getBlogTitle2").innerHTML = '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>'; } if (i == 2){ //print category var blogTumblrCategory = x[i].getElementsByTagName("category")[0].childNodes[0].nodeValue document.getElementById("getBlogCategory3").innerHTML = '<a class="BlogTitleLinkStyle" href="http://blog.jonathangcohen.com/tagged/'+blogTumblrCategory+'">'+blogTumblrCategory+'</a>'; //print date var k = x[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue thisDate = new Date(); thisDate = formatTumblrDate(k); document.getElementById("getBlogPublishDate3").innerHTML = thisDate; //print title var blogTumblrTitle = x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue var blogTumblrLink = x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue document.getElementById("getBlogTitle3").innerHTML = '<a class="BlogTitleLinkStyle" href="'+blogTumblrLink+'">'+blogTumblrTitle+'</a>'; } } } function formatTumblrDate(k){ d = new Date(k); var curr_date = d.getDate(); var curr_month = d.getMonth(); curr_month++; var curr_year = d.getFullYear(); printDate = (curr_month + "/" + curr_date + "/" + curr_year); return printDate; } Thank you!

Read the article
Ajax and using responseXML

- by Banderdash

Hello, I have a XML file that looks like this: <response> <library name="My Library"> <book id="1" checked-out="1"> <authors> <author>David Flanagan</author> </authors> <title>JavaScript: The Definitive Guide</title> <isbn-10>0596101996</isbn-10> </book> <book id="2" checked-out="1"> <authors> <author>John Resig</author> </authors> <title>Pro JavaScript Techniques (Pro)</title> <isbn-10>1590597273</isbn-10> </book> <book id="3" checked-out="0"> <authors> <author>Erich Gamma</author> <author>Richard Helm</author> <author>Ralph Johnson</author> <author>John M. Vlissides</author> </authors> <title>Design Patterns: Elements of Reusable Object-Oriented Software</title> <isbn-10>0201633612</isbn-10> </book> ... </library> </response> I'm using a simple JS script to, on click show all the titles of the books: <script type="text/javascript"> function loadXMLDoc() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; var txt=""; x=xmlDoc.getElementsByTagName("title"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("checkedIn").innerHTML=txt; } } xmlhttp.open("GET","ajax-response-data.xml",true); xmlhttp.send(); } </script> This works fine, as you can see here: http://clients.pixelbleed.net/ajax-test/ What I'd like to do is have the results post, on page load (not on click) into two separate DIV's depending on checked-out variable in the XML. So <book id="#" checked-out="1"> would post to the checkedIn div, <book id="#" checked-out="0"> posts to a checkedOut div. Also want to display the title and the author--would love any ideas as best method for accomplishing this. Apologize in advanced for the newbieness of my query.

Read the article

Search Results

Search found 904 results on 37 pages for 'ie6'.

Page 35/37 | < Previous Page | 31 32 33 34 35 36 37 | Next Page >

- by klari

- by cmay

- by rdevitt

- by MichaelF

- by dronnoc

- by Aryan

- by Tabatha M

- by Asian Angel

- by Cheers and hth. - Alf

- by Renso

- by nikolaosk

- by thanley

- by BrianH

- by user125197

- by Aditi

- by Vaibhav Bhalke

- by Cheeso

- by Oleg

- by Fahad

- by dkris

- by dkris

- by C Bauer

- by Vaibhav Bhalke

- by Jonathan Cohen

- by Banderdash

< Previous Page | 31 32 33 34 35 36 37 | Next Page >