/*================
Mobile First START
================*/
/*~~~~~~~~~~~~~~~~
Custom tags START
~~~~~~~~~~~~~~~~*/
/*----------------
row tags START
----------------*/
.rowSiteBand, .rowHeader, .rowFooter_Lower, .rowFooter_Upper {
  width: 100%;
  background-image: url("../images/site/background-light.png");
  background-attachment: fixed;
  display: table;
  }

.rowContent {
  background-color: #FFFFFF;  /*#FBF6FE;*/
  width: 100%;
	display: table;
  }

.rowFooter_Upper {
  height: 16px;
}

/*----------------
row tags END
----------------*/

/*----------------
col tags START
----------------*/
div[class^="col"] {
	//border: 1px dotted black;
  }

.colSiteBand, .colHeader, .colFooter_Lower, .colFooter_Upper, .colContent {
  margin: 0px auto 0px auto;
  max-width: 1200px; /*has no effect*/
  min-width: 256px;
  }

.colSiteBand {
  display: table-cell;
  text-align: right;
  }

.colHeader {
  display: table-cell;
  padding: 0px 2px 0px 2px;
  box-sizing: border-box;
  border-bottom: 2px solid black;
  }

.colMargin_L1, .colMargin_L2, .colMargin_R2, .colMargin_R1 {
  display: table-cell;
  box-sizing: border-box;
  position: relative;
  }

.colMargin_L1, .colMargin_R1 {
  width: 5%;
  }

.colMargin_L2, .colMargin_R2 {
  width: 16px;
  min-width: 16px;
  }

.colContent {
  background-color: rgb(255,255,255);
  display: table-cell;
  text-align: justify;
	padding-top: 16px;
  }

.colFooter_Lower, .colFooter_Upper {
  display: table-cell;
  box-sizing: border-box;
  vertical-align: top;
  }

.colFooter_Lower {
  padding-bottom: 4px;
  border-top: 2px solid black;
	position: relative;
  }

.colFooter_Upper {
  background-color: #FFFFFF;
  }
/*----------------
col tags END
----------------*/

/*----------------
box tags START
----------------*/
.boxDebug {
  background-color: #F8F5CA;
  box-sizing: border-box;
  position: relative;
  width: 95%;
  padding: 12px 16px 12px 16px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
	border: 2px dashed red; 
  }

.boxFade_Dark {
  background-color: rgba(0,0,0,0.25);
  }

.boxContent {
  //background-color: rgb(224,208,208);
  }

.boxPage_Article {
  display: table-cell;
  position: relative;
	width: 100%;
}

.boxPage_FullWidth {
 position: relative;
}

.boxSiteBand {
  padding-top: 2px;
  /*float: right;*/
	display: inline-block;
  }

.boxSiteBand_Item {
  display: table-cell;
  white-space: nowrap;
  padding-left: 10px;
  }

.boxLogoSearch {
  box-sizing: border-box;
  display: table;
  width: 100%;
  }

.boxSearch {
  z-index: 2;
  float: right;
  padding-bottom: 6px;
  min-width: 100px;
  text-align: right;
  vertical-align: top;
  }

.boxLogo {
  z-index: 2;
  padding: 2px 0px 0px 0px;
  float: left;
  }

.boxSectionMenu {
  position: relative;
  left: 6px;
  top: 2px;
  white-space: nowrap;
  height: 38px;
  z-index: 2;
  }

.boxSectionMenu_Item {
  white-space: nowrap;
  display: inline-block;
  height: 5px;
  }

.boxOnTheRight {
  display: none;
  float: right;
  z-index: 1;
  max-height: 10px;
  position: relative;
  top: -76px;
  }

.boxMOTD {
  background-color: #F8F5CA;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding: 12px 16px 12px 16px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 8px;
  }

.boxTopLink {
  height: 26px;
  width: 100%;
  position: relative;
  top: -16px;
  right: 4px;
  text-align: right;
  }

.boxFooterExtra {
  position: absolute;
	display: block;
	top: 5px;
	left: 5px;
	max-width: 250px;
}

.boxFooterText {
  vertical-align: top;
  padding: 4px 2px 0px 10px;
  text-align: right;
  }
/*----------------
box tags END
----------------*/

/*----------------
img tags START
----------------*/
.imgLogo {
  width: 176px; 
  height: 32px; 
  }

/*
.imgTagline {
  width: 107px; 
  height: 13px; 
  }
*/

.imgSearchEnd {
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 2px;
  width: 4px; 
  height: 18px;
  }

.imgOnTheRight {
  width: 400px;
  height: 76px;
  }

.imgOmniSpacer {
  width: 16px;
  height: 16px;
  }

.imgHeaderCurl_Left, .imgHeaderCurl_Right, .imgHeaderCurl_Sides, .imgFooterCurl_Left, .imgFooterCurl_Right, .imgFooterCurl_Sides, .imgFooterCurl_Middle {
  width: 16px;
  height: 16px;
  position: absolute;
  }

.imgHeaderCurl_Left, .imgHeaderCurl_Right, .imgHeaderCurl_Sides {
  bottom: 0px;
  }

.imgFooterCurl_Left, .imgFooterCurl_Right, .imgFooterCurl_Sides {
  top: 0px;
  }

.imgHeaderCurl_Sides, .imgFooterCurl_Sides {
  width: 100%;
  }

.imgFooterCurl_Middle {
  width: 85%;
  }
/*----------------
img tags END
----------------*/

/*----------------
txt tags START
----------------*/
.txtSiteBand {
  font-weight: bold;
  font-size: 9pt;
  color: #FFFFFF;
  text-shadow: 1px 1px 3px #000000;
  }

