/* common */

/* Font formats generated here from the OTF file - http://www.fontsquirrel.com/fontface/generator 
   The font here is free and legal from : http://www.theleagueofmoveabletype.com/
*/

.clickablesvgstore { display:block; width:204px;}

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/fonts/leaguegothic-webfont.eot');
    src:
         url('/fonts/leaguegothic-webfont.eot?iefix') format('eot'),
         url('/fonts/leaguegothic-webfont.otf') format('opentype'),
         url('/fonts/leaguegothic-webfont.woff') format('woff'),
         url('/fonts/leaguegothic-webfont.ttf') format('truetype'),
         url('/fonts/leaguegothic-webfont.svg#webfonthOxT69Z2') format('svg');
    font-weight: bold;
    font-style: normal;

}


/*    -webkit-font-smoothing: antialiased;  is what make fonts look clean Safari/Chrome, otherwise they look too bold 
      -webkit-font-smoothing: subpixel-antialiased; is the default apparently but it looks ugly
*/

body {
    
    -webkit-font-smoothing: antialiased;
    background-color:#999;
    
	font-family:"Helvetica Neue", Helvetica, arial, sans-serif;
	color: #222;
	font-size:11pt;
	line-height:1.5em;
	margin:0;
}

pre {  margin-left:20px;border:1px solid gray; background-color: #333; padding:12px;}


code{
 color: #88AA88;
}

.plaintable {
    background-color:#111;
    border:1px solid gray;
    border-collapse:collapse;
    padding:1em;
}
 

.plaintable th {font-weight:bold;}
.plaintable td {
    border:1px solid gray;
    padding:1em;
}

.plaintable th {
    border:1px solid gray;
    padding:1em;
}


.applink  {text-transform:capitalize; color:#00A;}

h1 {
    font-size:36pt;
    font-family: 'LeagueGothicRegular', "Helvetica Neue", Helvetica, arial, sans-serif;
    color:#555;
    /*padding-bottom:24px; */
    font-weight:bold;
    line-height:40pt;
}

.imgright {float:right;margin-left:16px;margin-bottom:16px;border:none;}

img{border:none;}

strong, b { color:black; font-weight:bold;} 

a {
    color: #08A; 
}

.blogbody a {
   text-decoration:none;
   border-bottom:1px dotted #FFB; 
}


h2 {
    color: black;
    font-size: 1.1em;
    font-weight: bold;
    
    padding-bottom: 0.1em;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.5em;
}



/* layout */

#fullsite 
{
	width:940px;	
	margin-left: auto; 
	margin-right: auto; 
}

#maincontainer 
{
	background-color:#FFF;
	float:left;
	
    -moz-box-shadow: 0 0 16px 16px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 0 16px 16px rgba(0,0,0,0.25);
    box-shadow: 0 0 16px 16px rgba(0,0,0,0.25);

    padding-bottom:32px;

}

/* header */

#top {
	height: 251px;	
	background-image:url("/theme/header.jpg");
	background-repeat: no-repeat;
}

#langArea {
	width:940px;
	height: 35px;	
}

#langChooser {
	width: 30px;
	text-align: center;
	margin-left: 870px;
	padding-top: 10px;
	font-size: 9pt;
	background-color: #777777;
	color: black;
	text-transform: uppercase;
	cursor: pointer;
}

#langs {
	position:relative;
	left: 800px;
	width: 100px;
	background-color: #777777;
	margin-top: 5px;
}

#langs ul {
	margin: 0px;
	padding:0px;
	list-style: none;
}
#langs li {
	text-align: right;
	padding-right: 8px;		
}

#langs li:hover {
	background-color: #CCC;
}


#langs a {
	text-decoration: none;	
	color: black;
}

 
#menuArea
{
	text-align:right;
	height: 235px;
	width: 620px;	
	float: left;
}


#about-page-image {
    float: left;
    margin-left: 32px;
    margin-top: 48px;
    background-image: url(/img/aboutus.jpg);
	background-repeat:no-repeat;
    width:336px;
    height:315px;
}


#support-page-image {
    float: left;
    margin-left: 32px;
    margin-top: 48px;
    background-image: url(/img/support.jpg);
	background-repeat:no-repeat;
    width:336px;
    height:315px;
}



#menu {
	margin-top: 41px;
	color:black;
 	font-size:12pt;
	text-decoration:none;
	font-weight:normal;		
	list-style-type: none;
}
#menu>li {
	margin-bottom: 5px;
}


