/*
* http://www.mordorthemes.com
*/

/* Import Basic Files
================================================== */

@import url("fonts.css");               /* Custom Fonts */
@import url("base.css");                /* Reset & Basics */
@import url("skeleton.css");            /* Base 960 Grid */

/* Site Styles
================================================== */
body {
	background:#292929 url(../images/img/bg.jpg) no-repeat top center fixed;
	font-family: 'TitilliumText22LMedium', Arial, sans-serif;
	font-size:14px;
	color:#787777;
}

.padding {
	width:100%;
	display:block;
	height:5px;
}

a, .color {
	color:#2fa6a6;
}

a:hover {
	color:#3d3c3c;
}

.pic {
	max-width:440px;
	float:right;
	margin-top:-25px;
}

ul.list {
	margin-top:8px;
}

ul.list li {
	padding:5px;
	line-height:25px;
}

ul.list2 {
	margin-top:8px;
}

ul.list2 li {
	padding:5px;
	line-height:15px;
}

/* header */
header {
	padding:30px 0 20px 0;
	overflow: hidden;
}

.logo {
	padding:40px 0px;
	text-align:center;
}

.links {
	float:right;
}

.links li {
	display:inline-block;
	margin-left:7px;
	font-family: 'TitilliumText22LBold', Arial, sans-serif;
	font-size:15px;
}
.links li a {
	padding:10px 20px 10px 35px;
	color:#fff;
	display:block;
	border-radius:5px;
	font-weight:500;
}

.links li a.support {
	background:#343434 url(../images/support.png) no-repeat;
	background-position:12% 50%;
}

.links li a.demo {
	background:#343434 url(../images/demo.png) no-repeat;
	background-position:11% 50%;
}

.links li a.purchase {
	background:#00aec8 url(../images/purchase.png) no-repeat;
	background-position:6% 50%;
}

.links li a.support:hover, .links li a.demo:hover {
	color:#00aec8;
}

.links li a.purchase:hover {
	background:#0298ae url(../images/purchase.png) no-repeat;
	background-position:6% 50%;
}

/* footer */
footer {
	padding:20px 0 ;
	color:#cccccc;
	font-size:14px;
	font-weight:500;
	overflow:hidden;
}

span.jozoor {
	background: url(../images/images.png) no-repeat no-repeat 0 -1px;
	width: 27px;
	height: 24px;
	display:inline-block;
	vertical-align:bottom;
	margin:2px 0 0 5px;
}

.social {
	float:right;
}

.social a {
	display:inline-block;
	opacity:.8;
}

.social a:hover {
	opacity:1;
}

a.follow {
	background: url(../images/images.png) no-repeat -75px -3px;
	width: 39px;
	height: 19px;
	vertical-align: top;
    margin: 5px;
}

a.facebook {
	background: url(../images/images.png) no-repeat -123px 0;
	width: 26px;
	height: 26px;
}

a.twitter {
	background: url(../images/images.png) no-repeat -151px 0;
	width: 26px;
	height: 26px;
}

a.google {
	background: url(../images/images.png) no-repeat -180px 0;
	width: 26px;
	height: 26px;
}

.copyright {
	float:left;
	margin-left: 15px;
}

/* Navigation */

.navigation {
	/*padding:50px;*/
}

/* Content */
.content {
	padding:0 0 20px 0;
	border-radius:5px;
	background:#fff;
	width: 745px;
	float:right;
	position:relative;
	z-index:100;
}


/* Javascript Css Styles
====================================================*/

/* Navigation style */
#nav {
  left: 16%;
  list-style: none;
  position: fixed;
  top: 260px;
  width:195px;
  z-index:1;
}
#nav li {
  margin-bottom: 7px;
  width:100%;
  font-family: 'TitilliumText22LBold', Arial, sans-serif;
  font-size:17px;
}
#nav a {
  background: #2fa6a6;
  color: #fff;
  display: block;
  padding: 12px 20px;
  font-weight:700;
}
#nav a:hover, #nav .current a {
	color:#666;
    background: #fff;
}


.section {
  
  padding: 0;
  margin-bottom:10px;
  overflow:hidden;
}
.section p:last-child {
  margin-bottom: 0;
}

.section h1 {
	background:#2fa6a6;
	color:#fff;
	font-size:21px;
	padding:7px 30px;
	font-family: 'TitilliumText22LBold', Arial, sans-serif;
	font-weight:700;
	border-bottom:1px solid #efeeee;
}

.section .data {
	padding:10px 30px 20px 30px;
	font-size:14px;
}

.data h2 {
	color:#00aec8;
}

.js .selectnav {
	float:left;
	display:none;
}

