# ****************************************************************************
# Surgeweb - Login page customisation CSS
#
# This provides the ability to customise the look of the surgeweb login page
#  the actual HTML file is located: surgemail/surgeweb/tpl/login.htm
# For further examples see login_alt1.css and login_alt2.css 
# Do not edit any files in the surgeweb/tpl directories as these will get 
#  replaced on upgrades. 
# ****************************************************************************

# ****************************************************************************
# Actually layout the page
# ****************************************************************************

:focus, a:focus {
  outline-style: dotted;
  outline-width: thin;	
}

||if_set(newlook_login)||
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
||endif||

 .body_bg {
||if_not(newlook_login)||
 	background:url(||www_base||shared/img/gradient_huge.jpg) repeat-x;
||endif||
 }
# 2 step background load to avoid flicker	
 .body_bg2 {
||if_not(newlook_login)||
  	background:#A0BFE8 url(||www_base||shared/img/gradient_huge.jpg) repeat-x;
||endif||
 }

# Actually layout the page
 body {
	text-align:center;
 }
 #login_outer{
 	text-align:left;
 	width:450px;
	margin: 0 auto;
	margin-top:75px;
 } 
 #login_panel_pre{
	padding:8px;
||if_not(newlook_login)||
	background: #007;
	color:white;
||endif||
	text-align:center;
 }
 #login_panel{
||if_not(newlook_login)||
    background:#DBEBFF;
  	border-left:1px solid #5a82b8;  
  	border-right:1px solid #5a82b8;  
||endif||
 	padding:10px;
	text-align:center;
 } 
 #login_panel table{
	margin: 0 auto;
 }
 #login_panel_post{
||if_not(newlook_login)||
	background: #007; 
	color:white;
||endif||
	padding:5px;
	text-align:center;
 }
 
# Additional specials stuff
 #login_title_comment{
 	display:none;
 }
 #login_title{
 	font-size:1em;;
 }

# ****************************************************************************
# Setup other defaults - you probably do not need to change these
# ****************************************************************************

# Setup defaults 
 body, table {
	font-family:Arial;
	font-size:14px;
 }
 #login_title{
  	font-weight:bold;
  	font-size:22px;
 }
 #cmd_login{
  	width:120px; 
  }
 #error{
 	color:red;
 	margin-top:5px;
 	margin-bottom:15px;
 	font-weight:bold;
 	font-size:11px;
 }
# Thismeans that lower level errors get displayed in a smaller font
 #error .surgeweb{
 	font-size:14px;
 }

 
 .hidden{
 	display:none;
 }

 .login_link_small{
||if_not(newlook_login)||
	color:white;
||endif||
	font-size:0.8em;
	text-decoration:none;
 }
  .login_link_small:hover{
 	text-decoration:underline;
 }
  .boldred{
  	color:red;font-weight:bold;font-style:italic;
  }
   .red{
  	color:red;
  } 
  
  #rcol_login_outer{
  	text-align:center;
  	position:absolute;
  	right:0;top:0;
  	border:1px solid ||border_color||;
  	width:120px;height:480px;
  	background:||lpanel_color||;
  }
  #rcol_login_iframe{
  	background:white;
  	width:120px;height:480px;
  }

  #account_links{
  	text-align:right;
  }
  #account_links a{
	color:black;
	font-size:0.9em;
	text-decoration:none;  	
  }
  #account_links a:hover{
   	text-decoration:underline;
  }
  
