body{
  background-color: #111111;
  color: #FFFFFF;
  margin:0px;
  text-decoration:none;
}

#topBox
{
  position: relative;
  display:block;
  height: 300px;
}

#topBox > div:nth-child(1)
{
  width: auto;
  position: relative;
  display:inline-block;
  height:100%;
}

#topBox > div:nth-child(2)
{
  top:0px;
  bottom: 0px;
  position: absolute;
  height: auto;
  display:inline-block;
  padding-top: 20px;
  width:auto;
}

.head
{
  text-align: left;
  text-indent:50px;
  border-bottom-width:0px;
}

.headHeader
{
  width:100%;
  display:block;
  font-weight:900;
  font-style:italic;
  font-size:40px;
}

.headDescription
{
  width:100%;
  display:block;
  text-indent:100px;
  font-weight:100;
  font-style:italic;
  font-size:25px;
  padding-bottom: 2px;
}

#menu
{
  width:100%;
  height:31px;padding:0;
  display: block;
  position: absolute;
  bottom: 100px;
}
.nav{width:100%;margin:0;padding:0;position:relative;z-index:10;}
.nav li{float:left;position:relative;list-style-type:none;padding:0 1px 0 0;margin:0; border-right: solid 1px #fff;}
.nav li a{display:block;text-decoration:none;text-align:center;color:#fff;padding:4px 13px 8px 11px;position:relative}
.nav ul{list-style-type:none;border:1px solid #ccc;border-top:none;position:absolute;display:none;width:250px;top:31px;left:-1px;margin:0;padding:4px 2px 4px 4px;line-height:normal;background:#fff}
.nav ul li{float:none;margin:0;background:#fff}
.nav ul li a{min-height:1px;height:auto;padding:8px 14px 8px 8px;margin:0;text-align:left;text-transform:none;line-height:125%;color:#666}
.nav ul li a:hover{background:#333;color:#fff}
.nav ul ul{left:250px;top:-4px;border-top:1px solid #ccc}
.nav li:hover ul ul,ul.nav li:hover ul ul ul,ul.nav li:hover ul ul ul ul,ul.nav li:hover ul ul ul ul ul{display:none}
.nav li:hover ul,ul.nav li li:hover ul,ul.nav li li li:hover ul,ul.nav li li li li:hover ul,ul.nav li li li li li:hover ul{display:block;}


/*
div{
  border:1px solid white;
}*/

#popupBox
{
  width:400px; height:400px; position:fixed; left:30%; top:100px; z-index:35000;

}
#popupBoxClose
{
  color:#ddd;
  display: block;
  position:absolute;
  top:0px;
  right:0px;
  z-index:35003;
  width: 30px;
  height: 30px;
  border-radius: 20px 20px;
  border: #ccc solid 2px;
  background: #222;
}

#popupBoxContent
{
  color:#ddd;
  z-index:35001;
  left: 10px;
  right:14px; top:14px;
  bottom:10px;
  padding: 10px;
  position:absolute;
  overflow:auto; text-align:center;
  border: #ccc solid 2px;
  background: #222;
}

#barLanguages
{
  position: absolute;
  top:0px;
  right: 0px;
  display: block;
  z-index:100;
}

#barLanguages > a
{
  padding: 5px;
  background-repeat:no-repeat;background-position:left center;background-attachment:fixed;
}

#page
{
  padding-top: 10px;
  width:1000px;
  z-index:0;
}

#aux
{
  width:1000px;
  display: block;
}

#foot
{
  height:auto;
  width:1000px;
  color:#FFFFFF;
  text-align:center;
  font-size:9px;
  border-width:1px;
}


a:visited, a:link
{
  color: #fff;
  text-decoration:none;
}

a:hover
{
  text-decoration: underline;
}

/* article styles */

.shareButtons div
{
  vertical-align: top;
  display: inline-block;
}

#articleFormContentLanguageBarsContainer
{
  padding-left: 10px;
}

#articleFormContentLanguageBarsContainer div
{
  width:90px; height:20px;
  background-color: #555;
  display:inline-block;
  color:#fff; border: #fff solid 1px;
  margin-right:5px; text-align: center; padding: 3px; vertical-align: top;
}
#articleFormContentLanguageBarsContainer div:hover
{
  display:inline-block; color:#bbf
}

#articleFormContentLanguageBarsContainer .articleLanguageSelectedElement
{
  font-weight: bolder;
  background-color: #775;
}

.articleFormContentDisplaySelection
{
  padding-left: 10px;
}

.articleFormContentDisplaySelection div
{
  width:90px; height:20px;
  background-color: #555;
  display:inline-block;
  color:#fff; border: #fff solid 1px;
  margin-right:5px; text-align: center; padding: 3px; vertical-align: top;
}

#articleFormStrictContent
{

  border: 1px solid;
}

#articleForm .articleContentHTML {width: 750px; min-height: 150px; resize:vertical;}
#articleForm .articleContentPreview
{
  padding: 5px;
  width: 750px;
  min-height: 150px;
  resize:vertical;
}

#articleFormContent {}
#articleFormCategories {}

.articleFull
{
  border: #ccf solid 2px;
  border-radius:50px;
  background-color:#112;
  margin-bottom: 10px;
  padding: 0px 15px 20px 15px;
  width: 720px;
}

.articleMini
{
  border: #ccf solid 2px;
  border-radius:50px;
  background-color:#112;
  margin-bottom: 10px;
  padding: 0px 15px 20px 15px;
  width: 720px;
}

.articleContent
{
  padding: 5px;
}

.articleContent > pre, .articleContentPreview > pre
{
  overflow-x: auto;
  overflow-y: auto;
}

.codeConsole
{
  background: #333;
  color: #ddd;
  padding: 10px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codeConsole:hover
{
  background: #666;
  color: #fff;
}
.codeXML
{
  background-color: #333;
  color: #ddd;
  padding: 10px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codeXML:hover
{
  background-color: #666;
}
.codeHTML
{
  background-color: #333;
  color: #ddd;
  padding: 10px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codeHTML:hover
{
  background-color: #666;
}
.codePHP
{
  background-image:url('http://1.bp.blogspot.com/-IflCK2LoRiQ/T3YAgt9eTEI/AAAAAAAAAT8/WQKZhzNj7HQ/s1600/php-med-trans.png');
  background-repeat:no-repeat;
  background-position:10px 10px;
  background-color: #bbf;
  color: #222;
  padding: 10px;
  padding-top:70px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codePHP:hover
{
  background-color: #ddf;
}
.codeJava
{
  background-color: #fbb;
  color: #222;
  padding: 10px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codeJava:hover
{
  background-color: #fdd;
}
.codeJavaScript
{
  background-image:url('http://1.bp.blogspot.com/-NbEN9Vcc5n0/T3YNWPVKZcI/AAAAAAAAAUE/ZkMYD8m4xik/s1600/g3804.png');
  background-repeat:no-repeat;
  background-position:10px 10px;
  background-color: #fbb;
  color: #222;
  padding: 10px;
  padding-top:70px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codeJavaScript:hover
{
  background-color: #fdd;
}
.codePacketTracer
{
  background-color: #ccc;
  color: #444;
  padding: 10px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codePacketTracer:hover
{
  background-color: #eee;
}
.codeCSharp
{
  background-color: #fbb;
  color: #222;
  padding: 10px;
  border-radius: 10px;
  border: #666 dashed 1px;
  font-size:85%;
}
.codeCSharp:hover
{
  background-color: #fdd;
}

#commentsList
{

}

#strict
{
  position:relative;
  display: inline-block;
  width: 750px;
}

#submenu
{
  float: right;
  width: 230px;
  vertical-align: top;
  display: inline-block;
  text-align: center;
}

/* settings styles */

#settingsMenu {width: 200px; display:inline-block; vertical-align:top;}
#settingsMenu a {display:block; color:#fff; border: #fff solid 1px; margin-bottom: 3px; margin-left:5px; text-align: center;}
#settingsMenu a:hover {display:block; color:#bbf}

#settingsContent {width: 796px; display:inline-block; vertical-align:top; padding-top: 0px;}
/* ==settingsStrict content== */
#hooks{ background: #002;}
#hooks ul{border-top: 1px lightsteelblue dotted; list-style-type:none; padding-left: 20px; margin:0px;}
#hooks li:hover ul{border-top: 1px darkslateblue dotted;}
#hooks li{margin:4px; padding: 1px; color: #ddf; background-color:#334}
#hooks li a, #hooks li:hover ul a{text-decoration: none; color: #ddf;}
#hooks li:hover{color:#118; background-color:#ccf;}
#hooks li ul:hover a,#hooks li:hover a{color:#118;}

#categories{ background: #002;}
#categories ul{border-top: 1px lightsteelblue dotted; list-style-type:none; padding-left: 20px; margin:0px;}
#categories li:hover ul{border-top: 1px darkslateblue dotted;}
#categories li{margin:4px; padding: 1px; color: #ddf; background-color:#334}
#categories li a, #categories li:hover ul a{text-decoration: none; color: #ddf;}
#categories li:hover{color:#118; background-color:#ccf;}
#categories li ul:hover a,#categories li:hover a{color:#118;}

.settingsUpperMenu{ width: 796px; height:53px; display:block;}
.settingsUpperMenu div {width:105px; height:45px; display:inline-block; color:#fff; border: #fff solid 1px; margin-right:5px; text-align: center; padding: 3px; vertical-align: top;}
.settingsUpperMenu div:hover {display:inline-block; color:#bbf}

#settingsUpperContent {width: 794px; display:inline-block; vertical-align:top; padding-top: 0px; border: #fff solid 1px;}

#statisticTimeframeSelector {border: 1px solid #fff; text-align: center; width:70%}
#statisticTimeframeSelectorDecrease {width: 30px; height:30px;}
#statisticTimeframeSelectorPrefix {text-align: center; display:inline-block;}
#statisticTimeframeSelectorDays {width: 60px; height:25px; text-align: center;}
#statisticTimeframeSelectorPostfix {text-align: center; display:inline-block;}
#statisticTimeframeSelectorIncrease {width: 30px; height:30px;}
#statisticTimeframeSelectorRefresh {display:block; width:60%; position: relative; left:20%}
#statisticTimeframeSelectorAll {}

/*
#menu{
  width:1000px;
  height:35px;
  vertical-align:middle;
  background-color:#000022;
  border-width:1px;
}

#menu a{
  color:#FFFFFF;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  border: 2px ridge;
  width:116px;
  height:30px;
  display:inline-block;
  background-color:#111111;
}

#menu a:hover{
  color:#8FEF03;
  position:relative;
  height:60px;
  z-index:1000;
  overflow:visible;
}*/

#content{
  width:1000px;
  color:#ccf;
  vertical-align:top;
  text-align:left;
  border-width:0px;
  margin:0px;
}

.cloudCat, .cloudTag
{
  display: inline-block;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  padding: 2px;
  margin: 2px;
  transition-property: background;
  transition-duration: 0.5s
}

.cloudTag
{
  background: #444;
  border-color: #aac;
}

.cloudTag:hover
{
  background: #888;
}

.cloudCat
{
  background: #a22;
  border-color: #f66;
}

.cloudCat:hover
{
  background: #d44;
}

.cloudTag a, .cloudCat a
{
  text-decoration: none;
}

.relatedProductContainer
{
  display: inline-block;
  height: 23px;
  background: #99b;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
}

.relatedProductName
{
  color: #fff;
}

.relatedProductRemove
{
  margin-left: 10px;
  color: #fff;
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #faa;
  border: solid #f99 2px;
}

.relatedProductRemove:hover
{
  background: #f33;
  border: solid #f33 2px;
}

/* feed tile */
.feedContainer
{
  position: relative;
  display: inline-block;
}

.feedTile
{
  vertical-align: top;
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  border: solid 1px #ddd;
}

.feedTileHeader
{
  background: #ddd;
  padding: 2px;
  opacity: 0.8;
}

.feedTileHeader a
{
  color: #111;
  font-weight: bolder;
  font-size: 30px;
}

.feedTileEntry
{
  opacity: 0.8;
  padding: 2px;
  position: absolute;
  width: 196px;
  bottom: 0px;
  background-color: #6699ff;
}

.feedTileEntry a
{
  color: #fff;
}

.fileTiles
{
  border: 3px solid #001;
  border-radius: 20px 20px;
  background: #112;
  padding: 10px;
}

.fileTiles .fileView
{
  width: 46%;
  height:100%;
  display: inline-block;
  border: 2px solid #ccf;
  border-radius: 10px 10px;
  background: #336;
  padding: 5px;
  margin:5px;
  overflow:hidden;
  text-align: center;
  transition-property: background;
  transition-duration: 0.5s
}

.fileTiles .fileView span
{
  display: block;
  width: 100%;
  font-size: 125%;
  font-weight: bold;
}

.fileTiles .fileView span a
{
  display: block;
  width: 100%;
  text-decoration: none;
}

.fileTiles .fileView p
{
  display: none;
}

.fileTiles .fileView:hover
{
  background: #66b;
}

.fileList
{
  border: 3px solid #001;
  border-radius: 20px 20px;
  background: #112;
  padding: 10px;
}

.fileList .fileView
{
  border: 2px solid #ccf;
  border-radius: 10px 10px;
  background: #336;
  padding: 5px;
  margin:10px;
  transition-property: background;
  transition-duration: 0.5s
}

.fileList .fileView span
{
  display: block;
  width: 100%;
  font-size: 150%;
  font-weight: bold;
}

.fileList .fileView span a
{
  display: block;
  width: 100%;
  text-decoration: none;
}

.fileList .fileView p
{
  text-indent: 15px;
}

.fileList .fileView:hover
{
  background: #66b;
}

.fileMirrorsList
{
  border: 3px solid #001;
  border-radius: 20px 20px;
  background: #112;
  padding: 10px;
}

.fileMirrorsList .fileMirror
{
  display: inline-block;
  width: 145px;
  height:40px;
  border: 2px solid #ccf;
  border-radius: 10px 10px;
  background: #336;
  padding: 5px;
  margin:10px;
  transition-property: background;
  transition-duration: 0.5s
}

.fileMirrorsList .fileMirror:hover
{
  background: #66b;
}


/* SIDE BOXES */

#sideBoxesContainer
{
  z-index: 20;
  position: fixed;
  top:270px;
  left:0px;
}

#sideBoxesContainer .sideBox:hover
{
  z-index: 19;
  width:80px;
}

#sideBoxesContainer .sideBox .header
{
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid #ccf;
  border-radius: 10px 10px;
  background: #224;
  overflow: hidden;
  margin: 2px;
  padding:3px;
  z-index: 25;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#sideBoxesContainer .sideBox .contentContainer
{
  max-width: 400px;
  position: absolute;
  left: -500px;
  opacity: 0.0;
  display: inline-block;
  z-index: 21;
  transition: left 0.5s, opacity 1s;
  border: 2px solid #ccf;
  border-radius: 10px 10px;
  background: #224;
  padding: 2px;
}

#sideBoxesContainer .sideBox:hover .contentContainer
{
  left: 80px;
  opacity: 1.0;
  z-index: 22;
}

#sideBoxesContainer .sideBox .contentContainer .content
{
  border: 2px solid #ccf;
  border-radius: 8px 8px;
  background: #336;
  z-index: 23;
  padding: 10px;
}

#sideBoxesContainer .sideBox:hover .contentContainer .content
{
  z-index: 24;
}

/* UNIVERSAL LANGUAGE DESCRIPTIVES */
#descriptionFormContentLanguageBarsContainer
{
  padding-left: 10px;
}

#descriptionFormContentLanguageBarsContainer div
{
  width:90px; height:20px;
  background-color: #555;
  display:inline-block;
  color:#fff; border: #fff solid 1px;
  margin-right:5px; text-align: center; padding: 3px; vertical-align: top;
}
#descriptionFormContentLanguageBarsContainer div:hover
{
  display:inline-block; color:#bbf
}

#descriptionFormContentLanguageBarsContainer .descriptionLanguageSelectedElement
{
  font-weight: bolder;
  background-color: #775;
}

.descriptionFormContentDisplaySelection
{
  padding-left: 10px;
}

.descriptionFormContentDisplaySelection div
{
  width:90px; height:20px;
  background-color: #555;
  display:inline-block;
  color:#fff; border: #fff solid 1px;
  margin-right:5px; text-align: center; padding: 3px; vertical-align: top;
}

#descriptionFormStrictContent
{
  border: 1px solid;
  width: 760px;
  padding: 10px;
}

#descriptionFormStrictContent .descriptionTitleT { margin-right: 10px;}
#descriptionFormStrictContent .descriptionTitle { width: 500px;}

#descriptionFormStrictContent .descriptionContentHTML {width: 750px; min-height: 150px; resize:vertical;}
#descriptionFormStrictContent .descriptionContentPreview
{
  padding: 5px;
  width: 750px;
  min-height: 150px;
  resize:vertical;
  border: dashed 1px #ccc;
}

/* Image */
#imageForm #urlT { margin-right: 10px;}
#imageForm #url { width: 500px; }
#imageForm #typeT { margin-right: 10px;}
#imageForm #type { min-width: 100px; }

.imageContainer
{
  text-align: center;
}

.imageTypePicture
{
  display: inline-block;
  max-width: 732px;
  max-height:100%;
}

.imageTypeMovieVimeo
{
}

.imageTypeMovieYoutube
{
  max-width: 732px;
  max-height: 412px;
}

.imageContainer .imageTypeMovieYoutube
{
  width: 732px;
  height: 412px;
}

.galeryViewImageFrame .imageTypeMovieYoutube
{
  width: 732px;
  height: 412px;
}

.inlineImage
{
  display: inline-block;
}

.inlineIcon
{
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.inlineIcon span
{
  display: inline-block;
}

.inlineIcon img
{
  width: 40px;
}

/* GALERY */
.galeryBrowseImages
{
}

.galeryBrowseImages .inlineImage
{
  max-height: 150px;
  height: 150px;
  padding: 4px;
}

.galeryBrowseImages .galeryBrowseImagesAdminLayer
{
  text-align: center;
  display: inline-block;
  max-height: 150px;
  height: 150px;
  padding: 4px;
}

.galeryBrowseImages .galeryBrowseImagesAdminLayer .galeryBrowseImagesAdminLayerOptions
{
  display: block;
  background-color: #888;
  border-radius: 5px;
}

.galeryBrowseImages .galeryBrowseImagesAdminLayer .galeryBrowseImagesAdminLayerOptions span
{
  display: block;
  background-color: #332;
  border-radius: 5px;
  padding: 3px;
}

.galeryBrowseImages .hollowImageBox
{
  display: inline-block;
  height: 160px;
  width: 20px;
  border: 1px #888 dashed;
}

.galeryViewContainer
{
  text-align: center;
}

.galeryViewContainer .galeryViewShower
{
  display: inline-block;
  width: 880px;
  position: relative;
  height:100%;
  background: #222;
  border-radius: 30px;
}

.galeryViewContainer .galeryViewShower .galeryViewButton
{
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: inline-block;
  width: 50px;
  height:100%;
  vertical-align: central;
  z-index: 2;
  background: #aad;
  opacity: 1;
}

.galeryViewContainer .galeryViewShower .left
{
  left:0px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
.galeryViewContainer .galeryViewShower .right
{
  right:0px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.galeryViewContainer .galeryViewShower .galeryViewWindow
{
  position: relative;
  display: inline-block;
  width: 780px;
  max-height:100%;
  overflow: hidden;
  z-index: 1;
}

.galeryViewImages
{
  position: relative;
  width: auto;
  display:block;
  white-space: nowrap;
  transition-property: left;
  transition-duration: 1s;
}

.galeryViewImages .galeryViewImageFrame
{
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  width: 740px;
  max-height:100%;
  margin: 0px;
  padding: 0px;
}

/* ADVERTS */

.advert
{
  width: 750px;
  margin: 10px;
  border: 3px solid #001;
  border-radius: 20px 20px;
  background: #000;
}

/* MENU BALL */

.menuBallContainer {
  position: relative;
  width: 200px;
  height: 200px;
  padding: 45px;
  border-radius: 50%;
}

.menuBallContainer li, .menuBallContainer a
{
  box-shadow: 0 0 0px 0px #fff;
  transition-duration: 0.5s;
  transition-property: all;
}

.menuBallContainer li:hover
{
  box-shadow: 0 0 .5em .5em #446;
}

.menuBallContainer a:hover
{
  box-shadow: 0 0 .5em .5em #ccf;
}

.menuBallContainer li a
{
  display: block;position: absolute;top:0px;left:0px; width:inherit; height:inherit;overflow: hidden;
}

.menuBallContainer a
{
  border-radius: 50%;
  background-position:center;background-attachment:local;background-repeat:no-repeat;background-size: contain;
}

.menuBallContainer > a
{
  display: block;
  border-radius: 50%;
  position: relative;
  top:26px;
  left:44px;
  width: 114px; height: 114px;
  border: 1px solid #ccf;
  background-color: #224
}

.menuBallContainer > ul li {
  display: block;
  overflow: visible;
  position: absolute;
  top: 50%; left: 50%;
  width: 35px; height: 35px;
  margin: -17.5px;
  border: solid 1px #ccf;
  border-radius: 50%;
  background-color: #224;
}

.menuBallContainer > ul li ul {
  position: absolute;
}

.menuBallContainer > ul li ul li {
  position: absolute;
  display: block;
  overflow: visible;
  position: absolute;
  top: 70px; left: 70px;
  width: 20px; height: 20px;
  margin: -4em;
}
.menuBallContainer > ul img { display: block; width: 100%; }

.menuBallContainer > ul li:nth-child(1)
{
  transform: rotate(-45deg) translate(100px) rotate(45deg);
  -webkit-transform: rotate(-45deg) translate(100px) rotate(45deg);
  -moz-transform: rotate(-45deg) translate(100px) rotate(45deg);
  -ms-transform: rotate(-45deg) translate(100px) rotate(45deg);
}

.menuBallContainer > ul li:nth-child(2)
{
  transform: translate(100px);
  -webkit-transform: translate(100px);
  -moz-transform: translate(100px);
  -ms-transform: translate(100px);
}
.menuBallContainer > ul li:nth-child(3)
{
  transform: rotate(45deg) translate(100px) rotate(-45deg);
  -webkit-transform: rotate(45deg) translate(100px) rotate(-45deg);
  -moz-transform: rotate(45deg) translate(100px) rotate(-45deg);
  -ms-transform: rotate(45deg) translate(100px) rotate(-45deg);
}
.menuBallContainer > ul li:nth-child(4)
{
  transform: rotate(90deg) translate(100px) rotate(-90deg);
  -webkit-transform: rotate(90deg) translate(100px) rotate(-90deg);
  -moz-transform: rotate(90deg) translate(100px) rotate(-90deg);
  -ms-transform: rotate(90deg) translate(100px) rotate(-90deg);
}
.menuBallContainer > ul li:nth-child(5)
{
  transform: rotate(135deg) translate(100px) rotate(-135deg);
  -webkit-transform: rotate(135deg) translate(100px) rotate(-135deg);
  -moz-transform: rotate(135deg) translate(100px) rotate(-135deg);
  -ms-transform: rotate(135deg) translate(100px) rotate(-135deg);
}
.menuBallContainer > ul li:nth-child(6)
{
  transform: translate(-100px);
  -webkit-transform: translate(-100px);
  -moz-transform: translate(-100px);
  -ms-transform: translate(-100px);
}
.menuBallContainer > ul li:nth-child(7)
{
  transform: rotate(225deg) translate(100px) rotate(-225deg);
  -webkit-transform: rotate(225deg) translate(100px) rotate(-225deg);
  -moz-transform: rotate(225deg) translate(100px) rotate(-225deg);
  -ms-transform: rotate(225deg) translate(100px) rotate(-225deg);
}
.menuBallContainer > ul li:nth-child(8)
{
  transform: rotate(270deg) translate(100px) rotate(-270deg);
  -webkit-transform: rotate(270deg) translate(100px) rotate(-270deg);
  -moz-transform: rotate(270deg) translate(100px) rotate(-270deg);
  -ms-transform: rotate(270deg) translate(100px) rotate(-270deg);
}

.menuBallContainer > ul li ul li:nth-child(1)
{
  transform: rotate(-45deg) translate(30px) rotate(45deg);
  -webkit-transform: rotate(-45deg) translate(30px) rotate(45deg);
  -moz-transform: rotate(-45deg) translate(30px) rotate(45deg);
  -ms-transform: rotate(-45deg) translate(30px) rotate(45deg);
}

.menuBallContainer > ul li ul li:nth-child(2)
{
  transform: translate(30px);
  -webkit-transform: translate(30px);
  -moz-transform: translate(30px);
  -ms-transform: translate(30px);
}
.menuBallContainer > ul li ul li:nth-child(3)
{
  transform: rotate(45deg) translate(30px) rotate(-45deg);
  -webkit-transform: rotate(45deg) translate(30px) rotate(-45deg);
  -moz-transform: rotate(45deg) translate(30px) rotate(-45deg);
  -ms-transform: rotate(45deg) translate(30px) rotate(-45deg);
}
.menuBallContainer > ul li ul li:nth-child(4)
{
  transform: rotate(90deg) translate(30px) rotate(-90deg);
  -webkit-transform: rotate(90deg) translate(30px) rotate(-90deg);
  -moz-transform: rotate(90deg) translate(30px) rotate(-90deg);
  -ms-transform: rotate(90deg) translate(30px) rotate(-90deg);
}
.menuBallContainer > ul li ul li:nth-child(5)
{
  transform: rotate(135deg) translate(30px) rotate(-135deg);
  -webkit-transform: rotate(135deg) translate(30px) rotate(-135deg);
  -moz-transform: rotate(135deg) translate(30px) rotate(-135deg);
  -ms-transform: rotate(135deg) translate(30px) rotate(-135deg);
}
.menuBallContainer > ul li ul li:nth-child(6)
{
  transform: translate(-30px);
  -webkit-transform: translate(-30px);
  -moz-transform: translate(-30px);
  -ms-transform: translate(-30px);
}
.menuBallContainer > ul li ul li:nth-child(7)
{
  transform: rotate(225deg) translate(30px) rotate(-225deg);
  -webkit-transform: rotate(225deg) translate(30px) rotate(-225deg);
  -moz-transform: rotate(225deg) translate(30px) rotate(-225deg);
  -ms-transform: rotate(225deg) translate(30px) rotate(-225deg);
}
.menuBallContainer > ul li ul li:nth-child(8)
{
  transform: rotate(270deg) translate(30px) rotate(-270deg);
  -webkit-transform: rotate(270deg) translate(30px) rotate(-270deg);
  -moz-transform: rotate(270deg) translate(30px) rotate(-270deg);
  -ms-transform: rotate(270deg) translate(30px) rotate(-270deg);
}

.articleBox
{
  width:240px;
  height:150px;
  position:relative;
  display:inline-block;
  margin:5px;
}

.articleBox .title
{
  font-weight: bolder;
  font-size: 130%;
}

.articleBox .summary
{
  font-weight: lighter;
  font-size: 80%;
}

.articleBox > div
{
  position: absolute;
  height:130px;
  width: 220px;
  transition-property: all;
  transition-duration: 1s;
}

.articleBox > div > div
{
  padding: 10px;
  width: 100%;
  height:100%;
  background: #224;
  border: 1px double #ccf;
  border-radius: 20px;
  overflow:hidden;
}

.articleBox:hover > div:nth-child(1)
{
  transform:translateY(-60px) rotateX(90deg);
  -webkit-transform:translateY(-60px) rotateX(90deg);
  -moz-transform:translateY(-60px) rotateX(90deg);
  -ms-transform:translateY(-60px) rotateX(90deg);
  opacity: 0;
}

.articleBox:hover > div:nth-child(2)
{
  transform:rotateX(0deg);
  -webkit-transform:rotateX(0deg);
  -moz-transform:rotateX(0deg);
  -ms-transform:rotateX(0deg);
  opacity: 1;
}

.articleBox > div:nth-child(1)
{
  transform:rotateX(0deg);
  -webkit-transform:rotateX(0deg);
  -moz-transform:rotateX(0deg);
  -ms-transform:rotateX(0deg);
}

.articleBox > div:nth-child(2)
{
  transform:translateY(60px) rotateX(-90deg);
  -webkit-transform:translateY(60px) rotateX(-90deg);
  -moz-transform:translateY(60px) rotateX(-90deg);
  -ms-transform:translateY(60px) rotateX(-90deg);
  opacity: 0;
}

.articleContainer > span
{
  font-size: 200%;font-weight: bolder;color:#eef;
  position: absolute;top:-40px;left:80px;
}

/* PRODUCT */
#productStrict
{
    display: inline-block;
    position:relative;
    width: 750px;
}

#productStrict #productInfo
{
    position: relative;
}

#productStrict #productInfo #productImage
{
    width: 150px; height: 150px;
    border: 1px solid #fff;
}

#productStrict #productInfo #productImage img
{
  width: 150px; height: 150px;
}

#productStrict #productInfo #productTitle
{
    position: absolute;
    top:0px;
    left:200px;
}

#productStrict #productInfo #productTitle span
{
    font-weight: 900; font-family:Tahoma; font-size:xx-large;
    color: #fff;
}

#productStrict #productInfo #productManager
{
    position: absolute;
    bottom:80px;
    left:200px;
}

#productStrict #productInfo #productManager img, #productStrict #productInfo #productVisibility img
{
    width: 25px;
    position: relative;
}

#productStrict #productInfo #productVisibility
{
    position: absolute;
    bottom:50px;
    left:200px;
}

#productStrict #productInfo #socialButtons
{
    position: absolute;
    bottom:20px;
    left:200px;
}

#productStrict #productOptions
{
    position: absolute;
    left: 0px;
}

#productStrict #productMenu
{
    position:relative;
    left: 190px;
    
}

#productStrict #productMenu ul{width:100%;margin:0;padding:0;position:relative;}
#productStrict #productMenu ul li{float:left;position:relative;list-style-type:none;padding:0 1px 0 0;margin:1px; border: solid 1px #fff; background: #ddd;}
#productStrict #productMenu ul li:hover{float:left;position:relative;list-style-type:none;padding:0 1px 0 0;margin:1px; border: solid 1px #fff; background: #aaa;}
#productStrict #productMenu ul li a{display:block;text-decoration:none;text-align:center;padding:4px 13px 8px 11px;position:relative; color:#000; font-weight: 900; font-family:Tahoma; text-shadow: 1px 1px #ddd;}
#productStrict #productMenu ul li:hover a{text-shadow: 1px 1px #aaa;}

#productStrict #productContainer
{
    margin-top: 60px;
}