/* UiTop scroll to top page  */
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:30px;
	right:20px;
	overflow:hidden;
	width:37px;
	height:37px;
	border:none;
	text-indent:-999px;
	background:url(../images/totop.png) no-repeat left top;
	filter:alpha(opacity=80); /* IE patch */
	opacity:.8;
	z-index:1000;
}

#toTop:hover {
	opacity:1;
}

#toTop:active, #toTop:focus {
	outline:none;
}

/* ColorTip */
.colorTip{
	/* This class is assigned to the color tip span by jQuery */
	
	display:none;
	position:absolute;	
	left:50%;
	top:-30px;
	padding:6px;
	
	background-color:white;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-style:normal;
	line-height:1;
	text-decoration:none;
	text-align:center;
	text-shadow:0 0 1px white;
	white-space:nowrap;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

.pointyTip,.pointyTipShadow{
	/* Setting a thick transparent border on a 0x0 div to create a triangle */
	border:6px solid transparent;
	bottom:-12px;
	height:0;
	left:50%;
	margin-left:-6px;
	position:absolute;
	width:0;
}

.pointyTipShadow{
	/* The shadow tip is 1px larger, so it acts as a border to the tip */
	border-width:7px;
	bottom:-14px;
	margin-left:-7px;
}

.colorTipContainer{
	position:relative;
	text-decoration:none !important;
}


/* 6 Available Color Themes */

.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
	background-color:white;
	border:1px solid #DDDDDD;
	color:#555555;
}

.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
	background-color:#f9f2ba;
	border:1px solid #e9d315;
	color:#5b5316;
}

.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
	background-color:#d9f1fb;
	border:1px solid #7fcdee;
	color:#1b475a;
}

.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
	background-color:#f2fdf1;
	border:1px solid #b6e184;
	color:#558221;
}

.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
	background-color:#bb3b1d;
	border:1px solid #8f2a0f;
	color:#fcfcfc;
	text-shadow:none;
}

.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
	background-color:#333;
	border:1px solid #111;
	color:#fcfcfc;
	text-shadow:none;
}

/* Media Queries
================================================== */

@media only screen and (max-width: 1024px) {
	
#nav {
  left: 3%;
  position: fixed;
  top: 145px;
  width:195px;
}

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	
#nav {
  left: 10%;
  position: fixed;
  top: 145px;
  width:195px;
}
	
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
.content {
	width:570px;
}

#nav {
  left: 5%;
  position: fixed;
  top: 145px;
  width:195px;
}

.copyright {
	margin-left:40px;
}


}


/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

.content {
	width:100%;
}

	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
.social {
	float:none;
	margin-top: 20px;
	text-align:center;
}

.copyright {
	float:none;
	text-align:center;
}

.content {
	width:100%;
}

.links li {
	float:left;
	margin:0 6px 0 0;
}

.logo {
	margin-top:40px;
}

.logo img{
	display:block;
	margin:0 auto 33px auto;
}

.js #nav { 
    display: none; 
}

.js .selectnav { 
	display: block;
	padding:10px;
	width:420px;
	border:1px solid #d5d5d5;
	margin-bottom: 22px;
	cursor:pointer;
	border-radius:4px;
	color:#494949;
	background:#F6F6F6;
	
    position: fixed;
    top: 0;
	z-index:1000;
}

.navigation {
	padding:0;
}

.pic {
	float:none;
	margin-bottom:10px;
	max-width:380px;
	margin-top:0;
}



}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

.social {
	float:none;
	margin-top: 20px;
	text-align:center;
}

.copyright {
	float:none;
	text-align:center;
}

.content {
	width:100%;
}

.links {
	float:none;
}

.links li {
	float:left;
	margin:0 0 10px 0;
	width:100%;
}

.logo {
	margin-top:40px;
}

.logo img{
	display:block;
	margin:0 auto 33px auto;
}

.js #nav { 
    display: none; 
}

.js .selectnav { 
	display: block;
	padding:10px;
	width:300px;
	border:1px solid #d5d5d5;
	margin-bottom: 22px;
	cursor:pointer;
	border-radius:4px;
	color:#494949;
	background:#F6F6F6;
	
    position: fixed;
    top: 0;
	z-index:1000;
}

.navigation {
	padding:0;
}

.links li a.support {
	background:#343434 url(../images/support.png) no-repeat;
	background-position:3% 50%;
}

.links li a.demo {
	background:#343434 url(../images/demo.png) no-repeat;
	background-position:3% 50%;
}

.links li a.purchase {
	background:#00aec8 url(../images/purchase.png) no-repeat;
	background-position:3% 50%;
}

.pic {
	float:none;
	margin-bottom:10px;
	max-width:260px;
}



}
