PageRenderTime 53ms CodeModel.GetById 22ms RepoModel.GetById 1ms app.codeStats 0ms

/trunk/plantilla/kalypso_html_responsive/styles-buttons.php

https://gitlab.com/hecto932/p_hwtc
PHP | 995 lines | 920 code | 74 blank | 1 comment | 13 complexity | 20dee6c7898c8f2e1475bd2acb596f01 MD5 | raw file
Possible License(s): GPL-3.0 
    

  1. <!doctype html>
    2. 

  2. <!--[if IE 7 ]>    <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
    3. 

  3. <!--[if IE 8 ]>    <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
    4. 

  4. <!--[if IE 9 ]>    <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
    5. 

  5. <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-gb" class="no-js"> <!--<![endif]-->
    6. 

  6. 

  7. <head>
    8. 

  8. 	<title>Buttons styles | KALLYAS Template</title>
    9. 

  9. 	<meta charset="utf-8">
    10. 

  10. 	<meta name="keywords" content="premium html template, unique premium template, multipurpose" />
    11. 

  11. 	<meta name="description" content="Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites" />
    12. 

  12. 

  13. 	<link rel="stylesheet" href="css/template.css.php?src=bootstrap-..%252Faddons%252Fsuperfish_responsive%252Fsuperfish-template-updates-custom" type="text/css" />
    14. 

  14. 

  15. 		
    16. 

  16. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    17. 

  17. 	<link rel="stylesheet" href="css/responsive-devices.css" type="text/css" />
    18. 

  18. 	
    19. 

  19. 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&amp;v1&mp;subset=latin,latin-ext" type="text/css" media="screen" id="google_font" />
    20. 

  20. 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700&amp;v1&mp;subset=latin,latin-ext" type="text/css" media="screen" id="google_font_body" />
    21. 

  21. 	
    22. 

  22. 	<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    23. 

  23. 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    24. 

  24. 	<script>window.jQuery || document.write('<script src="js/jquery-1.8.2.min.js">\x3C/script>')</script>
    25. 

  25. 	<script src="js/jquery.noconflict.js" type="text/javascript"></script>
    26. 

  26. 	<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js" type="text/javascript"></script>
    27. 

  27. 	
    28. 

  28. 	<link rel="shortcut icon" href="images/favicons/favicon.png">
    29. 

  29. 	<link rel="apple-touch-icon" href="images/favicons/apple-touch-icon-57x57.png">
    30. 

  30. 	<link rel="apple-touch-icon" sizes="72x72" href="images/favicons/apple-touch-icon-72x72.png">
    31. 

  31. 	<link rel="apple-touch-icon" sizes="114x114" href="images/favicons/apple-touch-icon-114x114.png">
    32. 

  32. 	
    33. 

  33. 	<!--[if lte IE 9]>
    34. 

  34. 		<link rel="stylesheet" type="text/css" href="css/fixes.css" />
    35. 

  35. 	<![endif]-->
    36. 

  36. 

  37. 	<!--[if lte IE 8]>
    38. 

  38. 		<script src="js/respond.js"></script>
    39. 

  39. 		<script type="text/javascript"> 
    40. 

  40. 		var $buoop = {vs:{i:8,f:6,o:10.6,s:4,n:9}} 
    41. 

  41. 		$buoop.ol = window.onload; 
    42. 

  42. 		window.onload=function(){ 
    43. 

  43. 		 try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
    44. 

  44. 		 var e = document.createElement("script"); 
    45. 

  45. 		 e.setAttribute("type", "text/javascript"); 
    46. 

  46. 		 e.setAttribute("src", "http://browser-update.org/update.js"); 
    47. 

  47. 		 document.body.appendChild(e); 
    48. 

  48. 		} 
    49. 

  49. 		</script> 
    50. 

  50. 	<![endif]-->
    51. 

  51. 	
    52. 

  52. 	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    53. 

  53. 	<!--[if lt IE 9]>
    54. 

  54. 	  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    55. 

  55. 	<![endif]-->
    56. 

  56. 	
    57. 

  57. 	<!-- Facebook OpenGraph Tags - Replace with your own -->
    58. 

  58. 	<meta property="og:title" content="KALLYAS Template HTML"/>
    59. 

  59. 	<meta property="og:type" content="website"/>
    60. 

  60. 	<meta property="og:url" content="http://www.hogash-demos.com/kalypso_html/"/>
    61. 

  61. 	<meta property="og:image" content="http://www.hogash-demos.com/kalypso_html/images/logo.png"/>
    62. 

  62. 	<meta property="og:site_name" content="Kallyas"/>
    63. 

  63. 	<meta property="fb:app_id" content=""/> <!-- PUT HERE YOUR OWN APP ID - you could get errors if you don't use this one -->
    64. 

  64. 	<meta property="og:description" content="Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites"/>
    65. 

  65. 	<!-- END Facebook OpenGraph Tags -->
    66. 

  66. 	
    67. 

  67. 	<!-- THIS IS THE DARK THEME STYLESEET // REMOVE COMMENTS TO ENABLE -->
    68. 

  68. 	<!-- <link rel="stylesheet" href="css/dark-theme.css" type="text/css" /> -->
    69. 

  69. 	<!-- END DARK THEME -->
    70. 

  70. 	
    71. 

  71. 	<script type="text/javascript">
    72. 

  72. 

  73.   var _gaq = _gaq || [];
    74. 

  74.   _gaq.push(['_setAccount', 'UA-4777573-29']);
    75. 

  75.   _gaq.push(['_trackPageview']);
    76. 

  76. 

  77.   (function() {
    78. 

  78.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    79. 

  79.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    80. 

  80.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    81. 

  81.   })();
    82. 

  82. 

  83. </script>
    84. 

  84. </head>
    85. 

  85. 

  86. <body class="">
    87. 

  87. 	<!-- ADD AN APPLICATION ID !!
    88. 

  88. 	If you want to know how to find out your app id, either search on google for: facebook appid, either go to http://rieglerova.net/how-to-get-a-facebook-app-id/ -->
    89. 

  89. 	<div id="fb-root"></div>
    90. 

  90. 	<script>(function(d, s, id) {
    91. 

  91. 	var js, fjs = d.getElementsByTagName(s)[0];
    92. 

  92. 	if (d.getElementById(id)) return;
    93. 

  93. 	js = d.createElement(s); js.id = id;
    94. 

  94. 	js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=227862407254187"; // addyour appId here
    95. 

  95. 	fjs.parentNode.insertBefore(js, fjs);
    96. 

  96. 	}(document, 'script', 'facebook-jssdk'));</script>
    97. 

  97. 	<div class="support_panel" id="sliding_panel">
    98. 

  98. 		<div class="container">
    99. 

  99. 			<div class="row">
    100. 

  100. 				<div class="span9">
    101. 

  101. 					<h4 class="m_title">HOW TO SHOP</h4>
    102. 

  102. 					<div class="m_content how_to_shop">
    103. 

  103. 						<div class="row">
    104. 

  104. 							<div class="span3">
    105. 

  105. 								<span class="number">1</span> Login or create new account.
    106. 

  106. 							</div>
    107. 

  107. 							<div class="span3">
    108. 

  108. 								<span class="number">2</span> Review your order.
    109. 

  109. 							</div>
    110. 

  110. 							<div class="span3">
    111. 

  111. 								<span class="number">3</span> Payment &amp; <strong>FREE</strong> shipment
    112. 

  112. 							</div>
    113. 

  113. 						</div>
    114. 

  114. 						<p>If you still have problems, please let us know, by sending an email to support@website.com . Thank you!</p>
    115. 

  115. 					</div><!-- end how to shop steps -->
    116. 

  116. 				</div>
    117. 

  117. 				<div class="span3">
    118. 

  118. 					<h4 class="m_title">SHOWROOM HOURS</h4>
    119. 

  119. 					<div class="m_content">
    120. 

  120. 					Mon-Fri 9:00AM - 6:00AM<br>
    121. 

  121. 					Sat - 9:00AM-5:00PM<br>
    122. 

  122. 					Sundays by appointment only!
    123. 

  123. 					</div>
    124. 

  124. 				</div>
    125. 

  125. 			</div>
    126. 

  126. 		</div>
    127. 

  127. 	</div><!-- end support panel -->
    128. 

  128.     
    129. 

  129. 	<div class="login_register_stuff hide"><!-- Login/Register Modal forms - hidded by default to be opened through modal -->
    130. 

  130. 		<div id="login_panel">
    131. 

  131. 			<div class="inner-container login-panel">
    132. 

  132. 				<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
    133. 

  133. 				<form id="login_form" name="login_form" method="post">
    134. 

  134. 					<a href="styles-buttons.php#" class="create_account" onClick="ppOpen('#register_panel', '280');">CREATE ACCOUNT</a>
    135. 

  135. 					<input type="text" id="username" name="username" class="inputbox" placeholder="Username">
    136. 

  136. 					<input type="password" id="password" name="password" class="inputbox" placeholder="Password">
    137. 

  137. 					<input type="submit" id="login" name="submit" value="LOG IN">
    138. 

  138. 					<a href="styles-buttons.php#" class="login_facebook">login with facebook</a>
    139. 

  139. 				</form>
    140. 

  140. 				<div class="links"><a href="styles-buttons.php#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR USERNAME?</a> / <a href="styles-buttons.php#" onClick="ppOpen('#forgot_panel', '350');">FORGOT YOUR PASSWORD?</a></div>
    141. 

  141. 			</div>
    142. 

  142. 		</div><!-- end login panel -->
    143. 

  143. 

  144. 		<div id="register_panel">
    145. 

  145. 			<div class="inner-container register-panel">
    146. 

  146. 				<h3 class="m_title">CREATE ACCOUNT</h3>
    147. 

  147. 				<form id="register_form" name="register_form" method="post">
    148. 

  148. 					<p>
    149. 

  149. 						<input type="text" id="reg-username" name="username" class="inputbox" placeholder="Username">
    150. 

  150. 					</p>
    151. 

  151. 					<p>
    152. 

  152. 						<input type="text" id="fullname" name="fullname" class="inputbox" placeholder="Your full name">
    153. 

  153. 					</p>
    154. 

  154. 					<p>
    155. 

  155. 						<input type="text" id="reg-email" name="email" class="inputbox" placeholder="Your email">
    156. 

  156. 					</p>
    157. 

  157.                     <p>
    158. 

  158. 						<input type="password" id="reg-password" name="password" class="inputbox" placeholder="Desired password">
    159. 

  159. 					</p>
    160. 

  160. 					<p>
    161. 

  161. 						<input type="password" id="confirm_password" name="confirm_password" class="inputbox" placeholder="Confirm password">
    162. 

  162. 					</p>
    163. 

  163. 					<p>
    164. 

  164. 						<input type="submit" id="signup" name="submit" value="CREATE MY ACCOUNT">
    165. 

  165. 					</p>
    166. 

  166. 				</form>
    167. 

  167. 				<div class="links"><a href="styles-buttons.php#" onClick="ppOpen('#login_panel', '800');">ALREADY HAVE AN ACCOUNT?</a></div>
    168. 

  168. 			</div>
    169. 

  169. 		</div><!-- end register panel -->
    170. 

  170. 

  171. 		<div id="forgot_panel">
    172. 

  172. 			<div class="inner-container forgot-panel">
    173. 

  173. 				<h3 class="m_title">FORGOT YOUR DETAILS?</h3>
    174. 

  174. 				<form id="forgot_form" name="forgot_form" method="post">
    175. 

  175. 					<p>
    176. 

  176. 						<input type="text" id="forgot-email" name="email" class="inputbox" placeholder="Email Address">
    177. 

  177. 					</p>
    178. 

  178. 					<p>
    179. 

  179. 						<input type="submit" id="recover" name="submit" value="SEND MY DETAILS!">
    180. 

  180. 					</p>
    181. 

  181. 				</form>
    182. 

  182. 				<div class="links"><a href="styles-buttons.php#" onClick="ppOpen('#login_panel', '800');">AAH, WAIT, I REMEMBER NOW!</a></div>
    183. 

  183. 			</div>
    184. 

  184. 		</div><!-- end register panel -->
    185. 

  185. 	</div><!-- end login register stuff -->
    186. 

  186.     
    187. 

  187. 	<div id="page_wrapper">
    188. 

  188. 

  189. 		<header id="header" class="style2">
    190. 

  190. 			<div class="container">
    191. 

  191. 

  192. 				<!-- logo -->
    193. 

  193. 				<h1 id="logo"><a href="index.php"><img src="images/logo.png" alt="Kallyas HTML Template"></a></h1>
    194. 

  194. 

  195. 				<ul class="topnav navRight">
    196. 

  196. 					<li><a href="styles-buttons.php#" id="open_sliding_panel">
    197. 

  197. 							<span class="icon-remove-circle icon-white"></span> SUPPORT
    198. 

  198. 						</a>
    199. 

  199. 					</li>
    200. 

  200. 					<li><a href="styles-buttons.php#login_panel" data-rel="prettyPhoto[login_panel]">LOGIN</a></li>
    201. 

  201. 				</ul><!-- end topnav // right aligned -->
    202. 

  202. 

  203. 				<ul class="topnav navLeft">
    204. 

  204. 					<li class="drop"><a href="styles-buttons.php#">MY CART</a>
    205. 

  205. 						<div class="pPanel">
    206. 

  206. 							<div class="inner">
    207. 

  207. 								<span class="cart_details">3 items, Total of <strong>$599 USD</strong> <a href="styles-buttons.php#" class="checkout">Checkout <span class="icon-chevron-right"></span></a></span>
    208. 

  208. 							</div>
    209. 

  209. 						</div>
    210. 

  210. 					</li>
    211. 

  211. 					<li class="languages drop"><a href="styles-buttons.php#"><span class="icon-globe icon-white"></span> LANGUAGES</a>
    212. 

  212. 						<div class="pPanel">
    213. 

  213. 							<ul class="inner">
    214. 

  214. 								<li class="active"><a href="styles-buttons.php#">English <span class="icon-ok"></span></a></li>
    215. 

  215. 								<li><a href="styles-buttons.php#">French</a></li>
    216. 

  216. 								<li><a href="styles-buttons.php#">German</a></li>
    217. 

  217. 							</ul>
    218. 

  218. 						</div>
    219. 

  219. 					</li>
    220. 

  220. 				</ul><!-- end topnav // left aligned -->
    221. 

  221. 

  222. 				<!-- search -->
    223. 

  223. 				<div id="search">
    224. 

  224. 					<a href="styles-buttons.php#" class="searchBtn"><span class="icon-search icon-white"></span></a>
    225. 

  225. 					<div class="search">
    226. 

  226. 						<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)" target="_blank">
    227. 

  227. 							<input name="q" type="hidden" />
    228. 

  228. 							<input name="qfront" maxlength="20" class="inputbox" type="text" size="20" value="SEARCH ..." onblur="if (this.value=='') this.value='SEARCH ...';" onfocus="if (this.value=='SEARCH ...') this.value='';" />
    229. 

  229. 							<input type="submit" value="go" class=" icon-search"/>
    230. 

  230. 						</form>
    231. 

  231. 					</div>
    232. 

  232. 				</div><!-- end search -->
    233. 

  233.                 
    234. 

  234. <script type="text/javascript">
    235. 

  235. // THIS SCRIPT DETECTS THE ACTIVE ELEMENT AND ADDS ACTIVE CLASS
    236. 

  236. (function($){ 
    237. 

  237. 	$(document).ready(function(){
    238. 

  238. 		var pathname = window.location.pathname,
    239. 

  239. 			page = pathname.split(/[/ ]+/).pop(),
    240. 

  240. 			menuItems = $('#main_menu a');
    241. 

  241. 		menuItems.each(function(){
    242. 

  242. 			var mi = $(this),
    243. 

  243. 				miHrefs = mi.attr("href"),
    244. 

  244. 				miParents = mi.parents('li');
    245. 

  245. 			if(page == miHrefs) {
    246. 

  246. 				miParents.addClass("active").siblings().removeClass('active');
    247. 

  247. 			}
    248. 

  248. 		});
    249. 

  249. 	});
    250. 

  250. })(jQuery);
    251. 

  251. </script>
    252. 

  252. 				<nav id="main_menu">
    253. 

  253. 					<ul class="sf-menu clearfix">
    254. 

  254. 						<li class="active"><a href="index.php">HOME</a>
    255. 

  255. 							<ul>
    256. 

  256. 								<li><a href="homepage2.php">Homepage 2</a></li>
    257. 

  257. 								<li><a href="homepage3.php">Homepage 3</a></li>
    258. 

  258. 								<li><a href="homepage4.php">Homepage 4</a></li>
    259. 

  259. 								<li><a href="homepage5.php">Homepage 5</a></li>
    260. 

  260. 								<li><a href="homepage6.php">Homepage 6</a></li>
    261. 

  261. 								<li><a href="homepage-all.php">Homepage All</a></li>
    262. 

  262. 							</ul>
    263. 

  263. 						</li>
    264. 

  264. 						<li><a href="styles-buttons.php#">SLIDERS</a>
    265. 

  265. 							<ul>
    266. 

  266. 								<li><a href="styles-buttons.php#">Main Slider</a>
    267. 

  267. 									<ul>
    268. 

  268. 										<li><a href="index.php">Default Style</a></li>
    269. 

  269. 										<li><a href="slider-main-with-thumbs.php">With Thumbs</a></li>
    270. 

  270. 										<li><a href="slider-main-faded.php">Faded</a></li>
    271. 

  271. 										<li><a href="slider-main-fixed.php">Fixed Width Slider</a></li>
    272. 

  272. 										<li><a href="slider-main-fixed-position.php">Fixed Position (Scroll)</a></li>
    273. 

  273. 									</ul>
    274. 

  274. 								</li>
    275. 

  275. 								<li><a href="slider-creative.php">Creative Slider</a></li>
    276. 

  276. 								<li><a href="slider-fixed-flexslider.php">Fixed Slider</a>
    277. 

  277. 									<ul>
    278. 

  278. 										<li><a href="slider-fixed-flexslider.php">Style 1 (Flex Slider)</a>
    279. 

  279. 											<ul>
    280. 

  280. 												<li><a href="slider-fixed-flexslider.php">Default</a></li>
    281. 

  281. 												<li><a href="slider-fixed-flexslider-thumbnails.php">With thumbnails</a></li>
    282. 

  282. 											</ul>
    283. 

  283. 										</li>
    284. 

  284. 										<li><a href="slider-fixed-nivoslider.php">Style 2 (Nivo Slider)</a></li>
    285. 

  285. 										<li><a href="slider-fixed-wowslider-blast.php">Style 3 (Wow Slider)</a>
    286. 

  286. 											<ul>
    287. 

  287. 												<li><a href="slider-fixed-wowslider-blast.php">Blast Effect</a></li>
    288. 

  288. 												<li><a href="slider-fixed-wowslider-blinds.php">Blinds Effect</a></li>
    289. 

  289. 												<li><a href="slider-fixed-wowslider-fly.php">Fly Effect</a></li>
    290. 

  290. 												<li><a href="slider-fixed-wowslider-blur.php">Blur Effect</a></li>
    291. 

  291. 											</ul>
    292. 

  292. 										</li>
    293. 

  293. 									</ul>
    294. 

  294. 								</li>
    295. 

  295. 								<li><a href="slider-3dslider.php">3D Cute Slider</a></li>
    296. 

  296. 								<li><a href="slider-fancy.php">Fancy Slider</a></li>
    297. 

  297. 								<li><a href="slider-circularcontent-alternative.php">Circular Content</a>
    298. 

  298. 									<ul>
    299. 

  299. 										<li><a href="slider-circularcontent-alternative.php">Alternative Style</a></li>
    300. 

  300. 										<li><a href="slider-circularcontent-default.php">Default Style</a></li>
    301. 

  301. 									</ul>
    302. 

  302. 								</li>
    303. 

  303. 								<li><a href="slider-static-content-default.php">Static Content</a>
    304. 

  304. 									<ul>
    305. 

  305. 										<li><a href="slider-static-content-default.php">Style 1</a></li>
    306. 

  306. 										<li><a href="slider-static-content-boxes.php">Style 2 / Boxes</a></li>
    307. 

  307. 										<li><a href="slider-static-content-video.php">Style 3 / Video</a></li>
    308. 

  308. 										<li><a href="slider-static-content-maps.php">Style 4 / Maps</a></li>
    309. 

  309. 										<li><a href="slider-static-content-textpop.php">Style 5 / Text pop</a></li>
    310. 

  310. 										<li><a href="slider-static-content-zoom.php">Style 6 / Product Loupe</a></li>
    311. 

  311. 										<li><a href="slider-static-content-event-countdown.php">Style 7 / Event countdown</a></li>
    312. 

  312. 										<li><a href="slider-static-content-videobg.php">Style 8 / Video background</a></li><!-- http://www.teehanlax.com/ -->
    313. 

  313. 										<li><a href="slider-static-content-text-login.php">Style 9 / Text &amp; Login</a></li>
    314. 

  314. 										<li><a href="slider-static-content-simple.php">Style 10 / Simple text</a></li>
    315. 

  315. 									</ul>
    316. 

  316. 								</li>
    317. 

  317. 								<li><a href="slider-portfolio-devices.php">Portfolio Slider Devices</a></li>
    318. 

  318. 								<li><a href="slider-portfolio-frames.php">Portfolio Slider Frames</a>
    319. 

  319. 									<ul>
    320. 

  320. 										<li><a href="slider-portfolio-frames.php">Sliding Vertically</a></li>
    321. 

  321. 										<li><a href="slider-portfolio-frames-horizontal.php">Sliding Horizontally</a></li>
    322. 

  322. 									</ul>
    323. 

  323. 								</li>
    324. 

  324. 								<li><a href="slider-laptop.php">Laptop Slider</a></li>
    325. 

  325. 								<li><a href="slider-icarousel.php">iCarousel</a></li>
    326. 

  326. 								<li><a href="slider-css3panels.php">CSS3 Panels</a></li>
    327. 

  327. 							</ul>
    328. 

  328. 						</li>
    329. 

  329. 						<li><a href="about-us.php">ABOUT US</a></li>
    330. 

  330. 						<li><a href="styles-buttons.php#">FEATURES</a>
    331. 

  331. 							<ul>
    332. 

  332. 								<li><a href="features-blog.php">Blog</a></li>
    333. 

  333. 								<li><a href="styles-buttons.php#">Portfolio</a>
    334. 

  334. 									<ul>
    335. 

  335. 										<li><a href="features-portfolio-cat-onecol.php">Category Layout</a>
    336. 

  336. 											<ul>
    337. 

  337. 												<li><a href="features-portfolio-cat-onecol.php">One Column</a></li>
    338. 

  338. 												<li><a href="features-portfolio-cat-twocol.php">Two Columns</a></li>
    339. 

  339. 												<li><a href="features-portfolio-cat-threecol.php">Three Columns</a></li>
    340. 

  340. 												<li><a href="features-portfolio-cat-fourcol.php">Four Columns</a></li>
    341. 

  341. 											</ul>
    342. 

  342. 										</li>
    343. 

  343. 										<li><a href="features-portfolio-sortable.php">Sortable Layout</a></li>
    344. 

  344. 										<li><a href="features-portfolio-carousels.php">Carousels Layout</a></li>
    345. 

  345. 									</ul>
    346. 

  346. 								</li>
    347. 

  347. 								<li><a href="features-photo-gallery.php">Photo Gallery</a></li>
    348. 

  348. 								<li><a href="styles-buttons.php#">Lightbox (Prettyphoto)</a>
    349. 

  349. 									<ul>
    350. 

  350. 										<li><a href="http://themeforest.net/user/hogash/?iframe=true&amp;width=800&amp;height=450" data-rel="prettyPhoto">PrettyPhoto (iFrame)</a></li>
    351. 

  351. 										<li><a href="images/super_cool_ad.jpg" data-rel="prettyPhoto">PrettyPhoto (Image)</a></li>
    352. 

  352. 										<li><a href="http://www.youtube.com/watch?v=G-1HNnxb0WE" data-rel="prettyPhoto">PrettyPhoto (Youtube)</a></li>
    353. 

  353. 										<li><a href="features-lightbox-autopop.php">Auto Pop-up</a></li>
    354. 

  354. 										<li><a href="styles-buttons.php#transparent_panel" class="prettyPhoto_transparent">Transparent modal</a></li>
    355. 

  355. 									</ul>
    356. 

  356. 								</li>
    357. 

  357. 								<li><a href="features-grid-positions.php">Grid Positions</a></li>
    358. 

  358. 								<li><a href="features-sitemap.php">Sitemap</a></li>
    359. 

  359. 								<li><a href="styles-buttons.php#">Holiday Slides</a>
    360. 

  360. 									<ul>
    361. 

  361. 										<li><a href="features-holiday-christmas.php">Christmas</a></li>
    362. 

  362. 										<li><a href="features-holiday-easter.php">Easter</a></li>
    363. 

  363. 									</ul>
    364. 

  364. 								</li>
    365. 

  365. 								<li><a href="features-page-preloader.php">Page Preloader</a></li>
    366. 

  366. 								<li><a href="features-animated-header.php">Animated Header</a></li>
    367. 

  367. 							</ul>
    368. 

  368. 						</li>
    369. 

  369. 						<li><a href="shop.php">SHOP</a></li>
    370. 

  370. 						<li><a href="styles-buttons.php#">PAGES</a>
    371. 

  371. 							<ul>
    372. 

  372. 								<li><a href="pages-faq.php">FAQ</a></li>
    373. 

  373. 								<li><a href="pages-process.php">Process</a></li>
    374. 

  374. 								<li><a href="pages-contact.php">Contact us</a>
    375. 

  375. 									<ul>
    376. 

  376. 										<li><a href="pages-contact.php">Normal page</a></li>
    377. 

  377. 										<li><a href="pages-contact-modal.php?iframe=true&amp;height=430" class="prettyPhoto_transparent">Via modal</a></li>
    378. 

  378. 									</ul>
    379. 

  379. 								</li>
    380. 

  380. 								<li><a href="pages-fullwidth.php">Full width</a></li>
    381. 

  381. 								<li><a href="pages-leftsidebar.php">Left sidebar</a></li>
    382. 

  382. 								<li><a href="pages-rightsidebar.php">Right sidebar</a></li>
    383. 

  383. 								<li><a href="pages-offline.php">Offline / Coming soon</a></li>
    384. 

  384. 								<li><a href="pages-historic.php">Historic / Timeline</a></li>
    385. 

  385. 								<li><a href="pages-testimonials.php">Testimonials</a></li>
    386. 

  386. 								<li><a href="pages-404.php">404 Error</a></li>
    387. 

  387. 								<li><a href="pages-team.php">Team</a></li>
    388. 

  388. 								<li><a href="pages-portfolioitem.php">Portfolio Item</a></li>
    389. 

  389. 								<li><a href="pages-blogitem.php">Blog Item</a></li> 
    390. 

  390. 								<li><a href="pages-productitem.php">Product page</a></li>
    391. 

  391. 								<li><a href="pages-product-list.php">Products List/Category</a></li>
    392. 

  392. 								<li><a href="pages-services.php">Services</a></li>
    393. 

  393. 								<li><a href="pages-careers.php">Careers</a></li>
    394. 

  394. 								<li><a href="http://hogash-demos.com/kalypso_html_responsive/pages-passprotected.php">Password Protected</a></li>
    395. 

  395. 							</ul>
    396. 

  396. 						</li>
    397. 

  397. 						<li><a href="styles-buttons.php#">STYLES</a>
    398. 

  398. 							<ul>
    399. 

  399. 								<li><a href="styles-typography.php">Typography</a></li>
    400. 

  400. 								<li><a href="styles-tables.php">Table designs</a></li>
    401. 

  401. 								<li><a href="styles-buttons.php">Button designs</a></li>
    402. 

  402. 								<li><a href="styles-pricingtables.php">Pricing tables</a></li>
    403. 

  403. 								<li><a href="styles-forms.php">Form styles</a></li>
    404. 

  404. 								<li><a href="styles-tabs.php">Tabs designs</a></li>
    405. 

  405. 								<li><a href="styles-accordion.php">Accordion Toogles</a></li>
    406. 

  406. 							</ul>
    407. 

  407. 						</li>
    408. 

  408. 					</ul>
    409. 

  409. 				</nav><!-- end main_menu -->
    410. 

  410. 

  411. 			</div>
    412. 

  412. 		</header>        
    413. 

  413.         <div id="page_header" class="gradient bottom-shadow">
    414. 

  414. 			<div class="bgback bg2"></div>
    415. 

  415. 			
    416. 

  416. 			<div class="container">
    417. 

  417. 				<div class="row">
    418. 

  418. 					<div class="span6">
    419. 

  419. 						<ul class="breadcrumbs fixclear">
    420. 

  420. 							<li><a href="styles-buttons.php#">HOME</a></li>
    421. 

  421. 							<li>STYLES</li>
    422. 

  422. 							<li>BUTTONS</li>
    423. 

  423. 						</ul>
    424. 

  424. 						<span id="current-date"></span>
    425. 

  425. 					</div>
    426. 

  426. 					<div class="span6">
    427. 

  427. 						<div class="header-titles">
    428. 

  428. 							<h2>BUTTON DESIGN</h2>
    429. 

  429. 							<h4>Regular HTML buttons with nice stylings</h4>
    430. 

  430. 						</div>
    431. 

  431. 					</div>
    432. 

  432. 				</div><!-- end row -->
    433. 

  433. 			</div>
    434. 

  434. 			
    435. 

  435. 			<div class="shadowUP"></div>
    436. 

  436.         </div><!-- end page_header -->
    437. 

  437.         
    438. 

  438. 		<section id="content">
    439. 

  439. 			<div class="container">
    440. 

  440. 				
    441. 

  441. 				<div id="mainbody">
    442. 

  442. 					
    443. 

  443. 					<div class="row">
    444. 

  444. 						<div class="span12">
    445. 

  445. 							<h1 class="page-title">Button Designs</h1>
    446. 

  446. 							<h2 class="subtitle">Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites</h2>
    447. 

  447. 

  448. 

  449. <!-- ////// start examples -->
    450. 

  450. 

  451. 

  452. 	<div class="page-header">
    453. 

  453. 		<h1>Buttons</h1>
    454. 

  454. 	</div>
    455. 

  455. 	
    456. 

  456. 	<h2>Default buttons</h2>
    457. 

  457. 	<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements for the best rendering.</p>
    458. 

  458. 	<table class="table table-bordered table-striped">
    459. 

  459. 		<thead>
    460. 

  460. 			<tr>
    461. 

  461. 				<th>Button</th>
    462. 

  462. 				<th>class=""</th>
    463. 

  463. 				<th>Description</th>
    464. 

  464. 			</tr>
    465. 

  465. 		</thead>
    466. 

  466. 		<tbody>
    467. 

  467. 			<tr>
    468. 

  468. 				<td><button type="button" class="btn">Default</button></td>
    469. 

  469. 				<td><code>btn</code></td>
    470. 

  470. 				<td>Standard gray button with gradient</td>
    471. 

  471. 			</tr>
    472. 

  472. 			<tr>
    473. 

  473. 				<td><button type="button" class="btn btn-primary">Primary</button></td>
    474. 

  474. 				<td><code>btn btn-primary</code></td>
    475. 

  475. 				<td>Provides extra visual weight and identifies the primary action in a set of buttons</td>
    476. 

  476. 			</tr>
    477. 

  477. 			<tr>
    478. 

  478. 				<td><button type="button" class="btn btn-info">Info</button></td>
    479. 

  479. 				<td><code>btn btn-info</code></td>
    480. 

  480. 				<td>Used as an alternative to the default styles</td>
    481. 

  481. 			</tr>
    482. 

  482. 			<tr>
    483. 

  483. 				<td><button type="button" class="btn btn-success">Success</button></td>
    484. 

  484. 				<td><code>btn btn-success</code></td>
    485. 

  485. 				<td>Indicates a successful or positive action</td>
    486. 

  486. 			</tr>
    487. 

  487. 			<tr>
    488. 

  488. 				<td><button type="button" class="btn btn-warning">Warning</button></td>
    489. 

  489. 				<td><code>btn btn-warning</code></td>
    490. 

  490. 				<td>Indicates caution should be taken with this action</td>
    491. 

  491. 			</tr>
    492. 

  492. 			<tr>
    493. 

  493. 				<td><button type="button" class="btn btn-danger">Danger</button></td>
    494. 

  494. 				<td><code>btn btn-danger</code></td>
    495. 

  495. 				<td>Indicates a dangerous or potentially negative action</td>
    496. 

  496. 			</tr>
    497. 

  497. 			<tr>
    498. 

  498. 				<td><button type="button" class="btn btn-inverse">Inverse</button></td>
    499. 

  499. 				<td><code>btn btn-inverse</code></td>
    500. 

  500. 				<td>Alternate dark gray button, not tied to a semantic action or use</td>
    501. 

  501. 			</tr>
    502. 

  502. 			<tr>
    503. 

  503. 				<td><button type="button" class="btn btn-link">Link</button></td>
    504. 

  504. 				<td><code>btn btn-link</code></td>
    505. 

  505. 				<td>Deemphasize a button by making it look like a link while maintaining button behavior</td>
    506. 

  506. 			</tr>
    507. 

  507. 		</tbody>
    508. 

  508. 	</table>
    509. 

  509. 	
    510. 

  510. 	<h4>Cross browser compatibility</h4>
    511. 

  511. 	<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
    512. 

    513. 

  513. 

  514. 	<h2>Button sizes</h2>
    515. 

  515. 	<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for additional sizes.</p>
    516. 

  516. 	<div class="bs-docs-example">
    517. 

  517. 		<p>
    518. 

  518. 			<button type="button" class="btn btn-large btn-primary">Large button</button>
    519. 

  519. 			<button type="button" class="btn btn-large">Large button</button>
    520. 

  520. 		</p>
    521. 

  521. 		<p>
    522. 

  522. 			<button type="button" class="btn btn-primary">Default button</button>
    523. 

  523. 			<button type="button" class="btn">Default button</button>
    524. 

  524. 		</p>
    525. 

  525. 		<p>
    526. 

  526. 			<button type="button" class="btn btn-small btn-primary">Small button</button>
    527. 

  527. 			<button type="button" class="btn btn-small">Small button</button>
    528. 

  528. 		</p>
    529. 

  529. 		<p>
    530. 

  530. 			<button type="button" class="btn btn-mini btn-primary">Mini button</button>
    531. 

  531. 			<button type="button" class="btn btn-mini">Mini button</button>
    532. 

  532. 		</p>
    533. 

  533. 	</div>
    534. 

  534. <pre class="prettyprint linenums">
    535. 

  535. &lt;p&gt;
    536. 

  536.   &lt;button class="btn btn-large btn-primary" type="button"&gt;Large button&lt;/button&gt;
    537. 

  537.   &lt;button class="btn btn-large" type="button"&gt;Large button&lt;/button&gt;
    538. 

  538. &lt;/p&gt;
    539. 

  539. &lt;p&gt;
    540. 

  540.   &lt;button class="btn btn-primary" type="button"&gt;Default button&lt;/button&gt;
    541. 

  541.   &lt;button class="btn" type="button"&gt;Default button&lt;/button&gt;
    542. 

  542. &lt;/p&gt;
    543. 

  543. &lt;p&gt;
    544. 

  544.   &lt;button class="btn btn-small btn-primary" type="button"&gt;Small button&lt;/button&gt;
    545. 

  545.   &lt;button class="btn btn-small" type="button"&gt;Small button&lt;/button&gt;
    546. 

  546. &lt;/p&gt;
    547. 

  547. &lt;p&gt;
    548. 

  548.   &lt;button class="btn btn-mini btn-primary" type="button"&gt;Mini button&lt;/button&gt;
    549. 

  549.   &lt;button class="btn btn-mini" type="button"&gt;Mini button&lt;/button&gt;
    550. 

  550. &lt;/p&gt;
    551. 

  551. </pre>
    552. 

  552. 

  553. 	<p>Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code>.btn-block</code>.</p>
    554. 

  554. 

  555. 	<div class="bs-docs-example">
    556. 

  556. 		<div class="well" style="max-width: 400px; margin: 0 auto 10px;">
    557. 

  557. 			<button type="button" class="btn btn-large btn-block btn-primary">Block level button</button>
    558. 

  558. 			<button type="button" class="btn btn-large btn-block">Block level button</button>
    559. 

  559. 		</div>
    560. 

  560. 	</div>
    561. 

  561. <pre class="prettyprint linenums">
    562. 

  562. &lt;button class="btn btn-large btn-block btn-primary" type="button"&gt;Block level button&lt;/button&gt;
    563. 

  563. &lt;button class="btn btn-large btn-block" type="button"&gt;Block level button&lt;/button&gt;
    564. 

  564. </pre>
    565. 

  565. 

  566. 

  567. 	<h2>Disabled state</h2>
    568. 

  568. 	<p>Make buttons look unclickable by fading them back 50%.</p>
    569. 

  569. 	
    570. 

  570. 	<h3>Anchor element</h3>
    571. 

  571. 	<p>Add the <code>.disabled</code> class to <code>&lt;a&gt;</code> buttons.</p>
    572. 

  572. 	<p class="bs-docs-example">
    573. 

  573. 		<a href="styles-buttons.php#" class="btn btn-large btn-primary disabled">Primary link</a>
    574. 

  574. 		<a href="styles-buttons.php#" class="btn btn-large disabled">Link</a>
    575. 

  575. 	</p>
    576. 

  576. <pre class="prettyprint linenums">
    577. 

  577. &lt;a href="#" class="btn btn-large btn-primary disabled"&gt;Primary link&lt;/a&gt;
    578. 

  578. &lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;
    579. 

  579. </pre>
    580. 

  580. 	<p>
    581. 

  581. 		<span class="label label-info">Heads up!</span>
    582. 

  582. 	We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
    583. 

  583. 	</p>
    584. 

  584. 

  585. 	<h3>Button element</h3>
    586. 

  586. 	<p>Add the <code>disabled</code> attribute to <code>&lt;button&gt;</code> buttons.</p>
    587. 

  587. 	<p class="bs-docs-example">
    588. 

  588. 		<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
    589. 

  589. 		<button type="button" class="btn btn-large" disabled>Button</button>
    590. 

  590. 	</p>
    591. 

  591. <pre class="prettyprint linenums">
    592. 

  592. &lt;button type="button" class="btn btn-large btn-primary disabled" disabled="disabled"&gt;Primary button&lt;/button&gt;
    593. 

  593. &lt;button type="button" class="btn btn-large" disabled&gt;Button&lt;/button&gt;
    594. 

  594. </pre>
    595. 

  595. 

  596. 

  597. 	<h2>One class, multiple tags</h2>
    598. 

  598. 	<p>Use the <code>.btn</code> class on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.</p>
    599. 

  599. 	<form class="bs-docs-example">
    600. 

  600. 		<a class="btn" href="styles-buttons.php">Link</a>
    601. 

  601. 		<button class="btn" type="submit">Button</button>
    602. 

  602. 		<input class="btn" type="button" value="Input">
    603. 

  603. 		<input class="btn" type="submit" value="Submit">
    604. 

  604. 	</form>
    605. 

  605. <pre class="prettyprint linenums">
    606. 

  606. &lt;a class="btn" href=""&gt;Link&lt;/a&gt;
    607. 

  607. &lt;button class="btn" type="submit"&gt;Button&lt;/button&gt;
    608. 

  608. &lt;input class="btn" type="button" value="Input"&gt;
    609. 

  609. &lt;input class="btn" type="submit" value="Submit"&gt;
    610. 

  610. </pre>
    611. 

  611. 	<p>As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an <code>input</code>, use an <code>&lt;input type="submit"&gt;</code> for your button.</p>
    612. 

  612. 	
    613. 

  613. 	<h2>SOCIAL ICONS</h2>
    614. 

  614. 	<ul class="social-icons fixclear">
    615. 

  615. 		<li class="social-twitter"><a href="styles-buttons.php#">Twitter</a></li>
    616. 

  616. 		<li class="social-dribbble"><a href="styles-buttons.php#">Dribbble</a></li>
    617. 

  617. 		<li class="social-facebook"><a href="styles-buttons.php#">Facebook</a></li>
    618. 

  618. 		<li class="social-envato"><a href="styles-buttons.php#">Envato</a></li>
    619. 

  619. 		<li class="social-flickr"><a href="styles-buttons.php#">flickr</a></li>
    620. 

  620. 		<li class="social-forrst"><a href="styles-buttons.php#">forrst</a></li>
    621. 

  621. 		<li class="social-gplus"><a href="styles-buttons.php#">gplus</a></li>
    622. 

  622. 		<li class="social-gplus2"><a href="styles-buttons.php#">gplus2</a></li>
    623. 

  623. 		<li class="social-icloud"><a href="styles-buttons.php#">icloud</a></li>
    624. 

  624. 		<li class="social-lastfm"><a href="styles-buttons.php#">lastfm</a></li>
    625. 

  625. 		<li class="social-linkedin"><a href="styles-buttons.php#">linkedin</a></li>
    626. 

  626. 		<li class="social-myspace"><a href="styles-buttons.php#">myspace</a></li>
    627. 

  627. 		<li class="social-paypal"><a href="styles-buttons.php#">paypal</a></li>
    628. 

  628. 		<li class="social-piacasa"><a href="styles-buttons.php#">piacasa</a></li>
    629. 

  629. 		<li class="social-pinterest"><a href="styles-buttons.php#">pinterest</a></li>
    630. 

  630. 		<li class="social-reedit"><a href="styles-buttons.php#">reedit</a></li>
    631. 

  631. 		<li class="social-rss"><a href="styles-buttons.php#">rss</a></li>
    632. 

  632. 		<li class="social-skype"><a href="styles-buttons.php#">skype</a></li>
    633. 

  633. 		<li class="social-stumbleupon"><a href="styles-buttons.php#">stumbleupon</a></li>
    634. 

  634. 		<li class="social-tumblr"><a href="styles-buttons.php#">tumblr</a></li>
    635. 

  635. 		<li class="social-vimeo"><a href="styles-buttons.php#">vimeo</a></li>
    636. 

  636. 		<li class="social-wordpress"><a href="styles-buttons.php#">wordpress</a></li>
    637. 

  637. 		<li class="social-yahoo"><a href="styles-buttons.php#">yahoo</a></li>
    638. 

  638. 		<li class="social-youtube"><a href="styles-buttons.php#">youtube</a></li>
    639. 

  639. 		<li class="social-blogger"><a href="styles-buttons.php#">blogger</a></li>
    640. 

  640. 		<li class="social-deviantart"><a href="styles-buttons.php#">deviantart</a></li>
    641. 

  641. 		<li class="social-digg"><a href="styles-buttons.php#">digg</a></li>
    642. 

  642. 		<li class="social-foursquare"><a href="styles-buttons.php#">foursquare</a></li>
    643. 

  643. 		<li class="social-friendfeed"><a href="styles-buttons.php#">friendfeed</a></li>
    644. 

  644. 		<li class="social-mail"><a href="styles-buttons.php#">mail</a></li>
    645. 

  645. 		<li class="social-html5"><a href="styles-buttons.php#">html5</a></li>
    646. 

  646. 		<li class="social-technorati"><a href="styles-buttons.php#">technorati</a></li>
    647. 

  647. 		<li class="social-soundcloud"><a href="styles-buttons.php#">soundcloud</a></li>
    648. 

  648. 		<li class="social-quora"><a href="styles-buttons.php#">quora</a></li>
    649. 

  649. 		<li class="social-bebo"><a href="styles-buttons.php#">bebo</a></li>
    650. 

  650. 		<li class="social-aim"><a href="styles-buttons.php#">aim</a></li>
    651. 

  651. 		<li class="social-gosquared"><a href="styles-buttons.php#">gosquared</a></li>
    652. 

  652. 		<li class="social-dropbox"><a href="styles-buttons.php#">dropbox</a></li>
    653. 

  653. 		<li class="social-github"><a href="styles-buttons.php#">github</a></li>
    654. 

  654. 		<li class="social-spotify"><a href="styles-buttons.php#">spotify</a></li>
    655. 

  655. 		<li class="social-apple"><a href="styles-buttons.php#">apple</a></li>
    656. 

  656. 	</ul>
    657. 

  657. <pre class="prettyprint linenums">
    658. 

  658. &lt;ul class="social-icons fixclear"&gt;
    659. 

  659. 	&lt;li class="social-twitter"&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
    660. 

  660. 	&lt;li class="social-dribbble"&gt;&lt;a href="#"&gt;Dribbble&lt;/a&gt;&lt;/li&gt;
    661. 

  661. 	&lt;li class="social-facebook"&gt;&lt;a href="#"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
    662. 

  662. 	...
    663. 

  663. &lt;/ul&gt;
    664. 

  664. </pre>
    665. 

  665. 

  666. 	<h2>SOCIAL ICONS - Colored</h2>
    667. 

  667. 	<ul class="social-icons colored fixclear">
    668. 

  668. 		<li class="social-twitter"><a href="styles-buttons.php#">Twitter</a></li>
    669. 

  669. 		<li class="social-dribbble"><a href="styles-buttons.php#">Dribbble</a></li>
    670. 

  670. 		<li class="social-facebook"><a href="styles-buttons.php#">Facebook</a></li>
    671. 

  671. 		<li class="social-envato"><a href="styles-buttons.php#">Envato</a></li>
    672. 

  672. 		<li class="social-flickr"><a href="styles-buttons.php#">flickr</a></li>
    673. 

  673. 		<li class="social-forrst"><a href="styles-buttons.php#">forrst</a></li>
    674. 

  674. 		<li class="social-gplus"><a href="styles-buttons.php#">gplus</a></li>
    675. 

  675. 		<li class="social-gplus2"><a href="styles-buttons.php#">gplus2</a></li>
    676. 

  676. 		<li class="social-icloud"><a href="styles-buttons.php#">icloud</a></li>
    677. 

  677. 		<li class="social-lastfm"><a href="styles-buttons.php#">lastfm</a></li>
    678. 

  678. 		<li class="social-linkedin"><a href="styles-buttons.php#">linkedin</a></li>
    679. 

  679. 		<li class="social-myspace"><a href="styles-buttons.php#">myspace</a></li>
    680. 

  680. 		<li class="social-paypal"><a href="styles-buttons.php#">paypal</a></li>
    681. 

  681. 		<li class="social-piacasa"><a href="styles-buttons.php#">piacasa</a></li>
    682. 

  682. 		<li class="social-pinterest"><a href="styles-buttons.php#">pinterest</a></li>
    683. 

  683. 		<li class="social-reedit"><a href="styles-buttons.php#">reedit</a></li>
    684. 

  684. 		<li class="social-rss"><a href="styles-buttons.php#">rss</a></li>
    685. 

  685. 		<li class="social-skype"><a href="styles-buttons.php#">skype</a></li>
    686. 

  686. 		<li class="social-stumbleupon"><a href="styles-buttons.php#">stumbleupon</a></li>
    687. 

  687. 		<li class="social-tumblr"><a href="styles-buttons.php#">tumblr</a></li>
    688. 

  688. 		<li class="social-vimeo"><a href="styles-buttons.php#">vimeo</a></li>
    689. 

  689. 		<li class="social-wordpress"><a href="styles-buttons.php#">wordpress</a></li>
    690. 

  690. 		<li class="social-yahoo"><a href="styles-buttons.php#">yahoo</a></li>
    691. 

  691. 		<li class="social-youtube"><a href="styles-buttons.php#">youtube</a></li>
    692. 

  692. 		<li class="social-blogger"><a href="styles-buttons.php#">blogger</a></li>
    693. 

  693. 		<li class="social-deviantart"><a href="styles-buttons.php#">deviantart</a></li>
    694. 

  694. 		<li class="social-digg"><a href="styles-buttons.php#">digg</a></li>
    695. 

  695. 		<li class="social-foursquare"><a href="styles-buttons.php#">foursquare</a></li>
    696. 

  696. 		<li class="social-friendfeed"><a href="styles-buttons.php#">friendfeed</a></li>
    697. 

  697. 		<li class="social-mail"><a href="styles-buttons.php#">mail</a></li>
    698. 

  698. 		<li class="social-html5"><a href="styles-buttons.php#">html5</a></li>
    699. 

  699. 		<li class="social-technorati"><a href="styles-buttons.php#">technorati</a></li>
    700. 

  700. 		<li class="social-soundcloud"><a href="styles-buttons.php#">soundcloud</a></li>
    701. 

  701. 		<li class="social-quora"><a href="styles-buttons.php#">quora</a></li>
    702. 

  702. 		<li class="social-bebo"><a href="styles-buttons.php#">bebo</a></li>
    703. 

  703. 		<li class="social-aim"><a href="styles-buttons.php#">aim</a></li>
    704. 

  704. 		<li class="social-gosquared"><a href="styles-buttons.php#">gosquared</a></li>
    705. 

  705. 		<li class="social-dropbox"><a href="styles-buttons.php#">dropbox</a></li>
    706. 

  706. 		<li class="social-github"><a href="styles-buttons.php#">github</a></li>
    707. 

  707. 		<li class="social-spotify"><a href="styles-buttons.php#">spotify</a></li>
    708. 

  708. 		<li class="social-apple"><a href="styles-buttons.php#">apple</a></li>
    709. 

  709. 	</ul>
    710. 

  710. <pre class="prettyprint linenums">
    711. 

  711. &lt;ul class="social-icons colored fixclear"&gt;
    712. 

  712. 	&lt;li class="social-twitter"&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
    713. 

  713. 	...
    714. 

  714. &lt;/ul&gt;
    715. 

  715. </pre>
    716. 

  716. 

  717. 	<h2>SOCIAL ICONS - Colored only on :hover</h2>
    718. 

  718. 	<ul class="social-icons coloredHov fixclear">
    719. 

  719. 		<li class="social-twitter"><a href="styles-buttons.php#">Twitter</a></li>
    720. 

  720. 		<li class="social-dribbble"><a href="styles-buttons.php#">Dribbble</a></li>
    721. 

  721. 		<li class="social-facebook"><a href="styles-buttons.php#">Facebook</a></li>
    722. 

  722. 		<li class="social-envato"><a href="styles-buttons.php#">Envato</a></li>
    723. 

  723. 		<li class="social-flickr"><a href="styles-buttons.php#">flickr</a></li>
    724. 

  724. 		<li class="social-forrst"><a href="styles-buttons.php#">forrst</a></li>
    725. 

  725. 		<li class="social-gplus"><a href="styles-buttons.php#">gplus</a></li>
    726. 

  726. 		<li class="social-gplus2"><a href="styles-buttons.php#">gplus2</a></li>
    727. 

  727. 		<li class="social-icloud"><a href="styles-buttons.php#">icloud</a></li>
    728. 

  728. 		<li class="social-lastfm"><a href="styles-buttons.php#">lastfm</a></li>
    729. 

  729. 		<li class="social-linkedin"><a href="styles-buttons.php#">linkedin</a></li>
    730. 

  730. 		<li class="social-myspace"><a href="styles-buttons.php#">myspace</a></li>
    731. 

  731. 		<li class="social-paypal"><a href="styles-buttons.php#">paypal</a></li>
    732. 

  732. 		<li class="social-piacasa"><a href="styles-buttons.php#">piacasa</a></li>
    733. 

  733. 		<li class="social-pinterest"><a href="styles-buttons.php#">pinterest</a></li>
    734. 

  734. 		<li class="social-reedit"><a href="styles-buttons.php#">reedit</a></li>
    735. 

  735. 		<li class="social-rss"><a href="styles-buttons.php#">rss</a></li>
    736. 

  736. 		<li class="social-skype"><a href="styles-buttons.php#">skype</a></li>
    737. 

  737. 		<li class="social-stumbleupon"><a href="styles-buttons.php#">stumbleupon</a></li>
    738. 

  738. 		<li class="social-tumblr"><a href="styles-buttons.php#">tumblr</a></li>
    739. 

  739. 		<li class="social-vimeo"><a href="styles-buttons.php#">vimeo</a></li>
    740. 

  740. 		<li class="social-wordpress"><a href="styles-buttons.php#">wordpress</a></li>
    741. 

  741. 		<li class="social-yahoo"><a href="styles-buttons.php#">yahoo</a></li>
    742. 

  742. 		<li class="social-youtube"><a href="styles-buttons.php#">youtube</a></li>
    743. 

  743. 		<li class="social-blogger"><a href="styles-buttons.php#">blogger</a></li>
    744. 

  744. 		<li class="social-deviantart"><a href="styles-buttons.php#">deviantart</a></li>
    745. 

  745. 		<li class="social-digg"><a href="styles-buttons.php#">digg</a></li>
    746. 

  746. 		<li class="social-foursquare"><a href="styles-buttons.php#">foursquare</a></li>
    747. 

  747. 		<li class="social-friendfeed"><a href="styles-buttons.php#">friendfeed</a></li>
    748. 

  748. 		<li class="social-mail"><a href="styles-buttons.php#">mail</a></li>
    749. 

  749. 		<li class="social-html5"><a href="styles-buttons.php#">html5</a></li>
    750. 

  750. 		<li class="social-technorati"><a href="styles-buttons.php#">technorati</a></li>
    751. 

  751. 		<li class="social-soundcloud"><a href="styles-buttons.php#">soundcloud</a></li>
    752. 

  752. 		<li class="social-quora"><a href="styles-buttons.php#">quora</a></li>
    753. 

  753. 		<li class="social-bebo"><a href="styles-buttons.php#">bebo</a></li>
    754. 

  754. 		<li class="social-aim"><a href="styles-buttons.php#">aim</a></li>
    755. 

  755. 		<li class="social-gosquared"><a href="styles-buttons.php#">gosquared</a></li>
    756. 

  756. 		<li class="social-dropbox"><a href="styles-buttons.php#">dropbox</a></li>
    757. 

  757. 		<li class="social-github"><a href="styles-buttons.php#">github</a></li>
    758. 

  758. 		<li class="social-spotify"><a href="styles-buttons.php#">spotify</a></li>
    759. 

  759. 		<li class="social-apple"><a href="styles-buttons.php#">apple</a></li>
    760. 

  760. 	</ul>
    761. 

  761. <pre class="prettyprint linenums">
    762. 

  762. &lt;ul class="social-icons coloredHov fixclear"&gt;
    763. 

  763. 	&lt;li class="social-twitter"&gt;&lt;a href="#"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
    764. 

  764. 	...
    765. 

  765. &lt;/ul&gt;
    766. 

  766. </pre>
    767. 

  767. 

  768. <!-- ////// end examples -->
    769. 

  769. <link href="addons/prettify-code/prettify.css" rel="stylesheet">
    770. 

  770. <script src="addons/prettify-code/prettify.js"></script>
    771. 

  771. <script type="text/javascript">
    772. 

  772. $(window).load(function(){
    773. 

  773. prettyPrint();
    774. 

  774. });
    775. 

  775. </script>
    776. 

  776. 

  777. 						</div>
    778. 

  778. 					</div><!-- end row -->
    779. 

  779. 					
    780. 

  780. 				</div><!-- end mainbody -->
    781. 

  781. 				
    782. 

  782. 			</div><!-- end container -->
    783. 

  783. 		</section><!-- end #content -->
    784. 

  784.         
    785. 

  785. <footer id="footer">
    786. 

  786. 	<div class="container">
    787. 

  787. 		<div class="row">
    788. 

  788. 			<div class="span5">
    789. 

  789. 				<h3 class="m_title">FOOTER MENU</h3>
    790. 

  790. 				<ul class="menu">
    791. 

  791. 					<li><a href="styles-buttons.php#">Curabitur iaculis</a></li>
    792. 

  792. 					<li><a href="styles-buttons.php#">Parturient montes</a></li>
    793. 

  793. 					<li><a href="styles-buttons.php#">Vulputate magna</a></li>
    794. 

  794. 					<li><a href="styles-buttons.php#">Cum sociis natoque</a></li>
    795. 

  795. 					<li><a href="styles-buttons.php#">Nulla varius commodo</a></li>
    796. 

  796. 					<li><a href="styles-buttons.php#">Parturient montes</a></li>
    797. 

  797. 					<li><a href="styles-buttons.php#">Vulputate magna</a></li>
    798. 

  798. 					<li><a href="styles-buttons.php#">Cum sociis natoque</a></li>
    799. 

  799. 					<li><a href="styles-buttons.php#">Nulla varius commodo</a></li>
    800. 

  800. 				</ul><!-- end footer menu -->
    801. 

  801. 			</div>
    802. 

  802. 			<div class="span4">
    803. 

  803. 				<div class="newsletter-signup">
    804. 

  804. 					<h3 class="m_title">NEWSLETTER SIGNUP</h3>
    805. 

  805. 					<p>By subscribing to our mailing list you will always be update with the latest news from us.</p>
    806. 

  806. 					<form method="post" id="newsletter_subscribe" name="newsletter_form">
    807. 

  807. 						<input type="text" name="nl-email" id="nl-email" value="" placeholder="your.address@email.com" />
    808. 

  808. 						<input type="submit" name="submit" id="nl-submit" value="JOIN US" />
    809. 

  809. 					</form>
    810. 

  810. 					<span id="result">* it really works! Mailchimp Integration.</span>
    811. 

  811. 					<p><small>We never spam!</small></p>
    812. 

  812. 				</div><!-- end newsletter-signup -->
    813. 

  813. 			</div>
    814. 

  814. 			<div class="span3">
    815. 

  815. 				<div class="contact-details">
    816. 

  816. 					<h3 class="m_title">GET IN TOUCH</h3>
    817. 

  817. 					<p><strong>T (212) 555 55 00</strong><br />
    818. 

  818. 					Email: <a href="styles-buttons.php#">sales@yourwebsite.com</a></p>
    819. 

  819. 					<p>Your Company LTD<br />
    820. 

  820. 					Street nr 100, 4536534, Chicago, US</p>
    821. 

  821. 					<p><a href="http://goo.gl/maps/1OhOu" target="_blank" class="map-link"><span class="icon-map-marker icon-white"></span> Open in Google Maps</a></p>
    822. 

  822. 				</div><!-- end contact-details -->
    823. 

  823. 			</div>
    824. 

  824. 		</div><!-- end row -->
    825. 

  825. 		
    826. 

  826. 		<div class="row">
    827. 

  827. 			<div class="span6">
    828. 

  828. 				<div class="twitter-feed">
    829. 

  829. 				
    830. 

  830. 					<!-- twitter feeds -->
    831. 

  831. 					<div class="tweets" id="twitterFeed"><small>Please wait whilst our latest tweets load</small></div>
    832. 

  832. 					<a href="https://twitter.com/hogash" class="twitter-follow-button" data-show-count="false">Follow @hogash</a><!-- follow button -->
    833. 

  833. 					
    834. 

  834. 

  835. 				</div><!-- end twitter-feed -->
    836. 

  836. 			</div>
    837. 

  837. 			<div class="span6">
    838. 

  838. 								<div class="social-share"><img src="images/share.jpg" /></div>
    839. 

  839. 				<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><!-- twitter script -->
    840. 

  840. 			</div>
    841. 

  841. 		</div><!-- end row -->
    842. 

  842. 		
    843. 

  843. 		<div class="row">
    844. 

  844. 			<div class="span12">
    845. 

  845. 				<div class="bottom fixclear">
    846. 

  846. 					<ul class="social-icons fixclear">
    847. 

  847. 						<li class="title">GET SOCIAL</li>
    848. 

  848. 						<li class="social-twitter"><a href="styles-buttons.php#">Twitter</a></li>
    849. 

  849. 						<li class="social-dribbble"><a href="styles-buttons.php#">Dribbble</a></li>
    850. 

  850. 						<li class="social-facebook"><a href="styles-buttons.php#">Facebook</a></li>
    851. 

  851. 						<li class="social-envato"><a href="styles-buttons.php#">Envato</a></li>
    852. 

  852. 					</ul><!-- end social-icons -->
    853. 

  853. 					<div class="copyright">
    854. 

  854. 						<a href="index.php"><img src="images/logo2.png" alt="" /></a>
    855. 

  855. 						<p>&copy; 2012 <strong>KALLYAS Template</strong>. All Rights Reserved. Click <a href="http://themeforest.net/item/kalypso-highlypremium-multipurpose-template/3583938?ref=hogash" target="_blank">here</a> to buy it.<br />
    856. 

  856. 						Designed by <a href="http://www.hogash.com/" target="_blank">HOGASH</a></p>
    857. 

  857. 					</div><!-- end copyright -->
    858. 

  858. 				</div><!-- end bottom -->
    859. 

  859. 			</div>
    860. 

  860. 		</div><!-- end row -->
    861. 

  861. 		
    862. 

  862. 	</div>
    863. 

  863. </footer>        
    864. 

  864.     </div><!-- end page_wrapper -->
    865. 

  865. 	
    866. 

  866.     <a href="styles-buttons.php#" id="totop">TOP</a>
    867. 

  867. 

  868. <!--////////////////// Load JS Files -->
    869. 

  869. 

  870. 

  871. 

  872. 

  873. <link rel="stylesheet" href="css/template.css.php?src=..%252Faddons%252Fdemo_panel%252Fdemo_panel" type="text/css" />
    874. 

  874. <script type="text/javascript" src="js/template.js.php?src=..%252Faddons%252Fdemo_panel%252Fdemo_panel-..%252Faddons%252Fdemo_panel%252Fjquery.miniColors.min-bootstrap-plugins-..%252Faddons%252Fsuperfish_responsive%252Fsuperfish_menu-kalypso_script-..%252Faddons%252Fprettyphoto%252Fjquery.prettyPhoto"></script>
    875. 

  875. 

  876. 

  877. <!-- DEMO PANEL - REMOVE IF YOU DON'T USE IT -->
    878. 

  878. 	<div id="demo">
    879. 

  879. 

  880. 		<link type="text/css" rel="stylesheet" href="addons/demo_panel/jquery.miniColors.css" />
    881. 

  881. 		
    882. 

  882. 		<div id="options_panel">
    883. 

  883. 		    <div class="options">
    884. 

  884. 				<h4>THEME OPTIONS</h4>
    885. 

  885. 		        <table>
    886. 

  886. 		        	<tr>
    887. 

  887. 		            	<td>
    888. 

  888. 		                    <h5>Header type:</h5>
    889. 

  889. 		                    <select name="header_style" id="header_style">
    890. 

  890. 		                    	<option value="1">Style 1</option>
    891. 

  891. 		                    	<option value="2" selected="selected">Style 2 (default)</option>
    892. 

  892. 		                    	<option value="3">Style 3</option>
    893. 

  893. 		                    	<option value="4">Style 4</option>
    894. 

  894. 		                    </select>
    895. 

  895. 		                </td>
    896. 

  896. 					</tr>
    897. 

  897. 					<tr>
    898. 

  898. 		            	<td>
    899. 

  899. 		                    <h5>Theme Colors:</h5>
    900. 

  900. 		                    <input type="text" name="color1" class="color-picker" size="7" autocomplete="on" value="#cd2122" />
    901. 

  901. 						</td>
    902. 

  902. 					</tr>
    903. 

  903. 					<tr>
    904. 

  904. 						<td>
    905. 

  905. 							<h5>Color suggestions *</h5>
    906. 

  906. 							<ul class="color_suggestions">
    907. 

  907. 								<li style="background-color:#B71010;" title="#B71010"></li>
    908. 

  908. 								<li style="background-color:#74AB00;" title="#74AB00"></li>
    909. 

  909. 								<li style="background-color:#363636;" title="#363636"></li>
    910. 

  910. 								<li style="background-color:#1592CC;" title="#1592CC"></li>
    911. 

  911. 								<li style="background-color:#C72647;" title="#C72647"></li>
    912. 

  912. 								<li style="background-color:#BAA507;" title="#BAA507"></li>
    913. 

  913. 								<li style="background-color:#13D7FD;" title="#13D7FD"></li>
    914. 

  914. 								<li style="background-color:#51106B;" title="#51106B"></li>
    915. 

  915. 								<li style="background-color:#157A13;" title="#157A13"></li>
    916. 

  916. 								<li style="background-color:#EB540A;" title="#EB540A"></li>
    917. 

  917. 								<li style="background-color:#091A57;" title="#091A57"></li>
    918. 

  918. 								<li style="background-color:#700808;" title="#700808"></li>
    919. 

  919. 							</ul>
    920. 

  920. 							<div class="clear"></div>
    921. 

  921. 							
    922. 

  922. 		                </td>
    923. 

  923. 					</tr>
    924. 

  924. 					<tr>
    925. 

  925. 						<td>
    926. 

  926. 							<h5>THEME</h5>
    927. 

  927. 							<select name="theme_switcher" id="theme_switcher">
    928. 

  928. 								<option value="0" selected="selected">Light (Default)</option>
    929. 

  929. 								<option value="1">Dark</option>
    930. 

  930. 							</select>
    931. 

  931. 						</td>
    932. 

  932. 					</tr>
    933. 

  933. 					<tr>
    934. 

  934. 						<td><div class="note">* May not have full accuracy!</div></td>
    935. 

  935. 					</tr>
    936. 

  936. 		        </table>
    937. 

  937. 		       
    938. 

  938. 		    </div>
    939. 

  939. 		    <h3><span class="icon-wrench icon-white"></span></h3>
    940. 

  940. 		</div>
    941. 

  941. 

  942. 	</div>
    943. 

  943. <!-- end DEMO PANEL - REMOVE IF YOU DON'T USE IT -->
    944. 

    945. 

  945. <!-- JavaScript at the bottom for fast page loading -->
    946. 

  946. 

  947. 

  948. <!-- prettyphoto scripts & styles -->
    949. 

  949. <link rel="stylesheet" href="addons/prettyphoto/prettyPhoto.css" type="text/css" />
    950. 

  950. <script type="text/javascript">
    951. 

  951. 

  952. 	function ppOpen(panel, width){
    953. 

  953. 		jQuery.prettyPhoto.close();
    954. 

  954. 		setTimeout(function() {
    955. 

  955. 			jQuery.fn.prettyPhoto({social_tools: false, deeplinking: false, show_title: false, default_width: width, theme:'pp_kalypso'});
    956. 

  956. 			jQuery.prettyPhoto.open(panel);
    957. 

  957. 		}, 300);
    958. 

  958. 	} // function to open different panel within the panel
    959. 

  959. 	
    960. 

  960. 	jQuery(document).ready(function($) {
    961. 

  961. 		jQuery("a[data-rel^='prettyPhoto'], .prettyphoto_link").prettyPhoto({theme:'pp_kalypso',social_tools:false, deeplinking:false});
    962. 

  962. 		jQuery("a[rel^='prettyPhoto']").prettyPhoto({theme:'pp_kalypso'});
    963. 

  963. 		jQuery("a[data-rel^='prettyPhoto[login_panel]']").prettyPhoto({theme:'pp_kalypso', default_width:800, social_tools:false, deeplinking:false});
    964. 

  964. 		
    965. 

  965. 		jQuery(".prettyPhoto_transparent").click(function(e){
    966. 

  966. 			e.preventDefault();
    967. 

  967. 			jQuery.fn.prettyPhoto({social_tools: false, deeplinking: false, show_title: false, default_width: 980, theme:'pp_kalypso transparent', opacity: 0.95});
    968. 

  968. 			jQuery.prettyPhoto.open($(this).attr('href'),'','');
    969. 

  969. 		});
    970. 

  970. 		
    971. 

  971. 	});
    972. 

  972. 

  973. </script>
    974. 

  974. <!--end prettyphoto -->
    975. 

  975. 

  976. <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    977. 

  977. 	<script>
    978. 

  978. 		var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
    979. 

  979. 		(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    980. 

  980. 		g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
    981. 

  981. 		s.parentNode.insertBefore(g,s)}(document,"script"));
    982. 

  982. 	</script>
    983. 

  983. 	
    984. 

  984. <div class="hide">
    985. 

  985. 	<div id="transparent_panel" class="transparent_content">
    986. 

  986. 		<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
    987. 

  987. 		<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
    988. 

  988. 		<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image.</p>
    989. 

  989. 		<p>Duis dictum tristique lacus, id placerat dolor lobortis sed. In nulla lorem, accumsan sed mollis eu, dapibus non sapien. Curabitur eu adipiscing ipsum. Mauris ut dui turpis, vel iaculis est. Morbi molestie fermentum sem quis ultricies. Mauris ac lacinia sapien. Fusce ut enim libero, vitae venenatis arcu. Cras viverra, libero a fringilla gravida, dolor enim cursus turpis, id sodales sem justo sit amet lectus. Fusce ut arcu eu metus lacinia commodo. Proin cursus ornare turpis, et faucibus ipsum egestas ut. Maecenas aliquam suscipit ante non consectetur. Etiam quis metus a dolor vehicula scelerisque.</p>
    990. 

  990. 		<p>Nam elementum consequat bibendum. Suspendisse id semper odio. Sed nec leo vel ligula cursus aliquet a nec nulla. Sed eu nulla quam. Etiam quis est ut sapien volutpat vulputate. Cras in purus quis sapien aliquam viverra et volutpat ligula. Vestibulum condimentum ultricies pharetra. Etiam dapibus cursus ligula quis iaculis. Mauris pellentesque dui quis mi fermentum elementum sodales libero consequat. Duis eu elit et dui varius bibendum. Sed interdum nisl in ante sollicitudin id facilisis tortor ullamcorper. Etiam scelerisque leo vel elit venenatis nec condimentum ipsum molestie. In hac habitasse platea dictumst. Sed quis nulla et nibh aliquam cursus vitae quis enim. Maecenas eget risus turpis.</p>
    991. 

  991. 	</div>
    992. 

  992. </div><!-- end transparent panel -->
    993. 

  993. 

  994. </body>
    995. 

  995. </html>
    996.