#menu a{
	color:#444;
	text-decoration: none;
}
#menu a:hover 
{	
	color:#666;
}


/* content */


#pagecontent
{
	/*padding: 0 30px 0 50px;*/
	min-height:300px;	
	float: left;
	width:880px;

}

#pagecontent .applink{
    
	color:#333;
	font-weight:bold;
}

#pagecontent .blogtitlelink{
	color:#333;
}

#pagecontent .update a{
	color:#333;
}

#pagecontent a{
	text-decoration:none;
}


#pagecontent a:hover 
{	
	color:#88A;
}


/* footer */

#footer {
    text-align:right;
	font-size:10pt;
	color:#444;	
	min-height: 32px;
	margin-top:80px;
	margin-bottom:20px;
	margin-right: 50px;
	float:right;
}
#footer a{
	color:#AAA;
	font-weight:bold;
	text-decoration:underline;
}
#footer a:hover 
{	
	color:black;
}


/* pages */

.transpover:hover {opacity:0.75; }

#left1and2 {
	float: left;	
	width: 	420px;
}


#home
{
    font-size:11pt;
	/*padding: 0 40px 0 40px;*/
}

#home .leftColumn {
	/*width: 	360px;*/
	float: left;
	background-repeat: no-repeat;	
}
#home .rightColumn {
	/*width: 	360px;*/
	float: right;	
	background-repeat: no-repeat;
}
#home .row {
	float: left;
	/*width: 790px;	*/
	margin-bottom: 80px;
}

#home .row img {
	float: left;	
	width: 57px;
	height: 57px;
	margin-right:30px;
}

.homedesc {margin-top:-4px;}


#home .row p {
	/* float: left; */	
	/*width: 300px;*/
	padding-left: 73px;
} 

#home #left1and2 .leftColumn:first-child {
	margin-bottom: 80px;	
}
#home #updatesBox {
	/*background-image: url("/theme/blog-tweet-bg.png");	*/
	/*background-repeat: no-repeat;*/
	height: 206px;
	width: 306px;
	padding: 20px;
	background-position: top;
}
#home #updates {
	overflow: hidden;	
	height: 206px;
	width: 306px;
}
#home #updates ul {
	padding-left: 10px;
	margin-top: 0px;
}
.update {
	list-style: none;
	padding-left: 40px;
	background-repeat: no-repeat;
	font-size: 9pt;
	background-position: 0px 8px;
	margin-bottom: 10px;
	cursor: pointer;
	min-height:32px;
}

.updateTweet {
	background-image: url("/theme/ico-tweet.png");
}
.updateBlog {
	background-image: url("/theme/ico-blog.png");
}

#home #updates a{
	font-weight: normal;
	color:white;
}


.homeicon {

background-repeat: no-repeat;
width: 57px; 
height: 57px;
margin: 0px;
margin-right:16px;
padding: 0px;
border:none;
float:left;
display:block;

}





div#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}


/* pages details */
.leftCol {
    width:490px;
	float:left;
}

.rightCol{
	width:360px;
	float:right;
}

.dl, .buyads {
    margin-top:32px;
    
}

.leftCol .dl {
	margin-right:10px;
	float:left;
}
.leftCol .dl img{
	border: 0px;
}

.rightCol {
	/*margin-left: 16px;	*/
}
.rightCol img {
	width:160px;
	float:right;
}
.rightCol div {
	height:240px;
	width:160px;
	margin: 10px;	
	background-color: #111111;
	float: left;	
}


.buyads {

    font-size:12px;
    text-align:center;
    background-color:#444;
    line-height:1.5em;
    float:left;
    width:140px;
    min-height:36px;
    padding:8px;
    margin-left:10px;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
}

.shotimg, .homeicon {
	-webkit-transition:all 200ms ease;
    -moz-transition-property: all 200ms ease;
    -o-transition-property: all 200ms ease;
    transition:all 200ms ease;
}
.shotimg:hover, .homeicon:hover {
	-webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
	transform:scale(1.1, 1.1);
}




/* BLOOOOOOOOOOG */

.blogtitlelink {
    font-size:28pt;font-family: 'LeagueGothicRegular', Helvetica, arial, sans-serif; 
    color: #FFFFFF;
    font-weight: bold;
    padding-bottom: 0px;
    padding-right: 0;
    padding-top: 0;
    text-decoration: none;
    line-height: 30pt;
}

.blogbody {
    width: 622px;
    float: left;
    padding-right: 12px;
}


