html, body {margin: 0; height: 100%; background-color: #f0f0f0; overflow: hidden; color: #707070; font-family: Verdana; font-size: 11px}
.clear {clear: both; height: 1px}
.content {}

#url_column {width: 118px; height: 100%; position: absolute; left: 50%; background-color: #f0f0f0; margin-left: -59px; background-image: url('../images/url_column.jpg')}
#url_logo {width: 118px; height: 118px; text-align: center; background-color: #ffffff; background-image: url('../images/url_logo.jpg'); color: #fff; 
			 position: absolute; left: 50%; top: 50%; margin-left: -59px; margin-top: -59px}
#url_agency {width: 215px; height: 54px; text-align: center; background-color: #f0f0f0; background-image: url('../images/url_agency.jpg'); 
			   position: absolute; left: 50%; top: 50%; margin-left: -299px; margin-top: -20px}
#url_message {height: 200px; text-align: left; background-color: #f0f0f0; position: absolute; left: 50%; top: 50%; margin-left: 84px; margin-top: -153px; width: 397px}
#url_message .url_error {height: 54px; margin: 0 0 40px 0}

/* FORM AND INPUTS */
input[type="text"] {padding: 5px 5px 5px 5px; font-family: Verdana; font-size: 11px; color: #707070; background: #FFF; border: 1px solid #a3a3a3; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF}
select {padding: 5px 5px 5px 5px; font-family: Verdana; font-size: 11px; color: #707070}
.submitButton {border: 1px solid #dfdfdf; background: #dfdfdf; border-right: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; color: #707070; font-size: 11px; 
			   float: right; height: 24px; letter-spacing: 1px}
.copyButton {border: 1px solid #dfdfdf; background: #dfdfdf; border-right: 1px solid #a7a7a7; border-bottom: 1px solid #a7a7a7; color: #707070; font-size: 11px; 
			 float: left; height: 19px; display: none; padding: 4px 3px 0 3px; margin: 0 0 0 18px}

.longUrl {width: 310px; margin: 0 0 15px 0}
.shortUrl {width: 150px; margin: 0 0 15px 0; float: right}
.userId {width: 180px; margin: 0 75px 0 0; float: right}

/* OTHER */
.preShortURL {margin: 0 5px 0 5px; float: left; padding: 5px 0 0 0}
.postShortURL {float: right; width: 75px}
.preUserId {margin: 0 5px 0 5px; float: left; padding: 5px 0 0 0}
.preSubmit {width: 7px; height: 7px; margin: 9px 4px 0 4px; float: right; padding: 0 0 0 0; background: url('../images/icon_arrow.gif') no-repeat}

/* ERRORS ANS SUCCESSES */
.error_url_short {background: url('../images/url_error_short.jpg') no-repeat}
.error_url_long {background: url('../images/url_error_long.jpg') no-repeat}
.error_url_long_2 {background: url('../images/url_error_long_2.jpg') no-repeat}
.error_user {background: url('../images/url_error_user.jpg') no-repeat}

.error_no_url_specified {background: url('../images/url_error_no_url_specified.jpg') no-repeat}
.error_no_such_url {background: url('../images/url_error_no_such_url.jpg') no-repeat}

input.error{background: #fff200}
div.error, div.error .scrollerOption{background: #fff200}

.urlShortenenerForm.success {}
.urlShortenenerForm.success .submitButton,
.urlShortenenerForm.success .preSubmit,
.urlShortenenerForm.success .scroller {display: none}
.urlShortenenerForm.success .longUrl {background: #F0F0F0; border: 1px solid #41c2f3; color: #41c2f3}
.urlShortenenerForm.success .shortUrl {background: #F0F0F0; border: 1px solid #41c2f3; color: #41c2f3}
.urlShortenenerForm.success .copyButton {display: block}

/* SCROLLER */
.scroller {width: 160px; height: 175px; overflow: auto; background: #ffffff; border: 1px solid #a3a3a3; border-right: 1px solid #FFF; border-bottom: 1px solid #FFF; 
		   padding: 5px 0 0 0; outline: none}
.horizontal-only {height: auto; max-height: 180px}
.scroller .scrollerOption {width: 100%; height: 20px; background: #FFF; margin: 0; color: #707070; outline: none}
.scroller .scrollerOption .content {padding: 3px 0 0 8px}
.scroller .scrollerOption:hover {background: #5acaf5; color: #f6f6f6; cursor: pointer}
.scroller .selected {background: #f6f6f6; color: #5acaf5}