.txtMOTD, .txtFooterText {
  font-weight: bold;
  font-size: 8pt;
  }

.txtMOTD {
  text-align: center;
  color: #FF0000;
  }

.txtFooterText {
  color: #999999;
  }

.txtDebug {
  font-family: courier;
  font-size: 8pt;
  color: black;
  }
/*----------------
txt tags END
----------------*/

/*----------------
lnk tags START
----------------*/
/*----------------
lnk tags END
----------------*/

/*----------------
btn tags START
----------------*/
.btnTech {
  background-image: url("../images/site/menuicon_tech.gif");
  }

.btnCode {
  background-image: url("../images/site/menuicon_code.gif");
  }

.btnArt {
  background-image: url("../images/site/menuicon_art.gif");
  }

.btnGames {
  background-image: url("../images/site/menuicon_games.gif");
  }

.btnBuild {
  background-image: url("../images/site/menuicon_build.gif");
  }

.btnTop {
  background-image: url("../images/site/menuicon_top2.gif");
  }

a.btnTech, a.btnCode, a.btnArt, a.btnGames, a.btnBuild {
  display: inline-block;
  background-size: 200%;
  width: 50px;
  height: 50px;
  text-decoration: none;
  }

a.btnTech:hover, a.btnCode:hover, a.btnArt:hover, a.btnGames:hover, a.btnBuild:hover {
  background-position: -50px 0;
  }

a.btnTop {
  display: inline-block;
  background-size: 200%;
  width: 42px;
  height: 42px;
  text-decoration: none;
  }

a.btnTop:hover {
  background-position: -42px 0;
  }
/*----------------
btn tags END
----------------*/

/*----------------
Search Box START
----------------*/
input.btnSearch {
  display: inline-block;
  background: url("../images/site/searchx10.gif");
  background-size: 200%;
  width: 56px;
  height: 18px;
  text-decoration: none;
  text-align: right;
  outline: none;
  border: none;
  vertical-align: bottom;
  margin-bottom: 2px;
  border-radius: 0px;
  cursor: pointer;
  }

input.btnSearch:hover {
  background-position: -56px 0;
  }

input.tbxSearch {
  width: 190px;
  }

.tbxSearch {
  color: white;
  font-family: courier;
  font-size: 8pt;
  height: 18px;
  outline: none;
  box-sizing: border-box;
  border-top: 2px solid white;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  border-left: none;
  background: #581878;
  background-image: url("../images/site/search_iconx10.gif");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: -2px 0px;
  padding: 1px 3px 0px 18px;
  -webkit-padding-before: 0px;
  margin-bottom: 2px;
  border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  }
/*----------------
Search Box END
----------------*/
/*~~~~~~~~~~~~~~~~
Custom tags END
~~~~~~~~~~~~~~~~*/
/*================
Mobile First END
================*/


/*================
Intermediate START
================*/
@media only screen and (min-width: 500px) {
  input.tbxSearch {
    width: 275px;
    }
  }
/*================
Intermediate END
================*/

/*================
Desktop 570 START
================*/
@media only screen and (min-width: 570px) {
  .rowFooter_Upper {
    height: 24px;
  }

  .colMargin_L2, .colMargin_R2 {
    min-width: 24px;
    width: 24px;
    }

  .colHeader {
    padding: 0px 2px 0px 2px;
    border-bottom: 3px solid black;
    }

	.colContent {
		padding-top: 24px;
		}

  .colFooter_Lower {
    padding-bottom: 6px;
    border-top: 3px solid black;
    }

  .boxMOTD {
		margin-bottom: 12px;
    }

  .boxSectionMenu {
    left: 9px;
    top: 5px;
    height: 59px;
    }

  .boxFooterText {
    padding: 6px 2px 0px 10px;
    }

  .boxSearch {
    padding-bottom: 6px;
    }

  .boxTopLink {
    top: -24px;
    height: 39px;
    right: 6px;
    }

  .imgLogo {
    width: 264px; 
    height: 48px; 
    }

/*
  .imgTagline {
    width: 214px; 
    height: 26px; 
    }
*/

  .imgHeaderCurl_Left, .imgHeaderCurl_Right, .imgFooterCurl_Left, .imgFooterCurl_Right {
    width: 24px;
    height: 24px;
    }

  .imgFooterCurl_Middle {
    height: 24px;
    }

  .imgHeaderCurl_Sides, .imgFooterCurl_Sides {
    height: 24px;
    }

  a.btnTech, a.btnCode, a.btnArt, a.btnGames, a.btnBuild {
    width: 75px;
    height: 75px;
    }

  a.btnTech:hover, a.btnCode:hover, a.btnArt:hover, a.btnGames:hover, a.btnBuild:hover {
    background-position: -75px 0;
    }

  a.btnTop {
    width: 63px;
    height: 63px;
    }

  a.btnTop:hover {
    background-position: -63px 0;
    }
  }
/*================
Desktop 570 END
================*/

/*================
Desktop 800 START
================*/
@media only screen and (min-width: 950px) {
  .boxOnTheRight {
    display: inline-block;
    }

  .boxSectionMenu {
    top: 15px;
    }
  }
/*================
Desktop 800 END
================*/

/*================
Desktop 1024 START
================*/
@media only screen and (min-width: 1024px) {
  input.tbxSearch {
    width: 350px;
    }
  }
/*================
Desktop 1024 END
================*/

/*================
iPad Fix START
================*/
@media only screen and (device-width: 768px) and (orientation: landscape) {
  .container {
    width: 1024px;
    }
  }

@media only screen and (device-width: 320px) and (orientation: landscape) {
  .container {
    width: 568px;
    }
  }
/*================
iPad Fix END
================*/