@media (min-width: 700px) and (orientation: landscape) {
      
    }

@media only screen and (min-width: 769px) and (max-width: 900px) {
       
    }

function simple_tooltip(target_items, name){
  $(target_items).each(function(i){
		$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
		var my_tooltip = $("#"+name+i);

		if($(this).attr("title") !== ""){ // checks if there is a title

			$(this).removeAttr("title").mouseover(function(){
				my_tooltip.css({opacity:0.9, display:"none"}).fadeIn(400);
			}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY-30});
			}).mouseout(function(){
				my_tooltip.fadeOut(400);
			});

		}
	});
}

$(document).ready(function(){
	simple_tooltip(".trigger","tooltip");
});

   <a href="#" class="trigger" rel="tooltip" title="This is a tooltip">Hover Me</a>

/* just for demo purposes, you don't need the body padding */
body{
  padding:50px;
}

.tooltip{
    position:absolute;
    z-index:999;
    left:-9999px;
    background-color:#F1F1F1;
    padding:5px;
    border:1px solid #fff;
    width:auto;
  font-weight:bold;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border:1px solid #E2E2E2;
}

.tooltip p{
    margin:0;
    padding:0;
    color:#333;
    padding:2px 7px;
}

img {
    max-width: 100%;
    height: auto;
}

/* conditionaly add support for IE 6 and IE 7

width: 100%

*/

ul#position li.on{
    box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
    background-color: #1293dc;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
    background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);
    background-image: linear-gradient(top,#1293dc,#0f6297);
}

ul#position li.on{
    box-shadow: inset 0 1px 3px -1px #28b4ea,0 1px 2px rgba(0,0,0,.5);
    background-color: #1293dc;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#1293dc),color-stop(100%,#0f6297));
    background-image: -webkit-linear-gradient(top,#1293dc,#0f6297);
    background-image: linear-gradient(top,#1293dc,#0f6297);
}

/*  -------------------------------------------------

    MINIMAL TWITTER FOR FLUID / USERSTYLES
    Special thanks to: 
    Max Fenton (@maxfenton) for kicking this off

    ------------------------------------------------- */


.trends, .bird-topbar-etched, .wtf-module, .site-footer, .topics {
    display: none !important;
}

.wrapper, .wrapper-narrow, .wrapper-permalink {
    background: none !important;
    max-width: 37em !important;
}

.dashboard {
    float: none !important;
    width: 100% !important;
}

.content-main {
    float: none !important;
    width: 100% !important;
}

.global-nav {
    position: relative !important;
    width: 100% !important;
    max-width: 37em !important;
    margin: 0 auto !important;
}

.pull-right, .pull-right .nav, .secondary-nav {
    float: left !important;
}

.global-nav .form-search {
    width: 225px !important;
}

.topbar-divider {
    display: none !important;
}

.topbar {
    background-color: #333 !important;
}

.topbar-tweet-btn {
    margin-left: 17px !important;
}

body {
    background-image: none !important;
    background-color: #333 !important;
}

.tweet-content .tweet-box {
    max-width: 26em !important;
}

.profile-card-inner {
    width: 40% !important;
}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

width: 0px;
height: 0px;
border-style: solid;
border-width: 1em 0.5em 0 0.5em;
border-color: #cc4 transparent transparent transparent;

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0.5em 1em 0.5em;
border-color: transparent transparent #cc4 transparent;

width: 0px;
height: 0px;
border-style: solid;
border-width: 0.5em 0 0.5em 1em;
border-color: transparent transparent transparent #cc4;