/** * Layout Styles * @author Guillaume VanderEst */ @import 'screen.css'; html { background-color: #eee; } body { color: #333; font-family: Georgia, 'Times New Roman', serif; line-height: 1.5; } a { color: #005; } a:hover { color: #00a; } #site_accessibility { display: none; } #site_container { background-color: #fff; border: 1px solid #ccc; margin: 15px auto 15px auto; width: 950px; } #site_header { background: #fff url(/files/webcam/TourismKamloops.jpg) 0 -250px no-repeat; border: 1px solid #fff; line-height: 1; position: relative; } #site_titles { background: #005; display: inline-block; margin: 40px 0 50px 0; } .night #site_titles { background: #000; } #site_header #site_title { font-size: 36px; padding: 2px 30px 0 30px; text-transform: uppercase; } #site_header #site_title a, #site_subtitle a { color: #fff; display: block; text-decoration: none; } #site_header #site_subtitle { margin-left: 30px; color: #fff; letter-spacing: 1px; font-size: 13px; margin: 3px 0 5px 30px; } #site_body { margin: 0 30px 0 1px; padding-top: 20px; } #site_sidebar { float: right; line-height: 1; width: 300px; } #site_content { margin-right: 330px; } #site_sidebar #top_views { margin-bottom: 15px; } #site_footer { color: #888; font-family: Verdana, Tahoma, sans-serif; font-size: 12px; margin: 15px auto 15px auto; width: 950px; } #site_footer a { color: #777; } #site_footer div { margin-left: 30px; } #article-listing h1 { border-bottom: 1px solid #ccc; } #article-listing .article { margin-bottom: 15px; } #article-listing .article h2 { font-size: 16px; margin-bottom: 0; line-height: 1; } #article-listing .article .source { margin-left: 30px; font-size: 12px; display: inline; margin-right: 10px; } #article-listing .article .time { font-size: 12px; display: inline; margin-right: 10px; } #article-listing .article .views, #article-listing .article .comments { font-size: 12px; display: inline; margin-right: 10px; } #article-listing .article .source, #article-listing .article .time { letter-spacing: 0px; } #article-listing .article div a { color: #888; } #article-listing .article label { margin-right: 5px; } #article-listing a:visited { color: #444; } #article-listing .offsite h2 a { padding-left: 20px; background: transparent url(../img/new-window.png) center left no-repeat; } #article-listing .picture { clear: left; text-align: center; height: 40px; width: 50px; margin-left: 30px; float: left; } #article-listing .picture img { margin: 1px; border: 1px solid #fff; outline: 1px solid #ccc; max-height: 38px; max-width: 50px; } #article-listing .hasPicture h2 { margin-left: 90px; } #article-listing .hasPicture .source { margin-left: 10px; } #site_body #the-article h1 { border-bottom: 1px solid #ccc; margin-bottom: 15px; padding-bottom: 5px; margin-right: 0; } #site_body #the-article .body { font-size: 14px; margin: 20px 0px 15px 30px; } #the-article .source { margin: 0 0 0 30px; font-size: 14px; } #the-article .source label { margin-right: 5px; } #the-article .date-posted, #the-article .date-published { font-size: 14px; margin-left: 30px; } #the-article .date-updated { display: none; } #the-article .return-link { margin-left: 30px; margin-top: 15px; } #the-article .body h3, #the-article .body p { margin: 0 0 15px 0; } h1.disabled { color: #a00 !important; } #the-article .article-picture { margin: 0 0 15px 30px; float: right; } #the-article .article-picture img { max-width: 300px; max-height: 400px; border: 1px solid #ccc; } #the-article .comments { margin-top: 30px; margin-bottom: 15px; margin-left: 0; } #the-article .comments .comment * { font-style: italic; color: #888; font-weight: normal; } #the-article .comments .verified * { color: #333; font-style: normal; } #the-article .comments .verified .author { font-weight: bold !important; } #the-article .comments .comment p { margin-bottom: 0; margin-top: 0; margin-left: 15px; margin-right: 15px; } #the-article .comments .comment { font-size: 13px; border-top: 1px solid #ccc; padding-top: 15px; margin: 0 30px 0 30px; padding-bottom: 15px; } /*#the-article .comments .comment.even { background-color: #eee; }*/ #the-article .comments .comment.last { border-bottom: 1px solid #ccc; } #google_search { float: right; margin-top: 45px; margin-right: 0px; text-align: right; } #cse-search-results { margin-left: 30px; } #footer_ad { clear: both; text-align: center; padding-top: 15px; margin: 0 0 10px 0; } #context_ad { float: right; margin-right: 10px; border: 1px solid #eee; margin: 0 0 15px 15px; } #box_ad { margin-bottom: 15px; } #site_webcam { background: transparent url(../img/darken.png) top left; color: #aaa; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; height: 16px; line-height: 1; padding: 5px 30px 4px 20px; position: absolute; right: 0; top: 0; } #site_webcam a { background: transparent url(../img/webcam.png) center left no-repeat; padding-left: 25px; } #site_weather { background: transparent url(../img/darken.png) top left; color: #aaa; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; height: 16px; line-height: 1; padding: 4px 30px 4px 20px; position: absolute; right: 0; bottom: 0; } #site_weather * { display: inline; } #site_weather .temperature { display: inline-block; height: 16px; padding-left: 22px; } #site_weather .time { margin-left: 20px; } #account_tab { background: transparent url(../img/darken.png) top left; color: #aaa; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; height: 16px; line-height: 1; padding: 4px 20px 4px 30px; position: absolute; left: 0; bottom: 0; } #account_tab * { display: inline; } #account_tab ul { margin: 0; } #account_tab li { margin-right: 10px; } #account_tab .logout { margin-right: 0; } #account_tab a, #site_weather a, #site_webcam a { color: #aaa !important; text-decoration: none; } #account_tab a:hover, #site_weather a:hover, #site_webcam a:hover { color: #ccc !important; } #account_tab .username { display: inline-block; height: 16px; margin-right: 10px; font-weight: bold; } #site_weather .cloudy .temperature { background: transparent url(../img/weather/cloudy.png) center left no-repeat; } #site_weather .clear-day .temperature { background: transparent url(../img/weather/clear-day.png) center left no-repeat; } #site_weather .clear-night .temperature { background: transparent url(../img/weather/clear-night.png) center left no-repeat; } #site_weather .partial-cloudy-day .temperature { background: transparent url(../img/weather/partial-cloudy-day.png) center left no-repeat; } #site_weather .partial-cloudy-night .temperature { background: transparent url(../img/weather/partial-cloudy-night.png) center left no-repeat; } #site_weather .rain .temperature { background: transparent url(../img/weather/rain.png) center left no-repeat; } #site_weather .showers .temperature { background: transparent url(../img/weather/showers.png) center left no-repeat; } #site_weather .storm .temperature { background: transparent url(../img/weather/storm.png) center left no-repeat; } #site_weather .snow .temperature { background: transparent url(../img/weather/snow.png) center left no-repeat; } #site_weather .warning .temperature { background: transparent url(../img/weather/warning.png) center left no-repeat; } #site_weather a { color: #222; } .shareAndPrint { font-size: 12px; float: right; display: block; text-align: right; } .print-article { padding-right: 5px; margin-bottom: 5px; margin-top: 5px; } .print-article a { background: transparent url(../img/print.png) center left no-repeat; padding-left: 20px; } #top_views p, #top_comments p { margin: 0 5px 0 5px; } #top_views, #top_comments { border: 1px solid #005; } #top_comments { margin-bottom: 15px; } #top_views h2, #top_comments h2 { background-color: #005; color: #fff; font-size: 14px; margin: 0 0 10px 0; padding: 2px 10px 4px 10px; } #top_views ul, #top_comments ul { margin: 0 10px 10px 10px; } #top_views li, #top_comments li { list-style: square outside; margin-left: 20px; font-size: 14px; line-height: 1.5; } #top_views .views, #top_comments .views { display: none; } form { margin: 0 30px 15px 30px; } .Exo_Error { margin: 0 30px 15px 30px; border: 1px solid #800; padding-top: 15px; background-color: #fee; color: #800 } .Exo_Error li { list-style: square outside; margin-left: 30px; } form div { margin-bottom: 5px; } form .buttons { margin-left: 150px; } form div label { clear: left; display: block; float: left; width: 150px; } form .Exo_UI_Textbox input, form textarea, form .Exo_UI_Captcha input { border: 1px solid #ccc; padding: 2px 5px 2px 5px; font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 14px; } form .Exo_UI_Captcha input { margin-left: 150px; } form .required label { font-weight: bold; } form .error label { color: #800; } form .error textarea, form .error input { background-color: #fee; border: 1px solid #800; } form div .note, form div .error { font-size: 12px; display: block; margin-left: 150px; } form div .error { color: #800; } textarea { width: 350px; height: 150px; } #archive-listing h1, #archive-listing form { margin: 0 0 15px 0; } #archive-listing { margin: 0 30px 15px 30px; } #archive-listing .article * { display: inline; font-size: 12px; margin: 0; } #archive-listing .article h2 a { font-size: 14px !important; } #archive-listing .disabled, #archive-listing .disabled * { color: #a00 !important; } #archive-listing .offsite h2 a { padding-left: 20px; background: transparent url(../img/new-window.png) center left no-repeat; } #article-listing .paginator li { float: left; margin-right: 10px; } #article-listing .paginator a.active { font-weight: bold; text-decoration: none; color: #000; cursor: text; } #article-listing .articles { clear: left; padding-top: 20px; } #article-listing .disabled, #article-listing .disabled * { color: #a00 !important; } #weather { margin-left: 30px; margin-bottom: 15px; } #weather table { width: 100%; margin-left: 0; } #weather td { text-align: center; padding: 0; border: 0; } .note { font-size: 12px; } .admin-controls li { display: inline; margin-right: 15px; font-size: 13px; } #tourism-kamloops-webcam, #tourism-kamloops-webcam img { max-width: 550px; }