@-ms-viewport 
{
    width: device-width;
}
@-o-viewport 
{
    width: device-width;
}
@-webkit-viewport 
{
    width: device-width;
}
@-moz-viewport 
{
    width: device-width;
}
@viewport 
{
    width: device-width;
}

/* Universal Styles */
html
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    font-family: 'Segoe UI';
    font-size: 8px;
	-ms-touch-action: manipulation;
}
#PageContainer 
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    -ms-scroll-chaining: none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
#IELogo 
{
    float: left;
}
#IETitle
{
    float: left;
    font-family: 'Segoe UI';
    font-weight: bold;
}
h2 
{
    font-family: 'Segoe UI';
    font-weight: bold;
}
#ContentContainer 
{
    clear: both;
}

.Feature 
{
    background-color: #c0c0c0;
    overflow: hidden;
    cursor: pointer;
}

@keyframes slideIn {
    
	0% {
        
		transform: scale(0.0);
		width: 0px;

    
	}

    
        50%
        {
                transform: scale(0.4);
        }
	100%
	{

		transform: scale(1);
        	width: 233px;
    
	}

}


@-webkit-keyframes slideIn 
{

	0% {
        
		-webkit-transform: scale(0.0);
		width: 0px;

    
	}

    
        50%
        {
                -webkit-transform: scale(0.4);
        }
	100%
	{

		-webkit-transform: scale(1);
        	width: 233px;
    
	}

}

#UpgradeGroup {
    display: none;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 1300ms;
    -webkit-animation-fill-mode: forwards;
    animation-name: slideIn;
    animation-duration: 1300ms;
    animation-fill-mode: forwards;
}

a > img {
    border-width: 0px;
}

.ResourceCategory
{
    display: block;
    font-size:12pt;
    color:#4a4a4e;
    list-style-type: none;
    margin-bottom: 10px;
    padding-top: 0px;
    margin-top: 0px;
    float: left;
}

.ResourceHeading
{
    font-family: 'Segoe UI Semibold';    
    text-align: left;
    width: 100%;
}

.ResourceItem
{
    font-size:10pt;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
    width: 100%;
}


/* For everything but snap view / mobile */
@media screen and (min-width: 565px) 
{
    #Debug::after {
            content: ' all but snap;'
    }
    
    .NMF{
		    
    }
	.DemoGroup 
	{
		padding-right: 20px;
	}
	.Demo 
	{
        width: 200px;
        height: 163px;
        margin: 0px 0px 10px 10px;
        float: left;
        border-radius: 2px;
        padding: 10px;
        display: inline-block;
        vertical-align: top;
        background-color: #f0f0f0;
    }
    .Demo:hover
	{
        transition: background-color 0s linear;
        -webkit-transition: background-color 0s linear;
        background-color: #dcdcdc;
        cursor: pointer;
    }
	.Demo > a
	{
        text-decoration: none;
    }
    .DemoIcon
	{
        margin: 0px;
        padding: 0px;
        border-width: 0px;
        width: 200px;
        height: 123px;
    }
    .DemoDescription
	{
        font-size:8pt;
        color:#4a4a4e;
        margin-top: 2px;
        background-image: url('Wrapping.png');
        background-repeat: repeat-x;
    }
    .DemoText
	{
        font-size:8pt;
        color:#4a4a4e;
        margin-top: 2px;
        background-image: url('Wrapping.png');
        background-repeat: repeat-x;
    }
    .DemoTitle
	{
        font-size:12pt;
        color:#4a4a4e;
        font-family: 'Segoe UI Semibold', 'Segoe UI';
    }
    .WindowsIcon 
	{
        width: 100%;
        height: 100%;
        background-image: url("windows8.png");
        background-repeat: no-repeat;
        background-position: center center;
    }
    #IETitle
	{
        font-size: 26px;
        margin-top: 5px;
        margin-left: 20px;
    }
    #IELogo 
	{
        background-image: url("Logo.png");
        width: 42px;
        height: 42px;
    }
    h2 
	{
        font-size: 18px;
        margin-top: 8px;
        margin-left: 10px;
        height: 18px;
        padding: 0px;
    }
    .Feature 
	{
        width: 450px;
        height: 376px;
        float: right;
        margin: 0px 0px 10px 10px;
        border-radius: 2px;
        background-image: url("Feature.jpg");
    }

    .ResourceCategory 
	{
        width: 80%;
    }
}