/* CSS gradient for blog generated with: http://www.colorzilla.com/gradient-editor/ */
.blogbox {   
float:left;
min-width:814px;
border:1px solid gray; padding:32px; clear:both;margin-bottom:32px; border-radius: 9px;
background: #000000;
background: -moz-linear-gradient(top, #333333 0%, #000000 10%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(10%,#000000));  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 );  
background: -o-linear-gradient(top, #333333 0%,#000000 10%); 
}
.blogrecentposts {
    width: 165px;
    border: 1px solid gray;
    border-radius: 9px;
    float: right;
    padding-right: 12px;
}
.blogrecentposts ul {
    padding-left: 30px;
}
.blogcombox {border:1px solid gray; padding:8px; clear:both;margin-bottom:20px; }
.blogdate {color:#AEE;clear:both;display:block;}
.blogcommentcount{ margin-top: 2em; margin-bottom:0;text-align:right; float:left;width:100%;}

.updateTweet { opacity:0.6;}
.updateTweet:hover { opacity:1.0;} 
.firstNews { opacity:1.0;}

.compatbox { float:right;height:60px;padding-top:34px;}

/* TRANSITIONS */

.animfadein {
    
    transition-duration: 1s
    -moz-transition-duration: 1s
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    
}

#compatibility div { width: 36px; height: 42px; display: inline-block; }


/* ------------------------------ Retina styles ----------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    .updateTweet { background-image: url("/theme/ico-tweet-2x.png"); background-size: 23px 23px; }
    .updateBlog { background-image: url("/theme/ico-blog-2x.png"); background-size: 24px 24px; }

    .compat-winphone-on { background-image: url('/theme/compat_icons/compat-winphone-on-2x.png'); background-size: 38px 42px; }
    .compat-android-on { background-image: url('/theme/compat_icons/compat-android-on-2x.png'); background-size: 36px 42px; }
    .compat-ipad-on { background-image: url('/theme/compat_icons/compat-ipad-on-2x.png'); background-size: 40px 42px; }
    .compat-ipod-on { background-image: url('/theme/compat_icons/compat-ipod-on-2x.png'); background-size: 36px 42px; }
    .compat-iphone-on { background-image: url('/theme/compat_icons/compat-iphone-on-2x.png'); background-size: 36px 42px; }
    .compat-winphone-off { background-image: url('/theme/compat_icons/compat-winphone-off-2x.png'); background-size: 38px 42px; }
    .compat-android-off { background-image: url('/theme/compat_icons/compat-android-off-2x.png'); background-size: 36px 42px; }
    .compat-ipad-off { background-image: url('/theme/compat_icons/compat-ipad-off-2x.png'); background-size: 40px 42px; }
    .compat-ipod-off { background-image: url('/theme/compat_icons/compat-ipod-off-2x.png'); background-size: 36px 42px; }
    .compat-iphone-off { background-image: url('/theme/compat_icons/compat-iphone-off-2x.png'); background-size: 36px 42px; }

    body.facebookMode .compat-winphone-on { background-image: url('/theme/compat_icons/compat-winphone-on-fbm-2x.png'); background-size: 38px 42px; }
    body.facebookMode .compat-android-on { background-image: url('/theme/compat_icons/compat-android-on-fbm-2x.png'); background-size: 36px 42px; }
    body.facebookMode .compat-ipad-on { background-image: url('/theme/compat_icons/compat-ipad-on-fbm-2x.png'); background-size: 40px 42px; }
    body.facebookMode .compat-ipod-on { background-image: url('/theme/compat_icons/compat-ipod-on-fbm-2x.png'); background-size: 36px 42px; }
    body.facebookMode .compat-iphone-on { background-image: url('/theme/compat_icons/compat-iphone-on-fbm-2x.png'); background-size: 36px 42px; }
    body.facebookMode .compat-winphone-off { background-image: url('/theme/compat_icons/compat-winphone-off-fbm-2x.png'); background-size: 38px 42px; }
    body.facebookMode .compat-android-off { background-image: url('/theme/compat_icons/compat-android-off-fbm-2x.png'); background-size: 36px 42px; }
    body.facebookMode .compat-ipad-off { background-image: url('/theme/compat_icons/compat-ipad-off-fbm-2x.png'); background-size: 40px 42px; }
    body.facebookMode .compat-ipod-off { background-image: url('/theme/compat_icons/compat-ipod-off-fbm-2x.png'); background-size: 36px 42px; }
    body.facebookMode .compat-iphone-off { background-image: url('/theme/compat_icons/compat-iphone-off-fbm-2x.png'); background-size: 36px 42px; }
}

/* ------------------------------ I'm Responsive ----------------------------- */

#fullsite {
    width: 90%;
    max-width: 1000px;
}
#maincontainer {
    max-width: 100%;
}
#pagecontent {
    width: 93.7%;
    padding: 0 30px;
}
.leftColumn {
    width: 50%;
}
#left1and2 {
    width: 50%;
}
#left1and2 .leftColumn{
    width: 100%;
}
.rightColumn {
    width: 50%;
}
#top {
    height: 220px;
    padding-top: 10px;
    position: relative;
}
#langArea {
    width: 100%;
    position: relative;
    padding: 0
}
#langChooser {
    right: 60px;
    position: absolute;
    padding: 0;
}
#langs {
    position: absolute;
    z-index: 100;
    right: 60px;
    top: 20px;
    left: inherit;
}
#menuArea {
	height: 120px;
    width: 65%;
    right: 320px;
    position: absolute;
}
.row {
    width: 100%;
}
#logoArea {
    top: 53px;
    right: 90px;
    position: absolute;
}
#home{
    padding-top: 40px;
}
#home .row p {
    margin-right: 20px;
}
#home #updatesBox {
    margin-left: auto;
    margin-right: auto;
    max-width: 306px;
    width: auto;
}
#home #updates {
    width: auto;
}

