/*
    IM-Global.CSS

    Copyright @ 2013 Blue Dog Technology Incorporated

    This file contains custom CSS classes and overrides
*/    

/* SHAREPOINT Class OVERRIDES */
#s4-workspace{
	background-color:#CDCDCD !important;
}
#s4-bodyContainer {
	background-color: #CDCDCD;
	width: 1000px !important;
	margin:auto;
	height: auto;
}
.ms-core-listMenu-item {
	margin-right:0px !important;
}
.ms-core-listMenu-HorizontalBox {
	margin-right:0px !important;
}
ul.static 
{
padding-left:0px !important;
}

.menu-item-text {
	color:black;
	padding-left: 3px;
	padding-right: 3px;
	border-right:2px;
	border-style:solid;
	border-top:0px;
	border-left:0px;
	border-bottom:0px;
	font-family:"Segoe UI SemiBold";
	font-size:medium;
        font-weight:bold;
	z-index:3 !important;
}
.IM-topNav
{
/*	height: -5px; */
	top: 25px !important;
	width:auto;
	float: right;
	position:relative;
	/*background-color:white;*/
    padding-right: 10px;
    color:#000000;
	opacity: .6;
	 z-index:3; 
/*	color: white; */
	width:auto; 
/*	float:right; */
/*	left: 100px;
	right:0px;
	top:50px; */
}

/*
.IM-signIn
{
	height:15px;
	width:75px;
	position:relative;
	top:10px;
	float:right;
	right:0px;

} */
#ctl00_ExplicitLogin 
{
	float:right !important;
	height:20px;
	width:auto;
	font-size:12px;
	line-height:20px;
	right:30px !important;
	position:relative !important;
	bottom:-5px !important;
	
}
.contentBox {  /* .#contentBox { class or ID???*/
	width:1000px;
	background-color: #CDCDCD;
}
.ms-WPBody {
	  overflow:hidden !important;
}
.ms-webpartzone-cell {
	margin-bottom:0px;
}

/* MASTER PAGE custom classes
    IM-masterPage - defines the outermost custom DIV ; other outer DIVs are standard MS class (see above)
*/
.IM-masterPage
{
	background-color: #CDCDCD;
	width:1000px !important; 
	margin:auto; 
	height: auto;
	position:relative; 
}

/*Custom  Page Layout Classes 
    IM-Col1-4 is used for page layouts with 1 row by 4columns
    IM-Col1-2 is used for page layouts with 1 row by 2 columns and 2 rows by 2 columns
    IM-Col1-3 is used for page layouts with 1 row by 3 columns
    IM-Col4-1 is used for page layouts with 4 roww by 1 column or any other vertical layout
*/
.IM-Col1-4 { /* quarter width) */
    float: left;
	width: 225px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;

}
.IM-Col1-2 { /* half width (that width not wit) */
	float: left;
	width: 475px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.IM-Col1-3{ /* third width */
	float: left;
	width: 307px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.IM-Col4-1{ /* 4 full width columnst */
	float: left;
	width: 965px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.IMbodybox {
  background-color: #FAFAFA;
  -webkit-box-shadow: 0px 0px 4px 0px #202020 inset;
  box-shadow: 0px -2px 10px 0px #202020 inset;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  float: left;              /* need to float this div for inner divs to float - not sure why */
  width:990px;
  overflow:hidden !important; /* make sure scroll bars dont turn on */
}

/* Footer Sytles 
    IMFooter - defines the overall width of the footer div
    IMeCard - defines ecard button on the footer
    IMPhone - defined the Phone Number
    IMAddress - defines the address
    IMCopyright - defines the copyright    
*/
.IMFooter{
	width: 980px;
}
.IMeCard {
   float: left;
   width: 240px;
   font-size: medium; 
   text-align: center;
}
.IMPhone{
   float: left;
   width: 500px;
   font-size: x-large; 
   text-align: center;
}
.IMAddress {
    float: left;
    width: 240px;
    font-size: medium; 
    text-align: left;
}
.IMCopyright{
    font-size: small;
    text-align: center;
    padding-bottom:10px;
}

/* MetroTile Classes 
    IMtilegroup - defines the height for the group of tiles.  The webpart properties should also be configured (Chrome None, height 250)
    IMTIle - is the main class for a metrotile, it confdigures the size and shape
    IMtitlefont - defines the class for the title.  No <p> are used in the formatting of the text, so manipulate the CSS padding and avoid changing code
    IMtextfont - defines the class for the text.  No <p> are used in the formatting of the text, so manipulate the CSS padding and avoid changing code
    IMtile:hover - reduces the opacity by 5% ; its sublte but should work with most colors and gradients
    IMtile:active - reduces opacity by a lot, this is visible for an instant when a tile is pressed
    IMtilepos1,2,3 - define the position for each tile within the group (<div> and each tiles color gradient.  Use this class to define tile specific properties e.g. make a time spin */

.IMtilegroup {
    height: 250px;
    width: 750px;
}
.IMtile
{
    float: left;
    text-align: center;
    color: gray;
    width: 250px;
    height: 250px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    font-family: 'Segoe UI Light';
}
.IMtitlefont {
    color: #404040 !important;
    font-size:x-large;
    font-family:'Segoe UI';
    font-weight: bold;
}
.IMtextfont {
    color: #303030 !important;
    font-size: medium;
    font-weight:normal; 
    font-family: 'Segoe UI Light';
    margin:20px;
}
.IMtile:hover {
    opacity: 0.95;
}
.IMtile:active {
    opacity: 0.7;
}
.IMtilepos1 {
    left: 0px;
    top: 0px;
      background-image: radial-gradient(circle, rgb(247,247,247) 5%, rgb(197, 141, 159) 40%, rgb(197, 141, 159) 100%);   
}
.IMtilepos2 {
    left: 250px;
    top: -250px;
    background-image: radial-gradient(circle, rgb(255,255,255) 5%, rgb(206, 197, 138) 40%, rgb(206, 197, 138) 100%);
}
.IMtilepos3 {
    left: 500px;
    top: -500px;
    background-image: radial-gradient(circle, rgb(255,254,254) 5%, rgb(213, 99, 109) 40%, rgb(213, 99, 109) 100%);

}