/*----------------------------------------------------------
/* Webbu Tile CSS v.1
/*
-----------------------------------------------------------*/

/* General tile settings */
.videotile{width:100%; height:100%; margin:0px; border:0px;}
.maptile{width:100%; height:100%; margin:0px; border:0px;}
.tile{ display:block;  float:left;  background-color:#525252;  width:150px;  height:150px;  cursor:pointer;  box-shadow:inset 0px 0px 1px #FFC;  text-decoration:none;  color:#fff;  overflow:hidden;  position:relative;  font-weight:300;  font-size:11pt;  letter-spacing:0.02em;  line-height:20px;  margin:0 10px 10px 0;  overflow:hidden}
.tile:hover{ outline:3px #3a3a3a solid}
.tile .boxContent{ width:100%;  height:100%;  padding:0;  padding-bottom:30px;  vertical-align:top;  padding:10px 15px;  overflow:hidden;  text-overflow:ellipsis;  position:relative;  font-weight:400;  font-size:9pt;  color:#000;  color:#fff;  line-height:16px}
.tile .boxContent:hover{ color:rgba(0,0,0,0.8)}
.tile .boxContent:active{ color:rgba(0,0,0,0.4)}
.tile .boxContent:hover{ color:#fff}
.tile.icon .boxContent{ padding:0}
.tile.icon .boxContent img{ position:absolute;  width:64px;  height:64px;  top:50%;  left:50%;  margin-left:-32px;  margin-top:-32px}
.tile.image .boxContent, 
.tile.islider .boxContent{ padding:0}
.tile.image .boxContent img, 
.tile.islider .boxContent img{ width:100%;  height:auto;  min-height:100%;  max-width:100%}
.tile .tilename{ position:absolute;  bottom:0;  left:0;  right:0;  min-height:22px;  *zoom:1}
.tile .tilename:before, 
.tile .tilename:after{ display:table;  content:""}
.tile .tilename:after{ clear:both}
.tile .tilename .name{ position:absolute;  bottom:0;  left:0;  margin-bottom:5px;  margin-left:15px;  font-weight:400;  font-size:9pt;  color:#fff}
.tile .tilename .name:hover{ color:#fff}
.tile .tilename .icon{ margin:5px 15px;  width:32px;  height:32px}
.tile .tilename .icon img{ width:100%;  height:100%}
.tile .tilename .text{ position:absolute;  left:60px;  top:5px;  right:50px;  font-weight:400;  font-size:9pt;  color:#000;  color:#fff;  line-height:14px}
.tile .tilename .text:hover{ color:rgba(0,0,0,0.8)}
.tile .tilename .text:active{ color:rgba(0,0,0,0.4)}
.tile .tilename .text:hover{ color:#fff}

/* Tile responsive setting. */
@media (min-width:1025px){ 
 
 .wrapper{width:1024px; margin-left:auto; margin-right:auto}
}
 .resimgicon {max-width:62px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3em; margin-top: 2.7em;}
 .tile{ width:157px;  height:157px}
 .tile.t2x{ width:324px}
 .tile.t2x .boxContent{ width:324px}
 .tile.t3x{ width:491px}
 .tile.t3x .boxContent{ width:491px}
 .tile.t4x{ width:658px}
 .tile.t4x .boxContent{ width:658px}
 .tile.t2x-v{ height:324px}
 .tile.t2x-v .boxContent{ height:284px}
 .tile.t3x-v{ height:491px}
 .tile.t3x-v .boxContent{ height:451px}
 .tile.t4x-v{ height:658px}
 .tile.t4x-v .boxContent{ height:658px}
 .tile.t2x-b{ height:324px; width:324px}
 .tile.t2x-b .boxContent{ height:324px; width:324px}
 .tile.t3x-b{ height:491px; width:491px}
 .tile.t3x-b .boxContent{ height:491px; width:491px}
 .tile.t3x-t2x-b{ height:503px; width:332px}
 .tile.t3x-t2x-b .boxContent{ height:491px; width:332px}
 .tile.t4x-b{ height:658px; width:658px}
 .tile.t4x-b .boxContent{ height:658px; width:658px}
 .tile.t4x-t2x-b{ height:658px; width:324px}
 .tile.t4x-t2x-b .boxContent{ height:658px; width:324px}
 .tile.t4x-t2x22-b{ height:324px; width:658px}
 .tile.t4x-t2x22-b .boxContent{ height:324px; width:658px}
 .tile.t4x-t1x-b{ height:157px; width:658px}
 .tile.t4x-t1x-b .boxContent{ height:157px; width:658px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:35px;  margin-top:60px;  display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:8px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:5px; margin-right:5px; margin-bottom:3px; margin-left:10px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}

@media (max-width:1024px){ 
 .resimgicon {max-width:62px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3.28em; margin-top: 3em;}
 .tile{ width:159px;  height:159px}
 .tile.t2x{ width:328px}
 .tile.t2x .boxContent{ width:328px}
 .tile.t3x{ width:497px}
 .tile.t3x .boxContent{ width:497px}
 .tile.t4x{ width:666px}
 .tile.t4x .boxContent{ width:666px}
 .tile.t2x-v{ height:328px}
 .tile.t2x-v .boxContent{ height:288px}
 .tile.t3x-v{ height:497px}
 .tile.t3x-v .boxContent{ height:457px}
 .tile.t4x-v{ height:666px}
 .tile.t4x-v .boxContent{ height:626px}
 .tile.t2x-b{ height:328px; width:328px}
 .tile.t2x-b .boxContent{ height:328px; width:328px}
 .tile.t3x-b{ height:497px; width:497px}
 .tile.t3x-b .boxContent{ height:497px; width:497px}
 .tile.t3x-t2x-b{ height:497px; width:328px}
 .tile.t3x-t2x-b .boxContent{ height:497px; width:328px}
 .tile.t4x-b{ height:666px; width:666px}
 .tile.t4x-b .boxContent{ height:666px; width:666px}
 .tile.t4x-t2x-b{ height:666px; width:328px}
 .tile.t4x-t2x-b .boxContent{ height:666px; width:328px}
 .tile.t4x-t2x22-b{ height:328px; width:666px}
 .tile.t4x-t2x22-b .boxContent{ height:328px; width:666px}
 .tile.t4x-t1x-b{ height:159px; width:666px}
 .tile.t4x-t1x-b .boxContent{ height:159px; width:666px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:37px;  margin-top:65px;  display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

@media (max-width:980px){ 
 .resimgicon {max-width:66px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 4em; margin-top: 3em;}
 .tile{ width:180px;  height:180px}
 .tile.t2x{ width:370px}
 .tile.t2x .boxContent{ width:370px}
 .tile.t3x{ width:560px}
 .tile.t3x .boxContent{ width:560px}
 .tile.t4x{ width:750px}
 .tile.t4x .boxContent{ width:750px}
 .tile.t2x-v{ height:370px}
 .tile.t2x-v .boxContent{ height:330px}
 .tile.t3x-v{ height:560px}
 .tile.t3x-v .boxContent{ height:520px}
 .tile.t4x-v{ height:750px}
 .tile.t4x-v .boxContent{ height:710px}
 .tile.t2x-b{ height:370px; width:370px}
 .tile.t2x-b .boxContent{ height:370px; width:370px}
 .tile.t3x-b{ height:560px; width:560px}
 .tile.t3x-b .boxContent{ height:560px; width:560px}
 .tile.t3x-t2x-b{ height:560px; width:370px}
 .tile.t3x-t2x-b .boxContent{ height:560px; width:370px}
 .tile.t4x-b{ height:750px; width:750px}
 .tile.t4x-b .boxContent{ height:750px; width:750px}
 .tile.t4x-t2x-b{ height:750px; width:370px}
 .tile.t4x-t2x-b .boxContent{ height:750px; width:370px}
 .tile.t4x-t2x22-b{ height:370px; width:750px}
 .tile.t4x-t2x22-b .boxContent{ height:370px; width:750px}
 .tile.t4x-t1x-b{ height:180px; width:750px}
 .tile.t4x-t1x-b .boxContent{ height:180px; width:750px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:48px;  margin-top:70px;  display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

/* For ipad landscape */
@media (max-width:768px){ 
 .resimgicon {max-width:64px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3.85em; margin-top: 3em;}
 .tile{ width:177px;  height:177px}
 .tile.t2x{ width:364px}
 .tile.t2x .boxContent{ width:364px}
 .tile.t3x{ width:551px}
 .tile.t3x .boxContent{ width:551px}
 .tile.t4x{ width:738px}
 .tile.t4x .boxContent{ width:738px}
 .tile.t2x-v{ height:364px}
 .tile.t2x-v .boxContent{ height:278px}
 .tile.t3x-v{ height:551px}
 .tile.t3x-v .boxContent{ height:442px}
 .tile.t4x-v{ height:738px}
 .tile.t4x-v .boxContent{ height:738px}
 .tile.t2x-b{ height:364px; width:364px}
 .tile.t2x-b .boxContent{ height:364px; width:364px}
 .tile.t3x-b{ height:551px; width:551px}
 .tile.t3x-b .boxContent{ height:551px; width:551px}
 .tile.t3x-t2x-b{ height:551px; width:364px}
 .tile.t3x-t2x-b .boxContent{ height:551px; width:364px}
 .tile.t4x-b{ height:738px; width:738px}
 .tile.t4x-b .boxContent{ height:738px; width:738px}
 .tile.t4x-t2x-b{ height:738px; width:364px}
 .tile.t4x-t2x-b .boxContent{ height:738px; width:364px}
 .tile.t4x-t2x22-b{ height:364px; width:738px}
 .tile.t4x-t2x22-b .boxContent{ height:364px; width:738px}
 .tile.t4x-t1x-b{ height:177px; width:738px}
 .tile.t4x-t1x-b .boxContent{ height:177px; width:738px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:72px;  margin-left:47px;  margin-top:65px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

@media (max-width:720px){ 
 .resimgicon {max-width:64px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 3.6em; margin-top: 3em;}
 .tile{ width:165px;  height:165px}
 .tile.t2x{ width:340px}
 .tile.t2x .boxContent{ width:340px}
 .tile.t3x{ width:515px}
 .tile.t3x .boxContent{ width:515px}
 .tile.t4x{ width:690px}
 .tile.t4x .boxContent{ width:690px}
 .tile.t2x-v{ height:340px}
 .tile.t2x-v .boxContent{ height:300px}
 .tile.t3x-v{ height:515px}
 .tile.t3x-v .boxContent{ height:475px}
 .tile.t4x-v{ height:690px}
 .tile.t4x-v .boxContent{ height:650px}
 .tile.t2x-b{ height:340px; width:340px}
 .tile.t2x-b .boxContent{ height:340px; width:340px}
 .tile.t3x-b{ height:515px; width:515px}
 .tile.t3x-b .boxContent{ height:515px; width:515px}
 .tile.t3x-t2x-b{ height:515px; width:340px}
 .tile.t3x-t2x-b .boxContent{ height:515px; width:340px}
 .tile.t4x-b{ height:690px; width:690px}
 .tile.t4x-b .boxContent{ height:690px; width:690px}
 .tile.t4x-t2x-b{ height:690px; width:340px}
 .tile.t4x-t2x-b .boxContent{ height:690px; width:340px}
 .tile.t4x-t2x22-b{ height:340px; width:690px}
 .tile.t4x-t2x22-b .boxContent{ height:340px; width:690px}
 .tile.t4x-t1x-b{ height:165px; width:690px}
 .tile.t4x-t1x-b .boxContent{ height:165px; width:690px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:62px;  margin-left:47px;  margin-top:65px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}
/* For Samsung galaxy s3 landscape */
@media (max-width:640px){ 
 .resimgicon {max-width:64px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 2.7em; margin-top: 2.8em;}
 .tile{ width:147px;  height:147px}
 .tile.t2x{ width:304px}
 .tile.t2x .boxContent{ width:304px}
 .tile.t3x{ width:461px}
 .tile.t3x .boxContent{ width:461px}
 .tile.t4x{ width:618px}
 .tile.t4x .boxContent{ width:618px}
 .tile.t2x-v{ height:304px}
 .tile.t2x-v .boxContent{ height:264px}
 .tile.t3x-v{ height:461px}
 .tile.t3x-v .boxContent{ height:421px}
 .tile.t4x-v{ height:618px}
 .tile.t4x-v .boxContent{ height:578px}
 .tile.t2x-b{ height:304px; width:304px}
 .tile.t2x-b .boxContent{ height:304px; width:304px}
 .tile.t3x-b{ height:461px; width:461px}
 .tile.t3x-b .boxContent{ height:461px; width:461px}
 .tile.t3x-t2x-b{ height:461px; width:304px}
 .tile.t3x-t2x-b .boxContent{ height:461px; width:304px}
 .tile.t4x-b{ height:618px; width:618px}
 .tile.t4x-b .boxContent{ height:618px; width:618px}
 .tile.t4x-t2x-b{ height:618px; width:304px}
 .tile.t4x-t2x-b .boxContent{ height:618px; width:304px}
 .tile.t4x-t2x22-b{ height:304px; width:618px}
 .tile.t4x-t2x22-b .boxContent{ height:304px; width:618px}
 .tile.t4x-t1x-b{ height:147px; width:618px}
 .tile.t4x-t1x-b .boxContent{ height:147px; width:618px}
 
 .tile .tilename { min-height: 30px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:62px;  margin-left:30px;  margin-top:65px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

@media (max-width:598px){ 
 .resimgicon {max-width:36px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 1.26em; margin-top: .83em;}
 .tile{ width:88px;  height:88px}
 .tile.t2x{ width:186px}
 .tile.t2x .boxContent{ width:186px}
 .tile.t3x{ width:284px}
 .tile.t3x .boxContent{ width:284px}
 .tile.t4x{ width:382px}
 .tile.t4x .boxContent{ width:382px}
 .tile.t2x-v{ height:186px}
 .tile.t2x-v .boxContent{ height:146px}
 .tile.t3x-v{ height:284px}
 .tile.t3x-v .boxContent{ height:244px}
 .tile.t4x-v{ height:382px}
 .tile.t4x-v .boxContent{ height:342px}
 .tile.t2x-b{ height:186px; width:186px}
 .tile.t2x-b .boxContent{ height:186px; width:186px}
 .tile.t3x-b{ height:284px; width:284px}
 .tile.t3x-b .boxContent{ height:284px; width:284px}
 .tile.t3x-t2x-b{ height:284px; width:186px}
 .tile.t3x-t2x-b .boxContent{ height:284px; width:186px}
 .tile.t4x-b{ height:382px; width:382px}
 .tile.t4x-b .boxContent{ height:382px; width:382px}
 .tile.t4x-t2x-b{ height:382px; width:186px}
 .tile.t4x-t2x-b .boxContent{ height:382px; width:186px}
 .tile.t4x-t2x22-b{ height:186px; width:382px}
 .tile.t4x-t2x22-b .boxContent{ height:186px; width:382px}
 .tile.t4x-t1x-b{ height:88px; width:382px}
 .tile.t4x-t1x-b .boxContent{ height:88px; width:382px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.46em; margin-top:23px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

@media (max-width:592px){
 .resimgicon {max-width:36px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 1.25em; margin-top: .83em;}
 .tile{ width:87px;  height:87px}
 .tile.t2x{ width:184px}
 .tile.t2x .boxContent{ width:184px}
 .tile.t3x{ width:281px}
 .tile.t3x .boxContent{ width:281px}
 .tile.t4x{ width:378px}
 .tile.t4x .boxContent{ width:378px}
 .tile.t2x-v{ height:184px}
 .tile.t2x-v .boxContent{ height:144px}
 .tile.t3x-v{ height:281px}
 .tile.t3x-v .boxContent{ height:241px}
 .tile.t4x-v{ height:378px}
 .tile.t4x-v .boxContent{ height:348px}
 .tile.t2x-b{ height:184px; width:184px}
 .tile.t2x-b .boxContent{ height:184px; width:184px}
 .tile.t3x-b{ height:281px; width:281px}
 .tile.t3x-b .boxContent{ height:281px; width:281px}
 .tile.t3x-t2x-b{ height:281px; width:184px}
 .tile.t3x-t2x-b .boxContent{ height:281px; width:184px}
 .tile.t4x-b{ height:378px; width:378px}
 .tile.t4x-b .boxContent{ height:378px; width:378px}
 .tile.t4x-t2x-b{ height:378px; width:184px}
 .tile.t4x-t2x-b .boxContent{ height:378px; width:184px}
 .tile.t4x-t2x22-b{ height:184px; width:378px}
 .tile.t4x-t2x22-b .boxContent{ height:184px; width:378px}
 .tile.t4x-t1x-b{ height:87px; width:378px}
 .tile.t4x-t1x-b .boxContent{ height:87px; width:378px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.48em; margin-top:23px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}
/* For iphone 5 landscape */
@media (max-width:568px){ 
 .resimgicon {max-width:36px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .99em; margin-top: .82em;}
 .tile{ width:83px;  height:83px}
 .tile.t2x{ width:176px}
 .tile.t2x .boxContent{ width:176px}
 .tile.t3x{ width:269px}
 .tile.t3x .boxContent{ width:269px}
 .tile.t4x{ width:362px}
 .tile.t4x .boxContent{ width:362px}
 .tile.t2x-v{ height:176px}
 .tile.t2x-v .boxContent{ height:136px}
 .tile.t3x-v{ height:269px}
 .tile.t3x-v .boxContent{ height:229px}
 .tile.t4x-v{ height:362px}
 .tile.t4x-v .boxContent{ height:342px}
 .tile.t2x-b{ height:176px; width:176px}
 .tile.t2x-b .boxContent{ height:176px; width:176px}
 .tile.t3x-b{ height:269px; width:269px}
 .tile.t3x-b .boxContent{ height:269px; width:269px}
 .tile.t3x-t2x-b{ height:269px; width:176px}
 .tile.t3x-t2x-b .boxContent{ height:269px; width:176px}
 .tile.t4x-b{ height:362px; width:362px}
 .tile.t4x-b .boxContent{ height:362px; width:362px}
 .tile.t4x-t2x-b{ height:362px; width:176px}
 .tile.t4x-t2x-b .boxContent{ height:362px; width:176px}
 .tile.t4x-t2x22-b{ height:176px; width:362px}
 .tile.t4x-t2x22-b .boxContent{ height:176px; width:362px}
 .tile.t4x-t1x-b{ height:83px; width:362px}
 .tile.t4x-t1x-b .boxContent{ height:83px; width:362px}
 
 .tile .tilename { min-height: 25px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:36px;  margin-left:.46em;  margin-top:23px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:3px; font-size:9pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

/* galaxy s2 landscape */
@media (max-width:533px){ 
 .resimgicon {max-width:38px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;}
 .tile{ width:77px;  height:77px}
 .tile.t2x{ width:164px}
 .tile.t2x .boxContent{ width:164px}
 .tile.t3x{ width:251px}
 .tile.t3x .boxContent{ width:251px}
 .tile.t4x{ width:338px}
 .tile.t4x .boxContent{ width:338px}
 .tile.t2x-v{ height:164px}
 .tile.t2x-v .boxContent{ height:124px}
 .tile.t3x-v{ height:251px}
 .tile.t3x-v .boxContent{ height:211px}
 .tile.t4x-v{ height:338px}
 .tile.t4x-v .boxContent{ height:298px}
 .tile.t2x-b{ height:164px; width:164px}
 .tile.t2x-b .boxContent{ height:164px; width:164px}
 .tile.t3x-b{ height:251px; width:251px}
 .tile.t3x-b .boxContent{ height:251px; width:251px}
 .tile.t3x-t2x-b{ height:251px; width:164px}
 .tile.t3x-t2x-b .boxContent{ height:251px; width:164px}
 .tile.t4x-b{ height:338px; width:338px}
 .tile.t4x-b .boxContent{ height:338px; width:338px}
 .tile.t4x-t2x-b{ height:338px; width:164px}
 .tile.t4x-t2x-b .boxContent{ height:338px; width:164px}
 .tile.t4x-t2x22-b{ height:164px; width:338px}
 .tile.t4x-t2x22-b .boxContent{ height:164px; width:338px}
 .tile.t4x-t1x-b{ height:77px; width:338px}
 .tile.t4x-t1x-b .boxContent{ height:77px; width:338px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.35em; margin-top:23px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}


@media (max-width:520px){ 
 .resimgicon {max-width:48px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 2em; margin-top: 1.6em;}
 .tile{ width:117px;  height:117px}
 .tile.t2x{ width:244px}
 .tile.t2x .boxContent{ width:244px}
 .tile.t3x{ width:371px}
 .tile.t3x .boxContent{ width:371px}
 .tile.t4x{ width:498px}
 .tile.t4x .boxContent{ width:498px}
 .tile.t2x-v{ height:244px}
 .tile.t2x-v .boxContent{ height:204px}
 .tile.t3x-v{ height:371px}
 .tile.t3x-v .boxContent{ height:341px}
 .tile.t4x-v{ height:498px}
 .tile.t4x-v .boxContent{ height:458px}
 .tile.t2x-b{ height:244px; width:244px}
 .tile.t2x-b .boxContent{ height:244px; width:244px}
 .tile.t3x-b{ height:371px; width:371px}
 .tile.t3x-b .boxContent{ height:371px; width:371px}
 .tile.t3x-t2x-b{ height:371px; width:244px}
 .tile.t3x-t2x-b .boxContent{ height:371px; width:244px}
 .tile.t4x-b{ height:498px; width:498px}
 .tile.t4x-b .boxContent{ height:498px; width:498px}
 .tile.t4x-t2x-b{ height:498px; width:244px}
 .tile.t4x-t2x-b .boxContent{ height:498px; width:244px}
 .tile.t4x-t2x22-b{ height:244px; width:498px}
 .tile.t4x-t2x22-b .boxContent{ height:244px; width:498px}
 .tile.t4x-t1x-b{ height:117px; width:498px}
 .tile.t4x-t1x-b .boxContent{ height:117px; width:498px}
 
 .tile .tilename { min-height: 25px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{ font-size:50px;  margin-left:.48em;  margin-top:43px; display:inline-block;  text-decoration:inherit}
 .tile .tilename .name{ margin-left:10px; margin-bottom:5px; font-size:12pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:12px; margin-right:5px; margin-bottom:5px; margin-left:5px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
 .tile-group{ max-width:400px;  float:none}
}

@media (max-width:480px){
 .resimgicon {max-width:34px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .48em; margin-top: .64em;}
 .tile{ width:68px;  height:68px}
 .tile.t2x{ width:146px}
 .tile.t2x .boxContent{ width:146px}
 .tile.t3x{ width:224px}
 .tile.t3x .boxContent{ width:224px}
 .tile.t4x{ width:302px}
 .tile.t4x .boxContent{ width:302px}
 .tile.t2x-v{ height:146px}
 .tile.t2x-v .boxContent{ height:106px}
 .tile.t3x-v{ height:224px}
 .tile.t3x-v .boxContent{ height:184px}
 .tile.t4x-v{ height:302px}
 .tile.t4x-v .boxContent{ height:382px}
 .tile.t2x-b{ height:146px; width:146px}
 .tile.t2x-b .boxContent{ height:146px; width:146px}
 .tile.t3x-b{ height:224px; width:224px}
 .tile.t3x-b .boxContent{ height:224px; width:224px}
 .tile.t3x-t2x-b{ height:224px; width:146px}
 .tile.t3x-t2x-b .boxContent{ height:224px; width:146px}
 .tile.t4x-b{ height:302px; width:302px}
 .tile.t4x-b .boxContent{ height:302px; width:302px}
 .tile.t4x-t2x-b{ height:302px; width:146px}
 .tile.t4x-t2x-b .boxContent{ height:302px; width:146px}
 .tile.t4x-t2x22-b{ height:146px; width:302px}
 .tile.t4x-t2x22-b .boxContent{ height:146px; width:302px}
 .tile.t4x-t1x-b{ height:68px; width:302px}
 .tile.t4x-t1x-b .boxContent{ height:68px; width:302px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:32px; margin-left:.24em; margin-top:17px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

/*Galaxy Note */
@media (max-width:400px){
 .resimgicon {max-width:36px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: 1.25em; margin-top: .83em;}
 .tile{ width:87px;  height:87px}
 .tile.t2x{ width:184px}
 .tile.t2x .boxContent{ width:184px}
 .tile.t3x{ width:281px}
 .tile.t3x .boxContent{ width:281px}
 .tile.t4x{ width:378px}
 .tile.t4x .boxContent{ width:378px}
 .tile.t2x-v{ height:184px}
 .tile.t2x-v .boxContent{ height:144px}
 .tile.t3x-v{ height:281px}
 .tile.t3x-v .boxContent{ height:241px}
 .tile.t4x-v{ height:378px}
 .tile.t4x-v .boxContent{ height:348px}
 .tile.t2x-b{ height:184px; width:184px}
 .tile.t2x-b .boxContent{ height:184px; width:184px}
 .tile.t3x-b{ height:281px; width:281px}
 .tile.t3x-b .boxContent{ height:281px; width:281px}
 .tile.t3x-t2x-b{ height:281px; width:184px}
 .tile.t3x-t2x-b .boxContent{ height:281px; width:184px}
 .tile.t4x-b{ height:378px; width:378px}
 .tile.t4x-b .boxContent{ height:378px; width:378px}
 .tile.t4x-t2x-b{ height:378px; width:184px}
 .tile.t4x-t2x-b .boxContent{ height:378px; width:184px}
 .tile.t4x-t2x22-b{ height:184px; width:378px}
 .tile.t4x-t2x22-b .boxContent{ height:184px; width:378px}
 .tile.t4x-t1x-b{ height:87px; width:378px}
 .tile.t4x-t1x-b .boxContent{ height:87px; width:378px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.48em; margin-top:23px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}


@media (max-width:360px){ 
 .resimgicon {max-width:38px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .74em; margin-top: .68em;}
 .tile{ width:77px;  height:77px}
 .tile.t2x{ width:164px}
 .tile.t2x .boxContent{ width:164px}
 .tile.t3x{ width:251px}
 .tile.t3x .boxContent{ width:251px}
 .tile.t4x{ width:338px}
 .tile.t4x .boxContent{ width:338px}
 .tile.t2x-v{ height:164px}
 .tile.t2x-v .boxContent{ height:124px}
 .tile.t3x-v{ height:251px}
 .tile.t3x-v .boxContent{ height:211px}
 .tile.t4x-v{ height:338px}
 .tile.t4x-v .boxContent{ height:298px}
 .tile.t2x-b{ height:164px; width:164px}
 .tile.t2x-b .boxContent{ height:164px; width:164px}
 .tile.t3x-b{ height:251px; width:251px}
 .tile.t3x-b .boxContent{ height:251px; width:251px}
 .tile.t3x-t2x-b{ height:251px; width:164px}
 .tile.t3x-t2x-b .boxContent{ height:251px; width:164px}
 .tile.t4x-b{ height:338px; width:338px}
 .tile.t4x-b .boxContent{ height:338px; width:338px}
 .tile.t4x-t2x-b{ height:338px; width:164px}
 .tile.t4x-t2x-b .boxContent{ height:338px; width:164px}
 .tile.t4x-t2x22-b{ height:164px; width:338px}
 .tile.t4x-t2x22-b .boxContent{ height:164px; width:338px}
 .tile.t4x-t1x-b{ height:77px; width:338px}
 .tile.t4x-t1x-b .boxContent{ height:77px; width:338px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:36px; margin-left:.35em; margin-top:23px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

@media (max-width:320px){ 
 .resimgicon {max-width:32px;height:auto;}
 .tile .boxContent .resimgicon{ margin-left: .56em; margin-top: .50em;}
 .tile .tilename, .tile .tilestatus{height:12px}
 .tile{ width:67px;  height:67px}
 .tile.t2x{ width:144px}
 .tile.t2x .boxContent{ width:144px}
 .tile.t3x{ width:221px}
 .tile.t3x .boxContent{ width:221px}
 .tile.t4x{ width:298px}
 .tile.t4x .boxContent{ width:298px}
 .tile.t2x-v{ height:144px}
 .tile.t2x-v .boxContent{ height:104px}
 .tile.t3x-v{ height:221px}
 .tile.t3x-v .boxContent{ height:181px}
 .tile.t4x-v{ height:298px}
 .tile.t4x-v .boxContent{ height:258px}
 .tile.t2x-b{ height:144px; width:144px}
 .tile.t2x-b .boxContent{ height:144px; width:144px}
 .tile.t3x-b{ height:221px; width:221px}
 .tile.t3x-b .boxContent{ height:221px; width:221px}
 .tile.t3x-t2x-b{ height:221px; width:144px}
 .tile.t3x-t2x-b .boxContent{ height:221px; width:144px}
 .tile.t4x-b{ height:298px; width:298px}
 .tile.t4x-b .boxContent{ height:298px; width:298px}
 .tile.t4x-t2x-b{ height:298px; width:144px}
 .tile.t4x-t2x-b .boxContent{ height:298px; width:144px}
 .tile.t4x-t2x22-b{ height:144px; width:298px}
 .tile.t4x-t2x22-b .boxContent{ height:144px; width:298px}
 .tile.t4x-t1x-b{ height:67px; width:298px}
 .tile.t4x-t1x-b .boxContent{ height:67px; width:298px}
 
 .tile .tilename { min-height: 20px;}
 .tile .boxContent{ padding:5px 10px}
 .tile.icon .boxContent img{ width:10px;  height:10px;  margin-left:-14px;  margin-top:-22px}
 .tile.iconmain .boxContent i{font-size:30px; margin-left:.22em; margin-top:17px; display:inline-block; text-decoration:inherit}
 .tile .tilename .name{ margin-left:5px; margin-bottom:0px; font-size:8pt}
 .tile .tilename .icon{width:12px; height:12px; margin-top:2px; margin-right:5px; margin-bottom:5px; margin-left:5px; font-size:12px}
 .tile .tilename .text{ left:40px;  right:40px;  font-size:8pt}
}

/*Colors*/
.TLightRed{background-color:#E51400}
.TLightOrange{background-color:#FE8300}
.TOrange{background-color:#FD5C04}
.TRed{background-color:#BD0000}
.TBrown{background-color:#7D6058}
.TLightPurple{background-color:#E86EB2}
.TDarkPurple{background-color:#8D0196}
.TLightBlue{background-color:#5FCDCB}
.TBlue{background-color:#1673D2}
.TDarkBlue{background-color:#0849B1}
.TFacebookBlue{background-color:#3B5D9C}
.TTwitterBlue{background-color:#59D5E6}
.TThumblrBlue{background-color:#2A4866}
.TLinkedinBlue{background-color:#1477AC}
.TDribbblePink{background-color:#F26097}
.TTurquise{background-color:#5FCDCB}
.TLightGrey{background-color:#E0E0E0}
.TGrey{background-color:#BBB}
.TDarkGrey{background-color:#666}
.TLightGreen{background-color:#74E800}
.TGreen{background-color:#00A300}
.TDarkGreen{background-color:#008A00}
.TBlack{background-color:#000}
.TWhite{background-color:#fff}

