responsive.naml

<override_macro name="jquery_library">
	<script src="/assets/jquery/jquery-1.9.1.min.js"></script>
	<script>$.browser = {}</script>
</override_macro>

<override_macro name="html_impl" parameters="head,body" requires="servlet">
	<n.page_start/>
	<n.update_default_permissions/>
	<n.nabble_html>
		<do>
			<n.embedding_redirection_js/>
			<n.put_in_head.head/>
			<n.body/>
			<n.load_call_later_script/>
		</do>
		<output>
			<![CDATA[<!DOCTYPE html>]]>
			<html>
				<head>
					<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
					<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
					<n.nabble_stylesheets/>
					<n.nabble_javascript_libraries/>
					<n.html_head_content/>
					<n.nabble_shared_scripts/>
				</head>
				<body>
					<div id="notice" class="notice rounded-bottom"></div>
					<div class="nabble macro_[n.page_template/]" id="nabble">
						<n.apply_filters.html_body_content/>
					</div>
					<n.bottom_scripts/>
					<n.as_html_comments.site_information/>
				</body>
			</html>
		</output>
	</n.nabble_html>
</override_macro>

<override_macro name="classic_stylesheet_big_avatar">
	<n.overridden/>
	<style type="text/css">
		@media (max-width: 600px) {
			#topic-search-box{float:none}
			img.avatar{width:30%;height:30%}
			td.classic-author{width:55px;font-size:11px;overflow:hidden}
			div.avatar-inner{margin:5px}
			div.classic-author-name{width:auto}
			div.ad > div,div.ad > ins{float:none !important;margin-left:-70px !important}
			div.classic-header{overflow:visible}
			div.classic-bar{height:3.5em}
			div.classic-subject-line{margin:2em 0;left:0;overflow-x:hidden;overflow-y:visible}
			table.classic-body{margin-top:2em}
		}
	</style>
</override_macro>

<override_macro name="last_post_column" parameters="title,width,white_space">
	<n.table_column>
		<head>
			<td class="[n.column_default_border/] nowrap last-post-column" style="[n.width_style.width/]">
				<n.default. to="[t]Last Post[/t]"><n.title/></n.default.>
			</td>
		</head>
		<body>
			<n.current_node.>
				<td class="[n.column_default_border/] weak-color">
					<n.if.either condition1="[n.is_post/]" condition2="[n.has_topics/]">
						<then>
							<n.last_node.>
								<table class="avatar-table">
									<tr>
										<n.last_post_column_start/>
										<td class="column" style="width:100%;padding:0;border:none;[n.style. property='white-space'][n.white_space/][/n.style.]">
											<n.smart_post_link.url>
												<text.when_created.short_format/>
											</n.smart_post_link.url>
											<span class="weak-color column nowrap" style="padding-left:.2em">
												<t>by <t.author.owner.name truncate="20"/></t>
											</span>
										</td>
									</tr>
								</table>
							</n.last_node.>
						</then>
						<else>
							<span style="padding-left:.4em">
								<t>Empty</t>
							</span>
						</else>
					</n.if.either>
				</td>
			</n.current_node.>
		</body>
	</n.table_column>
</override_macro>

<override_macro name="standard_table_stylesheet">
	<style type="text/css">
	table.main {
		width:100%;
		border-width: 1px;
		border-style: solid;
		border-collapse:collapse;
	}
	table.main td {
		padding:.1em;
		height:2.2em;
	}
	tr.header-row td {
		font-weight:bold;
		padding: .1em .2em;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
	@media (max-width: 600px) {
		table.main td{padding-left:0 !important;font-size:95%}
		tr.header-row td{font-size:80%}
		td.column{white-space:normal !important}
		span.column.nowrap{white-space:normal}
		span.pages{margin: 2em 0}
		span.pages a{padding:.2em .6em}
		img.avatar{display:none}
		img.online{opacity:0}
	}
	</style>
</override_macro>

<override_macro name="topics_table_stylesheet">
	<style type="text/css">
		table.main {
			width:99.9%;
			border-width: 1px;
			margin:0 1px;
			border-style: solid;
			border-collapse:collapse;
		}
		table.main td {
			padding:.1em;
			height:2.2em;
		}
		tr.header-row td {
			font-weight:bold;
			padding: .1em .2em;
			border-bottom-width: 1px;
			border-bottom-style: solid;
		}
		@media (max-width: 600px) {
			table.main td{padding-left:0 !important;font-size:95%}
			tr.header-row td{font-size:80%}
			td.column{white-space:normal !important}
			span.column.nowrap{white-space:normal}
			span.pages{margin: 2em 0}
			span.pages a{padding:.2em .6em}
		}
	</style>
</override_macro>

<override_macro name="topic_common_head">
	<n.search_highlight_js/>
	<n.message_width_js/>
	<style>
		@media (max-width: 600px) {
			div.topics-controls-wrapper{margin:1.2em 0 7em !important}
			div.root-text img,div.message-text img{max-width:100%}
		}
	</style>
</override_macro>

<override_macro name="topic_controls" requires="forum_topic_namespace">
	<div class="topics-controls-wrapper" style="margin:1.2em 0 5em">
		<div id="topics-controls-left" class="float-left nowrap">
			<n.topic_controls_left/>
		</div>
		<div id="topics-controls-right" class="float-right nowrap" style="padding-top:.3em">
			<n.topic_controls_right/>
		</div>
	</div>
</override_macro>

<override_macro name="category_table_stylesheet">
	<n.overridden/>
	<style type="text/css">
		@media (max-width: 600px) {
			table.main td{padding-left:0 !important;font-size:95%}
			tr.header-row td{font-size:80%}
			tr.main-row img[width]{display:none}
			td.column{white-space:normal !important}
			span.column.nowrap{white-space:normal}
			span.pages{margin:2em 0}
			span.pages a{padding:.2em .6em}
		}
	</style>
</override_macro>

<override_macro name="nabble_stylesheets" unindent="true">
	<n.overridden/>
	<style type="text/css">
		@media (max-width: 600px) {
			#search-box,#topic-search-box{margin:1em 0}
			td.pin-column img{display:none}
		}
	</style>
</override_macro>

<override_macro name="gallery_table_stylesheet">
	<n.overridden/>
	<style type="text/css">
		table.gallery {clear:both}
		@media (max-width: 780px) {
			table.gallery td {
				float:left;
				width:45%!important;
				text-align:center;
				word-break:break-all;
			}
		}
		@media (max-width: 600px) {
			#columns div.column{width:100%!important}
			table.gallery td {
				float:none;
				display:block;
				width: 100%!important;
			}
		}
	</style>
</override_macro>

<override_macro name="mixed_table_stylesheet">
	<n.overridden/>
	<style type="text/css">
		@media (max-width: 600px) {
			.nowrap{white-space:normal}
		}
	</style>
</override_macro>