@import "fonts.css";

.CLEAR
{
    clear: both;
}

body{
	font-family:'Open sans',Verdana;
	background:#fff;
    margin: 0;
    padding: 0;
}

#master{
	width:528px;
	border:1px solid #bdbcac;
	margin:200px auto 0;
	min-height:200px;
	background:#E7E5E0 url('gfx/box_back.gif') repeat-x;
}

#logo{
	float:right;
	margin:22px 10px 0 0;
}

.clear{
	clear:both;
}

#errorTitle{
	margin:15px 0 15px 35px;
}

h1.title{
	margin:0px;
	padding:0px;
	display:inline;
	color:#0071B9;
	font-size:15px;
	font-weight:bold;
}

h2.title{
	margin:0px;
	padding:0px;
	display:inline;
	color:#302F20;
	font-size:15px;
	font-weight:bold;
}

#errorContent{
	font-size:11px;
	vertical-align:top;
}

.content{
	padding:10px;
	line-height: 18px;
}

p{
	margin:0px;
}

a img{
	border:0px;
}

a{
	text-decoration:underline;
	color:#000;
}

a:hover{
	text-decoration:none;
	color:#000;
}

/*newStyle*/

.error
{
    margin: auto;
    width: 90%;
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

.error-left
{
    width: 45%;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}

.error-right
{
    width: 45%;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
}

.error-right img
{
    max-width: 100%;
    max-height: 584px;
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.error-btn
{
    font-size: 14px;
    font-weight: bold;
    padding: 10px 30px;
    line-height: 15px;
    color: #ffffff;
    text-decoration: none;
    background: #4472d0;
    background: -moz-linear-gradient(left,  #4472d0 0%, #60abf8 50%, #5b9cb8 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4472d0), color-stop(50%,#60abf8), color-stop(100%,#5b9cb8));
    background: -webkit-linear-gradient(left,  #4472d0 0%,#60abf8 50%,#5b9cb8 100%);
    background: -o-linear-gradient(left,  #4472d0 0%,#60abf8 50%,#5b9cb8 100%);
    background: -ms-linear-gradient(left,  #4472d0 0%,#60abf8 50%,#5b9cb8 100%);
    background: linear-gradient(to right,  #4472d0 0%,#60abf8 50%,#5b9cb8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4472d0', endColorstr='#5b9cb8',GradientType=1 );
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    display: inline-block;
}

.error-btn:hover
{
    color: #ffffff;
}

.error-search-input-wrap
{
    position: relative;
}

.error-search-input
{
    width: 100%;
    border: 1px solid #d1d1d1;
    padding: 9px 15px;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.error-search-submit
{
    position: absolute;
    font-size: 14px;
    color: #4e5253;
    right: 5px;
    top: 0;
    bottom: 0;
    border: none;
    background: url(/template/default/error/gfx/magnifier.png) no-repeat center center;
    height: 30px;
    width: 30px;
    text-indent: -9999px;
    z-index: 2;
    margin: auto;
    cursor: pointer;
}

.error-main-site
{
    margin-right: -100%;
    float:left;
    position: relative;
    z-index: 1;
}

.error-search
{
    float:left;
    width: 100%;
    box-sizing: border-box;
    padding-left: 180px;
}

.error-images
{
    margin-bottom: 30px;
    max-width: 470px;
}

.error-images > img
{
    margin-right: 35px;
}

.error-title
{
    display: inline-block;
    margin-bottom: -8px;
    vertical-align: bottom;
}

.error-massages
{
    margin-bottom: 60px;
    max-width: 470px;
}

.error-action
{
    max-width: 470px;
}

.error-left-v-center
{
    position: absolute;
    top: -300px;
    bottom: 0;
    margin: auto;
    height: 0px;
}

@media all and (min-width: 320px) and (max-width: 768px){
    .error-left{
        position: relative;
        height: auto;
        width: 100%;
        text-align: center;
        padding-bottom: 50px;
    }
    
    .error
    {
        position: relative;
        margin:auto;
        top: 0;
        bottom: 0;
        padding: 100px 0;
    }
   
    .error-left-v-center
    {
        position: relative;
        height: auto;
        top:auto;
        display: inline-block;
        text-align: left;
    }
    
    .error-right{
        position: relative;
        width: 100%;
        padding-bottom: 79%
    }
}

@media all and (min-width: 320px) and (max-width: 480px){
    .error-images > img
    {
        margin-right: 0;
        margin-bottom: 20px;
        max-width: 100%;
    }
    
    .error-left-v-center
    {
        width: 100%;
    }
    
    .error-main-site
    {
        margin-right: 0;
        margin-bottom: 20px;
        float: none;
    }
    
    .error-search
    {
        padding-left: 0;
        float: none;
    }
    
    .error-btn
    {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}