||if_set(newlook_login)||
 .login_box_oldststyle #login_panel_pre{
	background: #007;
	color:white;
 }
 .login_box_shadow #login_panel_pre, .login_box_blurred #login_panel_pre{
  	color:#007;  
 }
 .login_box_oldststyle #login_panel{
    background:#DBEBFF;
  	border-left:1px solid #5a82b8;  
  	border-right:1px solid #5a82b8;   
 }
 .login_box_shadow #login_panel, .login_box_blurred #login_panel{ 
 }
 .login_box_oldststyle #login_panel_post{
	background: #007; 
	color:white;
 }
 .login_box_shadow #login_panel_post, .login_box_blurred #login_panel_post{
	color:black;
 }

 .login_box_oldststyle .login_link_small{
	color:white;
 }
 .login_box_shadow .login_link_small, .login_box_blurred .login_link_small{
	color:black;
 }

 .login_box_shadow #login_post_comment, .login_box_blurred #login_post_comment{
    color:black;
    text-decoration:none;
  }
  .login_box_shadow #login_post_comment a, .login_box_blurred #login_post_comment a{
    text-decoration:none;
    color:black;
  }
  .login_box_shadow #login_post_comment a:hover, .login_box_blurred #login_post_comment a:hover{
    text-decoration:underline;
  }
 .login_box_shadow #login_post_comment a, .login_box_blurred #login_post_comment a  {
	font-style: italic;
	color: black !important;
 }


 #appearance_info{
	position:absolute; 
 	bottom:60px; right:60px;
 }
 #appearance_info2{
	position:absolute; 
 	bottom:36px; right:60px;
 	color:white;
 	font-size:1.2em;
 	font-weight:bold;
	text-shadow: 1px 1px 5px #000;
	-moz-opacity: 0.6; opacity: 0.6;
	filter:alpha(opacity=60);
 }
 .rounded_white_button_large{
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 7px;
     padding-bottom: 7px;
     margin: 2px;
     background: white;
     border: 1px solid #aaa;
     border-radius: 7px;
   	 font-size:11px;
  }
 
  .login_box_oldststyle #appearance_bg{
 	position:absolute; 
 	width:100%; height:100%; top:0; left:0; 
 	background-size: cover; z-index:-10; 
  }

 
 .login_box_shadow #appearance_bg{
	position:absolute; 
	width:100%; height:100%; top:0; left:0; 
	background-size: cover; z-index:-10; 
 }
 
 .login_box_shadow #login_outer:before {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 60px;
    box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
    content: " ";
    z-index: -1;
  }  

  .login_box_shadow #login_outer {
    background-color: #edf5ff;
    box-shadow: 0 -4px 0 #007, 0 0 5px rgba(0,0,0,0.5);
    position:relative; 
    border-top: 3px solid #007;
  }

  .login_box_blurred #appearance_bg {
  }

  .login_box_blurred #login_outer{
#    width: 500px;
    height: 250px;
    background: inherit;
    position: absolute;
    overflow: hidden;  
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -300px;
    border-radius: 8px;
    z-index:1;
  }

  .login_box_blurred #login_outer:before{
#    width: 550px;
    height: 400px;
    content: ' ';
    position: absolute;
    left: -25px;
    top: -25px; 
    background: inherit; 
    box-shadow: none;
  }
  
  .dumb_browser #login_outer:before {    
    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.85);
  }
  .smart_browser #login_outer:before {
    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.6);
    filter: blur(16px);
  }

  .login_box_blurred #login_inner {
#  	width: 500px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

 .login_box_blurred #login_panel td{
   	padding-top:5px;
	padding-bottom:5px;
 }
 .tbtn{
 	width:42px;
 	height:42px;
 }
 

# loginwindow @screensizes
# tablets and desktop 
@media only screen and (min-width: 768px) {
	.login_box_blurred #login_inner {
		width: 500px;
	}
	.login_box_blurred #login_outer{
	    width: 500px;
	}
	.login_box_blurred #login_outer:before{
		width: 550px;
	}
 }
# smallscreen (phones) widescreen 
@media only screen and (max-width: 767px) {
	.login_box_blurred #login_inner {
		width:100%;
#		left:0;right:0;
	}
	.login_box_blurred #login_outer{
		width:100%;
		left:0;right:0;
		margin-left:0;
    	border-radius: 0;
	}
	.login_box_blurred #login_outer:before{
		width:120%;
#		left:0;right:0;
	}

}
# smallscreen (phones) portrait 
@media only screen and (max-width: 767px) and (orientation: portrait) {

}
 
 

||endif||


.pannable {
	overflow:scroll;
	-ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    -webkit-overflow-scrolling:touch;
}
.pannable::-webkit-scrollbar {
    display: none;
}



.drop_indicator{
	display:inline-block;
	padding:20px;
	border: 2px dashed red;
}
	
 	#choose_custom{
		position:absolute;background:white;
	}
	
	
# background customisation @screensizes
# tablets and desktop 
@media only screen and (min-width: 768px) {
	#choose_custom{
		bottom:5%;left:5%; right:5%; 
	}
}
# smallscreen (phones) widescreen 
@media only screen and (max-width: 767px) {
	#choose_custom{
		bottom:0%;left:0%; right:0%; 
	}
}
# smallscreen (phones) portrait 
@media only screen and (max-width: 767px) and (orientation: portrait) {
	#choose_custom{
		bottom:0%;left:0%; right:0%; 
	}
}


.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