/* Thin view (snap) */
@media screen and (max-width: 564px)
{
    #Debug::after {
            content: ' snap;'
    }
    .Main 
    {
        margin-top: 20px;
        width: 290px;
        clear: both;
    }    
    .Feature 
    {
        width: 280px;
        height: 100px;
        margin-left: 10px;
        margin-bottom: 10px;
        background-image: url("FeatureSmall.jpg");
        
    }
    .DemoGroup 
    {
        margin-bottom: 0px;
    }
    .Demo 
    {
        width: 280px;
        height: 75px;    
        margin-left: 10px;
        margin-bottom: 10px;        
        background-color: rgb(192, 192, 192);
        clear: both;
    }
    .Demo:hover , .Demo:active
    {
        transition: background-color 0s linear;
        -webkit-transition: background-color 0s linear;
        background-color: #00adef;
        cursor: pointer;
    }

    /*
    .Demo:hover > a > img
    {
        margin-left: -5px;
        margin-top: -5px;
        margin-right: 10px;
        margin-bottom: 5px;
        box-shadow: #747273 5px 5px ;
    }
    */

    .Demo:hover .DemoTitle {
        color: #00adef;
    }
    #PageContainer 
    {
        overflow-y:scroll;
    }
    #PageHeader 
    {
        height: 30px;
        margin-top: 5px;
        margin-left: 5px;
        width: 280px;
        font-size: 18px;
    }
    #IELogo 
    {
        background-image: url("Logo30x30.png");
        width: 30px;
        height: 30px;
    }
    #IETitle 
    {
        margin-top: 3px;
        margin-left: 14px;
    }
    h2 
    {
        font-size: 14pt;
        margin-top: 20px;
        margin-left: 5px;
        padding: 5px;
    }
    .Demo > a
    {
        text-decoration: none;
    }
    .DemoIcon
    {
        margin: 0px 5px 0px 0px;
        height: 50px;
        padding: 0px;
        border-width: 0px;
        overflow: hidden;
        float: left;
    }
    .DemoDescription
    {
        font-size: 10pt;
        color:#4a4a4e;
        padding-top: 5px;
        margin-left: 0px;
        height: 45px;
        background-color: rgb(240, 240, 240);
    }
    .microsoft 
    {
        padding-bottom: 50px;
    }
    .WindowsIcon 
    {
        
    }
    .DemoTitle
    {
        width: 275px;
        padding-left: 5px;
        padding-bottom: 3px;
        font-size:10pt;
        float: left;
        color:#4a4a4e;
        font-family: 'Segoe UI Semibold', 'Segoe UI';
        background-color: rgb(240, 240, 240);
    }
    .ResourceCategory {
        width: 80%;
    }
    .WindowsIcon 
    {
        width: 81px;
        height: 50px;
        background-image: url("windows8Icon.png");
        background-repeat: no-repeat;
        background-position: center center;
    }
}

@media screen and (min-width: 565px) and (max-width: 757px) 
{
    #Debug::after {
            content: ' mid;'
    }
    .Main 
    {
        width: 472px;
        clear: both;
    }
    .TwoCol 
    {
        width: 472px;
        clear: both;
    }
    .OneCol 
    {
        width: 472px;
        clear: both;
    }
    .DemoGroup 
    {
        margin-bottom: 20px;
    }
    #PageContainer 
    {
        overflow-y:scroll;
    }
    #PageHeader 
    {
        height: 42px;
        margin-top: 10px;
        margin-left: 20px;
    }
    #ContentContainer 
    {
        margin-left: 20px;
        margin-top: 20px;
    }
}
@media screen and (min-width: 758px) and (max-width: 1023px) 
{
	#Debug::after {
			content: ' large;'
	}
	.Main 
	{
		width: 690px;
		clear: both;
	}
	.TwoCol 
	{
		width: 708px;
		clear: both;
	}
	.OneCol 
	{
		width: 708px;
		clear: both;
	}
	.DemoGroup 
	{
		margin-bottom: 20px;
	}
	#PageContainer 
	{
		overflow-y:scroll;
	}
	#PageHeader 
	{
		height: 42px;
		margin-top: 10px;
		margin-left: 20px;
	}
	#ContentContainer 
	{
		margin-left: 20px;
		margin-top: 20px;
	}

	.ResourceCategory {
		width: 40%;
	}
	}
	@media screen and (min-width: 1024px) 
	{
	#Debug::after {
			content: ' full;'
	}
	.TwoCol 
	{
		width: 472px;
	}
	.DemoGroup 
	{
		margin-right: 0px;
		float: left;
	}
	#PageContainer 
	{
		overflow-x: auto;
		-ms-scroll-translation: vertical-to-horizontal;
	}
	#PageHeader 
	{
		height: 42px;
		position: fixed;
		top: 10px;
		left: 20px;
	}
	#ContentContainer 
	{
		margin-left: 72px;
		margin-top: 52px;
	}
}

/* Full Screen, large monitor, 4 high */
@media screen and (min-width: 1024px) and (min-height: 873px) {
    .Main 
	{
        width: 690px;
    }    
    .OneCol 
	{
        width: 230px;
    }
    #ContentContainer 
	{
        width: 2210px;
    }
}
/* Full Screen, large monitor, 3 high */
@media screen and (min-width: 1024px) and (max-height: 872px) {
    .Main 
	{
        width: 920px;
    }
    .OneCol 
	{
        width: 230px;
    }
	
	.OneCol :nth-child(5)
	{
		display: none;
	}
	
    #ContentContainer 
	{
        width: 2200px;
    }
}

/* Full Screen, large monitor, 2 high */
@media screen and (min-width: 1024px) and (max-height: 672px) {
    .Main 
	{
        width: 1380px; /*920px  */
    }
    .OneCol 
	{
        width: 460px;
    }

	.OneCol :nth-child(4)
	{
		display: block;
	}
	
    #ContentContainer 
	{
        width: 3900px;
    }
    #LogoGroup 
	{
        width: 480px;
    }
    .ResourceCategory 
	{
        width: 40%;
    }
}

/*
 Logos
 */
.window { 
        position: relative; 
        width: 100px; 
        height: 75px; 
        background: #00adef; 
        float: left;
        -webkit-transform: perspective(100px) rotateY(-25deg); 
        -moz-transform: perspective(100px) rotateY(-25deg); 
        -o-transform: perspective(100px) rotateY(-25deg); 
        transform: perspective(100px) rotateY(-25deg); 
    } 
.window::after, .window::before { 
    content: ''; 
    background: #fff; 
    height: 100%; 
    width: 5px; 
    left: 50%; 
    margin-left:-2.5px; 
    top:0; 
    position: absolute; 
} 
.window::before { 
    left: 0; 
    top: 50%; 
    margin-top: -2.5px; 
    margin-left: 0; 
    height: 5px; 
    width: 100%; 
    position: absolute; 
}


.microsoft {
    clear: both;
    width: 150px;
    height: 34px;
    background-image: url("Microsoft.png");
    background-repeat: no-repeat;
    position: relative;
    float: left;
    margin-left: 38px;
    margin-top: 20px;
}