이미지 생성
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script> <script> $(document).ready(function () { $("img").each(function() { $(this).attr("data-original",$(this).attr("src")); $(this).removeAttr("src"); $(this).addClass("lazy"); }); }); </script> <script> var category = 'city', count = 10; for(var i=1; i<=count; i++) { document.write('<p><img src="http://lorempixel.com/300/200/'+category+'/'+i+'" width="300" height="200"></p>'); } </script> <script> $(document).ready(function () { $(function() { $("img.lazy").lazyload(); }); }); </script>
모바일 상품구매
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function () { $('#req').hide().before('<div style="width:100%; background-color:#e5e5e5; position:fixed; bottom:0; z-index:1; height:50px; z-index:1"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="5" style="border-spacing: 5px;border-collapse: separate;"><tr><td style="height:100%; width:50%; background:#fff; text-align:center; color:red;">요금: 0원</td><td style="height:100%; width:50%; background:#ff0000; text-align:center; color:#fff;"><a href="#" id="open_btn" style="color:#fff">구매하기</a></td></tr></table></div>'); $('a#open_btn').click(function (e) { e.preventDefault(); $('#req').slideToggle(100); }); $(document).click(function (e) { if ($(e.target).closest('#req').length > 0 || $(e.target).closest('#open_btn').length > 0) return; $('#req').slidedown(100); }); }); </script> <style> body {margin:0} a:link,a:visited,a:hover.a:active {TEXT-DECORATION: none} div,span,input { margin:0; box-sizing: border-box; } #req { width:100%; border:0; height:300px; bottom:0px; position:fixed; background:#e5e5e5; z-index:2; } </style> </head> <body> <div style="margin:0;width:100%; text-align:center; position:fixed;bottom:50px"><a href="#" id="open_btn"><img src="http://m.week-n.com/images/btn_oopen.png" border="0"></a></div> <div id="req"> <div style="background:#ffffff; margin:0;width:100%; height:20px;text-align:center; z-index:3"><a href="#" id="open_btn"><img src="http://m.week-n.com/images/btn_oclose.png" border="0"></a></div> <div style="margin:8px; padding:8px; background:#fff; height:217px; z-index:3; overflow-x:hidden; overflow-y:scroll; ">여기에 옵션내용이옴여기에 옵션내용이옴여기에 옵션내용이옴여기에 옵션내용이옴여기에 옵션내용이옴여기에 옵션내용이옴<br>111</div> <div style="height:50px; width:100%; background:#e5e5e5; position:fixed; bottom:0; z-index:1;left:0;z-index:3"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="5" style="border-spacing: 5px;border-collapse: separate;"> <tr> <td style="height:100%; width:50%; background:#fff; text-align:center; color:red;">요금: 0원</td> <td style="height:100%; width:50%; background:#ff0000; text-align:center; color:#fff;">구매하기</td> </tr> </table> </div> </div> </body> </html>
http://www.amerigotour.com/gmap.htm
반투명배경과 글자는제외
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div style="overflow:hidden; width:500px; height:500px; background-color:rgba(0,0,0,0.5); border:1px solid #ccc"> <div style="font-size:36px; color:blue;font-weight:bold; text-align:center; line-height:350px"><img src="http://i.imgur.com/k8BtMvj.jpg" width="300"><br>티웍스</div> </div> <br> <div style="overflow:hidden; width:500px; height:500px; background-color:#000; opacity:0.5; border:1px solid #ccc"> <div style="font-size:36px; color:blue; font-weight:bold; text-align:center; line-height:350px"><img src="http://i.imgur.com/k8BtMvj.jpg" width="300"><br>티웍스</div> </div> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <script language="JavaScript" type="text/JavaScript"> //hwpctrl를 이용하기 위해서는 한글 2002이상이 사용자 컴퓨터에 깔려 있어야 한다. //active X처럼 특별히 웹상에서 설치해야 할 파일은 없다. var MinVersion = 0x0505010C; var data; var pHwpCtrl; //페이지 로드시 맨 처음 실행될 함수. function OnStart() { pHwpCtrl = document.HwpCtrl; _VerifyVersion(); document.HwpCtrl.SetClientName("DEBUG"); URLOpen(); } function _VerifyVersion() { // 설치확인 if(pHwpCtrl.getAttribute("Version") == null) { // alert(!"한글 2002 컨트롤이 설치되지 않았습니다."); // return; } //버젼 확인 CurVersion = pHwpCtrl.Version; if(CurVersion < MinVersion) { alert(!"HwpCtrl의 버젼이 낮아서 정상적으로 동작하지 않을 수 있습니다.\n"+"최신 버젼으로 업데이트하기를 권장합니다.\n\n" + "현재 버젼: 0x" + CurVersion.toString(16) + "\n" + "권장 버젼: 0x" + MinVersion.toString(16) + " 이상"); } } //한글파일 문서 열기 function URLOpen() { var bRes = document.HwpCtrl.RegisterModule("FilePathCheckDLL", "FilePathChecker"); document.HwpCtrl.Clear(1); //문서 내용 지움 //document.HwpCtrl.Open("c:/주말교통상황(12.10).hwp", "", "code:acp;url:true") document.HwpCtrl.Open("http://www.kdiss.or.kr/down/kor-sample.hwp", "", "code:acp;url:true") document.HwpCtrl.EditMode=1; document.HwpCtrl.MovePos(2); //캐럿을 문서 처음으로 이동 } //한글 컨트롤 오브젝트를 html에 심는 함수 function WriteEmbedHanPop(){ document.write("<OBJECT id='HwpCtrl' style='LEFT: 0px; TOP: 0px;' height='768' width='1024' align='center' classid='CLSID:BD9C32DE-3155-4691-8972-097D53B10052'>"); document.write("<PARAM NAME='TOOLBAR_MENU' VALUE='true'>"); document.write("<PARAM NAME='TOOLBAR_STANDARD' VALUE='true'>"); document.write("<PARAM NAME='TOOLBAR_FORMAT' VALUE='true'>"); document.write("<PARAM NAME='TOOLBAR_DRAW' VALUE='true'>"); //document.write("<PARAM NAME='TOOLBAR_TABLE' VALUE='FALSE'>"); // document.write("<PARAM NAME='TOOLBAR_IMAGE' VALUE='FALSE'>"); //document.write("<PARAM NAME='TOOLBAR_HEADERFOOTER' VALUE='FALSE'>"); document.write("<PARAM NAME='SHOW_TOOLBAR' VALUE='true'>"); document.write("</OBJECT>"); } </script> </head> <body onload="OnStart()"> <table cellpadding="0" border=0 cellspacing="0" class="fr01"> <tr> <td valign="top"> <!-- 보고서 뷰어 --> <div style="width:1024px;height:768px; overflow-y:scroll;"> <!-- 한글 파일 미리 보기 보여줄 장소에 오브젝트 엠베디드 하는 스크립트 적용 --> <script language="javascript">WriteEmbedHanPop()</script> </td> </tr> </table> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="expires" content="0" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script> <script> /* * document.js 1.0 * * Copyright 2011, hanausi (http://www.hanausi.com) * * Depends: * hanausi.js */ var _document = {}; /* * 한글과컴퓨터 hwp */ _document.hwp = {}; _document.hwp.minVersion = 0x05050117; _document.hwp.pHwpCtrl = null; _document.hwp.basePath = "http://"; /* * open hwp */ _document.hwp.onStart = function(hwp){ _document.hwp.pHwpCtrl = $("HwpCtrl"); /* * version체크 한글이 설치되어있는지 유무를 판별한다. */ if(!_document.hwp.version()){ return; } /* * debug 모드 */ _document.hwp.pHwpCtrl.SetClientName("DEBUG"); if(!_document.hwp.pHwpCtrl.Open(_document.hwp.basePath + hwp)) { alert("파일(" + _document.hwp.basePath + hwp + ") 를 여는데 실패하였습니다."); } _document.hwp.pHwpCtrl.SetToolBar(-1, "TOOLBAR_MENU"); _document.hwp.pHwpCtrl.SetToolBar(-1, "TOOLBAR_STANDARD"); _document.hwp.pHwpCtrl.SetToolBar(-1, "TOOLBAR_FORMAT"); _document.hwp.pHwpCtrl.SetToolBar(-1, "TOOLBAR_DRAW"); _document.hwp.pHwpCtrl.SetToolBar(-1, "-TOOLBAR_TABLE"); _document.hwp.pHwpCtrl.SetToolBar(-1, "-TOOLBAR_IMAGE"); _document.hwp.pHwpCtrl.SetToolBar(-1, "-TOOLBAR_HEADERFOOTER"); _document.hwp.pHwpCtrl.SetToolBar(0, "FilePreview, Print, Separator, Undo, Redo, Separator, Cut, Copy, Paste," +"Separator, ParaNumberBullet, MultiColumn, SpellingCheck, HwpDic, Separator, PictureInsertDialog, MacroPlay1"); _document.hwp.pHwpCtrl.SetToolBar(0, "Print, Separator, Undo, Redo, Separator, Cut, Copy, Paste," +"Separator, ParaNumberBullet, MultiColumn, SpellingCheck, HwpDic, Separator, PictureInsertDialog, MacroPlay1"); _document.hwp.pHwpCtrl.ShowToolBar(true); _document.hwp.pHwpCtrl.ShowStatusBar(1); }; _document.hwp.getBasePath = function(){ //BasePath를 구한다. var loc = unescape(document.location.href); var lowercase = loc.toLowerCase(loc); if (lowercase.indexOf("http://") == 0) // Internet { return loc.substr(0,loc.lastIndexOf("/") + 1);//BasePath 생성 } /* * local */ var path = loc.replace(/.{2,}:\/{2,}/, ""); // file:/// 를 지워버린다. return path.substr(0,path.lastIndexOf("/") + 1);//BasePath 생성 }; _document.hwp.version = function(){ /* * 설치확인 */ if(_document.hwp.pHwpCtrl.getAttribute("Version") == null) { // alert("한글(HwpCrtl)이 설치되지 않았습니다."); // return false; } //버젼 확인 /* * 버젼 확인 */ var currentVersion = _document.hwp.pHwpCtrl.Version; if(currentVersion < _document.hwp.minVersion) { alert("한글(HwpCrtl)의 버젼이 낮아서 정상적으로 동작하지 않을 수 있습니다.\n"+ "최신 버젼으로 업데이트하기를 권장합니다.\n\n"+ "현재 버젼: 0x" + currentVersion.toString(16) + "\n"+ "권장 버젼: 0x" + _document.hwp.minVersion.toString(16) + " 이상" ); } return true; }; </script> </head> <body> <table width="1200" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><div id="content"> <OBJECT id="HwpCtrl" style="LEFT: 0px; TOP: 0px" height="800" width="1200" classid="CLSID:BD9C32DE-3155-4691-8972-097D53B10052"></OBJECT> </div> <script> /* * 페이지 로딩시 호출(prototype.js) */ Event.observe(window, 'load', function() { _document.hwp.onStart("www.kdiss.or.kr/down/kor-sample.hwp"); //웹에있는 파일 호출 }); </script></td> </tr> </table> </body> </html>
파노라마 VR jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <style> .park{ position: relative; width: 880px; height: 400px; margin-top:15px; overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,.2); } .park img{ opacity: 0; transition: opacity .6s linear .85s; } .park img.loaded{ opacity: 1; } .img-pan-container{ position: relative; overflow: hidden; cursor: pointer; height: 100%; width: 100%; } .img-pan-container img{ -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); position: absolute; top: 0; left: 0; } </style> <div class="park"> <img src="http://www.pilot12.com/images/park.jpg" /> </div> <script> (function($){ $.fn.imagePanning=function(){ var init="center", speed=800, //animation/tween speed //custom js tween _tweenTo=function(el,prop,to,duration,easing,overwrite){ if(!el._mTween){el._mTween={top:{},left:{}};} var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style,_request,tobj=el._mTween[prop]; if(prop==="left"){from=el.offsetLeft;} var diff=to-from; if(overwrite!=="none"){_cancelTween();} _startTween(); function _step(){ progress=_getTime()-startTime; _tween(); if(progress>=tobj.time){ tobj.time=(progress>tobj.time) ? progress+_delay-(progress-tobj.time) : progress+_delay-1; if(tobj.time<progress+1){tobj.time=progress+1;} } if(tobj.time<duration){tobj.id=_request(_step);} } function _tween(){ if(duration>0){ tobj.currVal=_ease(tobj.time,from,diff,duration,easing); elStyle[prop]=Math.round(tobj.currVal)+"px"; }else{ elStyle[prop]=to+"px"; } } function _startTween(){ _delay=1000/60; tobj.time=progress+_delay; _request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame; tobj.id=_request(_step); } function _cancelTween(){ if(tobj.id==null){return;} if(!window.requestAnimationFrame){clearTimeout(tobj.id); }else{window.cancelAnimationFrame(tobj.id);} tobj.id=null; } function _ease(t,b,c,d,type){ var ts=(t/=d)*t,tc=ts*t; return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t); } function _getTime(){ if(window.performance && window.performance.now){ return window.performance.now(); }else{ if(window.performance && window.performance.webkitNow){ return window.performance.webkitNow(); }else{ if(Date.now){return Date.now();}else{return new Date().getTime();} } } } }; return this.each(function(){ var $this=$(this),timer,dest; if($this.data("imagePanning")) return; $this.data("imagePanning",1) //create markup .wrap("<div class='img-pan-container' />") .after("<div class='resize' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>") //image loaded fn .one("load",function(){ setTimeout(function(){ $this.addClass("loaded").trigger("mousemove",1); },1); }).each(function(){ //run load fn even if cached if(this.complete) $(this).load(); }) //panning fn .parent().on("mousemove touchmove MSPointerMove pointermove",function(e,p){ var cont=$(this); e.preventDefault(); var contH=cont.height(),contW=cont.width(), isTouch=e.type.indexOf("touch")!==-1,isPointer=e.type.indexOf("pointer")!==-1, evt=isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e, coords=[ !p ? evt.pageY-cont.offset().top : init==="center" ? contH/2 : 0, !p ? evt.pageX-cont.offset().left : init==="center" ? contW/2 : 0 ]; dest=[Math.round(($this.outerHeight(true)-contH)*(coords[0]/contH)),Math.round(($this.outerWidth(true)-contW)*(coords[1]/contW))]; }) //resize fn .find(".resize iframe").each(function(){ $(this.contentWindow || this).on("resize",function(){ $this.trigger("mousemove",1); }); }); //panning animation 60FPS if(timer) clearInterval(timer); timer=setInterval(function(){ _tweenTo($this[0],"top",-dest[0],speed); _tweenTo($this[0],"left",-dest[1],speed); },16.6); }); } $(document).ready(function(){ $(".park img").imagePanning(); }); })(jQuery); </script> </div> </div> </body> </html>
상단 풀메뉴
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>PHPS.kr</title> <style> /* ======================================================================== RESET ======================================================================== */ @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(//fonts.googleapis.com/css?family=Open+Sans:400,600); html, body, pre, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, li, ol, th, td, p, blockquote, form, fieldset, legend, menu, nav, section, hgroup, article, header, aside, footer, input, select, textarea, button { margin: 0; padding: 0; font-family: 'Open Sans', Nanum Gothic, monospace, Corbel, Dotum, AppleGothic, Helvetica, sans-serif; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body, h1, h2, h3, h4, h5, h6, table, input, select, textarea, a { font-size: 12px; color: #313131; font-family: 'Open Sans', Nanum Gothic, monospace, Corbel, Dotum, AppleGothic, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: normal } img, fieldset, button { border: 0 none } li { list-style: none } hr, caption, legend { display: none } a { color: #313131; text-decoration: none; } a:hover { } button { overflow: hidden; cursor: pointer; } button span { visibility: hidden } address, em { font-style: normal } select { line-height: 22px; height: 22px; } input:focus { outline: none } table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-wrap: break-word; word-break: keep-all; } /* 폼디자인 */ input, select {border:1px solid #e1e1e1; vertical-align:middle; font-size:14px } textarea {border:1px solid #e1e1e1; vertical-align:middle; padding: 2px 0 0 2px } input[type=checkbox], input[type=radio], input[type=image] { border:0 } </style> <style> #header { position:relative; width:100%; height:113px; z-index:100 } #header .hdTop_wrap { position:relative; height:71px; background:#fff; } #header .hdTop_wrap .hdTop { margin:0 auto; position:relative; width:1100px } #header .hdTop_wrap .hdTop .tlogo { position:absolute; top:17px; left:17px } #header .hdTop_wrap .hdTop .gnb { padding-top:28px; float:right } #header .hdTop_wrap .hdTop .gnb li { float:left; background:url(https://www.phps.kr/img/common/blit_line.gif) right 4px no-repeat } #header .hdTop_wrap .hdTop .gnb li.last { background:none } #header .hdTop_wrap .hdTop .gnb li a { display:block; padding:0 10px } #header .hdTop_wrap .hdTop .gnb li a i { font-size:16px } #header .hdBottom_wrap { position:absolute; top:71px; left:0; width:100%; border-top:1px solid #e1e1e1; border-bottom:1px solid #a0a0a0; background-color:#ffffff /*background:url(https://www.phps.kr/img/common/bg_lnb.png) repeat-x; *zoom:1 */ } #header .hdBottom_wrap:after { display:block; clear:both; content:'' } #header .hdBottom_wrap.act { position:fixed; top:0; left:0; right:0; z-index:100 } #lnb { margin:0 auto; width:1100px; z-index:10 } #lnb > ul { *zoom:1 } #lnb > ul:after { display:block; clear:both; content:'' } #lnb > ul > li { margin-top:-1px; position:relative; float:left; width:137px; } #lnb > ul > li > a { display:block; height:42px; font-size:15px; font-weight:bold; text-align:center; line-height:42px; border-left:1px solid #e1e1e1 } #lnb > ul > li.on { background:#f7f7f7 } #lnb > ul > li.on > a { height:39px; color:#1a4f98; line-height:36px; border-top:3px solid #1a4f98 } #lnb > ul > li > ul { display:none; padding:19px 0 } #lnb > ul > li > ul > li { } #lnb > ul > li > ul > li > a { display:block; padding-left:12px; height:24px; font-size:13px; color:#626262; line-height:24px } #lnb > ul > li > ul > li > a:hover { color:#fff; background:#1a4f98 } #lnb > ul > li.myService { width:141px; background:#1a4f98 } #lnb > ul > li.myService > a { color:#fff; border-left:1px solid #1a4f98 } #lnb > ul > li.myService.on > a { height:42px; line-height:42px !important; border-top:none !important } #lnb > ul > li.myService > a > i { font-size:16px } #lnb > ul > li.myService > ul > li > a { color:#fff; height:24px; line-height:24px } #lnb > ul > li.myService > ul > li > a:hover { color:#1a4f98; background:#fff } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //상단 메뉴 var mySerHeight = $("li.myService ul").height(); $("#lnb").mouseenter(function(){ $(".subMenu").stop().slideDown("fast"); }).mouseleave(function(){ $(".subMenu").stop().slideUp("fast"); }); $("#lnb > ul > li").mouseenter(function(){ $(this).addClass("on"); if ( $(".subMenu").height() < mySerHeight ) { $(".subMenu").css("height",mySerHeight); } }).mouseleave(function(){ $(this).removeClass("on"); }); }); </script> </head> <body> <div id="wrap"> <!-- 상단 시작 --> <div id="header"> <div class="hdTop_wrap"> <div class="hdTop"> <h1 class="tlogo"><a href="/"><img src="https://www.phps.kr/img/common/tlogo.jpg" alt="스쿨호스팅 PHPS.kr" /></a></h1> <ul class="gnb"> <li><a href="#/">로그인</a></li> <li><a href="#/">회원가입</a></li> <li class="last"><a href="#/">고객센터</a></li> </ul> </div> </div> <div class="hdBottom_wrap"> <div id="lnb"> <ul> <li> <a href="#none" style="cursor:default;">웹호스팅</a> <ul class="subMenu"> <li><a href="#/">서비스신청</a></li> <li><a href="#/">사양및가격</a></li> <li><a href="#/">서비스소개</a></li> </ul> </li> <li> <a href="#none" style="cursor:default;">가상서버호스팅</a> <ul class="subMenu"> <li><a href="#/">서비스신청</a></li> <li><a href="#/">사양및가격</a></li> <li><a href="#/">서비스소개</a></li> </ul> </li> <li> <a href="#none" style="cursor:default;">이미지호스팅</a> <ul class="subMenu"> <li><a href="#/">CDN <img src="https://www.phps.kr/img/common/ico_new.gif" style="vertical-align:sub;"/></a></li> <li><a href="#/">서비스신청</a></li> <li><a href="#/">사양및가격</a></li> <li><a href="#/">서비스소개</a></li> <li><a href="#/">체험판신청</a></li> </ul> </li> <li> <a href="#none" style="cursor:default;">SMS호스팅</a> <ul class="subMenu"> <li><a href="#/">서비스신청</a></li> <li><a href="#/">사양및가격</a></li> <li><a href="#/">서비스소개</a></li> <li><a href="#/">모듈연동매뉴얼</a></li> <li><a href="#/">080수신거부</a></li> </ul> </li> <li> <a href="#none" style="cursor:default;">도메인</a> <ul class="subMenu"> <li><a href="#/">도메인등록</a></li> <li><a href="#/">기간연장</a></li> <li><a href="#/">기관이전</a></li> <li><a href="#/">정보변경</a></li> <li><a href="#/">부가서비스</a></li> <li><a href="#/">결제관리</a></li> </ul> </li> <li> <a href="#none" style="cursor:default;">SSL</a> <ul class="subMenu"> <li><a href="#/">서비스신청</a></li> <li><a href="#/">종류및가격</a></li> <li><a href="#/">서비스소개</a></li> </ul> </li> <li> <a href="#none" style="cursor:default;">IDC</a> <ul class="subMenu"> <li><a href="#/">서비스신청</a></li> <li><a href="#/">종류및가격</a></li> <li><a href="#/">서비스소개</a></li> <li><a href="#/">라이선스임대</a></li> </ul> </li> <li class="myService"> <a href="myservice_main.html"><i class="fa fa-gear"></i> 내서비스관리</a> <ul class="subMenu"> <li><a href="#/">웹호스팅관리</a></li> <li><a href="#/">가상서버호스팅관리</a></li> <li><a href="#/">이미지호스팅관리</a></li> <li><a href="#/">SMS호스팅관리</a></li> <li><a href="#/">도메인관리</a></li> <li><a href="#/">SSL관리</a></li> <li><a href="#/">IDC관리</a></li> <li><a href="#/">결제관리</a></li> <li><a href="#/">호스팅명의변경</a></li> <li><a href="#/">도메인명의변경</a></li> <li><a href="#/">1:1맞춤상담내역</a></li> </ul> </li> </ul> </div> </div> </div> <!-- //상단 끝 --> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Save a Place</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <script src="https://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyBPIF0BLl9YCzWKfUuxKhuR--Eki2sTKm4"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <style> /* ----------------------------------------- General ----------------------------------------- */ header { border-top: 10px solid #a72200; background: #fff; color: #222; margin-bottom: 20px; } header h1 { font-family: "Oxygen", sans-serif; text-transform: capitalize; font-weight: 700; margin-top: 50px; font-size: 50px; } header h1 a { color: #222; } ul, ol, dl { margin-bottom: 20px } .gmap { height: 380px; width: 100%; padding: 3px; border: 5px solid #ddd; font-size: 90%; } .gmap + .gmap { margin: 5px 0; } .canvas_map { width: 100% !important; } .gmap img, .gmap object, .gmap embed { max-width: none; height: auto } .gmap *,.gmap *:before,.gmap *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} .tabs-content li { list-style-type: none !important; } .normal-list li { list-style-type:disc !important; } .line { border-bottom: 3px solid #ddd; margin-top: 10px; } h2 { font-family: "Open Sans", sans-serif; font-size: 32px; font-weight: 400; height: 40px; line-height: 40px; margin-bottom: 20px; } .install h2 { } .panel h2 { font-size: 28px; } h3 { font-size: 22px; margin: 0 0 5px; } .code h3 { margin: 15px 0 12px; font-weight: normal; } .description { margin-bottom: 20px; } .description ul { padding-left: 20px; } .description strong { font-weight: normal; } .tabs.pill { margin-bottom: 20px; } .tabs.pill.small a { padding: 0 8px; font-size: 12px; line-height: 22px; height: 22px; } .tabs.pill dd.active, .tabs.pill li.active, .tabs.pill dd, .tabs.pill li { margin-top: 24px; } section { padding-bottom: 20px; } section.last { padding-bottom: 0; } header .line { border-bottom: 3px solid #444; } section.last .line { border: none; } footer { padding-top: 10px; border-top: 3px solid #444; } ul.side-nav li { margin: 0; } .tabs .right { float: right !important; } .docs .prettyprint { font-size: 12px; } .panel { height: 140px; } .panel .button { width: 100%; } select { width: auto; } .mobile-one .right { float: right!important } .adp-directions { width: 100%; } #controls { margin-bottom: 20px; float: left; width: 100%; } #controls .ullist { margin: 0px; padding: 0px; list-style-type: none; } #controls-9 .wrap_controls { margin-bottom: 20px; } #route table tbody tr td.adp-text { padding: 9px 25px; vertical-align: middle; } .socials { position: absolute; bottom: 20px; right: -10px; } @media only screen and (max-width: 767px) { h2 { font-size: 24px; } h3 { font-size: 20px; } .tabs dd a, .tabs li a { padding: 0px 6px; } .panel { height: auto; } .socials { position: static; } .gmap_controls.tabs .ullist li a { padding: 0px 6px !important; } #directions h2 { height: auto; } } /* ----------------------------------------- Examples ----------------------------------------- */ .gmap * { font-size: 100%; } .ullist { width: 100%; } .tab-content { margin: 0 0 20px; } .menu .ullist li { width: 49%; float: left; margin-right: 1% } .menu .ullist li.active a, .menu .ullist li a:hover { color: #B82200 !important; background-color: #eee !important; } .tabs .ullist li a{ padding: 0px 23.8px !important; } .tabs .ullist li a:hover { color: #6f6f6f !important; background-color: transparent !important; } .tabs .ullist li.active a{ font-weight: bold; color: #3c3c3c !important; background-color: #fff !important; } .ullist li.active a { font-weight: bold; } .ullist li.active a, .ullist li a:hover { color: #B82200 !important; background-color: #eee !important; } /*! normalize.css v2.1.0 | MIT License | git.io/normalize */ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* foundation.css */ *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background:#fff;font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:normal;font-style:normal;font-size:14px;line-height:1;color:#222;position:relative;-webkit-font-smoothing:antialiased}a img{border:none}a{color:#b82200;text-decoration:none;line-height:inherit}a:hover{color:#9f1d00}a:focus{color:#9f1d00}p a,p a:visited{line-height:inherit}.left{float:left}.right{float:right}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.hide{display:none}.hide-override{display:none !important}.highlight{background:#ff9}#googlemap img,object,embed{max-width:none}#map_canvas embed{max-width:none}#map_canvas img{max-width:none}#map_canvas object{max-width:none}figure{margin:0}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;font-size:14px;direction:ltr}p{font-family:inherit;font-weight:normal;font-size:14px;line-height:1.6;margin-bottom:17px}p.lead{font-size:17.5px;line-height:1.6;margin-bottom:17px}aside p{font-size:13px;line-height:1.35;font-style:italic}h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:bold;font-style:normal;color:#222;text-rendering:optimizeLegibility;line-height:1.1;margin-bottom:14px;margin-top:14px}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-size:60%;color:#6f6f6f;line-height:0}h1{font-size:44px}h2{font-size:37px}h3{font-size:27px}h4{font-size:23px}h5{font-size:17px}h6{font-size:14px}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:22px 0 21px;height:0}.subheader{line-height:1.3;color:#6f6f6f;font-weight:300;margin-bottom:17px}em,i{font-style:italic;line-height:inherit}strong,b{font-weight:bold;line-height:inherit}small{font-size:60%;line-height:inherit}code{font-weight:bold;background:#ff9}ul,ol,dl{font-size:14px;line-height:1.6;margin-bottom:17px;list-style-position:outside}ul li ul,ul li ol{margin-left:20px;margin-bottom:0}ul.square,ul.circle,ul.disc{margin-left:17px}ul.square{list-style-type:square}ul.square li ul{list-style:inherit}ul.circle{list-style-type:circle}ul.circle li ul{list-style:inherit}ul.disc{list-style-type:disc}ul.disc li ul{list-style:inherit}ul.no-bullet{list-style:none}ul.large li{line-height:21px}ol{margin-left:20px}ol li ul,ol li ol{margin-left:20px;margin-bottom:0}blockquote,blockquote p{line-height:1.5;color:#6f6f6f}blockquote{margin:0 0 17px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:13px;color:#555}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited{color:#555}abbr,acronym{text-transform:uppercase;font-size:90%;color:#222;border-bottom:1px solid #ddd;cursor:help}abbr{text-transform:none}.print-only{display:none !important}@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}img{max-width:100% !important}@page{margin:0.5cm}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}.hide-on-print{display:none !important}.print-only{display:block !important}.hide-for-print{display:none !important}.show-for-print{display:inherit !important}}form{margin:0 0 19.41641px}.row form .row{margin:0 -6px}.row form .row .column,.row form .row .columns{padding:0 6px}.row form .row.collapse{margin:0}.row form .row.collapse .column,.row form .row.collapse .columns{padding:0}label.right{float:none;text-align:right}label.inline{line-height:32px;margin:0 0 12px 0}.prefix,.postfix{display:block;position:relative;z-index:2;text-align:center;width:100%;padding-top:0;padding-bottom:0;height:32px;line-height:31px}a.button.prefix,a.button.postfix{padding-left:0;padding-right:0;text-align:center}span.prefix,span.postfix{background:#f2f2f2;border:1px solid #ccc}.prefix{left:2px;-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;border-top-left-radius:2px;-moz-border-radius-bottomleft:2px;-webkit-border-bottom-left-radius:2px;border-bottom-left-radius:2px;overflow:hidden}.postfix{right:2px;-moz-border-radius-topright:2px;-webkit-border-top-right-radius:2px;border-top-right-radius:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-right-radius:2px;border-bottom-right-radius:2px}input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea{background-color:#fff;font-family:inherit;border:1px solid #ccc;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;-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);color:rgba(0,0,0,0.75);display:block;font-size:14px;margin:0 0 12px 0;padding:6px;height:32px;width:100%;-webkit-transition:all 0.15s linear;-moz-transition:all 0.15s linear;-o-transition:all 0.15s linear;transition:all 0.15s linear}input[type="text"].oversize,input[type="password"].oversize,input[type="date"].oversize,input[type="datetime"].oversize,input[type="email"].oversize,input[type="number"].oversize,input[type="search"].oversize,input[type="tel"].oversize,input[type="time"].oversize,input[type="url"].oversize,textarea.oversize{font-size:17px;padding:4px 6px}input[type="text"]:focus,input[type="password"]:focus,input[type="date"]:focus,input[type="datetime"]:focus,input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="time"]:focus,input[type="url"]:focus,textarea:focus{background:#fafafa;border-color:#b3b3b3}input[type="text"][disabled],input[type="password"][disabled],input[type="date"][disabled],input[type="datetime"][disabled],input[type="email"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="time"][disabled],input[type="url"][disabled],textarea[disabled]{background-color:#ddd}textarea{height:auto}select{width:100%}fieldset{border:solid 1px #ddd;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;padding:12px;margin:18px 0}fieldset legend{font-weight:bold;background:#fff;padding:0 3px;margin:0;margin-left:-3px}.error input,input.error,.error textarea,textarea.error,.error input:focus,input.error:focus,.error textarea:focus,textarea.error:focus{border-color:#c60f13;background-color:rgba(198,15,19,0.1)}.error input:focus,input.error:focus,.error textarea:focus,textarea.error:focus{outline-color:#f5797c}.error label,label.error{color:#c60f13}.error small,small.error{display:block;padding:6px 4px;margin-top:-13px;margin-bottom:12px;background:#c60f13;color:#fff;font-size:12px;font-weight:bold;-moz-border-radius-bottomleft:2px;-webkit-border-bottom-left-radius:2px;border-bottom-left-radius:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-right-radius:2px;border-bottom-right-radius:2px}form.custom span.custom{display:inline-block;width:16px;height:16px;position:relative;top:2px;border:solid 1px #ccc;background:#fff}form.custom span.custom.radio{-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px}form.custom span.custom.checkbox:before{content:"";display:block;line-height:0.8;height:14px;width:14px;text-align:center;position:absolute;top:0;left:0;font-size:14px;color:#fff}form.custom span.custom.radio.checked:before{content:"";display:block;width:8px;height:8px;-webkit-border-radius:100px;-moz-border-radius:100px;-ms-border-radius:100px;-o-border-radius:100px;border-radius:100px;background:#222;position:relative;top:3px;left:3px}form.custom span.custom.checkbox.checked:before{content:"\00d7";color:#222}form.custom div.custom.dropdown{display:block;position:relative;width:auto;height:28px;margin-bottom:9px;margin-top:2px}form.custom div.custom.dropdown ul{overflow-y:auto;max-height:200px}form.custom div.custom.dropdown a.current{display:block;width:auto;line-height:26px;min-height:28px;padding:0;padding-left:6px;padding-right:38px;border:solid 1px #ddd;color:#141414;background-color:#fff;white-space:nowrap}form.custom div.custom.dropdown a.selector{position:absolute;width:27px;height:28px;display:block;right:0;top:0;border:solid 1px #ddd}form.custom div.custom.dropdown a.selector:after{content:"";display:block;content:"";display:block;width:0;height:0;border:solid 5px;border-color:#aaa transparent transparent transparent;position:absolute;left:50%;top:50%;margin-top:-2px;margin-left:-5px}form.custom div.custom.dropdown:hover a.selector:after,form.custom div.custom.dropdown.open a.selector:after{content:"";display:block;width:0;height:0;border:solid 5px;border-color:#222 transparent transparent transparent}form.custom div.custom.dropdown.open ul{display:block;z-index:10}form.custom div.custom.dropdown.small{width:134px !important}form.custom div.custom.dropdown.medium{width:254px !important}form.custom div.custom.dropdown.large{width:434px !important}form.custom div.custom.dropdown.expand{width:100% !important}form.custom div.custom.dropdown.open.small ul{width:134px !important}form.custom div.custom.dropdown.open.medium ul{width:254px !important}form.custom div.custom.dropdown.open.large ul{width:434px !important}form.custom div.custom.dropdown.open.expand ul{width:100% !important}form.custom div.custom.dropdown ul{position:absolute;width:auto;display:none;margin:0;left:0;top:27px;margin:0;padding:0;background:#fff;background:rgba(255,255,255,0.95);border:solid 1px #ccc}form.custom div.custom.dropdown ul li{color:#555;font-size:13px;cursor:pointer;padding:3px;padding-left:6px;padding-right:38px;min-height:18px;line-height:18px;margin:0;white-space:nowrap;list-style:none}form.custom div.custom.dropdown ul li.selected{background:#cdebf5;color:#000}form.custom div.custom.dropdown ul li.selected:after{content:"\2013";position:absolute;right:10px}form.custom div.custom.dropdown ul li:hover{background-color:#cdebf5;color:#000}form.custom div.custom.dropdown ul li:hover:after{content:"\2013";position:absolute;right:10px;color:#a3dbec}form.custom div.custom.dropdown ul li.selected:hover{background:#cdebf5;cursor:default;color:#000}form.custom div.custom.dropdown ul li.selected:hover:after{color:#000}form.custom div.custom.dropdown ul.show{display:block}form.custom .custom.disabled{background-color:#ddd}@-moz-document url-prefix(){form.custom div.custom.dropdown a.selector{height:28px}}.lt-ie9 form.custom div.custom.dropdown a.selector{height:28px}.row{width:860px;max-width:100%;min-width:768px;margin:0 auto}.row .row{width:auto;max-width:none;min-width:0;margin:0 -10px}.row.collapse .column,.row.collapse .columns{padding:0}.row .row{width:auto;max-width:none;min-width:0;margin:0 -10px}.row .row.collapse{margin:0}.column,.columns{float:left;min-height:1px;padding:0 10px;position:relative}.column.centered,.columns.centered{float:none;margin:0 auto}[class*="column"]+[class*="column"]:last-child{float:right}[class*="column"]+[class*="column"].end{float:left}.one,.row .one{width:25%}.two,.row .two{width:50%}.three,.row .three{width:75%}.four,.row .four{width:100%}.row .offset-by-one{margin-left:25%}.row .offset-by-two{margin-left:50%}.push-two{left:50%}.pull-two{right:50%}img{height:auto}img,object,embed{max-width:100%}img{-ms-interpolation-mode:bicubic}#map_canvas img,.map_canvas img{max-width:none!important}.row{*zoom:1}.row:before,.row:after{content:" ";display:table}.row:after{clear:both}.block-grid{display:block;overflow:hidden;padding:0}.block-grid>li{display:block;height:auto;float:left}.block-grid.one-up{margin:0}.block-grid.one-up>li{width:100%;padding:0 0 15px}.block-grid.two-up{margin:0 -15px}.block-grid.two-up>li{width:50%;padding:0 15px 15px}.block-grid.two-up>li:nth-child(2n+1){clear:both}.block-grid.three-up{margin:0 -12px}.block-grid.three-up>li{width:33.33333%;padding:0 12px 12px}.block-grid.three-up>li:nth-child(3n+1){clear:both}.block-grid.four-up{margin:0 -10px}.block-grid.four-up>li{width:25%;padding:0 10px 10px}.block-grid.four-up>li:nth-child(4n+1){clear:both}.block-grid.five-up{margin:0 -8px}.block-grid.five-up>li{width:20%;padding:0 8px 8px}.block-grid.five-up>li:nth-child(5n+1){clear:both}.block-grid.six-up{margin:0 -8px}.block-grid.six-up>li{width:16.66667%;padding:0 8px 8px}.block-grid.six-up>li:nth-child(6n+1){clear:both}.block-grid.seven-up{margin:0 -8px}.block-grid.seven-up>li{width:14.28571%;padding:0 8px 8px}.block-grid.seven-up>li:nth-child(7n+1){clear:both}.block-grid.eight-up{margin:0 -8px}.block-grid.eight-up>li{width:12.5%;padding:0 8px 8px}.block-grid.eight-up>li:nth-child(8n+1){clear:both}.block-grid.nine-up{margin:0 -8px}.block-grid.nine-up>li{width:11.11111%;padding:0 8px 8px}.block-grid.nine-up>li:nth-child(9n+1){clear:both}.block-grid.ten-up{margin:0 -8px}.block-grid.ten-up>li{width:10%;padding:0 8px 8px}.block-grid.ten-up>li:nth-child(10n+1){clear:both}.block-grid.eleven-up{margin:0 -8px}.block-grid.eleven-up>li{width:9.09091%;padding:0 8px 8px}.block-grid.eleven-up>li:nth-child(11n+1){clear:both}.block-grid.twelve-up{margin:0 -8px}.block-grid.twelve-up>li{width:8.33333%;padding:0 8px 8px}.block-grid.twelve-up>li:nth-child(12n+1){clear:both}.button{width:auto;background:#b82200;border:1px solid #6c1400;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;color:#fff;cursor:pointer;display:inline-block;font-family:inherit;font-size:14px;font-weight:bold;line-height:1;margin:0;padding:10px 20px 11px;position:relative;text-align:center;text-decoration:none;-webkit-transition:background-color 0.15s ease-in-out;-moz-transition:background-color 0.15s ease-in-out;-o-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out}.button:hover,.button:focus{color:#fff;background-color:#851900}.button:active{-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2) inset;-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2) inset;box-shadow:0 1px 0 rgba(0,0,0,0.2) inset}.button.large{font-size:17px;padding:15px 30px 16px}.button.medium{font-size:14px}.button.small{font-size:11px;padding:7px 14px 8px}.button.tiny{font-size:10px;padding:5px 10px 6px}.button.expand{width:100%;text-align:center}.button.primary{background-color:#b82200;border:1px solid #6c1400}.button.primary:hover,.button.primary:focus{background-color:#851900}.button.success{background-color:#5da423;border:1px solid #396516}.button.success:hover,.button.success:focus{background-color:#457a1a}.button.alert{background-color:#c60f13;border:1px solid #7f0a0c}.button.alert:hover,.button.alert:focus{background-color:#970b0e}.button.secondary{background-color:#e9e9e9;color:#1d1d1d;border:1px solid #c3c3c3}.button.secondary:hover,.button.secondary:focus{background-color:#d0d0d0}.button.radius{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.button.round{-webkit-border-radius:1000px;-moz-border-radius:1000px;-ms-border-radius:1000px;-o-border-radius:1000px;border-radius:1000px}.button.full-width{width:100%;text-align:center;padding-left:0px !important;padding-right:0px !important}.button.left-align{text-align:left;text-indent:12px}.button.disabled,.button[disabled]{opacity:0.6;cursor:default;background:#b82200;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.button.disabled:hover,.button[disabled]:hover{background:#b82200}.button.disabled.success,.button[disabled].success{background-color:#5da423}.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus{background-color:#5da423;outline:none}.button.disabled.alert,.button[disabled].alert{background-color:#c60f13}.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus{background-color:#c60f13;outline:none}.button.disabled.secondary,.button[disabled].secondary{background-color:#e9e9e9}.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus{background-color:#e9e9e9;outline:none}input[type=submit].button,button.button{-webkit-appearance:none}@-moz-document url-prefix(){button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;padding:0}input[type="submit"].tiny.button{padding:3px 10px 4px}input[type="submit"].small.button{padding:5px 14px 6px}input[type="submit"].button,input[type=submit].medium.button{padding:8px 20px 9px}input[type="submit"].large.button{padding:13px 30px 14px}}.button.dropdown{position:relative;padding-right:44px}.button.dropdown.large{padding-right:60px}.button.dropdown.small{padding-right:28px}.button.dropdown.tiny{padding-right:20px}.button.dropdown:after{content:"";display:block;width:0;height:0;border:solid 6px;border-color:#fff transparent transparent transparent;position:absolute;top:50%;right:20px;margin-top:-2px}.button.dropdown.large:after{content:"";display:block;width:0;height:0;border:solid 7px;border-color:#fff transparent transparent transparent;margin-top:-3px;right:30px}.button.dropdown.small:after{content:"";display:block;width:0;height:0;border:solid 5px;border-color:#fff transparent transparent transparent;margin-top:-2px;right:14px}.button.dropdown.tiny:after{content:"";display:block;width:0;height:0;border:solid 4px;border-color:#fff transparent transparent transparent;margin-top:-1px;right:10px}.button.dropdown>ul{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;display:none;position:absolute;left:-1px;background:#fff;background:rgba(255,255,255,0.95);list-style:none;margin:0;padding:0;border:1px solid #ccc;border-top:none;min-width:100%;z-index:40}.button.dropdown>ul li{width:100%;cursor:pointer;padding:0;min-height:18px;line-height:18px;margin:0;white-space:nowrap;list-style:none}.button.dropdown>ul li a,.button.dropdown>ul li button{display:block;color:#555;font-size:13px;font-weight:normal;padding:6px 14px;text-align:left}.button.dropdown>ul li button{width:100%;border:inherit;background:inherit;font-family:inherit;margin:inherit;-webkit-font-smoothing:antialiased}.button.dropdown>ul li:hover,.button.dropdown>ul li:focus{background-color:#ffb09f;color:#222}.button.dropdown>ul li.divider{min-height:0;padding:0;height:1px;margin:4px 0;background:#ededed}.button.dropdown.up>ul{border-top:1px solid #ccc;border-bottom:none}.button.dropdown ul.no-hover.show-dropdown{display:block !important}.button.dropdown:hover>ul.no-hover{display:none}.button.dropdown.split{padding:0;position:relative}.button.dropdown.split:after{display:none}.button.dropdown.split:hover,.button.dropdown.split:focus{background-color:#b82200}.button.dropdown.split.alert:hover,.button.dropdown.split.alert:focus{background-color:#c60f13}.button.dropdown.split.success:hover,.button.dropdown.split.success:focus{background-color:#5da423}.button.dropdown.split.secondary:hover,.button.dropdown.split.secondary:focus{background-color:#e9e9e9}.button.dropdown.split>a{color:#fff;display:block;padding:10px 50px 11px 20px;padding-left:20px;padding-right:50px;-webkit-transition:background-color 0.15s ease-in-out;-moz-transition:background-color 0.15s ease-in-out;-o-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out}.button.dropdown.split>a:hover,.button.dropdown.split>a:focus{background-color:#851900;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset}.button.dropdown.split.large>a{padding:15px 75px 16px 30px;padding-left:30px;padding-right:75px}.button.dropdown.split.small>a{padding:7px 35px 8px 14px;padding-left:14px;padding-right:35px}.button.dropdown.split.tiny>a{padding:5px 25px 6px 10px;padding-left:10px;padding-right:25px}.button.dropdown.split>span{background-color:#b82200;position:absolute;right:0;top:0;height:100%;width:30px;border-left:1px solid #6c1400;-webkit-box-shadow:1px 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:1px 1px 0 rgba(255,255,255,0.5) inset;box-shadow:1px 1px 0 rgba(255,255,255,0.5) inset;-webkit-transition:background-color 0.15s ease-in-out;-moz-transition:background-color 0.15s ease-in-out;-o-transition:background-color 0.15s ease-in-out;transition:background-color 0.15s ease-in-out}.button.dropdown.split>span:hover,.button.dropdown.split>span:focus{background-color:#851900}.button.dropdown.split>span:after{content:"";display:block;width:0;height:0;border:solid 6px;border-color:#fff transparent transparent transparent;position:absolute;top:50%;left:50%;margin-left:-6px;margin-top:-2px}.button.dropdown.split.secondary>span:after{content:"";display:block;width:0;height:0;border:solid 6px;border-color:#1d1d1d transparent transparent transparent}.button.dropdown.split.large span{width:45px}.button.dropdown.split.small span{width:21px}.button.dropdown.split.tiny span{width:15px}.button.dropdown.split.large span:after{content:"";display:block;width:0;height:0;border:solid 7px;border-color:#fff transparent transparent transparent;margin-top:-3px;margin-left:-7px}.button.dropdown.split.small span:after{content:"";display:block;width:0;height:0;border:solid 4px;border-color:#fff transparent transparent transparent;margin-top:-1px;margin-left:-4px}.button.dropdown.split.tiny span:after{content:"";display:block;width:0;height:0;border:solid 3px;border-color:#fff transparent transparent transparent;margin-top:-1px;margin-left:-3px}.button.dropdown.split.alert>span{background-color:#c60f13;border-left-color:#7f0a0c}.button.dropdown.split.success>span{background-color:#5da423;border-left-color:#396516}.button.dropdown.split.secondary>span{background-color:#e9e9e9;border-left-color:#c3c3c3}.button.dropdown.split.secondary>a{color:#1d1d1d}.button.dropdown.split.alert>a:hover,.button.dropdown.split.alert>span:hover,.button.dropdown.split.alert>a:focus,.button.dropdown.split.alert>span:focus{background-color:#970b0e}.button.dropdown.split.success>a:hover,.button.dropdown.split.success>span:hover,.button.dropdown.split.success>a:focus,.button.dropdown.split.success>span:focus{background-color:#457a1a}.button.dropdown.split.secondary>a:hover,.button.dropdown.split.secondary>span:hover,.button.dropdown.split.secondary>a:focus,.button.dropdown.split.secondary>span:focus{background-color:#d0d0d0}ul.button-group{list-style:none;padding:0;margin:0 0 12px;*zoom:1}ul.button-group:before,ul.button-group:after{content:" ";display:table}ul.button-group:after{clear:both}ul.button-group li{padding:0;margin:0 0 0 -1px;float:left}ul.button-group li:first-child{margin-left:0}ul.button-group.radius li .button,ul.button-group.radius li .button.radius,ul.button-group.radius li .button-rounded{-webkit-border-radius:0px;-moz-border-radius:0px;-ms-border-radius:0px;-o-border-radius:0px;border-radius:0px}ul.button-group.radius li:first-child .button,ul.button-group.radius li:first-child .button.radius{-moz-border-radius-topleft:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px}ul.button-group.radius li:first-child .button.rounded{-moz-border-radius-topleft:1000px;-webkit-border-top-left-radius:1000px;border-top-left-radius:1000px;-moz-border-radius-bottomleft:1000px;-webkit-border-bottom-left-radius:1000px;border-bottom-left-radius:1000px}ul.button-group.radius li:last-child .button,ul.button-group.radius li:last-child .button.radius{-moz-border-radius-topright:3px;-webkit-border-top-right-radius:3px;border-top-right-radius:3px;-moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;border-bottom-right-radius:3px}ul.button-group.radius li:last-child .button.rounded{-moz-border-radius-topright:1000px;-webkit-border-top-right-radius:1000px;border-top-right-radius:1000px;-moz-border-radius-bottomright:1000px;-webkit-border-bottom-right-radius:1000px;border-bottom-right-radius:1000px}ul.button-group.even .button{width:100%}ul.button-group.even.two-up li{width:50%}ul.button-group.even.three-up li{width:33.3%}ul.button-group.even.three-up li:first-child{width:33.4%}ul.button-group.even.four-up li{width:25%}ul.button-group.even.five-up li{width:20%}div.button-bar{overflow:hidden}div.button-bar ul.button-group{float:left;margin-right:8px}div.button-bar ul.button-group:last-child{margin-left:0}.tabs{list-style:none;border-bottom:solid 1px #e6e6e6;display:block;height:40px;padding:0;margin-bottom:20px}.tabs.contained{margin-bottom:0;margin-left:0}.tabs dt,.tabs li.section-title{color:#b3b3b3;cursor:default;display:block;float:left;font-size:12px;height:40px;line-height:40px;padding:0;padding-right:9px;padding-left:20px;font-weight:normal;width:auto;text-transform:uppercase}.tabs dt:first-child,.tabs li.section-title:first-child{padding:0;padding-right:9px}.tabs dd,.tabs li{display:block;float:left;padding:0;margin:0}.tabs dd a,.tabs li a{color:#6f6f6f;display:block;font-size:14px;height:40px;line-height:40px;padding:0px 23.8px}.tabs dd a:focus,.tabs li a:focus{font-weight:bold;color:#b82200}.tabs dd.active,.tabs li.active{border-top:3px solid #b82200;margin-top:-3px}.tabs dd.active a,.tabs li.active a{cursor:default;color:#3c3c3c;background:#fff;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;font-weight:bold}.tabs dd:first-child,.tabs li:first-child{margin-left:0}.tabs.vertical{height:auto;border-bottom:1px solid #e6e6e6}.tabs.vertical dt,.tabs.vertical dd,.tabs.vertical li{float:none;height:auto}.tabs.vertical dd,.tabs.vertical li{border-left:3px solid #ccc}.tabs.vertical dd a,.tabs.vertical li a{background:#f2f2f2;border:none;border:1px solid #e6e6e6;border-width:1px 1px 0 0;color:#555;display:block;font-size:14px;height:auto;line-height:1;padding:15px 20px;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset}.tabs.vertical dd.active,.tabs.vertical li.active{margin-top:0;border-top:1px solid #4d4d4d;border-left:4px solid #1a1a1a}.tabs.vertical dd.active a,.tabs.vertical li.active a{background:#4d4d4d;border:none;color:#fff;height:auto;margin:0;position:static;top:0;-webkit-box-shadow:0 0 0;-moz-box-shadow:0 0 0;box-shadow:0 0 0}.tabs.vertical dd:first-child a.active,.tabs.vertical li:first-child a.active{margin:0}.tabs.pill{border-bottom:none;margin-bottom:10px}.tabs.pill dd,.tabs.pill li{margin-right:10px}.tabs.pill dd:last-child,.tabs.pill li:last-child{margin-right:0}.tabs.pill dd a,.tabs.pill li a{-webkit-border-radius:1000px;-moz-border-radius:1000px;-ms-border-radius:1000px;-o-border-radius:1000px;border-radius:1000px;background:#e6e6e6;height:26px;line-height:26px;color:#666}.tabs.pill dd.active,.tabs.pill li.active{border:none;margin-top:0}.tabs.pill dd.active a,.tabs.pill li.active a{background-color:#b82200;border:none;color:#fff}.tabs.pill.contained{border-bottom:solid 1px #eee;margin-bottom:0}.tabs.pill.two-up dd,.tabs.pill.two-up li,.tabs.pill.three-up dd,.tabs.pill.three-up li,.tabs.pill.four-up dd,.tabs.pill.four-up li,.tabs.pill.five-up dd,.tabs.pill.five-up li{margin-right:0}.tabs.two-up dt a,.tabs.two-up dd a,.tabs.two-up li a,.tabs.three-up dt a,.tabs.three-up dd a,.tabs.three-up li a,.tabs.four-up dt a,.tabs.four-up dd a,.tabs.four-up li a,.tabs.five-up dt a,.tabs.five-up dd a,.tabs.five-up li a{padding:0 17px;text-align:center;overflow:hidden}.tabs.two-up dt,.tabs.two-up dd,.tabs.two-up li{width:50%}.tabs.three-up dt,.tabs.three-up dd,.tabs.three-up li{width:33.33%}.tabs.four-up dt,.tabs.four-up dd,.tabs.four-up li{width:25%}.tabs.five-up dt,.tabs.five-up dd,.tabs.five-up li{width:20%}ul.tabs-content{display:block;margin:0 0 20px;padding:0}ul.tabs-content>li{display:none}ul.tabs-content>li.active{display:block}ul.tabs-content.contained{padding:0}ul.tabs-content.contained>li{border:solid 0 #e6e6e6;border-width:0 1px 1px 1px;padding:20px}ul.tabs-content.contained.vertical>li{border-width:1px 1px 1px 1px}.no-js ul.tabs-content>li{display:block}div.alert-box{display:block;padding:6px 7px 7px;font-weight:bold;font-size:14px;color:#fff;background-color:#b82200;border:1px solid rgba(0,0,0,0.1);margin-bottom:12px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;text-shadow:0 -1px rgba(0,0,0,0.3);position:relative}div.alert-box.success{background-color:#5da423;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3)}div.alert-box.alert{background-color:#c60f13;color:#fff;text-shadow:0 -1px rgba(0,0,0,0.3)}div.alert-box.secondary{background-color:#e9e9e9;color:#505050;text-shadow:0 1px rgba(255,255,255,0.3)}div.alert-box a.close{color:#333;position:absolute;right:4px;top:-1px;font-size:17px;opacity:0.2;padding:4px}div.alert-box a.close:hover,div.alert-box a.close:focus{opacity:0.4}.label{padding:1px 4px 2px;font-size:12px;font-weight:bold;text-align:center;text-decoration:none;line-height:1;white-space:nowrap;display:inline;position:relative;bottom:1px;color:#fff;background:#b82200}.label.radius{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.label.round{padding:1px 7px 2px;-webkit-border-radius:1000px;-moz-border-radius:1000px;-ms-border-radius:1000px;-o-border-radius:1000px;border-radius:1000px}.label.alert{background-color:#c60f13}.label.success{background-color:#5da423}.label.secondary{background-color:#e9e9e9;color:#505050}.has-tip{border-bottom:dotted 1px #ccc;cursor:help;font-weight:bold;color:#333}.has-tip:hover,.has-tip:focus{border-bottom:dotted 1px #520f00;color:#b82200}.has-tip.tip-left,.has-tip.tip-right{float:none !important}.tooltip{display:none;background:#000;background:rgba(0,0,0,0.85);position:absolute;color:#fff;font-weight:bold;font-size:12px;padding:5px;z-index:999;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;line-height:normal}.tooltip>.nub{display:block;width:0;height:0;border:solid 5px;border-color:transparent transparent #000 transparent;border-color:transparent transparent rgba(0,0,0,0.85) transparent;position:absolute;top:-10px;left:10px}.tooltip.tip-override>.nub{border-color:transparent transparent #000 transparent !important;border-color:transparent transparent rgba(0,0,0,0.85) transparent !important;top:-10px !important}.tooltip.tip-top>.nub,.tooltip.tip-centered-top>.nub{border-color:#000 transparent transparent transparent;border-color:rgba(0,0,0,0.85) transparent transparent transparent;top:auto;bottom:-10px}.tooltip.tip-left,.tooltip.tip-right{float:none !important}.tooltip.tip-left>.nub{border-color:transparent transparent transparent #000;border-color:transparent transparent transparent rgba(0,0,0,0.85);right:-10px;left:auto}.tooltip.tip-right>.nub{border-color:transparent #000 transparent transparent;border-color:transparent rgba(0,0,0,0.85) transparent transparent;right:auto;left:-10px}.tooltip.noradius{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0}.tooltip.opened{color:#b82200 !important;border-bottom:dotted 1px #520f00 !important}.tap-to-close{display:block;font-size:10px;font-size:1rem;color:#888;font-weight:normal}.panel{background:#f2f2f2;border:solid 1px #e6e6e6;margin:0 0 22px 0;padding:20px}.panel>:first-child{margin-top:0}.panel>:last-child{margin-bottom:0}.panel.callout{background:#b82200;color:#fff;border-color:#851900;-webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5);-moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5);box-shadow:inset 0px 1px 0px rgba(255,255,255,0.5)}.panel.callout a{color:#fff}.panel.callout .button{background:#fff;border:none;color:#b82200;text-shadow:none}.panel.callout .button:hover,.panel.callout .button:focus{background:rgba(255,255,255,0.8)}.panel.radius{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}ul.accordion{margin:0 0 22px 0;border-bottom:1px solid #e9e9e9}ul.accordion>li{list-style:none;margin:0;padding:0;border-top:1px solid #e9e9e9}ul.accordion>li>div.title{cursor:pointer;background:#f6f6f6;padding:15px;margin:0;position:relative;border-left:1px solid #e9e9e9;border-right:1px solid #e9e9e9;-webkit-transition:0.15s background linear;-moz-transition:0.15s background linear;-o-transition:0.15s background linear;transition:0.15s background linear}ul.accordion>li>div.title h1,ul.accordion>li>div.title h2,ul.accordion>li>div.title h3,ul.accordion>li>div.title h4,ul.accordion>li>div.title h5{margin:0}ul.accordion>li>div.title:after{content:"";display:block;width:0;height:0;border:solid 6px;border-color:transparent #9d9d9d transparent transparent;position:absolute;right:15px;top:21px}ul.accordion>li .content{display:none;padding:15px}ul.accordion>li.active{border-top:3px solid #b82200}ul.accordion>li.active .title{background:#fff;padding-top:13px}ul.accordion>li.active .title:after{content:"";display:block;width:0;height:0;border:solid 6px;border-color:#9d9d9d transparent transparent transparent}ul.accordion>li.active .content{background:#fff;display:block;border-left:1px solid #e9e9e9;border-right:1px solid #e9e9e9}ul.side-nav{display:block;list-style:none;margin:0;padding:17px 0}ul.side-nav li{display:block;list-style:none;margin:0 0 7px 0}ul.side-nav li a{display:block}ul.side-nav li.active a{color:#4d4d4d;font-weight:bold}ul.side-nav li.divider{border-top:1px solid #e6e6e6;height:0;padding:0}dl.sub-nav{display:block;width:auto;overflow:hidden;margin:-4px 0 18px;margin-right:0;margin-left:-9px;padding-top:4px}dl.sub-nav dt,dl.sub-nav dd{float:left;display:inline;margin-left:9px;margin-bottom:10px}dl.sub-nav dt{color:#999;font-weight:normal}dl.sub-nav dd a{text-decoration:none;-webkit-border-radius:1000px;-moz-border-radius:1000px;-ms-border-radius:1000px;-o-border-radius:1000px;border-radius:1000px}dl.sub-nav dd.active a{font-weight:bold;background:#b82200;color:#fff;padding:3px 9px;cursor:default}ul.pagination{display:block;height:24px;margin-left:-5px}ul.pagination li{float:left;display:block;height:24px;color:#999;font-size:14px;margin-left:5px}ul.pagination li a{display:block;padding:1px 7px 1px;color:#555}ul.pagination li:hover a,ul.pagination li a:focus{background:#e6e6e6}ul.pagination li.unavailable a{cursor:default;color:#999}ul.pagination li.unavailable:hover a,ul.pagination li.unavailable a:focus{background:transparent}ul.pagination li.current a{background:#b82200;color:#fff;font-weight:bold;cursor:default}ul.pagination li.current a:hover,ul.pagination li.current a:focus{background:#b82200}div.pagination-centered{text-align:center}div.pagination-centered ul>li{float:none;display:inline-block}ul.breadcrumbs{display:block;background:#f6f6f6;padding:6px 10px 7px;border:1px solid #e9e9e9;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;overflow:hidden;margin-left:0}ul.breadcrumbs li{margin:0;padding:0 12px 0 0;float:left;list-style:none}ul.breadcrumbs li a,ul.breadcrumbs li span{text-transform:uppercase;font-size:11px;font-size:1.1rem;padding-left:12px}ul.breadcrumbs li:first-child a,ul.breadcrumbs li:first-child span{padding-left:0}ul.breadcrumbs li:before{content:"/";color:#aaa}ul.breadcrumbs li:first-child:before{content:" "}ul.breadcrumbs li.current a{cursor:default;color:#333}ul.breadcrumbs li:hover a,ul.breadcrumbs li a:focus{text-decoration:underline}ul.breadcrumbs li.current:hover a,ul.breadcrumbs li.current a:focus{text-decoration:none}ul.breadcrumbs li.unavailable a{color:#999}ul.breadcrumbs li.unavailable:hover a,ul.breadcrumbs li.unavailable a:focus{text-decoration:none;color:#999;cursor:default}ul.inline-list,ul.link-list{margin:0 0 17px -22px;padding:0;list-style:none;overflow:hidden}ul.inline-list>li,ul.link-list>li{list-style:none;float:left;margin-left:22px;display:block}ul.inline-list>li>*,ul.link-list>li>*{display:block}.keystroke,kbd{font-family:"Consolas","Menlo","Courier",monospace;font-size:13px;padding:2px 4px 0px;margin:0;background:#ededed;border:solid 1px #dbdbdb;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.th{display:block}.th img{display:block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.2);-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.2);box-shadow:0 0 0 1px rgba(0,0,0,0.2);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;-webkit-transition-property:box-shadow;-moz-transition-property:box-shadow;-o-transition-property:box-shadow;transition-property:box-shadow;-webkit-transition-duration:300ms;-moz-transition-duration:300ms;-o-transition-duration:300ms;transition-duration:300ms}.th:hover img,.th:focus img{-webkit-box-shadow:0 0 6px 1px rgba(184,34,0,0.5);-moz-box-shadow:0 0 6px 1px rgba(184,34,0,0.5);box-shadow:0 0 6px 1px rgba(184,34,0,0.5)}.flex-video{position:relative;padding-top:25px;padding-bottom:67.5%;height:0;margin-bottom:16px;overflow:hidden}.flex-video.widescreen{padding-bottom:57.25%}.flex-video.vimeo{padding-top:0}.flex-video iframe,.flex-video object,.flex-video embed,.flex-video video{position:absolute;top:0;left:0;width:100%;height:100%}table{background:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;margin:0 0 18px;border:1px solid #ddd}table thead,table tfoot{background:#f5f5f5}table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;font-size:14px;line-height:18px;text-align:left}table thead tr th,table tfoot tr td{padding:8px 10px 9px;font-size:14px;font-weight:bold;color:#222}table thead tr th:first-child,table tfoot tr td:first-child{border-left:none}table thead tr th:last-child,table tfoot tr td:last-child{border-right:none}table tbody tr.even,table tbody tr.alt{background:#f9f9f9}table tbody tr:nth-child(even){background:#f9f9f9}table tbody tr td{color:#333;padding:9px 10px;vertical-align:top;border:none}ul.vcard{display:inline-block;margin:0 0 12px 0;border:1px solid #ddd;padding:10px}ul.vcard li{margin:0;display:block}ul.vcard li.fn{font-weight:bold;font-size:15px}p.vevent span.summary{font-weight:bold}p.vevent abbr{cursor:default;text-decoration:none;font-weight:bold;border:none;padding:0 1px}div.progress{padding:2px;margin-bottom:10px;border:1px solid #ccc;height:25px}div.progress .meter{background:#b82200;height:100%;display:block;width:50%}div.progress.secondary .meter{background:#e9e9e9}div.progress.success .meter{background:#5da423}div.progress.alert .meter{background:#c60f13}div.progress.radius{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}div.progress.radius .meter{-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px}div.progress.round{-webkit-border-radius:1000px;-moz-border-radius:1000px;-ms-border-radius:1000px;-o-border-radius:1000px;border-radius:1000px}div.progress.round .meter{-webkit-border-radius:1000px;-moz-border-radius:1000px;-ms-border-radius:1000px;-o-border-radius:1000px;border-radius:1000px}.pricing-table{border:solid 1px #ddd;margin-left:0;margin-bottom:20px}.pricing-table *{list-style:none;line-height:1}.pricing-table .title{background-color:#ddd;padding:15px 20px;text-align:center;color:#333;font-weight:bold;font-size:16px}.pricing-table .price{background-color:#eee;padding:15px 20px;text-align:center;color:#333;font-weight:normal;font-size:20px}.pricing-table .description{background-color:#fff;padding:15px;text-align:center;color:#777;font-size:12px;font-weight:normal;line-height:1.4;border-bottom:dotted 1px #ddd}.pricing-table .bullet-item{background-color:#fff;padding:15px;text-align:center;color:#333;font-size:14px;font-weight:normal;border-bottom:dotted 1px #ddd}.pricing-table .cta-button{background-color:#f5f5f5;text-align:center;padding:20px}.show-for-small,.show-for-medium,.show-for-medium-down,.hide-for-large,.hide-for-large-up,.show-for-xlarge,.show-for-print{display:none !important}.hide-for-small,.hide-for-medium,.hide-for-medium-down,.show-for-large,.show-for-large-up,.hide-for-xlarge,.hide-for-print{display:inherit !important}@media only screen and (min-width: 1441px){.hide-for-small,.hide-for-medium,.hide-for-medium-down,.hide-for-large,.show-for-large-up,.show-for-xlarge{display:inherit !important}.show-for-small,.show-for-medium,.show-for-medium-down,.show-for-large,.hide-for-large-up,.hide-for-xlarge{display:none !important}}@media only screen and (max-width: 1279px) and (min-width: 768px){.hide-for-small,.show-for-medium,.show-for-medium-down,.hide-for-large,.hide-for-large-up,.hide-for-xlarge{display:inherit !important}.show-for-small,.hide-for-medium,.hide-for-medium-down,.show-for-large,.show-for-large-up,.show-for-xlarge{display:none !important}}@media only screen and (max-width: 767px){.show-for-small,.hide-for-medium,.show-for-medium-down,.hide-for-large,.hide-for-large-up,.hide-for-xlarge{display:inherit !important}.hide-for-small,.show-for-medium,.hide-for-medium-down,.show-for-large,.show-for-large-up,.show-for-xlarge{display:none !important}}.show-for-landscape,.hide-for-portrait{display:inherit !important}.hide-for-landscape,.show-for-portrait{display:none !important}@media screen and (orientation: landscape){.show-for-landscape,.hide-for-portrait{display:inherit !important}.hide-for-landscape,.show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.show-for-portrait,.hide-for-landscape{display:inherit !important}.hide-for-portrait,.show-for-landscape{display:none !important}}.show-for-touch{display:none !important}.hide-for-touch{display:inherit !important}.touch .show-for-touch{display:inherit !important}.touch .hide-for-touch{display:none !important}table.show-for-xlarge,table.show-for-large,table.hide-for-small,table.hide-for-medium{display:table !important}@media only screen and (max-width: 1279px) and (min-width: 768px){.touch table.hide-for-xlarge,.touch table.hide-for-large,.touch table.hide-for-small,.touch table.show-for-medium{display:table !important}}@media only screen and (max-width: 767px){table.hide-for-xlarge,table.hide-for-large,table.hide-for-medium,table.show-for-small{display:table !important}}@media only screen and (max-device-width: 1280px){.touch .nav-bar li.has-flyout>a{padding-right:36px !important}}@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px){.flex-video{padding-top:0}}@media only screen and (max-width: 1279px) and (min-width: 768px){.touch .nav-bar li a{font-size:13px}.touch .nav-bar li.has-flyout>a.flyout-toggle{padding:20px !important}.touch .nav-bar li.has-flyout>a{padding-right:36px !important}.clearing-main-right,.clearing-main-left{height:100%;width:40px;top:0;border:none}.clearing-main-right:before,.clearing-main-left:before{position:absolute;top:50%}.clearing-main-left{left:0}.clearing-main-left:before{left:5px;content:"";display:block;width:0;height:0;border:solid 16px;border-color:transparent #fff transparent transparent}.clearing-main-right{height:100%;right:0}.clearing-main-right:before{content:"";display:block;width:0;height:0;border:solid 16px;border-color:transparent transparent transparent #fff}}@media only screen and (max-width: 767px){.left,.right{float:none}body{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0}.row{width:auto;min-width:0;margin-left:0;margin-right:0}.column,.columns{width:auto !important;float:none}.column:last-child,.columns:last-child{float:none}[class*="column"]+[class*="column"]:last-child{float:none}.column:before,.columns:before,.column:after,.columns:after{content:"";display:table}.column:after,.columns:after{clear:both}.offset-by-one,.offset-by-two{margin-left:0 !important}.push-two{left:auto}.pull-two{right:auto}.row .mobile-one{width:50% !important;float:left;padding:0 10px}.row .mobile-one:last-child{float:right}.row .mobile-one.end{float:left}.row.collapse .mobile-one{padding:0}.row .mobile-two{width:100% !important;float:left;padding:0 10px}.row .mobile-two:last-child{float:right}.row .mobile-two.end{float:left}.row.collapse .mobile-two{padding:0}.push-one-mobile{left:50%}.pull-one-mobile{right:50%}.block-grid.mobile>li{float:none;width:100%;margin-left:0}.block-grid>li{clear:none}.block-grid.mobile-one-up>li{width:100%}.block-grid.mobile-two-up>li{width:50%}.block-grid.mobile-two-up>li:nth-child(2n+1){clear:both}.block-grid.mobile-three-up>li{width:33.33333%}.block-grid.mobile-three-up>li:nth-child(3n+1){clear:both}.block-grid.mobile-four-up>li{width:25%}.block-grid.mobile-four-up>li:nth-child(4n+1){clear:both}.block-grid.mobile-five-up>li{width:20%}.block-grid.mobile-five-up>li:nth-child(5n+1){clear:both}.block-grid.mobile-six-up>li{width:16.66667%}.block-grid.mobile-six-up>li:nth-child(6n+1){clear:both}.block-grid.mobile-seven-up>li{width:14.28571%}.block-grid.mobile-seven-up>li:nth-child(7n+1){clear:both}.block-grid.mobile-eight-up>li{width:12.5%}.block-grid.mobile-eight-up>li:nth-child(8n+1){clear:both}.block-grid.mobile-nine-up>li{width:11.11111%}.block-grid.mobile-nine-up>li:nth-child(9n+1){clear:both}.block-grid.mobile-ten-up>li{width:10%}.block-grid.mobile-ten-up>li:nth-child(10n+1){clear:both}.block-grid.mobile-eleven-up>li{width:9.09091%}.block-grid.mobile-eleven-up>li:nth-child(11n+1){clear:both}.block-grid.mobile-twelve-up>li{width:8.33333%}.block-grid.mobile-twelve-up>li:nth-child(12n+1){clear:both}label.right{text-align:left}input[type="text"].one,.row input[type="text"].one,input[type="password"].one,.row input[type="password"].one,input[type="date"].one,.row input[type="date"].one,input[type="datetime"].one,.row input[type="datetime"].one,input[type="email"].one,.row input[type="email"].one,input[type="number"].one,.row input[type="number"].one,input[type="search"].one,.row input[type="search"].one,input[type="tel"].one,.row input[type="tel"].one,input[type="time"].one,.row input[type="time"].one,input[type="url"].one,.row input[type="url"].one,textarea.one,.row textarea.one{width:100% !important}input[type="text"].two,.row input[type="text"].two,input[type="password"].two,.row input[type="password"].two,input[type="date"].two,.row input[type="date"].two,input[type="datetime"].two,.row input[type="datetime"].two,input[type="email"].two,.row input[type="email"].two,input[type="number"].two,.row input[type="number"].two,input[type="search"].two,.row input[type="search"].two,input[type="tel"].two,.row input[type="tel"].two,input[type="time"].two,.row input[type="time"].two,input[type="url"].two,.row input[type="url"].two,textarea.two,.row textarea.two{width:100% !important}input[type="text"].three,.row input[type="text"].three,input[type="password"].three,.row input[type="password"].three,input[type="date"].three,.row input[type="date"].three,input[type="datetime"].three,.row input[type="datetime"].three,input[type="email"].three,.row input[type="email"].three,input[type="number"].three,.row input[type="number"].three,input[type="search"].three,.row input[type="search"].three,input[type="tel"].three,.row input[type="tel"].three,input[type="time"].three,.row input[type="time"].three,input[type="url"].three,.row input[type="url"].three,textarea.three,.row textarea.three{width:100% !important}input[type="text"].four,.row input[type="text"].four,input[type="password"].four,.row input[type="password"].four,input[type="date"].four,.row input[type="date"].four,input[type="datetime"].four,.row input[type="datetime"].four,input[type="email"].four,.row input[type="email"].four,input[type="number"].four,.row input[type="number"].four,input[type="search"].four,.row input[type="search"].four,input[type="tel"].four,.row input[type="tel"].four,input[type="time"].four,.row input[type="time"].four,input[type="url"].four,.row input[type="url"].four,textarea.four,.row textarea.four{width:100% !important}.button{display:block}button.button,input[type="submit"].button,input[type="reset"].button{width:100%;padding-left:0;padding-right:0}.button-group button.button,.button-group input[type="submit"].button{width:auto;padding:10px 20px 11px}.button-group button.button.large,.button-group input[type="submit"].button.large{padding:15px 30px 16px}.button-group button.button.medium,.button-group input[type="submit"].button.medium{padding:10px 20px 11px}.button-group button.button.small,.button-group input[type="submit"].button.small{padding:7px 14px 8px}.button-group button.button.tiny,.button-group input[type="submit"].button.tiny{padding:5px 10px 6px}.button-group.even button.button,.button-group.even input[type="submit"].button{width:100%;padding-left:0;padding-right:0}.nav-bar{height:auto}.nav-bar>li{float:none;display:block;border-right:none}.nav-bar>li>a.main{text-align:left;border-top:1px solid #ddd;border-right:none}.nav-bar>li:first-child>a.main{border-top:none}.nav-bar>li.has-flyout>a.flyout-toggle{position:absolute;right:0;top:0;padding:22px;z-index:2;display:block}.nav-bar>li.has-flyout.is-touch>a.flyout-toggle span{content:"";width:0;height:0;display:block}.nav-bar>li.has-flyout>a.flyout-toggle:hover span{border-top-color:#141414}.nav-bar.vertical>li.has-flyout>.flyout{left:0}.flyout{position:relative;width:100% !important;top:auto;margin-right:-2px;border-width:1px 1px 0 1px}.flyout.right{float:none;right:auto;left:-1px}.flyout.small,.flyout.large{width:100% !important}.flyout p:last-child{margin-bottom:18px}.reveal-modal-bg{position:absolute}.reveal-modal,.reveal-modal.small,.reveal-modal.medium,.reveal-modal.large,.reveal-modal.xlarge{width:80%;top:15px;left:50%;margin-left:-40%;padding:20px;height:auto}.clearing-container{margin:0}.clearing-close{z-index:99;font-size:37px;top:0px;right:5px}.clearing-caption{position:fixed;bottom:0;left:0;padding:10px !important;line-height:1.3}.clearing-main-right,.clearing-main-left{display:none}.clearing-blackout.clearing-assembled .visible-img,.clearing-blackout.clearing-assembled .clearing-container{height:100%}.clearing-blackout.clearing-assembled ul[data-clearing]{display:none}.joyride-tip-guide{width:95% !important;left:2.5% !important;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px}.joyride-tip-guide-wrapper{width:100%}.tabs.mobile{width:auto;margin:20px -20px 40px;border-bottom:solid 1px #ccc;height:auto;margin:20px -15px 0px -15px}.tabs.mobile dt,.tabs.mobile li,.tabs.mobile dd{float:none;height:auto}.tabs.mobile dd a,.tabs.mobile li a{font-size:15px;display:block;width:auto;height:auto;padding:18px 20px;margin:0;color:#555;line-height:1;border:none;border-left:none;border-right:none;border-top:1px solid #ccc;background:#fff}.tabs.mobile dd a.active,.tabs.mobile li a.active{border:none;background:#b82200;color:#fff;margin:0;position:static;top:0;height:auto}.tabs.mobile dd:first-child a.active,.tabs.mobile li:first-child a.active{margin:0}.tabs.mobile+.tabs-content.contained{margin-left:-15px;margin-right:-15px}.tabs.mobile .section-title{padding-left:20px !important}.contained.mobile{margin-bottom:0}.contained.tabs.mobile dd a,.contained.tabs.mobile li a{padding:18px 20px}.tabs.mobile+ul.contained{margin-left:-20px;margin-right:-20px;border-width:0 0 1px 0}.tooltip{font-size:14px;line-height:1.4;padding:7px 10px 9px 10px;left:50% !important;max-width:80% !important;margin-left:-40%;font-size:110%}.tooltip>.nub,.tooltip.top>.nub,.tooltip.left>.nub,.tooltip.right>.nub{border-color:transparent transparent #000 transparent;border-color:transparent transparent rgba(0,0,0,0.85) transparent;top:-12px;left:10px}}@media only screen and (max-width: 640px){.top-bar{margin-bottom:0;overflow:hidden;height:45px;background:#222}.top-bar .js-generated{display:block}.contain-to-grid .top-bar{width:auto}.top-bar section{left:0;position:relative;width:auto;-webkit-transition:left 300ms 0;-moz-transition:left 300ms 0;-o-transition:left 300ms 0;transition:left 300ms 0}.top-bar ul{width:100%;height:100%;margin-bottom:0;display:block}.top-bar ul>li{float:none}.top-bar ul>li.active,.top-bar ul>li:hover{background:#151515}.top-bar ul>li.name{height:45px}.top-bar ul>li.name h1{line-height:1}.top-bar ul>li.name h1 a{color:#fff;display:block;line-height:45px !important;padding-left:15px;height:45px}.top-bar ul>li:hover a,.top-bar ul>li.active a{color:#fff}.top-bar ul>li a:not(.button){color:#fff}.top-bar ul>li.toggle-topbar{cursor:pointer;display:block;height:45px;position:absolute;right:0;top:0;width:50%}.top-bar ul>li.toggle-topbar a{content:"";display:block;width:0;height:0;border:solid 8px;border-color:#fff transparent transparent transparent;padding:0;position:absolute;top:50%;right:22.5px;margin-top:-4px}.top-bar ul>li.toggle-topbar:hover{background:inherit}.top-bar ul>li.toggle-topbar a{padding:0 !important}.top-bar ul>li.divider{border-bottom:solid 1px #3c3c3c;border-top:solid 1px #000;clear:both;height:1px !important;margin:8px 0 !important;width:100%}.top-bar ul>li.search{padding:0 22.5px}.top-bar ul>li.search form{width:100%}.top-bar ul>li.search form input[type=text]{width:75%}.top-bar ul>li.search form .button{top:-1px;width:25%}.top-bar ul>li.has-dropdown a{padding-right:33.75px}.top-bar ul>li.has-dropdown a:after{content:"";display:block;width:0;height:0;border:solid 5px;border-color:transparent transparent transparent rgba(255,255,255,0.5);margin-right:15px;margin-top:-4.5px;position:absolute;top:50%}.top-bar ul>li.has-dropdown:hover>.dropdown{display:block;visibility:hidden}.top-bar ul>li.has-dropdown .dropdown{visibility:hidden;z-index:0 !important}.top-bar ul>li.has-dropdown.moved{position:static}.top-bar ul>li.has-dropdown.moved>.dropdown{top:0;visibility:visible}.top-bar ul>li.has-dropdown.moved>.dropdown li label{margin-bottom:6px;padding-top:6px !important;font-size:11px}.top-bar ul>li.has-dropdown.moved>.dropdown li:not(.title){padding-bottom:0}.top-bar ul>li.has-dropdown.moved>.dropdown li:not(.title) a{padding:8px 22.5px;font-size:14px}.top-bar ul>li.has-dropdown.moved>.dropdown li a,.top-bar ul>li.has-dropdown.moved>.dropdown li label{padding:0 22.5px}.top-bar ul>li.has-dropdown.moved>.dropdown li a:hover{background:#3c3c3c;display:block}.top-bar ul>li.has-dropdown.moved>.dropdown li.divider{border-bottom:solid 1px rgba(255,255,255,0.1);margin-top:8px !important;margin-bottom:8px !important}.top-bar ul>li.has-dropdown.moved .back.title{padding-bottom:0}.top-bar ul>li.has-dropdown.moved .back.title a:before{position:absolute;top:50%;left:17.5px;margin-top:-5px;width:0;height:0;content:"";display:block;width:0;height:0;border:solid 5px;border-color:transparent #fff transparent transparent}.top-bar ul>li.has-dropdown.moved .back.title h5{margin:0;padding-left:15px;position:relative}.top-bar ul>li.has-dropdown.moved .back.title h5 a{background:transparent;padding-top:8px;padding-bottom:8px;font-size:23px;font-weight:bold}.top-bar ul>li.has-dropdown .dropdown li{background:transparent}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown .dropdown{left:100% !important;top:0;right:auto !important}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown>a{padding-right:33.75px}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown>a:after{content:"";margin-right:15px;content:"";display:block;width:0;height:0;border:solid 5px;border-color:transparent transparent transparent rgba(255,255,255,0.5);position:absolute;top:50%;margin-top:-4.5px}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown>a li a:hover{background:#3c3c3c}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown.moved{position:static}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown.moved .dropdown{top:0;visibility:visible}.top-bar ul>li.has-dropdown .dropdown li.has-dropdown:hover{display:block}.top-bar ul.left,.top-bar ul.right{float:none;width:100%}.top-bar ul.left>li,.top-bar ul.right>li{display:block;float:none;margin:0 !important}.top-bar ul.left>li.has-dropdown .dropdown,.top-bar ul.right>li.has-dropdown .dropdown{left:100% !important;top:0;right:auto !important}.top-bar section>ul li a:not(.button){padding-left:22.5px !important}.top-bar.expanded{height:100%}.top-bar.expanded ul li.toggle-topbar a{content:"";display:block;width:0;height:0;border:solid 8px;border-color:transparent transparent #ccc transparent;top:auto;bottom:50%;margin-bottom:-4px}.top-bar ul li.has-button{padding:5px 15px}.top-bar ul li .button.small{margin:0 !important;display:inline-block;width:100%}.top-bar ul>li.has-button a.button{margin:0}} /* Prettify */ .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:20px;background:#eee;border:0;margin-bottom:15px}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} /* iealert */ #ie-alert-overlay{width:100%;height:100%;background-image:url(iealert/bg.png);position:fixed;top:0;left:0;z-index:999999} * html #ie-alert-overlay{position:absolute} #ie-alert-panel{width:600px;height:auto;top:200px;left:50%;position:fixed;z-index:1000001;margin:0 0 0 -300px; _position:absolute; _top:expression(200+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}.ie-p{font-size:15px;color:#565656;line-height:1.6em;text-align:left}#ie-alert-panel a{text-decoration:none}.ie-span{font-size:18px;color:#464646;display:block;font-weight:bold;line-height:1.6em;margin:0 0 15px 0;}.ie-r-b-c,.ie-r-t-c,.ie-l-t-c,.ie-l-b-c{background:url(iealert/iesprites.png) no-repeat}.ie-l-t-c{width:47px;height:47px;background-position:-18px -9px;float:left}.ie-l{height:100%;width:47px;float:left;clear:both;background:url(iealert/left.png)}.ie-l-b-c{width:47px;height:46px;background-position:-17px -66px;float:left;clear:both}.ie-b{height:46px;width:506px;float:left;background:url(iealert/bottom.png)}.ie-r-t-c{width:47px;height:47px;background-position:-83px -10px;float:right;cursor:pointer}.ie-r-t-c:hover{background-position:-143px -9px}.ie-r{height:100%;width:47px;float:right;background:url(iealert/right.png)}.ie-c{width:506px;height:100%;background:#f6f6f6;float:left}.ie-r-b-c{width:47px;height:46px;background-position:-83px -65px;float:right}.ie-t{height:47px;width:506px;float:left;background:url(iealert/top.png)}.ie-u{width:auto;height:43px;margin:30px auto 0 -66px;position:relative;left:50%}.ie-u-l{width:14px;height:43px;background:url(iealert/u-left.png);float:left}.ie-u-c{width:auto;height:33px;background:url(iealert/u-center.png);float:left;padding:11px 0 0 0;cursor:pointer}.ie-u-s{margin:5px 25px 5px 25px;color:#fff;font-size:14px;font-weight:bold;line-height:1.3em;}.ie-u-r{width:14px;height:43px;background:url(iealert/u-right.png);float:left}#ie-alert-panel.ie6-style .ie-r-b-c{background:url(iealert/6_r_b_c.png) no-repeat}#ie-alert-panel.ie6-style .ie-r-t-c{background:url(iealert/6_r_t_c.png) no-repeat}#ie-alert-panel.ie6-style .ie-r-t-c:hover{background:url(iealert/6_r_t_c_h.png) no-repeat}#ie-alert-panel.ie6-style .ie-l-t-c{background:url(iealert/6_l_t_c.png) no-repeat}#ie-alert-panel.ie6-style .ie-l-b-c{background:url(iealert/6_l_b_c.png) no-repeat}#ie-alert-panel.ie6-style .ie-l{background:url(iealert/6_left.png)}#ie-alert-panel.ie6-style .ie-r{background:url(iealert/6_right.png)}#ie-alert-panel.ie6-style .ie-b{background:url(iealert/6_bottom.png)}#ie-alert-panel.ie6-style .ie-t{background:url(iealert/6_top.png)} </style> <script type="text/javascript"> /** * Maplace.js * * Copyright (c) 2013 Daniele Moraschi * Licensed under the MIT license * For all details and documentation: * http://maplacejs.com * * @version 0.2.7 * @preserve */ ;(function(root, factory) { if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else if (typeof exports === 'object') { module.exports = factory(require('jquery')); } else { root.Maplace = factory(root.jQuery); } }(this, function($) { 'use strict'; var html_dropdown, html_ullist; //dropdown menu type html_dropdown = { activateCurrent: function(index) { this.html_element.find('select').val(index); }, getHtml: function() { var self = this, html = '', title, a; if (this.ln > 1) { html += '<select class="dropdown controls ' + this.o.controls_cssclass + '">'; if (this.ShowOnMenu(this.view_all_key)) { html += '<option value="' + this.view_all_key + '">' + this.o.view_all_text + '</option>'; } for (a = 0; a < this.ln; a += 1) { if (this.ShowOnMenu(a)) { html += '<option value="' + (a + 1) + '">' + (this.o.locations[a].title || ('#' + (a + 1))) + '</option>'; } } html += '</select>'; html = $(html).bind('change', function() { self.ViewOnMap(this.value); }); } title = this.o.controls_title; if (this.o.controls_title) { title = $('<div class="controls_title"></div>').css(this.o.controls_applycss ? { fontWeight: 'bold', fontSize: this.o.controls_on_map ? '12px' : 'inherit', padding: '3px 10px 5px 0' } : {}).append(this.o.controls_title); } this.html_element = $('<div class="wrap_controls"></div>').append(title).append(html); return this.html_element; } }; //ul list menu type html_ullist = { html_a: function(i, hash, ttl) { var self = this, index = hash || (i + 1), title = ttl || this.o.locations[i].title, el_a = $('<a data-load="' + index + '" id="ullist_a_' + index + '" href="#' + index + '" title="' + title + '"><span>' + (title || ('#' + (i + 1))) + '</span></a>'); el_a.css(this.o.controls_applycss ? { color: '#666', display: 'block', padding: '5px', fontSize: this.o.controls_on_map ? '12px' : 'inherit', textDecoration: 'none' } : {}); el_a.on('click', function(e) { e.preventDefault(); var i = $(this).attr('data-load'); self.ViewOnMap(i); }); return el_a; }, activateCurrent: function(index) { this.html_element.find('li').removeClass('active'); this.html_element.find('#ullist_a_' + index).parent().addClass('active'); }, getHtml: function() { var html = $('<ul class=\'ullist controls ' + this.o.controls_cssclass + '\'></ul>').css(this.o.controls_applycss ? { margin: 0, padding: 0, listStyleType: 'none' } : {}), title, a; if (this.ShowOnMenu(this.view_all_key)) { html.append($('<li></li>').append(html_ullist.html_a.call(this, false, this.view_all_key, this.o.view_all_text))); } for (a = 0; a < this.ln; a++) { if (this.ShowOnMenu(a)) { html.append($('<li></li>').append(html_ullist.html_a.call(this, a))); } } title = this.o.controls_title; if (this.o.controls_title) { title = $('<div class="controls_title"></div>').css(this.o.controls_applycss ? { fontWeight: 'bold', padding: '3px 10px 5px 0', fontSize: this.o.controls_on_map ? '12px' : 'inherit' } : {}).append(this.o.controls_title); } this.html_element = $('<div class="wrap_controls"></div>').append(title).append(html); return this.html_element; } }; /** * Create a new instance * @class Maplace * @constructor */ function Maplace(args) { this.VERSION = '0.2.7'; this.loaded = false; this.markers = []; this.circles = []; this.oMap = false; this.view_all_key = 'all'; this.infowindow = null; this.maxZIndex = 0; this.ln = 0; this.oMap = false; this.oBounds = null; this.map_div = null; this.canvas_map = null; this.controls_wrapper = null; this.current_control = null; this.current_index = null; this.Polyline = null; this.Polygon = null; this.Fusion = null; this.directionsService = null; this.directionsDisplay = null; //default options this.o = { debug: false, map_div: '#gmap', controls_div: '#controls', generate_controls: true, controls_type: 'dropdown', controls_cssclass: '', controls_title: '', controls_on_map: true, controls_applycss: true, controls_position: google.maps.ControlPosition.RIGHT_TOP, type: 'marker', view_all: true, view_all_text: 'View All', pan_on_click: true, start: 0, locations: [], shared: {}, map_options: { mapTypeId: google.maps.MapTypeId.ROADMAP }, stroke_options: { strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.4 }, directions_options: { travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, optimizeWaypoints: false, provideRouteAlternatives: false, avoidHighways: false, avoidTolls: false }, circle_options: { radius: 100, visible: true }, styles: {}, fusion_options: {}, directions_panel: null, draggable: false, editable: false, show_infowindows: true, show_markers: true, infowindow_type: 'bubble', listeners: {}, //events beforeViewAll: function() {}, afterViewAll: function() {}, beforeShow: function(index, location, marker) {}, afterShow: function(index, location, marker) {}, afterCreateMarker: function(index, location, marker) {}, beforeCloseInfowindow: function(index, location) {}, afterCloseInfowindow: function(index, location) {}, beforeOpenInfowindow: function(index, location, marker) {}, afterOpenInfowindow: function(index, location, marker) {}, afterRoute: function(distance, status, result) {}, onPolylineClick: function(obj) {}, onPolygonClick: function(obj) {}, circleRadiusChanged: function(index, circle, marker) {}, circleCenterChanged: function(index, circle, marker) {}, drag: function(index, location, marker) {}, dragEnd: function(index, location, marker) {}, dragStart: function(index, location, marker) {} }; //default menu types this.AddControl('dropdown', html_dropdown); this.AddControl('list', html_ullist); if (args && args.type === 'directions') { !args.show_markers && (args.show_markers = false); !args.show_infowindows && (args.show_infowindows = false); } //init $.extend(true, this.o, args); } //where to store the menu types Maplace.prototype.controls = {}; //initialize google map object Maplace.prototype.create_objMap = function() { var self = this, count = 0, i; //if styled for (i in this.o.styles) { if (this.o.styles.hasOwnProperty(i)) { if (count === 0) { this.o.map_options.mapTypeControlOptions = { mapTypeIds: [google.maps.MapTypeId.ROADMAP] }; } count++; this.o.map_options.mapTypeControlOptions.mapTypeIds.push('map_style_' + count); } } //if init if (!this.loaded) { try { this.map_div.css({ position: 'relative', overflow: 'hidden' }); //create the container div into map_div this.canvas_map = $('<div>').addClass('canvas_map').css({ width: '100%', height: '100%' }).appendTo(this.map_div); this.oMap = new google.maps.Map(this.canvas_map.get(0), this.o.map_options); } catch (err) { this.debug('create_objMap::' + this.map_div.selector, err.toString()); } //else loads the new optionsl } else { self.oMap.setOptions(this.o.map_options); } //if styled count = 0; for (i in this.o.styles) { if (this.o.styles.hasOwnProperty(i)) { count++; this.oMap.mapTypes.set('map_style_' + count, new google.maps.StyledMapType(this.o.styles[i], { name: i })); this.oMap.setMapTypeId('map_style_' + count); } } }; //adds markers to the map Maplace.prototype.add_markers_to_objMap = function() { var a, point, type = this.o.type || 'marker'; //switch how to display the locations switch (type) { case 'marker': for (a = 0; a < this.ln; a++) { point = this.create_objPoint(a); this.create.marker.call(this, a, point); } break; default: this.create[type].apply(this); break; } }; //create the main object point Maplace.prototype.create_objPoint = function(index) { var point = $.extend({}, this.o.locations[index]), visibility = point.visible === undefined ? undefined : point.visible; !point.type && (point.type = this.o.type); //set obj map point.map = this.oMap; point.position = new google.maps.LatLng(point.lat, point.lon); point.zIndex = point.zIndex === undefined ? 10000 : (point.zIndex + 100); point.visible = visibility === undefined ? this.o.show_markers : visibility; this.o.maxZIndex = point.zIndex > this.maxZIndex ? point.zIndex : this.maxZIndex; if (point.image) { point.icon = new google.maps.MarkerImage( point.image, new google.maps.Size(point.image_w || 32, point.image_h || 32), new google.maps.Point(0, 0), new google.maps.Point((point.image_w || 32) / 2, (point.image_h || 32) / 2) ); } return point; }; //create the main object circle Maplace.prototype.create_objCircle = function(point) { var def_stroke_opz, def_circle_opz, circle; circle = $.extend({}, point); def_stroke_opz = $.extend({}, this.o.stroke_options); def_circle_opz = $.extend({}, this.o.circle_options); $.extend(def_stroke_opz, point.stroke_options || {}); $.extend(circle, def_stroke_opz); $.extend(def_circle_opz, point.circle_options || {}); $.extend(circle, def_circle_opz); circle.center = point.position; circle.draggable = false; circle.zIndex = point.zIndex > 0 ? point.zIndex - 10 : 1; return circle; }; //create the main object point Maplace.prototype.add_markerEv = function(index, point, marker) { var self = this; google.maps.event.addListener(marker, 'click', function(ev) { self.o.beforeShow(index, point, marker); //show infowindow? if (self.o.show_infowindows && (point.show_infowindow === false ? false : true)) { self.open_infowindow(index, marker, ev); } //pan and zoom the map if (self.o.pan_on_click && (point.pan_on_click === false ? false : true)) { self.oMap.panTo(point.position); point.zoom && self.oMap.setZoom(point.zoom); } //activate related menu link if (self.current_control && self.o.generate_controls && self.current_control.activateCurrent) { self.current_control.activateCurrent.call(self, index + 1); } //update current location index self.current_index = index; self.o.afterShow(index, point, marker); }); if (point.draggable) { this.add_dragEv(index, point, marker); } }; //add events to circles objs Maplace.prototype.add_circleEv = function(index, circle, marker) { var self = this; google.maps.event.addListener(marker, 'click', function() { self.ViewOnMap(index + 1); }); google.maps.event.addListener(marker, 'center_changed', function() { self.o.circleCenterChanged(index, circle, marker); }); google.maps.event.addListener(marker, 'radius_changed', function() { self.o.circleRadiusChanged(index, circle, marker); }); if (circle.draggable) { this.add_dragEv(index, circle, marker); } }; //add drag events Maplace.prototype.add_dragEv = function(index, obj, marker) { var self = this; google.maps.event.addListener(marker, 'drag', function(ev) { var pos, extraType; if (marker.getPosition) { pos = marker.getPosition(); } else if (marker.getCenter) { pos = marker.getCenter(); } else { return; } //update circle position if (self.circles[index]) { self.circles[index].setCenter(pos); } //update polygon or polyline if defined if (self.Polyline) { extraType = 'Polyline'; } else if (self.Polygon) { extraType = 'Polygon'; } if (extraType) { var path = self[extraType].getPath(), pathArray = path.getArray(), arr = [], i = 0; for (; i < pathArray.length; ++i) { arr[i] = (index === i) ? new google.maps.LatLng(pos.lat(), pos.lng()) : new google.maps.LatLng(pathArray[i].lat(), pathArray[i].lng()); } self[extraType].setPath(new google.maps.MVCArray(arr)); self.add_polyEv(extraType); } //fire drag event self.o.drag(index, obj, marker); }); google.maps.event.addListener(marker, 'dragend', function() { self.o.dragEnd(index, obj, marker); }); google.maps.event.addListener(marker, 'dragstart', function() { self.o.dragStart(index, obj, marker); }); google.maps.event.addListener(marker, 'center_changed', function() { //update marker position if (self.markers[index] && marker.getCenter) { self.markers[index].setPosition(marker.getCenter()); } self.o.drag(index, obj, marker); }); }; //add events to poly objs Maplace.prototype.add_polyEv = function(typeName) { var self = this; google.maps.event.addListener(this[typeName].getPath(), 'set_at', function(index, obj) { var item = self[typeName].getPath().getAt(index), newPos = new google.maps.LatLng(item.lat(), item.lng()); self.markers[index] && self.markers[index].setPosition(newPos); self.circles[index] && self.circles[index].setCenter(newPos); self.o['on' + typeName + 'Changed'](index, obj, self[typeName].getPath().getArray()); }); }; //wrapper for the map types Maplace.prototype.create = { //single marker marker: function(index, point, marker) { var self = this, circle; //allow mix circles with markers if (point.type === 'circle' && !marker) { circle = this.create_objCircle(point); if (!point.visible) { circle.draggable = point.draggable; } marker = new google.maps.Circle(circle); this.add_circleEv(index, circle, marker); //store the new circle this.circles[index] = marker; } point.type = 'marker'; //create the marker and add click event marker = new google.maps.Marker(point); this.add_markerEv(index, point, marker); //extends bounds with this location this.oBounds.extend(point.position); //store the new marker this.markers[index] = marker; this.o.afterCreateMarker(index, point, marker); return marker; }, //circle mode circle: function() { var self = this, a, point, circle, marker; for (a = 0; a < this.ln; a++) { point = this.create_objPoint(a); //allow mix markers with circles if (point.type === 'circle') { circle = this.create_objCircle(point); if (!point.visible) { circle.draggable = point.draggable; } marker = new google.maps.Circle(circle); this.add_circleEv(a, circle, marker); //store the new circle this.circles[a] = marker; } point.type = 'marker'; this.create.marker.call(this, a, point, marker); } }, //polyline mode polyline: function() { var self = this, a, point, stroke = $.extend({}, this.o.stroke_options); stroke.path = []; stroke.draggable = this.o.draggable; stroke.editable = this.o.editable; stroke.map = this.oMap; stroke.zIndex = this.o.maxZIndex + 100; //create the path and location marker for (a = 0; a < this.ln; a++) { point = this.create_objPoint(a); this.create.marker.call(this, a, point); stroke.path.push(point.position); } this.Polyline ? this.Polyline.setOptions(stroke) : this.Polyline = new google.maps.Polyline(stroke); this.add_polyEv('Polyline'); }, //polygon mode polygon: function() { var self = this, a, point, stroke = $.extend({}, this.o.stroke_options); stroke.path = []; stroke.draggable = this.o.draggable; stroke.editable = this.o.editable; stroke.map = this.oMap; stroke.zIndex = this.o.maxZIndex + 100; //create the path and location marker for (a = 0; a < this.ln; a++) { point = this.create_objPoint(a); this.create.marker.call(this, a, point); stroke.path.push(point.position); } this.Polygon ? this.Polygon.setOptions(stroke) : this.Polygon = new google.maps.Polygon(stroke); google.maps.event.addListener(this.Polygon, 'click', function(obj) { self.o.onPolygonClick(obj); }); this.add_polyEv('Polygon'); }, //fusion tables fusion: function() { this.o.fusion_options.styles = [this.o.stroke_options]; this.o.fusion_options.map = this.oMap; this.Fusion ? this.Fusion.setOptions(this.o.fusion_options) : this.Fusion = new google.maps.FusionTablesLayer(this.o.fusion_options); }, //directions mode directions: function() { var self = this, a, point, stopover, origin, destination, waypoints = [], distance = 0; //create the waypoints and location marker for (a = 0; a < this.ln; a++) { point = this.create_objPoint(a); //first location start point if (a === 0) { origin = point.position; //last location end point } else if (a === (this.ln - 1)) { destination = point.position; //waypoints in the middle } else { stopover = this.o.locations[a].stopover === true ? true : false; waypoints.push({ location: point.position, stopover: stopover }); } this.create.marker.call(this, a, point); } this.o.directions_options.origin = origin; this.o.directions_options.destination = destination; this.o.directions_options.waypoints = waypoints; this.directionsService || (this.directionsService = new google.maps.DirectionsService()); this.directionsDisplay ? this.directionsDisplay.setOptions({draggable: this.o.draggable}) : this.directionsDisplay = new google.maps.DirectionsRenderer({draggable: this.o.draggable}); this.directionsDisplay.setMap(this.oMap); //show the directions panel if (this.o.directions_panel) { this.o.directions_panel = $(this.o.directions_panel); this.directionsDisplay.setPanel(this.o.directions_panel.get(0)); } if (this.o.draggable) { google.maps.event.addListener(this.directionsDisplay, 'directions_changed', function() { distance = self.compute_distance(self.directionsDisplay.directions); self.o.afterRoute(distance); }); } this.directionsService.route(this.o.directions_options, function(result, status) { //directions found if (status === google.maps.DirectionsStatus.OK) { distance = self.compute_distance(result); self.directionsDisplay.setDirections(result); } self.o.afterRoute(distance, status, result); }); } }; //route distance Maplace.prototype.compute_distance = function(result) { var total = 0, i, myroute = result.routes[0], rlen = myroute.legs.length; for (i = 0; i < rlen; i++) { total += myroute.legs[i].distance.value; } return total; }; //wrapper for the infowindow types Maplace.prototype.type_to_open = { //google default infowindow bubble: function(location) { this.infowindow = new google.maps.InfoWindow({ content: location.html || '' }); } }; //open the infowindow Maplace.prototype.open_infowindow = function(index, marker, ev) { //close if any open this.CloseInfoWindow(); var point = this.o.locations[index], type = this.o.infowindow_type; //show if content and valid infowindow type provided if (point.html && this.type_to_open[type]) { this.o.beforeOpenInfowindow(index, point, marker); this.type_to_open[type].call(this, point); this.infowindow.open(this.oMap, marker); this.o.afterOpenInfowindow(index, point, marker); } }; //gets the html for the menu Maplace.prototype.get_html_controls = function() { if (this.controls[this.o.controls_type] && this.controls[this.o.controls_type].getHtml) { this.current_control = this.controls[this.o.controls_type]; return this.current_control.getHtml.apply(this); } return ''; }; //creates the controls menu Maplace.prototype.generate_controls = function() { //append menu on the div container if (!this.o.controls_on_map) { this.controls_wrapper.empty(); this.controls_wrapper.append(this.get_html_controls()); return; } //else //controls in map var cntr = $('<div class="on_gmap ' + this.o.controls_type + ' gmap_controls"></div>') .css(this.o.controls_applycss ? {margin: '5px'} : {}), inner = $(this.get_html_controls()).css(this.o.controls_applycss ? { background: '#fff', padding: '5px', border: '1px solid #eee', boxShadow: 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px', maxHeight: this.map_div.find('.canvas_map').outerHeight() - 80, minWidth: 100, overflowY: 'auto', overflowX: 'hidden' } : {}); cntr.append(inner); //attach controls this.oMap.controls[this.o.controls_position].push(cntr.get(0)); }; //resets obj map, markers, bounds, listeners, controllers Maplace.prototype.init_map = function() { var self = this; this.Polyline && this.Polyline.setMap(null); this.Polygon && this.Polygon.setMap(null); this.Fusion && this.Fusion.setMap(null); this.directionsDisplay && this.directionsDisplay.setMap(null); for (var i = this.markers.length - 1; i >= 0; i -= 1) { try { this.markers[i] && this.markers[i].setMap(null); } catch (err) { self.debug('init_map::markers::setMap', err.stack); } } this.markers.length = 0; this.markers = []; for (var e = this.circles.length - 1; e >= 0; e -= 1) { try { this.circles[e] && this.circles[e].setMap(null); } catch (err) { self.debug('init_map::circles::setMap', err.stack); } } this.circles.length = 0; this.circles = []; if (this.o.controls_on_map && this.oMap.controls) { this.oMap.controls[this.o.controls_position].forEach(function(element, index) { try { self.oMap.controls[this.o.controls_position].removeAt(index); } catch (err) { self.debug('init_map::removeAt', err.stack); } }); } this.oBounds = new google.maps.LatLngBounds(); }; //perform the first view of the map Maplace.prototype.perform_load = function() { //one location if (this.ln === 1) { if (this.o.map_options.set_center) { this.oMap.setCenter(new google.maps.LatLng(this.o.map_options.set_center[0], this.o.map_options.set_center[1])); } else { this.oMap.fitBounds(this.oBounds); this.ViewOnMap(1); } this.o.map_options.zoom && this.oMap.setZoom(this.o.map_options.zoom); //no locations } else if (this.ln === 0) { if (this.o.map_options.set_center) { this.oMap.setCenter(new google.maps.LatLng(this.o.map_options.set_center[0], this.o.map_options.set_center[1])); } else { this.oMap.fitBounds(this.oBounds); } this.oMap.setZoom(this.o.map_options.zoom || 1); //n+ locations } else { this.oMap.fitBounds(this.oBounds); //check the start option if (typeof (this.o.start - 0) === 'number' && this.o.start > 0 && this.o.start <= this.ln) { this.ViewOnMap(this.o.start); //check if set_center exists } else if (this.o.map_options.set_center) { this.oMap.setCenter(new google.maps.LatLng(this.o.map_options.set_center[0], this.o.map_options.set_center[1])); //view all } else { this.ViewOnMap(this.view_all_key); } this.o.map_options.zoom && this.oMap.setZoom(this.o.map_options.zoom); } }; Maplace.prototype.debug = function(code, msg) { this.o.debug && console.log(code, msg); return this; }; ///////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// //adds a custom menu to the class Maplace.prototype.AddControl = function(name, func) { if (!name || !func) { self.debug('AddControl', 'Missing "name" and "func" callback.'); return false; } this.controls[name] = func; return this; }; //close the infowindow Maplace.prototype.CloseInfoWindow = function() { if (this.infowindow && (this.current_index || this.current_index === 0)) { this.o.beforeCloseInfowindow(this.current_index, this.o.locations[this.current_index]); this.infowindow.close(); this.infowindow = null; this.o.afterCloseInfowindow(this.current_index, this.o.locations[this.current_index]); } return this; }; //checks if a location has to be in menu Maplace.prototype.ShowOnMenu = function(index) { if (index === this.view_all_key && this.o.view_all && this.ln > 1) { return true; } index = parseInt(index, 10); if (typeof (index - 0) === 'number' && index >= 0 && index < this.ln) { var on_menu = this.o.locations[index].on_menu === false ? false : true; if (on_menu) { return true; } } return false; }; //triggers to show a location in map Maplace.prototype.ViewOnMap = function(index) { //view all if (index === this.view_all_key) { this.o.beforeViewAll(); this.current_index = index; if (this.o.locations.length > 0 && this.o.generate_controls && this.current_control && this.current_control.activateCurrent) { this.current_control.activateCurrent.apply(this, [index]); } this.oMap.fitBounds(this.oBounds); this.CloseInfoWindow(); this.o.afterViewAll(); //specific location } else { index = parseInt(index, 10); if (typeof (index - 0) === 'number' && index > 0 && index <= this.ln) { try { google.maps.event.trigger(this.markers[index - 1], 'click'); } catch (err) { this.debug('ViewOnMap::trigger', err.stack); } } } return this; }; //replace current locations Maplace.prototype.SetLocations = function(locs, reload) { this.o.locations = locs; reload && this.Load(); return this; }; //adds one or more locations to the end of the array Maplace.prototype.AddLocations = function(locs, reload) { var self = this; if ($.isArray(locs)) { $.each(locs, function(index, value) { self.o.locations.push(value); }); } if ($.isPlainObject(locs)) { this.o.locations.push(locs); } reload && this.Load(); return this; }; //adds a location at the specific index Maplace.prototype.AddLocation = function(location, index, reload) { var self = this; if ($.isPlainObject(location)) { this.o.locations.splice(index, 0, location); } reload && this.Load(); return this; }; //remove one or more locations Maplace.prototype.RemoveLocations = function(locs, reload) { var self = this, k = 0; if ($.isArray(locs)) { $.each(locs, function(index, value) { if ((value - k) < self.ln) { self.o.locations.splice(value - k, 1); } k++; }); } else { if (locs < this.ln) { this.o.locations.splice(locs, 1); } } reload && this.Load(); return this; }; //check if already initialized with a Load() Maplace.prototype.Loaded = function() { return this.loaded; }; //loads the options Maplace.prototype._init = function() { //store the locations length this.ln = this.o.locations.length; //update all locations with shared for (var i = 0; i < this.ln; i++) { var common = $.extend({}, this.o.shared); this.o.locations[i] = $.extend(common, this.o.locations[i]); if (this.o.locations[i].html) { this.o.locations[i].html = this.o.locations[i].html.replace('%index', i + 1); this.o.locations[i].html = this.o.locations[i].html.replace('%title', (this.o.locations[i].title || '')); } } //store dom references this.map_div = $(this.o.map_div); this.controls_wrapper = $(this.o.controls_div); return this; }; //creates the map and menu Maplace.prototype.Load = function(args) { $.extend(true, this.o, args); args && args.locations && (this.o.locations = args.locations); this._init(); //reset/init google map objects this.o.visualRefresh === false ? (google.maps.visualRefresh = false) : (google.maps.visualRefresh = true); this.init_map(); this.create_objMap(); //add markers this.add_markers_to_objMap(); //generate controls if ((this.ln > 1 && this.o.generate_controls) || this.o.force_generate_controls) { this.o.generate_controls = true; this.generate_controls(); } else { this.o.generate_controls = false; } var self = this; //first call if (!this.loaded) { google.maps.event.addListenerOnce(this.oMap, 'idle', function() { self.perform_load(); }); //add custom listeners for (var i in this.o.listeners) { if (this.o.listeners.hasOwnProperty(i)) { google.maps.event.addListener(this.oMap, i, this.o.listeners[i]); } } //all other calls } else { this.perform_load(); } this.loaded = true; return this; }; return Maplace; })); </script> <script type="text/javascript"> $(function() { var LocsA = [ { lat: 45.9, lon: 10.9, title: 'Title A1', html: '<h3>Content A1</h3>', icon: 'http://maps.google.com/mapfiles/markerA.png', animation: google.maps.Animation.DROP }, { lat: 44.8, lon: 1.7, title: 'Title B1', html: '<h3>Content B1</h3>', icon: 'http://maps.google.com/mapfiles/markerB.png', show_infowindow: false }, { lat: 51.5, lon: -1.1, title: 'Title C1', html: [ '<h3>Content C1</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 8, icon: 'http://maps.google.com/mapfiles/markerC.png' } ]; var LocsAv2 = [ { lat: 45.9, lon: 10.9, title: 'Zone A1', html: '<h3>Content A1</h3>', type : 'circle', circle_options: { radius: 200000 }, draggable: true }, { lat: 44.8, lon: 1.7, title: 'Draggable', html: '<h3>Content B1</h3>', show_infowindow: false, visible: true, draggable: true }, { lat: 51.5, lon: -1.1, title: 'Title C1', html: [ '<h3>Content C1</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 8, visible: true } ]; var LocsB = [ { lat: 52.1, lon: 11.3, title: 'Title A2', html: [ '<h3>Content A2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 8 }, { lat: 51.2, lon: 22.2, title: 'Title B2', html: [ '<h3>Content B2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 8 }, { lat: 49.4, lon: 35.9, title: 'Title C2', html: [ '<h3>Content C2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 4 }, { lat: 47.8, lon: 15.6, title: 'Title D2', html: [ '<h3>Content D2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 6 } ]; var LocsBv2 = [ { lat: 52.1, lon: 11.3, title: 'Title A2', html: [ '<h3>Content A2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 8 }, { lat: 51.2, lon: 22.2, title: 'Title B2', html: [ '<h3>Content B2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 8, type : 'circle', circle_options: { radius: 100000 } }, { lat: 49.4, lon: 35.9, title: 'Title C2', html: [ '<h3>Content C2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 4 }, { lat: 47.8, lon: 15.6, title: 'Title D2', html: [ '<h3>Content D2</h3>', '<p>Lorem Ipsum..</p>' ].join(''), zoom: 6 } ]; var LocsAB = LocsA.concat(LocsB); var LocsC = [ { lat: 45.4654, lon: 9.1866, title: 'Milan, Italy', type : 'circle', circle_options: { radius: 1000 }, visible: false }, { lat: 47.36854, lon: 8.53910, title: 'Zurich, Switzerland' }, { lat: 48.892, lon: 2.359, title: 'Paris, France' }, { lat: 48.13654, lon: 11.57706, title: 'Munich, Germany' } ]; var LocsD = [ { lat: 45.4654, lon: 9.1866, title: 'Milan, Italy', html: '<h3>Milan, Italy</h3>' }, { lat: 47.36854, lon: 8.53910, title: 'Zurich, Switzerland', html: '<h3>Zurich, Switzerland</h3>', visible: false }, { lat: 48.892, lon: 2.359, title: 'Paris, France', html: '<h3>Paris, France</h3>', stopover: true }, { lat: 48.13654, lon: 11.57706, title: 'Munich, Germany', html: '<h3>Munich, Germany</h3>' } ]; var Circles = [ { lat: 51.51386, lon: -0.09559, title: 'Draggable marker', circle_options: { radius: 160 }, stroke_options: { strokeColor: '#aaaa00', fillColor: '#eeee00' }, draggable: true }, { lat: 51.51420, lon: -0.09303, title: 'Draggable circle', circle_options: { radius: 50 }, stroke_options: { strokeColor: '#aa0000', fillColor: '#ee0000' }, visible: false, draggable: true }, { lat: 51.51498, lon: -0.09097, circle_options: { radius: 80 }, visible: false, draggable: true }, { lat: 51.51328, lon: -0.09021, circle_options: { radius: 160, editable: true }, title: 'Editable circle', html: 'Change my size', visible: false, draggable: true }, { lat: 51.51211, lon: -0.09050, circle_options: { radius: 130 }, stroke_options: { strokeColor: '#00aa00', fillColor: '#00aa00' }, visible: false }, { lat: 51.51226, lon: -0.09435, circle_options: { radius: 100 }, draggable: true }, { lat: 51.513, lon: -0.08410, type: 'marker', title: 'Simple marker', html: 'I\'m a simple marker.' } ]; new Maplace({ locations: LocsAB, map_div: '#gmap', controls_div: '#gmap-menu', controls_type: 'list', controls_on_map: false }).Load() new Maplace({ locations: [{ lat: 45.9, lon: 10.9, title: 'Title A1', html: '<h3>Content A1</h3>', zoom: 8, icon: 'http://www.google.com/mapfiles/markerA.png', animation: google.maps.Animation.DROP },{ lat: 44.8, lon: 1.7, title: 'Title B1', html: '<h3>Content B1</h3>', show_infowindow: true } ], map_div: '#gmap2', controls_div: '#gmap-menu2', controls_type: 'list', controls_on_map: true }).Load() new Maplace({ locations:LocsB, map_div: '#gmap-tabs', controls_div: '#controls-tabs', controls_type: 'list', controls_on_map: false, show_infowindow: false, start: 1, afterShow: function(index, location, marker) { $('#info').html(location.html); } }).Load(); }); </script> </head> <body> <div id="gmap-menu" class="menu" style="width:760px"></div> <div id="gmap" style="width:760px;height:250px;"></div> <br> <div id="gmap-menu2"></div> <div id="gmap2" style="width:760px;height:250px;"></div> <br> <div id="controls-tabs" class="tabs"></div> <div id="info"></div> <div id="gmap-tabs" style="width:760px;height:250px;"></div> </body> </html>
jquery.iosslider-1.3.43.zip