#updatesBox {
    border: 2px solid gray;
    border-radius: 15px;
    background: #212121; /* Old browsers */
    background: -moz-linear-gradient(top,  #212121 0%, #494949 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#212121), color-stop(100%,#494949)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #212121 0%,#494949 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #212121 0%,#494949 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #212121 0%,#494949 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #212121 0%,#494949 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#494949',GradientType=0 ); /* IE6-9 */

}

/* blog */

.blogbox {
    width: 92%;
    min-width: inherit;
    word-wrap: break-word;
}
.blogbody {
    width: auto;
    max-width: 100%;
}
.blogrecentposts {
    width: auto;
    min-width: 130px;
    max-width: 100%;
}
.blogbox img {
    max-width: 100%;
}
.blogcombox {
    word-wrap: break-word;
}

@media (max-width: 900px) {
    #pagecontent {
        width: 92%;
    }
}

@media (max-width: 768px) {

    .leftColumn {
        margin-bottom: 80px;
        width: 100%;
    }
    #left1and2 {
        width: 100%;
    }
    #home .rightColumn {
        float: left;
        width: 100%;
    }
    .blogbox {
        width: 89%;
        min-width: inherit;
    }
}

@media (max-width: 650px) {
    .blogbox {
        width: 84%;
    }
}

@media (max-width: 530px) {
    #menuArea {
        right: 60%;
    }
    #logoArea {
        right: 5%;
    }
    .blogbox {
        width: 82%;
    }
}

@media (max-width: 430px) {
    #menuArea {
        right: 70%;
    }
    #pagecontent {
        padding: 10px;
    }
    .blogbox {
        width: 87%;
    }
}

@media (max-width: 380px) {
    #blogform {
        padding-left: 0;
        padding-right: 35px;
        margin: 0;
        width: 95%;
    }
}

@media (max-width: 360px) {
    #menuArea {
        top: 120px;
        right: inherit;
        left: 3%;
    }
    #menu > li {
        margin-right: 10px;
        display: inline;
    }
    #logoArea {
        left: 15%;
    }
    .blogbox {
        width: 81%;
    }
    #blogform {
        border: none;
        background: none;
        padding: 0;

    }
}

@media (max-width: 300px) {
    .blogbox {
        width: 76%;
    }
}

@media (max-width: 260px) {
    .blogbox {
        width: 71%;
    }
}

/* pages details */

.leftCol {
    width: 58%;
}
.rightCol {
    width: 42%;
}

@media (max-width: 500px) {
    .leftCol {
        width: 100%;
    }

    .rightCol {
        width: 100%;
    }
    #pagecontent {
        width: 87%;
    }
}

/* support page */

#supportPageMain {
    float: left;
    margin-left: 24px;
    width: 50%;
}
#about-page-image, #support-page-image {
    width: 40%;
}

@media (max-width: 800px) {
    #supportPageMain {
        margin-left: inherit;
    }
}

@media (max-width: 417px) {
    #supportPageMain {
        width: 100%;
    }
    #about-page-image, #support-page-image {
        width: 100%;
        margin-left: 0;
    }
}